Click to See Complete Forum and Search --> : CSS Questions
wienerdog
04-27-2006, 06:37 PM
I am trying to get a couple of navigation systems redesigned on my company's site. I need to create a CSS side-bar navigation menu and a horizontal one at the top. I'm going to use the List-Based Menu techniques to pull this off, and am using a couple examples from a couple of books. I have a few questions for our resident CSS pros :) :
What does this command do in CSS? html {margin: 0; padding: 0;}
My desired effect is to have something similar to the current Flash navigation at the top (shown below from a screen shot).
The Flash navigation is obviously not search engine friendly, so I'm trying to create it in CSS.
The site was designed as a three-column layout using some CSS by a firm before I was here, so I'm trying to muddle through it and figure out what's what. How do I get the logo to be placed along next to a top navigation in CSS? Would I want to use absolute positioning?
fyred1
04-27-2006, 06:56 PM
This article should help with the navigation issue.
http://alistapart.com/articles/slidingdoors
Absolute positioning is great as long as the layout isn't fluid. Floats and relative positioning seem to work better for a fluid site. There are browser issues involved.
JPnyc
04-27-2006, 07:00 PM
Well in IE it does nothing, but in Opera it'll remove any margin or padding from outside the body element. If you want the page to butt right up against the browser window you would put the same commands on the body tag.
wienerdog
04-27-2006, 07:07 PM
What's the best way to get that logo to always appear to the left of my new navigation in IE 6 and other browsers?
fyred1
04-27-2006, 07:20 PM
I used absolute positioning to get mine to stay put. My site isn't fluid, but it works in all browsers including ie5 Mac.
HTML
<body>
<div id="main">
<div id="container">
<div id="textBox">
<?php include("textContent/homepage.txt"); ?>
</div>
</div>
<!-- Here's the logo image -->
<div id="header">
<a href="/"><img class="logo" src="images/idesyns.jpg" width="211" height="90" alt="Idesyns web and graphic design logo." /></a>
<div id="nav">
<?php include("nav/navImageMap.html"); ?>
</div>
</div>
<div>
<?php include("footer/footer.php"); ?>
<?php include("footer/footer2.php"); ?>
</div>
</div>
</body>
CSS
#header img.logo {
border: none;
left: 19px;
margin: 0px;
padding: 0px;
position: absolute;
top: 19px;
}
ecsyle
04-27-2006, 07:31 PM
hey man, that is doing work for free. Better charge for that shit.
fyred1
04-27-2006, 07:34 PM
hey man, that is doing work for free. Better charge for that shit.That'll be $12.95 -(copy and paste fee - forum special, today only. ACT NOW!!)- :rolleyes:
wienerdog
04-27-2006, 10:30 PM
Thanks, man. That's what I figured I'd have to do. I guess I'll have to do an aobsolute position on the div that'll be holding my navigation in place. Whatever width my logo is in pixels, I guess that'll work as a margin on the left.
JPnyc
04-27-2006, 10:51 PM
What fryed1 said, that's the only time I really use absolute positioning with any consistency, placing a logo at top left.