Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › HTML and CSS problem [Update 3] PLS HELP
New Posts  All Forums:Forum Nav:

HTML and CSS problem [Update 3] PLS HELP - Page 5

post #41 of 61
Quote:
Originally Posted by wlw wl View Post

Plex - you could do that, if you have no love in your heart. Try it and show us the code it spits out biggrin.gif Besides, spans are in-line elements meant for other purposes, so there goes another kitten! And a gold fish!

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

It would work just like that. It's quite simple, and perfectly fine from a efficiency point-of-view. Like I said, I'm a web developer (Both PHP and C# ASP), so I throw my code at my designers and they handle the front-end, but I know for certain that Bootstrap is completely fine to use for an easy start. It's made to be expanded upon and changed, but it gives someone who isn't an expert (like the OP) an easy way in.

oh, edit: I'm also fully aware than span elements are in-line. It's just the naming scheme that Twitter uses for those classes, "spanning" across the page. I meant span12 as a class, not span, the element.
Edited by Plex - 6/21/12 at 4:35pm
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
Intellect v2
(9 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7-6700K Processor ASUS ROG MAXIMUS VIII HERO LGA1151 DDR4 M.2 SAT... EVGA GTX 1080 SC ACX 3.0 Crucial Ballistix Sport 32GB DDR4 2400 MT/s (PC... 
CoolingKeyboardPowerCase
Noctua NH-D15 Das Keyboard 4 Professional (Brown) Corsair AX860 Fractal Design Define R5 
Mouse
MIONIX NAOS 7000 
  hide details  
Reply
post #42 of 61
Oh okay, yeah such tools are good, mainly for fast prototyping. From quick eyeballing that page you linked it seems that it uses a grid. I'd rather use it for prototyping not production, but who am I to judge wink.gif
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
post #43 of 61
Thread Starter 
Quote:
Originally Posted by wlw wl View Post

How about this?
Only the red and blue elements have fixed height (and width), they represent content like YouTube embedded player.
The whole content container has fixed width of 1280px, the menu (orange) has fixed width of 100px, the rest is dynamic, content-dependent.
313 Full HTML code (Click to show)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is a page.</title>
</head>
<body>
  <div id="box" style="width: 1280px; height: auto; margin: 100px auto 0 auto; background-color: grey; position: relative; left: 0; top: 0;">
    <div id="content" style="margin: 0 0 0 100px; background-color: green;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia, augue vitae ornare venenatis, eros ligula eleifend risus, sed viverra nunc tortor sed nisi. In vitae sem sem. Donec non metus turpis. Praesent consequat fermentum tortor, sit amet porta dolor malesuada ut. Mauris justo nisl, tincidunt ut ultricies nec, viverra ac felis. Etiam ac lorem quis est gravida adipiscing. Curabitur sed orci sed odio porta auctor quis non est. Suspendisse felis lorem, eleifend eget vulputate a, malesuada in mi. Phasellus ligula magna, consectetur ac gravida sed, placerat vitae tellus. Praesent mi erat, dictum vel vestibulum et, tempus ac neque. Ut dolor enim, tristique ut mattis a, porta sed eros.      
     <br>
     <br>
     Mauris massa ligula, cursus vitae adipiscing sed, venenatis eu leo. In eu quam elit, et rhoncus velit. Nunc lacus risus, lacinia at congue non, tincidunt et massa. Morbi sollicitudin ante quis quam fermentum tincidunt. Duis hendrerit orci a diam lobortis ullamcorper. Quisque et mauris vel orci pretium vehicula. Nam lorem dui, ullamcorper sed elementum ut, posuere id dolor. Maecenas purus quam, ornare et suscipit ac, lacinia non nisl. Curabitur eget ultrices arcu. Integer ullamcorper, erat in auctor auctor, nunc purus dictum tortor, tincidunt tempus urna tortor venenatis augue. Aenean eu nisi a nibh adipiscing euismod quis ac turpis. In justo eros, facilisis a porta eget, iaculis vitae nisi.
     <br>
     <br>
     Quisque at mauris ut augue facilisis condimentum. Aenean fringilla elit sed urna adipiscing a lobortis massa dignissim. Aliquam gravida ullamcorper velit, eget pharetra massa sodales sed. Suspendisse potenti. Etiam dictum fermentum fringilla. Nulla ornare luctus aliquet. Phasellus interdum accumsan tellus, sed scelerisque turpis blandit ac. Vestibulum hendrerit, neque a condimentum pretium, diam urna sollicitudin lectus, vitae sagittis quam orci non dolor. Etiam tristique, tellus pharetra hendrerit luctus, tortor metus fermentum arcu, eget dictum lectus felis ut leo. Vivamus tristique posuere dictum. Vestibulum non vehicula leo. Nulla facilisi.
     <br>
     <br>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam laoreet cursus erat, vestibulum tincidunt odio posuere in. Suspendisse ut purus sed urna vulputate ultricies. Nullam at tortor turpis, vel tempus felis. Ut varius cursus urna, ac volutpat diam consectetur ac. Suspendisse potenti. Integer vel libero nulla, in semper libero. Praesent purus enim, fermentum a venenatis nec, bibendum sed velit. Nam eu velit a nunc sollicitudin tincidunt ut at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas pellentesque lacus vitae ante volutpat cursus.
     <br>
     <br>
     Donec adipiscing dolor id libero feugiat tincidunt. Maecenas dictum adipiscing vehicula. Suspendisse enim tellus, hendrerit et dictum quis, sodales et risus. In luctus, ante nec commodo dictum, risus lectus dignissim urna, nec tincidunt nisl diam at ante. Vestibulum ac ligula non nisi fringilla ultrices. Nulla vestibulum tellus nec nisi cursus non semper nisi fringilla. Cras suscipit euismod est, ut tincidunt nulla dictum sodales. Aliquam erat volutpat. Sed eget odio justo, eu varius lacus. Nulla facilisi. Suspendisse potenti. Morbi nec mi at leo commodo laoreet sed vel odio. Morbi nisl est, vestibulum id facilisis sit amet, pulvinar et mauris.
    </div>
    <div id="funnystuff" style="height: 300px; background-color: lime; margin: 0 0 0 100px;">
      <div id="something1" style="width: 575px; height: 300px; background-color: red; margin: 0; clear: left; float: left">abc</div>
      <div id="something2" style="width: 575px; height: 300px; background-color: blue; margin: 0; clear: right; float: right">def</div>
    </div>
        <div id="menu" style="width: 100px; height: 100%; position: absolute; left: 0; top: 0; background-color: orange;">
          <ul>
            <li>abc</li>
            <li>def</li>
            <li>efg</li>
            <li>hij</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="footer" style="width: 1280px; margin: 0 auto; background-color: darkred; text-align: center;">footer information bla bla bla</div>
</body>
</html>
Important thing you should know, which I used, is how CSS property position behaves - an element with position: absolute will be aligned according to it's first non-static parent element, hence the content box has position: relative so the menu is aligned not to the window, but to the container box we want it to be aligned to.
Oh, and I was too lazy to put in an external .css file, but it actually makes it easier to understand IMO.
Also, be careful with padding. Due to strange box models, different browsers see it differently. Opera adds the padding to the element's dimensions, while IE doesn't.
So an element with width: 100px and padding-left: 50px would have a total width of 100px in IE, but 150px in Opera.

OK i used your code but now the red box goes behind the orange one frown.gif don't understand how to fix, tried to make the menu box bigger.

Untitled.png 76k .png file
Test 2.zip 1k .zip file
post #44 of 61
You have to set left margin of content and funnystuff to be the same as the menu column's width. Or like I said, give negative left to the menu equal to its width and you won't have to remember about the margins, but the whole page will be offset to the left, not centered.

So: Code (Click to show)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is a page.</title>
</head>
<body>
  <div id="box" style="width: 1280px; height: auto; margin: 100px auto 0 auto; background-color: grey; position: relative; left: 0; top: 0;">
    <div id="content" style="margin: 0; background-color: green;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia, augue vitae ornare venenatis, eros ligula eleifend risus, sed viverra nunc tortor sed nisi. In vitae sem sem. Donec non metus turpis. Praesent consequat fermentum tortor, sit amet porta dolor malesuada ut. Mauris justo nisl, tincidunt ut ultricies nec, viverra ac felis. Etiam ac lorem quis est gravida adipiscing. Curabitur sed orci sed odio porta auctor quis non est. Suspendisse felis lorem, eleifend eget vulputate a, malesuada in mi. Phasellus ligula magna, consectetur ac gravida sed, placerat vitae tellus. Praesent mi erat, dictum vel vestibulum et, tempus ac neque. Ut dolor enim, tristique ut mattis a, porta sed eros.      
     <br>
     <br>
     Mauris massa ligula, cursus vitae adipiscing sed, venenatis eu leo. In eu quam elit, et rhoncus velit. Nunc lacus risus, lacinia at congue non, tincidunt et massa. Morbi sollicitudin ante quis quam fermentum tincidunt. Duis hendrerit orci a diam lobortis ullamcorper. Quisque et mauris vel orci pretium vehicula. Nam lorem dui, ullamcorper sed elementum ut, posuere id dolor. Maecenas purus quam, ornare et suscipit ac, lacinia non nisl. Curabitur eget ultrices arcu. Integer ullamcorper, erat in auctor auctor, nunc purus dictum tortor, tincidunt tempus urna tortor venenatis augue. Aenean eu nisi a nibh adipiscing euismod quis ac turpis. In justo eros, facilisis a porta eget, iaculis vitae nisi.
     <br>
     <br>
     Quisque at mauris ut augue facilisis condimentum. Aenean fringilla elit sed urna adipiscing a lobortis massa dignissim. Aliquam gravida ullamcorper velit, eget pharetra massa sodales sed. Suspendisse potenti. Etiam dictum fermentum fringilla. Nulla ornare luctus aliquet. Phasellus interdum accumsan tellus, sed scelerisque turpis blandit ac. Vestibulum hendrerit, neque a condimentum pretium, diam urna sollicitudin lectus, vitae sagittis quam orci non dolor. Etiam tristique, tellus pharetra hendrerit luctus, tortor metus fermentum arcu, eget dictum lectus felis ut leo. Vivamus tristique posuere dictum. Vestibulum non vehicula leo. Nulla facilisi.
     <br>
     <br>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam laoreet cursus erat, vestibulum tincidunt odio posuere in. Suspendisse ut purus sed urna vulputate ultricies. Nullam at tortor turpis, vel tempus felis. Ut varius cursus urna, ac volutpat diam consectetur ac. Suspendisse potenti. Integer vel libero nulla, in semper libero. Praesent purus enim, fermentum a venenatis nec, bibendum sed velit. Nam eu velit a nunc sollicitudin tincidunt ut at eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas pellentesque lacus vitae ante volutpat cursus.
     <br>
     <br>
     Donec adipiscing dolor id libero feugiat tincidunt. Maecenas dictum adipiscing vehicula. Suspendisse enim tellus, hendrerit et dictum quis, sodales et risus. In luctus, ante nec commodo dictum, risus lectus dignissim urna, nec tincidunt nisl diam at ante. Vestibulum ac ligula non nisi fringilla ultrices. Nulla vestibulum tellus nec nisi cursus non semper nisi fringilla. Cras suscipit euismod est, ut tincidunt nulla dictum sodales. Aliquam erat volutpat. Sed eget odio justo, eu varius lacus. Nulla facilisi. Suspendisse potenti. Morbi nec mi at leo commodo laoreet sed vel odio. Morbi nisl est, vestibulum id facilisis sit amet, pulvinar et mauris.
    </div>
    <div id="funnystuff" style="height: 300px; background-color: lime; margin: 0">
      <div id="something1" style="width: 575px; height: 300px; background-color: red; margin: 0; clear: left; float: left">abc</div>
      <div id="something2" style="width: 575px; height: 300px; background-color: blue; margin: 0; clear: right; float: right">def</div>
    </div>
        <div id="menu" style="width: 300px; height: 100%; position: absolute; left: -300px; top: 0; background-color: orange;">
          <ul>
            <li>abc</li>
            <li>def</li>
            <li>efg</li>
            <li>hij</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div id="footer" style="width: 1280px; margin: 0 auto; background-color: darkred; text-align: center;">footer information bla bla bla</div>
</body>
</html>

Of course the offset can be cured by using yet another container, or in other words, centering the body and giving it some width.
Edited by wlw wl - 6/21/12 at 6:46pm
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
post #45 of 61
Thread Starter 
Got this code now, i was thinking what can i do to move the boxes "links" to the center ?
Warning: Spoiler! (Click to show)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <title>PC911 - Tölvuviðgerðir</title>
                <link href="css/style.css" rel="stylesheet" type="text/css">
        </head>
        <body>
                <div id='menu'>
                        <ul>
                                <li><a href='index.html'><span>.: Forsíða :.</span></a></li>
                                <li><a href='#'><span>.: Viðgerðir :.</span></a></li>
                                <li><a href='#'><span>.: Til Sölu :.</span></a>
                        <ul>
                                <li><a href='#'><span>.: Raftæki :.</span></a></li>
                                <li><a href='#'><span>.: Tölvuleikir :.</span></a></li>
                                <li><a href='#'><span>.: Annað :.</span></a></li>
                        </ul>
                        </li>
                                <li><a href='#'><span>.: Niðurhala :.</span></a></li>
                                <li><a href='#'><span>.: Hafa Samband :.</span></a></li>
                        </ul>
                </div>
                        
                        
                                                <div class="footer">
                                                
                                                        <p>ari er bestur</p>
                                                
                                                </div>
                                        
                        
                        

        
        
        </body>
</html>


Warning: Spoiler! (Click to show)
Code:
#menu{
        border:none;
        border:0px;
        margin:auto;
        padding:0px;
        font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        width: 960px;
        }
#menu ul{
        background:#333333;
        height:35px;
        list-style:none;
        margin:0;
        padding:0;
        }
#menu li{
        float:left;
        padding:0px;
        }
#menu li a{
        background:#333333 url('images/seperator.gif') bottom right no-repeat;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
#menu li a:hover, #menu ul li:hover a{
        background: #2580a2 url('images/hover.gif') bottom center no-repeat;
        color:#FFFFFF;
        text-decoration:none;
        }
#menu li ul{
        background:#333333;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
#menu li:hover ul{
        display:block;
        
        }
#menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
#menu li:hover li a{
        background:none;
        
        }
#menu li ul a{
        display:block;
        height:35px;
        font-size:12px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 15px;
        text-align:center;
        }
#menu li ul a:hover, #menu li ul li:hover a{
        background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
        border:0px;
        color:#ffffff;
        text-decoration:none;
        }
#menu p{
        clear:left;
        }       
        
        
        
        
        
.footer{
        color: orange;
        font-size: 60px;
        }
post #46 of 61
I don't see any "links" there, please use English in the file and you'll translate it later. You mean the UL inside menu?

ED:

oh, I guess it's the bar at the top.

I told you - every time you use float, a baby panda dies. But you wouldn't listen rolleyes.gif

You need this:
Code:
#menu {
        border:none;
        border:0px;
        margin:auto;
        padding:0px;
        font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
        font-size:14px;
        font-weight:bold;
        width: 960px;
        text-align: center;
}

#menu ul {
        background:#333333;
        height:35px;
        list-style:none;
        margin: 0 auto;
        padding:0;
}

#menu li {
        display: inline-block;
        padding:0px;
}

Edited by wlw wl - 6/22/12 at 1:17pm
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
post #47 of 61
Thread Starter 
Ok now i am again in trouble don't understand where this space comes from.465

Warning: Spoiler! (Click to show)
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
                <title>PC911 - Tölvuviðgerðir</title>
                <link href="css/style.css" rel="stylesheet" type="text/css">
        </head>
        <body>
                <!--logo-->
                <center><a href="index.html"><img src="images/logo.png" class="logo" border="0"></a></center>
                <!--linkar-->
                <div id='menu'>
                        <ul>
                                <li><a href='index.html'><span>- Forsíða -</span></a></li>
                                <li><a href='#'><span>- Viðgerðir -</span></a></li>
                                <li><a href='#'><span>- Til Sölu -</span></a>
                        <ul>
                                <li><a href='#'><span>- Raftæki -</span></a></li>
                                <li><a href='#'><span>- Tölvuleikir -</span></a></li>
                                <li><a href='#'><span>- Annað -</span></a></li>
                        </ul>
                        </li>
                                <li><a href='#'><span>- Niðurhala -</span></a></li>
                                <li><a href='#'><span>- Hafa Samband -</span></a></li>
                        </ul>
                </div>
                <!--Allt er í þessu kassa-->
                <div class="mainbox">
                        <p>hestur</p>
                        <p>hestur</p>
                        <p>hestur</p>
                        <p>hestur</p>
                </div>
                <!--botn, fótur, upplýsingar-->
                <div class="footer">
                        <p>ari er bestur</p>
                </div>
        </body>
</html>


Warning: Spoiler! (Click to show)
Code:

body{
        background-image: url('../images/background.png');
        background-repeat: repeat-x;
        background-color: #f0f0f0;
        }
#menu{
        border:none;
        border-bottom:1px solid orange;
        margin:auto;
        padding:0px;
        font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', 'Verdana', 'Helvetica', 'sans-serif';
        font-size:16px;
        font-weight:bold;
        width: 960px;
        text-align: center;
        }
#menu ul{
        background:#909090;
        height:35px;
        list-style:none;
        margin:auto;
        padding:0;
        }
#menu li{
        display: inline-block;
        padding:0px;
        }
#menu li a{
        background:#909090;
        color:white;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
#menu li a:hover, #menu ul li:hover a{
        background: #2580a2;
        color:#FFFFFF;
        text-decoration:none;
        }
#menu li ul{
        background:#909090;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border-bottom:1px solid orange;
        border-left:1px solid orange;
        border-right:1px solid orange;
        position:absolute;
        width:225px;
        }
#menu li:hover ul{
        display:block;
        }
#menu li li {
        background:#909090;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
#menu li:hover li a{
        background:none;
        
        }
#menu li ul a{
        display:block;
        height:35px;
        font-size:14px;
        font-style:normal;
        margin:0px;
        padding:0px 10px 0px 20px;
        text-align:left;
        }
#menu li ul a:hover, #menu li ul li:hover a{
        background:#2580a2;
        border:0px;
        color:#ffffff;
        text-decoration:none;
        }
#menu p{
        clear:left;
        }       
.mainbox{
        background-color: #909090;
        width: 960px;
        Margin: auto;
        }       
.footer{
        background-color: #909090;
        width: 960px;
        border-top: 1px solid orange;
        margin: auto;
        }

post #48 of 61
From the bottom and top margins of the p elements inside mainbox class div.

Don't use center element. You have CSS for that.
Why did you put span elements inside #menu li a? You don't need those.
Edited by wlw wl - 6/22/12 at 7:26pm
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
post #49 of 61
Thread Starter 
I don't understand, and i removed the span
post #50 of 61
Which you don't understand?

The p element is a block element and it has a default top and bottom margin equal to 1em, you need to change that explicitly if you want to get rid of those spaces while wanting to keep the p elements.
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
600
(16 items)
 
Adapters
(9 photos)
My custom water
(4 photos)
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 BE @ 3,8 GHz ASRock 870 Extreme3 Sapphire Radeon 6850 1GB GeIL 1600 CL8 2x2GB 
Hard DriveHard DriveCoolingOS
Corsair Force GT Samsung Spinpoint F3 Custom water. Very custom. Windows 7 x64 Pro 
MonitorKeyboardPowerCase
Philips 232EL natec Piranha 2 gaming :) OCZ ModXStream Pro 600W Corsair Graphite 600T 
MouseMouse PadAudioOther
A4 X-748K A4 X7 500-MP Asus Xonar D1 Roccat Kave 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Coding and Programming
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › HTML and CSS problem [Update 3] PLS HELP