SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: First Attempt at CSS redesign
-
Sep 16, 2003, 03:46 #1
- Join Date
- Dec 1999
- Location
- Southampton, Hants, UK
- Posts
- 672
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
First Attempt at CSS redesign
I'm having a few problems with my first attempt at converting a site to all CSS.
My style sheet is as follows:
Code:body { background-image: url(bg.gif); margin: 0px } #header { position: absolute; left: 50%; margin-left: -375px; width: 750; background-color: #990000; border-bottom: solid white 1px; } #logo { display: inline; width: 448; height: 120px; } #nav { display: inline; width: 151px; height: 120px; padding: 10px; border-left: solid white 1px; } #navitem { padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; } #navitem A { font-weight: bold; font-family: verdana; font-size: 8pt; color: #ffffff; text-decoration: none; }
Code:<div id="header"> <div id="logo"><img src="header.jpg" width=448 height=120 alt="Ewebbed Design"></img></div> <div id="nav"> <div id="navitem"><a href="index.html">Web Design</a></div> <div id="navitem"><a href="index.html">Web Development</a></div> <div id="navitem"><a href="index.html">Web Services</a></div> <div id="navitem"><a href="index.html">E-Commerce</a></div> <div id="navitem"><a href="index.html">Printed Media</a></div> </div> <div id="nav"> <div id="navitem"><a href="index.html">Home</a></div> <div id="navitem"><a href="index.html">About Us</a></div> <div id="navitem"><a href="index.html">Portfolio</a></div> <div id="navitem"><a href="index.html">Contact Us</a></div> </div> </div>
if you notice - there is a space at the top of the 2 nav sections, and 1 below the logo section. any idea on how I would do this.
Also - on another note - how would I make the navitem div's change background colour when rolled over, their CSS looks like this:
-
Sep 16, 2003, 03:46 #2
- Join Date
- Dec 1999
- Location
- Southampton, Hants, UK
- Posts
- 672
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sorry - I mean, any idea on how I would get rid of those spaces - and what causes them?
-
Sep 16, 2003, 05:39 #3
- Join Date
- Sep 2003
- Location
- Singapore
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I believe its the 10px padding in your
#nav
...
-
Sep 16, 2003, 06:01 #4
- Join Date
- Dec 1999
- Location
- Southampton, Hants, UK
- Posts
- 672
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
nope - I've tried removing that, but thats not it - as the padding is internal within the div box, and that white line - the left border will go all the way up the side of it.
this seems to be outside of the box.
Cheers
-
Sep 16, 2003, 06:36 #5
- Join Date
- Sep 2003
- Location
- Singapore
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Um, for the gap, i suspect its the
{ display:inline }
because i fiddled with your code, used
{ float:left }
and the gaps were gone...
Don't count on me for this...
For that little gap below your logo image, I believe its caused by IE's unnecessary extra space creation.
To test this gap, try putting in the image alone and a div that has borders and
{ margin-top: #px }
then use mspaint to count the pixel gaps...
I used this to test this extra space:
<img src="header.png" />
<div style="border:1px solid #000000;margin-top:10px">
try
</div>
PS i'm new, so i'll need time to learn the forum's features...
-
Sep 16, 2003, 08:04 #6
- Join Date
- Dec 1999
- Location
- Southampton, Hants, UK
- Posts
- 672
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
because i fiddled with your code, used
{ float:left }
and the gaps were gone...
Any ideas on what syntax I need to get the #navitem divs to change background colour on mouse over. - I guess this will only work in IE - but thats no problem.
-
Sep 16, 2003, 09:42 #7
- Join Date
- Jul 2003
- Location
- Pittsburg, KS
- Posts
- 191
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by mcg_sg
http://www.sitepointforums.com/misc.php?do=bbcode
Andy.
-
Sep 18, 2003, 06:46 #8
- Join Date
- Sep 2003
- Location
- Singapore
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
not actually sure what this float attribute does though. can anyone explain.
You may find this invaluable for doing so...
Bookmarks