my site appear ugly in wide screens

[isaac_cm]

Hello,

I need a fast advice: I have designed a CSS layout and top menu that appear after the logo and before the body in one line, it appear nicely in any resolution but in wide screen the top menu appear on two lines and of course the second line is overlapping the body section,

 

Please advice how to FORCE the top menu to appear on 1 line only

 

Thanks

[isaac_cm]

any advice ???

[dbrimlow]

Without a sample of your html and css there is no way anyone can help you.

 

 

[isaac_cm]

I am using a div to display a top menu in my site here is the CSS:

 

HTML:

<div id="sidecontent">
<ul id="side_nav">
<li><a href="index_sp.php">Home</a></li>
<li><a href="specialoffers.php">Special Offers</a></li>
<li><a href="gvouchers.php">Gift Vouchers</a></li>
<li><a href="Wholesale.php">Wholesale</a></li>
</ul>
<div class="clearmenu"> </div>
</div>

 

#sidecontent {
font-size: 0.75em;
margin: 0 1px;

}

#side_nav li {
float: left;
width: 9em; /*minimum width of horizontal menu*/
text-align:center;
}

#side_nav ul li {
float: none;
}

#side_nav ul, #side_nav ul li {
width: 12.5em;
}

#sidecontent #side_nav a {
font-size: 1.1em;
display: block;
background-color: #990000;
color: #FFFFFF;
border: 1px solid;
border-color: #990000 #000000 #000000 #990000;
padding: 2px 6px;
filter: alpha(opacity=60);
opacity: 0.60;
text-decoration: none;
}

 

plz advice how I can place side_nav on one line on widescreen laptop monitor ?

Thanks

 

[dbrimlow]

Ah, you want display:inline.

 

Try this:

 

#side_nav li {

float: left;

width: 9em; /*minimum width of horizontal menu*/

text-align:center;

        display:inline

}

[isaac_cm]

I have no access to a widescreen monitor now , do you know a site I can test the result with ? (free)

 

Thanks alot

[dbrimlow]

Actually, looking at the whole posting again, the solution I used is not what you are looking for.

 

In CSS, each select (class or ID) impacts the layout of one another; then how they are used within the actual html markup, along with html tags, doctype and proper (error free) use and syntax, determines if they will do what was intended.

 

Unless we have either a link to an existing test page, or the full html from doctype to end html tag, and the complete css, there is no way to really advise you.

 

If you wanted all of your #side_nav li to line up from left to right (instead of up and down) then the display inline element is used. But it is relative to font sizes, container widths, text length, clearing floats, etc.

 

There is just too much information missing to help you.

 

Just so you know ... wide-screen or not should make no difference to your layout if you have coded properly.