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 4

post #31 of 61
Where is your actual failing code? I'm trying the last you posted (post #24 of 30 in this thread) and can't reproduce the error, it shows fine for me (same layout in every major browser):

http://img515.imageshack.us/img515/8418/testnvf.png
post #32 of 61
Thread Starter 
Quote:
Originally Posted by sayonara-p View Post

Where is your actual failing code? I'm trying the last you posted (post #24 of 30 in this thread) and can't reproduce the error, it shows fine for me (same layout in every major browser):
http://img515.imageshack.us/img515/8418/testnvf.png
The orange box need to follow the green box so there would not the that opening below the orange box.

But now i don't have the code cause the hard drive died i it got lost so once again i need to start from the scratch frown.gif
post #33 of 61
Oh, a challenge. Tell me what you need, just that layout with left column following the middle one?
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 #34 of 61
Then what's exaclty what you need the help for? If you don't have code and you're starting from scratch...

If what you want is a navigation bar that grows in height along with your main content, look for "faux" columns.
post #35 of 61
Thread Starter 
this is the plan but for some reasson i screw up, need the code to be as simple as it can so i could learn it and know how it works.

141340316090.png
post #36 of 61
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.
Edited by wlw wl - 6/21/12 at 3:42pm
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 #37 of 61
Nice, wlw wl.
Here I go with approach number 2, a bit more "tricky", using faux columns:

487

The code:
HTML (Click to show)
Code:
<!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">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>TESTING</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">
        <div class="logo">
                .logo
        </div>

        <div class="main-top"></div>      
        <div class="main-middle ">
        
                <div class="main-nav">
                        <ul>
                                <li>first option</li>
                                <li>second option</li>
                                <li>third option</li>
                                <li>fourth option</li>
                        </ul>
                </div>
                
                <div class="main-content">
                        <p style="margin:0;padding:.5em 1em;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at metus ut erat mollis ultricies. Vestibulum vulputate turpis at sem molestie eu luctus arcu auctor. In laoreet urna vitae quam accumsan tempor. Ut justo enim, ullamcorper ac lacinia a, pellentesque eget dolor. Proin vehicula hendrerit euismod. Sed ante massa, dictum sagittis dictum ac, eleifend et velit. Nulla sed massa sem, at accumsan augue.<br />
                        <br />
                        Vestibulum sodales vulputate metus at bibendum. Nam fringilla hendrerit vestibulum. Fusce in libero at justo ullamcorper tempor. Fusce sollicitudin purus vitae purus euismod a porttitor felis venenatis. Duis non quam ut lorem interdum imperdiet eu vel magna. Aenean bibendum metus congue dui imperdiet scelerisque. Cras eget sapien ipsum, quis convallis neque. Morbi non nulla dolor, sit amet eleifend mauris. Pellentesque est dolor, vestibulum id pharetra at, tempor sed sapien. Etiam fringilla nisi quis libero rutrum et ornare sem cursus. Aliquam erat volutpat.<br />
                        <br />
                        Pellentesque sed est vitae nibh semper rhoncus. Quisque eget sem lorem, ac pulvinar mauris. Fusce eget magna vel erat blandit vestibulum. Nam id augue non ante dapibus facilisis sit amet vel tortor. Nulla lobortis cursus mollis. Nam fringilla egestas elementum. Duis vestibulum molestie interdum. Aenean cursus dictum risus a pretium. Sed luctus adipiscing fermentum. Sed adipiscing quam a diam consectetur tincidunt.<br />
                        <br />
                        Quisque varius pulvinar augue nec adipiscing. Donec vestibulum diam a mi porta vitae convallis lorem tempus. Proin vel egestas magna. Nulla id libero a tortor vehicula commodo. Praesent blandit nisl id enim pulvinar placerat dignissim leo aliquet. Fusce semper tellus sed lacus egestas ut fringilla tellus aliquet. Quisque sed consequat metus.<br />
                        <br />
                        Cras bibendum iaculis nisl laoreet luctus. Nulla venenatis ipsum non tellus facilisis sed porttitor nisl iaculis. Integer non nisi magna. Etiam non urna sit amet eros semper auctor sollicitudin non lacus. Nam eleifend mi ut lectus euismod accumsan pharetra risus rutrum. Curabitur sed velit lorem. Donec nec dolor metus. Cras ante diam, euismod non porta quis, placerat a lorem. Aliquam aliquet, orci vel tempus blandit, leo purus accumsan sem, vitae fringilla arcu sem ac nisi. Nulla viverra, diam nec porta blandit, augue ipsum malesuada quam, id scelerisque tellus magna sit amet sem. Donec volutpat ipsum nec quam suscipit rhoncus. Sed non tellus id nulla aliquam pharetra.</p>
                </div>
                                
                <div class="main-content-box1">
                        .main-content-box1
                </div>
                <div class="main-content-box2">
                        .main-content-box2
                </div>
                
                <div class="clearfix">
                </div>
                
        </div>    
        <div class="main-bottom"></div>
                
        <div class="footer">
                .footer
        </div>
                
</div>

</body>
</html>
CSS (Click to show)
Code:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}

ol, ul {
        list-style:none;
}

.clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
}
 
.clearfix {
        display: inline-block;
}
 
html[xmlns] .clearfix {
        display: block;
}
 
* html .clearfix {
        height: 1%;
}


#wrapper {
        margin:1em auto;
        width:960px;
        background-color:gray;
}

.logo {
        width:960px;
        background-color:cyan;
}

.main-top {
        width:960px;
        height:1px;
}

.main-middle {
        background-image:url('main-middle.png');
        background-repeat:repeat-y;
}

.main-bottom {
        width:960px;
        height:1px;
}

.main-nav {
        width:280px;
        float:left;
}

.main-content {
        width:678px;
        margin-left:281px;
        background-color:pink;
}

.main-content-box1 {
        width:338px;
        height:96px;
        background-color:lime;
        float:right;
        margin-right:2px;
}
.main-content-box2 {
        width:338px;
        height:96px;
        background-color:red;
        float:right;
        margin-right:1px;
}

.footer {
        width:960px;
        background-color:cyan;
        margin-bottom:1px;
}
post #38 of 61
sayonara-p - you could get away with less containers, such as the #wrapper can be scrapped, you can add those properties to body or even html. Of course you could say the same about my page, but I intentionally used the box container as I left the logo space blank. Also, whenever you use float or :after, a kitten, baby panda and two puppies die. Especially float. 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 #39 of 61
Or, you know, you could use a simple framework like Bootstrap and it becomes:

span12
span3 span9
span3 span4 span4
span12

lol biggrin.gif

(I work in the back-end, ok. Don't judge me.)
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 #40 of 61
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!


Oh and you could further improve my code. Instead of adding 100px margins to the sub-content element, to offset them from underneath the menu column, you could just move the menu left by a distance equal to its width, so give it position: absolute; top: 0; left: -100px; and then you don't have to care about it later. Although it would make the whole body a bit off center, but everything comes at a price smile.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
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