Posts by gentlemedia

For this you'll have to delete the position: relative on .vnav__item in the vnav.css file, which I explained already in another post of mine.

By the way, There are styles applied to that nav which are coming from to 2 different stylesheets (vnav.css and navigation.css). Is this because you use one stylesheet to override styles in the other stylesheet, because you don't have access to that one?

Via a .htaccess file:
Redirect 301 /oldpage.html http://www.example.com/newpage.html

I've used 301 in this example. but this can also be 302. The difference is that a 301 redirect means that the page has moved to a new location, permanently. A 302 redirect means that the move is temporary.

You didn't change it to what I've posted. You have now this:

#main-nav .vnav--horizontal .vnav__subnav {
  left: -360px;
  top: 100%;
  width: 750px;
}

Which should be this:

#main-nav .vnav--horizontal .vnav__subnav {
  left: 50%;
  top: 100%;
  width: 750px;
  margin-left: -375px;
}

Now, what about the automatically shuffle gallery when someone press the picture category button?

This is what they call a dynamic layout
http://jquery-plugins.net/tag/dynamic-layout

There are a few that can sort and filter and Isotope is the most well known.
http://isotope.metafizzy.co/

It's called parallax scrolling effect. Google and you will find lots of tutorials/scripts, but be aware most of them suck on touch screen devices.

It's not possible to transition the display property. Use the combination of the visibility (hidden to visible) and opacity (0 to 1) properties instead.

Sigh...

Probably because there's nothing to tell at the moment about the hack.summit() and they don't want you to know about previous ones, but who know? Freelancer.com might have the answer for you.

That space is caused by the default top/bottom margin of the p tag, so you might want to add something like this:

#pic p { margin: 0 }

Ohkay... I see :) You mean an input field.

Using classes or the element/tag name itself (in some cases) to hook your external styles on instead of inline styles, is indeed the the way to go, because you're repeating now styles, which makes maintaining the site more work and the HTML looks messy (according to code artists :) ).

I would do your example like this:

HTML

/* label for accessibility */
<label for="username">Username:</label>
<input type="text" name="username" />

CSS:

input[type=text],
label { display: block }

input[type=text] {
    width:196px;
    margin-bottom: 10px;
    background-color: #414141;
    color: #FFF
}

What do you mean with 'textboxes'? For example a div tag, section or article?

If you give it a class center, then every element/tag inside will be centered and red (they inherit the styles if you don't override them).

Hi,

I'm thinking of purchasing the SEO Powersuite (all 4 apps) from link-assistant.com. Does anyone on Daniweb has experience with this suite? Good or bad? I downloaded and played with the limitated version myself and it seems to me a handy suite to have in my arsenal. A little downside is that there is monthly fee for search algo updates, but it's needed and that's just how it is I guess :)

Do you mean the 'sliding in' icons on hover? If so, then this can be done with css transitions, css anmations (animate.css) or if you need to support IE9- with the same effects you need jQuery .animate() method or something more robust (greensock or velocity.js) as fallback solution.
It looks nice and all this these hover animations, but it's an extra (unnecessary) click for users on a touch screen device.

If you want to keep the player playing while users navigating the site you'll need to resort to AJAX or even better to the HTML5 History API (with AJAX hashbanging as fallback).

Well, 'space & &nbsp' is not really how you should add spacing between elements or in a table cell if the first name and last name are in seperate table cells. Add through CSS a padding on the td instead.

There are heaps of free thumbnail image sliders (JS and/or CSS3). Why not pick one of those? Style them the way you want them to look and add your back-end code to it.

Do you have a link to the webpage or some code for people to look at?

Ok, then remove those margin-left's that you've added dynamically and use something like this

#main-nav .vnav--horizontal .vnav__subnav {
  left: 50%;
  top: 100%;
  width: 740px;
  margin-left: -370px;
}

If you can't edit some files then override the properties in a file which you can edit, but the properties that needed to change are in vnav.css and navigation.css.

I see now also that there gets a margin-left: -201px; added dynamically on vnav vnav__subnav vnav--level2. This is weird, because I didn't had this yesterday and I don't know why it's added, but it's pushing the submenu unnecessary to the left.
You might want to override that in your stylesheet with margin-left: auto !important;

I did the following with the browsers' developer tools and got the submenu centered.

Delete in your CSS position: relative on #main-nav .vnav__item and on .vnav__item.
The other thing to do is to change in the CSS on #main-nav .vnav--horizontal .vnav__subnav the property left: 370px to left: 0.

If you add width: 100% to #main-nav .vnav and delete the left & right padding of 15px on .navbar-collapse, then the submenu expands to the full width of the layout.

On a side note... why are you editing and changing stuff on a site that is live? Better to make a copy of the site and tweak stuff in there.

You're juggeling a bit with html tags in 'units', but the spacing is caused by the browser default styling (margin-bottom) of the paragraph tag. To get rid of it, set it to '0'.

Oh... and I thought you meant me, anyway... peace to all! :)

I was aware of that method too, but my first thought was why wrapping the 8 squares in two extra div's (a div set to display: table and a div set to display: table-row), while this is not necessary if we use position: absolute to center the img's.
https://css-tricks.com/almanac/properties/d/display/#display-table

Well... it turns out you don't need the two extra div's in order to set .square to display: table-cell It just works without (well at least in Chrome on the Mac). I didn't know that!

.square {
    width: 120px;
    height: 120px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

Demo: http://cssdeck.com/labs/full/kb4rwbl8

So... this method has the least amount of CSS, so I would go for this one :)

Apologies for making you feel that way, wasseem1345! I was not making fun at you, only at the way you putted your issue into words. I was just showing how your question was read to me and probably to some others as well.
If I knew that you were that serious type of guy, I wouldn't have replied at all.

Sorry, but I can't help you with that. I don't know anything about WinForms.

In case you need or want to support IE8 and below, you could use this CSS for the img instead.

.square img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto
}

Demo: http://cssdeck.com/labs/full/sosfzstu

Not sure what you're really after, but here's a blank HTML page :)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blank Page</title>
</head>
<body>
</body>
</html>

Indeed! Text-align: center will only center the chess piece inages horizontally. If you want them vertically in the middle as well, you could use this neat trick, but it doesn't work in IE8 and below. You don't need text-align: center with this either by the way. And the square (#a1, etc) needs to have position: relative. It's a better to create e a class square, because you're repeating properties unnecessary.

here's a demo: http://cssdeck.com/labs/full/i8rjw1vv

<div id="a1" class="square">
    <img src="figure/a1.png">
</div>

.square {
    position: relative;
    width: 120px;
    height: 100px;
    float: left;
}

.square img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

It's caused by a typo. In your HTML you have meal-showcase and in your css meals-showcase.

And on a side note; if you float an inline element, it turns automatically into a block element, so declaring it is not needed.

I really thought that the asterix (*) stood for selecting all HTML elements in the document, just like in CSS, so I didn't get that line either :)
Thanks for the thorough explanation!

My bad with the jQuery... I got you mixed up with another member of the forum I guess.

Interesting aproach with the uderscore var storing all elements from the document. The first thing that comes to mind is that this would be a performance hit and slower because of the wild card selector, but I'm a JS noob so I'm not going into debate with you :)
I just started with writing my own simple functions with jQuery, because jQuery is easier to grasp and to read for my designer brain.

Thanks for the clarification. That makes sense.

Cheers!

The white background color is in the image, right? Open up your photo editor and remove the white background.

As far as I can see some inputs that are still white has no class="field" and on others you have type="field" which should be then class="field". I also see that you have a type="grey" attribute on some labels, but that's also a mistake I asume. The label element has only two type attributes type="for" and type="form"

No, it was not like that. I wouldn't dare to underestimate your JS/JQuery skills, because I noticed already your deep understanding of this. I looked at your snippet several times trying to understand what was going on there and wanted to ask you about it, but got distracted and I didn't want to hijack the OP's thread.

But since the OP is not here for a while now. I will ask :)
I don't get the 'previousSibling' bit?
this["theme-my-login1"].previousSibling
If I read the first part of your snippet, then I would say that would be enough, but that's obviously because I don't get it.

@Dave - I'm not the OP :) I guess we replied at the same time to his question.

The lowscr attribute has been deprecated for a while now and is obsolete in HTML5.

There is now also the new srcset attribute to handle different resolutions of the image.

Or load your pages dynamically via AJAX (plus HTML5 History API) in a container (div) and place the counter oustide this container.

Look at this demo. Audio player keeps on playing and URL changes while navigating between content. This library really rocks!

http://docs.spb-piksel.ru/demos/history/

It's obvious newbi11 is after all not interested in an answer or help, so better stop wasting your time and efforts on this thread.

It would be helpfull to mention in which browser you see this, because in Chrome on the Mac it looks okay.

Stefan, everybody here wants to help you with issues you have while developing or designing your site and will be happy if they can guide you in the right direction, but I don't think you will find someone here that will just layout/develop your website for nothing or take the deal you offer.

I'm sure lots of us here started by reading, learning, experimenting and asking at fora at points where we get stuck to get better, but this takes time. You know the saying: "learn to walk, before you run".

Since you don't have money to invest either you could try fiverr

I like Pearch CMS, because I'm a web designer with little PHP skills and I want something easy for myself and my clients (mainly small businesses that don't need a huge CMS). I can create what I normally would create with HTML, CSS & jQuery (pligins) and attach Pearch to it in no time.

@TroyIII & @diafol: I saw your solution already which is indeed too edgy, my eyes hurt ;)
Just wanted to react on matrixdevuk solution. Nothing more, nothing less.

Since you have all width and height values, it's easy to do some little math and position #box with some top and left margins in the middle of #main. No need for display: table, display: table-cell and vertical-align: middle

#main {
    margin: 0 auto;
    background-color: lightgreen;
    overflow: auto;
    height:400px;
    width:400px;
}

#box {
    height: 200px;
    width: 200px;
    background-color:#FFA500;
    margin: 100px auto 0;
}

See demo : http://cssdeck.com/labs/4w13hzhx

But setting all this fixed heights makes everything pretty inflexible, therefore the content in #box needs to fit perfectly and can't extend unless you change the height and the margins in your CSS of #main and #box. Too much maintanance.

Adding a span tag with an ID for the js is not cleaner then without it. The selector engine is a tiny bit quicker with finding 'Log In' like this for sure, but it's certainly not cleaner. Long story short, it's not necessary and it was not an option for the OP to alter the code of the plugin. Otherwise he could and should just change the text directly in the HTML. But say what you want, two others didn't prefer it either.

I was also not paying attention. It's the img that you have to select, so like this:

.picture-center img {
    max-width: 100%;
    height: auto;
}

If the div .picture-center is redundant, then leave it out and use article .panel as selector maybe.

You should have not a = but a : in your .picture-center CSS block and the height should be auto. Perhaps width should be max-width as well, but I don't know your situation.

.picture-center
    {
    width:100%;
    height:auto;
    }

Like JorgeM pointed out you will need wrappers around the City and State elements (label + input) together in order to line them up next to each other. But not a table > tr > td... just a div > div tag.

Demo: http://cssdeck.com/labs/full/4cznbjai

HTML:

<form>

  <div>

    <div>
      <label for="city">City:</label>
      <input type="text" name="city" id="city" />
    </div>

    <div>
      <label for="state">State:</label>
      <input type="text" name="state" id="state" />
    </div>

  </div>

</form>

CSS:

div { float: left }
div > div:first-child { margin-right: 20px }
label, input { display: block }

Good stuff! I see there is now a horziontal scrollbar. To get rid of that is to remove the margin: 0 2% 0 2% on #header. It's pointles to have it there anyway and it makes the #header div 104% width.... hence the scrollbar.

Ok... here's what you could do in your CSS:

1. html, body - remove the overflow property on these tags
2. #content remove the height property
3. #content change overflow: scroll to overflow: hidden

Because the work items are floated in the content div you need to clear the floats with overflow hidden in order to get the 100px padding-bottom to work.

The default value of the height property is already 'auto', so it's not necessary to declare it and I'd recommend to not set any heights to your elements. Well... 99% of the cases. Just let the content of those elements dictate the height.