ok i'm not sure whats wrong with this. but eachtime itry to set it to fixed it gets all messed up.
this is the working code:
ul {
position:fixed;
left: 20%;
list-style: none;
}
ul a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
height:20px;
width: 125px;
background: #888877;
}
ul a:hover {
color: #ffffdd;
text-decoration: none;
background: #999988;
}
ul li {
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
float: left;
}Okay... 2 questions for you...
1) What are you attempting to do?
2) Why are you using "fixed" ?
If you want something "locked" into position, try using "position: absolute;".
Please be warned... position: absolute will make itself "positioned" in realtion to the last positioned item.
So if the item/container element that the ul is in is not positioned (either absolute or relative, then the chances are your UL will position itself in relation to the body of the page!
Please supply more information (and if possible, a link to a demo/example page) so people trying to help can give better advice and not resort to guessing ;)
1. I'm making a menu like rollover menu.
2. Im using fixd because each time i resize the browser everything moves in my web page. So if you resized the broswer everything would be ontop of each other and everything would be moved.
Well, you may want to rethink your design.
It's not hte menu at fault if "everything moves".
As I said, try looking at a list apart... they have several references to CSS based (JS enhanced for IE) menus.
Or the SuperFish with JQuery for a more accessibile option.
i mean everything moves if its not fixed. and i made everyhting else to fixed and it works fine. but when i try to make the Menu to fixed it doesnt work.
If you can, post the URL or use a "tinyurl"... I'll have a look and see what can be easily done to fix things.
Okay... is there a reason for that behaviour?
If you want fluid/flexible designs, there are other methods to achieve it than that.
Have you tried making 3 seperate content divs?
first one for the banner.
second one for the nav.
third one for the content.
they will automatically stack beneath each other.
Then you can apply a left margin to each to get the gap on the left.
(do not assign width to the 3 container divs! They wil lautomatically take up full widht, so the margin will just move in the left edge - if you try to apply a width, it may result in them pushing off and out of the right hand side in some browsers!).
Of course, I may be misunderstanding your design ideas... in which case I can only suggest that you alter the location of the navigation div - try puttin it inside the content div at the top, that way it will be positioned where you expect it to be (as it's inside the content div), and the text should automatically fall beneath it.
Hope that helps.
yea i have 3 div tags.
Okay... I hope this helps a little...
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Oracle Studios</title>
<style type="text/css">
html,body
{
margin: 0;
padding: 0;
font-size: 100%;
font-family: arial, sans-serif;
}
body
{
font-size: 62.5%;
}
.clear
{clear:both; font-size: 1px; line-height: 1px; margin-top: -1px; padding: 0;}
#pagewrapper
{}
#title
{
margin-left: 20%;
height:192px;
background-image: url(http://www.kishouvision.com/oraclestudios/banner.jpg);
background-repeat: no-repeat;
}
#nav
{
margin-left: 20%;
}
#nav ul
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#nav ul li
{
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
float: left;
}
#nav ul li a
{
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
height: 2em;
width: 110px;
background: #888877;
font-size: 1.3em;
}
#nav ul li a:active, #nav ul li a:hover, #nav ul li a:focus
{
color: #ffffdd;
text-decoration: none;
background: #999988;
}
#content
{
border: 1px solid black;
margin-left: 20%;
background: #fff;
font-size: 1.3em;
line-height: 1.3em;
}
#content p
{
margin: 0.6em 0;
padding: 0;
}
</style>
</head>
<body>
<div id="pagewrapper">
<div id="title">
</div>
<div id="nav">
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="news">News</a></li>
<li><a href="#" class="media">Media</a></li>
<li><a href="#" class="games">Games</a></li>
<li><a href="#" class="forums">Forums</a></li>
<li><a href="#" class="help">Help</a></li>
</ul>
<div class="clear"> </div>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla diam
sem, aliquet a, luctus quis, vestibulum et, nisl. Ut ultrices nulla eu
lacus. Pellentesque vitae leo. Pellentesque hendrerit, turpis in
consequat placerat, lectus nisi placerat erat, nec congue enim nulla ut
lorem. Mauris ac purus quis lacus aliquet pharetra. Cras rhoncus elit.
Sed hendrerit metus eget arcu. Sed id magna. Aenean interdum, velit non
eleifend tristique, enim risus dapibus purus, eget luctus risus nulla
ac erat. Praesent ornare adipiscing velit. Aliquam vitae tellus eu
lacus adipiscing faucibus. Mauris hendrerit. In nisl justo, bibendum
eget, eleifend sed, molestie non, ante. Aenean eleifend nisl a urna.
Fusce sollicitudin. Cras urna pede, consectetuer eget, pellentesque
vestibulum, luctus in, risus. Nam suscipit massa in mauris.
</p>
<p>
Curabitur nisi nisi, egestas eget, fermentum id, lacinia
sollicitudin, pede. Aliquam diam felis, ultricies vel, cursus vel,
dictum quis, urna. Praesent vitae felis non pede aliquam varius. Nullam
dignissim semper tortor. Nunc sollicitudin, leo sit amet cursus
interdum, nibh elit bibendum justo, vel suscipit quam sem eu nibh. Nunc
ligula. Quisque eu neque a pede volutpat tempor. Donec sit amet leo.
Fusce ac tortor ac leo consequat cursus. Praesent cursus consequat
dolor. Sed mattis eros sed dolor. Etiam convallis risus et dolor. Sed
neque nisi, mollis eu, mattis eget, feugiat a, erat.
</p>
<p>
Etiam commodo. Curabitur sed dolor sed velit suscipit sollicitudin.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam
tincidunt odio sed risus. Aliquam imperdiet lobortis augue.
Pellentesque viverra magna et tellus. Donec tincidunt pulvinar ligula.
Vivamus vel augue sit amet mauris suscipit convallis. Sed feugiat
turpis eget quam. Pellentesque quis sem sit amet metus faucibus
volutpat. Etiam elementum purus sed turpis eleifend mattis.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nunc cursus sapien eu elit. Vestibulum at orci.
Suspendisse odio. Integer id purus sit amet purus consectetuer egestas.
Suspendisse sed purus vitae magna varius egestas. Praesent mi nisl,
imperdiet ac, fringilla pharetra, posuere et, sapien. Nunc tincidunt mi
ut dui. Ut suscipit. Donec pharetra euismod metus. Ut et purus.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Sed suscipit. Praesent varius semper ante.
Vivamus at augue egestas lectus mattis imperdiet. Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Phasellus tristique arcu. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam gravida neque at eros. Nunc nec urna et quam
pharetra pulvinar. Praesent placerat turpis a lorem. Aliquam consequat
rhoncus massa. Sed at mi. Morbi vulputate. Donec augue. Cras ut urna.
Sed tincidunt, nisl et egestas tempor, augue pede facilisis turpis, nec
laoreet enim dolor et eros. Aenean pretium, felis eu dapibus tempus,
arcu felis aliquet ante, nec pulvinar ante metus nec elit. Integer eu
risus. Nulla sapien turpis, commodo eu, dapibus quis, faucibus at,
justo.
</p>
</div>
</div>
</body>
</html>Not quite what you had...
it does "fit" in the page,
it does "alter width" with the window,
it does "resize-text",
it does not "slide" over bits over each other.
The only real problem I can forsee is the Banner width.
By making hte banenr image 900px, you automatically overun widthwise inregards to those viewing with 800 res (okay, a probable minority... but still worth thinking about?).
I'm also not seeing why the 20% margin/gap on the left?
is it simply to have a right aligned site?
Well, if that helps (i.e. I'm not missing the point), let me know.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.