• Locked
2 replies [Last post]
Sun, 2012-05-06 22:33
mack
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT+2
Joined: 2012-05-06
Posts: 2
Points: 3

I need some help, Puzzled

My page has a variable width of 800-1200px and is centered on the screen. But on the top-right there need to be some fixed navigation icons.
I tried to do this and this is what i came up with. but it doesn't put it in the right place (which is on the right, within the centered 800-1200px area).
Is it even posible to do this with a variable width?

This is my html idea:

<html>
<head>
<link href="css/style.css" rel="StyleSheet" media="screen" type="text/css">
</head>
<body>
	<!-- StatusBar, bar which stays on top of the page-->
	<section id=statusbar>
		<!-- Status Icons -->
		<section id=statusicons>
			<ul>
				<li><a id=homeicon href=#>home</a></li> <!-- not mentioned in css yet -->
				<li><a id=linkicon href=#>status</a></li>
			</ul>
		</section>
	</section>
 
	<section id=content></section>
</html>

with the following css:

#statusbar {
    top: 0;
    position: fixed;
}
#statusbar #statusicons {
    min-width: 800px;
    max-width: 1200px;
    margin: 0 auto;
}
#statusbar #statusicons ul {
    float: right;
    margin-right: 15px;
}
#content {
    min-width: 800px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

for some reason the float:right; doesn't do what i hoped it would do.

Top
Tags:
Sun, 2012-05-06 23:49
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Mack Put a border or

Hi Mack
Put a border or background on the UL and you should see it is taking up more horizontal space then expected.
Try giving it a width and it should go where you want.

Top
Mon, 2012-05-07 11:53
#2
mack
Offline
newbie
Last seen: 11 years 4 weeks ago
Timezone: GMT+2
Joined: 2012-05-06
Posts: 2
Points: 3

Thank you, but it didn't do

Thank you,
after some shifting around i got it working.

New CSS:

#statusbar {
    min-width: 500px;
    max-width: 1000px;
    margin: 0 auto;
}
#statusbar #statusicons {
    float: right;
    margin-right: 15px;
    width: 42px;
}
#statusbar #statusicons ul {
    /* position */
    top: 0;
    position: fixed;
 
    /* layout */
    -moz-box-shadow: 0 0 0.5px 1px #707070;
    -webkit-box-shadow: 0 0 1px 1px #707070;
    box-shadow: 0 0 0.5px 1px #707070;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    list-style: none;
    background: #000000;
}
#statusbar #statusicons ul li {
}

when i look at it now, i wonder why i posted a topic on the forum. but thanks for the help!

Top
  • Locked