Last thing to be done with site

HTML & CSS
1

This is the stupid thing I’m getting whole time :frowning:

HTML PART


<div id="bar-left"> </div>
<div id="bar-right"> </div>
<div id="bar-mid">&nbsp;&nbsp;Booter </div>

CSS PART


#bar-left {
    background: url(bar-left.png) no-repeat;
    width: 12px;
    height: 58px;
    float:left;
}

#bar-mid {
    background: url(bar-mid.png) repeat-x;
    height: 58px;
    width:1000px;
    text-align:left;
    line-height:55px;
    font-weight:bold; 
    margin:0 auto;
}

#bar-right {
    background: url(bar-right.png) no-repeat;
    width:12px;
    height:58px;
    float:right;
}
2

Then don’t do it like that :slight_smile:

Usually you would never float empty elements that just carry decoration as things will always move around. I;m sure I already gave you this example but you should do it like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.bar, .barleft, .barright {
    height:58px;
    line-height:58px;
    margin:0 12px;
    background:url(bar-mid.png) repeat-x;
}
.barleft {
    background:url(bar-left.png) no-repeat 0 0;
    margin:0 0 0 -12px;
    padding:0 0 0 12px;
    position:relative;
}
.barright {
    background: url(bar-right.png) no-repeat 100% 0;
    margin:0 -12px 0 0;
    padding:0 12px 0 0;
    position:relative;
}
</style>
</head>
<body>
<div class="bar">
    <div class="barleft">
        <div class="barright"> Content goes here </div>
    </div>
</div>
</body>
</html>

Use nested elements and not floats and the ends won’t go anywhere.

3

If I add float:center;

It doesn’t go to center, any idea why?

4

Because you can only float things to the left or right…

5

Don’t float it. Give it a width and use margin:auto to center it.:slight_smile:

6

I used margin:auto.
Which made it center, but the text is on the center/right side, and text-align:left;
Doesn’t help, and which class should I give a width?
And wouldn’t width mess up with other browsers/other viewers?

And you already gave it margin?

#bar-mid, #bar-left, #bar-right {
height:58px;
line-height:58px;
margin:0 15px;
width:1000px;
background:url(bar-mid.png) repeat-x;
}
#bar-left {
background:url(bar-left.png) no-repeat 0 0;
margin:0 0 0 -12px;
padding:0 0 0 12px;
position:relative;
}
#bar-right {
background: url(bar-right.png) no-repeat 100% 0;
margin:0 -12px 0 0;
padding:0 12px 0 0;
position:relative;
text-align:left;
line-height:52px;
}

7

What is that you want centered exactly as I think we are talking at cross purposes here?

If you want the whole element centered it will need a width and margin:auto.

If you just want the text centered then use text-align:center on the main parent.


#bar-mid{text-align:center}

And you already gave it margin?

The element is width auto and therefore stretches all the way across the page by default. It cannot be centered because in essence it is already centered. I gave it a margin left and right of 12px which was to mak room for the transparent corners as previously explained.

Block elements will only be centred when they have a width and their side margins are explicitly set to auto.


#bar-mid, #bar-left, #bar-right {
    height:58px;
    line-height:58px;
    margin:0 15px;
    width:1000px;
    background:url(bar-mid.png) repeat-x;
}

You’ve just gone and given 1000px width to all three elements which will upset things because the inner elements have margins and padding applied.!

If you have another inner block element inside those nested divs that you want centred then you would give that new element a width and use margin:auto.

8

I want the bar centered, and when I use margin:auto;
It centers but doesn’t keep text at left side, not even when I use text-align:left;

9

Silly question, but could we see the ENTIRE markup for that menu? It seems like you’ve got a whole bunch of DIV and other pointless markup for what should just be a UL with a bunch of LI, with a class on the last one.

Of course it appears you are trying to make them all perfect width and use images to do border’s job too…

Pretty sure that if it was written properly, that triple-nest of DIV would be unnecessary. CSS is only as good as the markup it’s applied to, and I think you’ve REALLY over-thought your markup. There is likely NO reason for that entire section of wrapping div nonsense AND the menu inside it to be anything more than:


<ul id="mainMenu">
	<li class="first"><a href="#" class="current">Home</a></li>
	<li><a href="#">Booter</a></li>
	<li><a href="#">Updates</a></li>
	<li><a href="#">Settings</a></li>
	<li><a href="#">Shoutbox</a></li>
	<li><a href="#">Tools</a></li>
	<li><a href="#">Logout</a></li>
	<li><a href="#">Admin Panel</a></li>
	<li class="last"><a href="#">Booter</a></li>
</ul>

But I’d have to see the rest of it to be sure on that.

10

There is no problem @ the navigation, but the topbar.