•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 426,489 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,341 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 524 | Replies: 9
 |
•
•
Join Date: Dec 2007
Posts: 52
Reputation: 
Rep Power: 1
Solved Threads: 1
Junior Poster in Training
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:
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;
}
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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) 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
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
•
•
Join Date: Dec 2007
Posts: 52
Reputation:
Rep Power: 1
Solved Threads: 1
Junior Poster in Training
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.
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.
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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.
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.
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
•
•
Join Date: Dec 2007
Posts: 52
Reputation:
Rep Power: 1
Solved Threads: 1
Junior Poster in Training
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.
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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.
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
•
•
Join Date: Dec 2007
Posts: 52
Reputation:
Rep Power: 1
Solved Threads: 1
Junior Poster in Training
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
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.
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.
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
•
•
Join Date: Dec 2007
Posts: 52
Reputation:
Rep Power: 1
Solved Threads: 1
Junior Poster in Training
yea i have 3 div tags.
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
Okay... I hope this helps a little...
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.
<!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.
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- PHP/MySQL Programmer Position (Web Development Job Offers)
- How can I get Mouse Position? (VB.NET)
- Image Position (Site Layout and Usability)
Other Threads in the HTML and CSS Forum
- Previous Thread: Problems in Ie7 after a window resize
- Next Thread: how to convert a string to integer
