moving a div floating

[absolutejw]

Hi,

I am new to css but managed to build a home page..please visit the link below to preview:

http://www.absolute-studios.com/after/testing.html

On the left side I have a menu where I would like a black background behind and move the menu tabs some to the middle.

Please visit the link below to see the actual layout to see how it should look like:

http://www.absolute-studios.com/after/layout.jpg

Suggestions/tips are greatly appreciated.

Thanks,

[Raffles]

There is a serious error on your page. You are creating the ul with class "menu" for every list item! Sample:

<ul class="thumbs">
        <li>

          <a href="http://www.aebn.com" class="thumb"><img src="images/thumbs/01.jpg" alt="thumbnail"/></a>        </li>
    
    
     <ul class="thumbs">
        <li>
          <a href="http://www.aebn.com" class="thumb"><img src="images/thumbs/01.jpg" alt="thumbnail"/></a>        </li>
    
    <ul class="thumbs">
        <li>
          <a href="http://www.aebn.com" class="thumb"><img src="images/thumbs/01.jpg" alt="thumbnail"/></a>        </li>

etc.

I'm guessing you're generating that from a loop in PHP? Looks like you put the opening <ul> tag inside the loop instead of before it.

Try and explain what you mean by this: "On the left side I have a menu where I would like a black background behind and move the menu tabs some to the middle"

That is incomprehensible. Also, in Firefox the layout looks just like it does in the image, except that the right sidebar is not there.

[absolutejw]

Hi Raffles,

Thank you for your response, I am new to css and I've place that code for the menu from a reference that I got off from a template. The template had links to the left so I kind of went by that.

Could you please guide me what would be the best way to place this menu like seen on the layout?

http://www.absolute-studios.com/after/layout.jpg

Sorry for the confusion, basically I would like the menu that is on the left to look like the layout exactly.

Suggestions/sample code would be greatly appreciated.

[Raffles]

You need to understand that an unordered list (<ul>) can ONLY contain list elements (<li>). List elements can then contain practically anything. So, a classic example of an unordered list used for a navigation menu is like this:

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 1</a></li>
</ul>

Like I said, your layout currently looks pretty much exactly the same as it does in that image, so I am not sure what you think needs changing. The first and foremost thing to do is change the HTML to be correct, as in my above example.

[absolutejw]

I'm kind of gettin it but I'm confused how the button code will go, could you please give me one exampe how just one button would look like?

Thank you again Raffles,

[Raffles]

For that menu this is what you need to do:

Wrap it all in a div as you already have done (the one with class "floatLeft"). Then for the heading called "Directory", use a heading element. Then after it put your UL in there and add the number of list elements you need. So, like this:

<div class="floatLeft">
  <h3>Directory</h3>
  <ul>
    <li><a href="somewhere.html">Link</a></li>
    <li><a href="somewhere.html">Link</a></li>
    <li><a href="somewhere.html">Link</a></li>
    <li><a href="somewhere.html">Link</a></li>
    <li><a href="somewhere.html">Link</a></li>
    <li><a href="somewhere.html">Link</a></li>
  </ul>
</div>

Use text for the "Directory" heading, not an image. If you're desperate, then you can, but I'd recommens just using text. It'll help search engines index your site better and be more user-friendly.

Then to style these things, you will want to do this sort of thing:

.floatLeft h3 {
  text-align:center;
  color:white;
  text-transform:uppercase;
  background:url(images/thumbs/directory.jpg);
}
.floatLeft li {
  color:white;
  border-bottom:2px solid black;
}
.floatLeft li a {
  background:url(images/thumbs/01.jpg);
  display:block;
  padding:4px;
  height:21px;
}

I think that should make your navigation area layout look what there is in that image.

[absolutejw]

Excellent idea for the directory just to make it text, I need the background button for it though which you included in the code.

I've place the code in it, and the column/menu doesn't look right. Link:


http://www.absolute-studios.com/after/testing.html

[Raffles]

Oh right, I forgot you have to set margins/padding to 0 first and remove the list styling. Also, you will need to make yourself a new image for the directory background. Preferably make it very small (the same height, but only 2 or 3 px wide) and then it can be repeated.

* {margin:0; padding:0}
.floatLeft {
  float: left;
  width:170px;
  background-color: #000;
  border: solid 5px #000;
  border-left: solid 1px #fff;
}
.floatLeft h3 {
  text-align:center;
  color:white;
  font-size:0.9em;
  text-transform:uppercase;
  background:url(images/thumbs/directory.jpg);
}
.floatLeft ul {
  list-style:none;
}
.floatLeft li {
  color:white;
  border-bottom:2px solid black;
}
.floatLeft li a {
  background:url(images/thumbs/01.jpg) no-repeat;
  font-size:0.7em;
  color:white;
  display:block;
  padding:2px 20px;
  height:17px;
}

* {margin:0; padding:0} is to reset the margins and padding to 0 because browsers apply it differently by default to certain elements, such as lists.
That should be better, give it a go.

[absolutejw]

On firefox is looking better but it has is somehow things are missedplace. On internet explorer, it doesn't work, it moves the content box to the bottom.

http://www.absolute-studios.com/after/testing.html

[Raffles]

I changed the code since then, try again with what I edited above. I can't test with IE right now, sorry. The problem with IE is that it applies extra padding to floated things. You are trying to do everything to pixel perfection and so the middle area no longer fits in between the floated elements, so it gets pushed underneath. It's ok to make the two sidebars have a fixed width, but the middle area should not have a fixed width. Have a look at the three-column layout thread at the top of this forum.

[absolutejw]

Thank you for the help Raffle. I truely appreciate you taking the time to help me. I might go with the other way I had it since I need to fnish it by today. But what is the bad thing about it? I got it off from a template and seem to be working and it didnt't mention anything about php..asp.

I am new so I would like to know what are the bad things from the way I have it. I like the way you did it, is very clean and I'm guessing it has better functionality.

[Raffles]

That is the pitfall of a lot of amateur web developers. "But it works". That doesn't stop it from being wrong. The thing is, you have a list and with each list item, you're then putting another list in it, so that by the 10th list, you already have a list of lists to the 10th power. And each of these lists only has one item. Surely you can see that's just silly. The whole point of a list is that you have one list with several list items in it. Just look at your source code - there should only be ONE <ul class="thumbs"> there, not one for every list item.

Also, what's wrong with the last code I posted? It's pretty much the same as what you had originally. If it doesn't work in IE, just change the width of floatLeft to something smaller until it fits.

[absolutejw]

Now I completely understand and makes lot of sense why someone would call the list 2x...I honestly started working with css about 2 days ago, but you're code did work, I will go through it slowly to make it fit and work....I'm on a rush stage where I'm just kind of plug n play with time limit.

Quick last question Raffle, how would I add the shadows to the left and right of the layout like seen on the image (besides the white outlines)?

http://www.absolute-studios.com/after/layout.jpg

Thank you so much,

[Raffles]

Since the pink gradient background has been applied to the <html> element and the body is what contains everything else, I think what you have to do is make an image that is exactly the width of the body (since the body has a fixed width) and a few pixels high. At each end of the image you add the shadow for left and right. You repeat it vertically as a background image on the body and add left and right padding to the body that is equal to the width of the shadows. You might be able to get away with incorporating the 1px white outline into the shadow image, but a better approach is probably to wrap everything in a div and give that the white border.

[absolutejw]

would it be possible to get a sample code? I promise this will be the last request

[Raffles]

body {
  background:url(shadow.png) repeat-y;
  padding:0 10px; /* width of shadow assumed to be 10px */
}
#wrapper {
  border:1px solid white;
}

#wrapper is a div that contains everything, like the body is doing at the moment.