[CSS] header, footer, 3 colums. Kolommen niet naast elkaar - Softwareontwikkeling

woensdag 14 juni 2006 03:09

Acties:

Topicstarter

Hey,

Ik heb een probleem wat me al uren, zo niet dagen heeft gekost!

Ik wil graag de volgende layout creëren met CSS:

Afbeeldingslocatie: http://www.inlustris.nl/layout/layout.jpg

Afbeeldingslocatie: http://www.inlustris.nl/layout/layout.jpg

Dit probeer ik met de volgende code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="Author" CONTENT="Inlustris.nl"><title>ESSENTRIX - IT Solutions, pure and simple.</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="header"></div>

<div id="center">

<div id="text1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus egestas, enim ut congue porttitor, purus eros ultricies metus, et semper tortor lorem quis ligula. Nunc aliquam. Suspendisse gravida, neque eget dignissim varius, odio risus lobortis lorem, ac mollis est lacus id velit. Nam nonummy interdum ipsum. Donec euismod lacinia lacus. Nam auctor eros eget pede. Vivamus suscipit, urna vel rutrum mollis, nisl neque iaculis sapien, vitae elementum mi libero eget leo. Phasellus at nisl. Sed eget ante ac magna vehicula blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc urna. Maecenas tristique urna sit amet nibh. Vestibulum a dolor. Nullam fermentum neque ut diam. Mauris id purus ac quam convallis facilisis. 
<p>
Suspendisse dapibus odio pulvinar nunc. Duis vitae nisi at est rhoncus interdum. Donec quis metus. Nullam vel felis. Maecenas tortor lacus, scelerisque vel, eleifend nec, ornare nec, ipsum. Sed tempus. Nullam euismod. Etiam pede libero, faucibus sed, condimentum vitae, molestie nec, dolor. Duis porta ultricies magna. Curabitur vitae nisi at est fringilla tincidunt. Cras tempor orci a erat. Integer nonummy condimentum ipsum. Pellentesque iaculis nisi et nisl. Nulla diam quam, ornare eget, ullamcorper ac, ultrices non, nibh. Sed suscipit. Sed pulvinar. Praesent sit amet tortor. In elementum. Vestibulum nibh leo, fermentum et, pharetra vel, interdum non, ipsum. 
<p>
Nulla accumsan. Fusce vitae libero. Integer nisl enim, bibendum eu, facilisis eget, hendrerit a, ipsum. Integer non enim. Curabitur in dolor. Aenean tincidunt diam. Duis quam libero, ullamcorper vitae, ultrices in, tristique ac, lacus. Cras vestibulum feugiat purus. Aliquam nisl. Ut ac enim nec tellus blandit sagittis. Quisque orci arcu, venenatis eu, euismod eu, tristique a, risus. Donec ut enim. Suspendisse ullamcorper congue sapien. Nulla accumsan consectetuer urna. Fusce eget diam. Morbi massa metus, egestas nec, ullamcorper nec, tristique id, felis. Ut sapien est, accumsan at, auctor sed, venenatis pharetra, felis. 
<p>
Vestibulum euismod pede. Integer odio felis, tincidunt non, pharetra non, scelerisque eu, elit. Etiam mi. Cras consectetuer. Etiam volutpat. Aliquam eu elit. Proin semper. Suspendisse ligula urna, interdum sit amet, dictum nec, cursus ac, odio. Donec tincidunt iaculis tortor. Ut hendrerit, risus ut lacinia ornare, risus libero sodales lorem, sit amet malesuada mi pede et lectus. 
<p>
Etiam sed dui a massa fringilla sodales. Morbi eleifend dapibus sapien. Donec nec ligula. Maecenas consequat porta pede. Phasellus ut odio sit amet sem congue dictum. Aenean eget pede eu nunc molestie tincidunt. Phasellus eu neque vitae lectus imperdiet euismod. Donec luctus pharetra felis. Aliquam id magna. Curabitur mollis, augue ut hendrerit rutrum, risus mi viverra dolor, eu consectetuer urna dolor non ante. Nulla mollis. In hac habitasse platea dictumst. Phasellus congue nulla at mi. Aliquam quis erat et augue imperdiet sagittis. Donec laoreet felis id ipsum. Aliquam erat volutpat. Integer eget lectus ut ligula mollis interdum. Aliquam erat volutpat. Phasellus dictum convallis elit. 
</div>

<div id="text2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus egestas, enim ut congue porttitor, purus eros ultricies metus, et semper tortor lorem quis ligula. Nunc aliquam. Suspendisse gravida, neque eget dignissim varius, odio risus lobortis lorem, ac mollis est lacus id velit. Nam nonummy interdum ipsum. Donec euismod lacinia lacus. Nam auctor eros eget pede. Vivamus suscipit, urna vel rutrum mollis, nisl neque iaculis sapien, vitae elementum mi libero eget leo. Phasellus at nisl. Sed eget ante ac magna vehicula blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc urna. Maecenas tristique urna sit amet nibh. Vestibulum a dolor. Nullam fermentum neque ut diam. Mauris id purus ac quam convallis facilisis. 
<p>
Suspendisse dapibus odio pulvinar nunc. Duis vitae nisi at est rhoncus interdum. Donec quis metus. Nullam vel felis. Maecenas tortor lacus, scelerisque vel, eleifend nec, ornare nec, ipsum. Sed tempus. Nullam euismod. Etiam pede libero, faucibus sed, condimentum vitae, molestie nec, dolor. Duis porta ultricies magna. Curabitur vitae nisi at est fringilla tincidunt. Cras tempor orci a erat. Integer nonummy condimentum ipsum. Pellentesque iaculis nisi et nisl. Nulla diam quam, ornare eget, ullamcorper ac, ultrices non, nibh. Sed suscipit. Sed pulvinar. Praesent sit amet tortor. In elementum. Vestibulum nibh leo, fermentum et, pharetra vel, interdum non, ipsum. 
<p>
Nulla accumsan. Fusce vitae libero. Integer nisl enim, bibendum eu, facilisis eget, hendrerit a, ipsum. Integer non enim. Curabitur in dolor. Aenean tincidunt diam. Duis quam libero, ullamcorper vitae, ultrices in, tristique ac, lacus. Cras vestibulum feugiat purus. Aliquam nisl. Ut ac enim nec tellus blandit sagittis. Quisque orci arcu, venenatis eu, euismod eu, tristique a, risus. Donec ut enim. Suspendisse ullamcorper congue sapien. Nulla accumsan consectetuer urna. Fusce eget diam. Morbi massa metus, egestas nec, ullamcorper nec, tristique id, felis. Ut sapien est, accumsan at, auctor sed, venenatis pharetra, felis. 
<p>
Vestibulum euismod pede. Integer odio felis, tincidunt non, pharetra non, scelerisque eu, elit. Etiam mi. Cras consectetuer. Etiam volutpat. Aliquam eu elit. Proin semper. Suspendisse ligula urna, interdum sit amet, dictum nec, cursus ac, odio. Donec tincidunt iaculis tortor. Ut hendrerit, risus ut lacinia ornare, risus libero sodales lorem, sit amet malesuada mi pede et lectus. 
<p>
Etiam sed dui a massa fringilla sodales. Morbi eleifend dapibus sapien. Donec nec ligula. Maecenas consequat porta pede. Phasellus ut odio sit amet sem congue dictum. Aenean eget pede eu nunc molestie tincidunt. Phasellus eu neque vitae lectus imperdiet euismod. Donec luctus pharetra felis. Aliquam id magna. Curabitur mollis, augue ut hendrerit rutrum, risus mi viverra dolor, eu consectetuer urna dolor non ante. Nulla mollis. In hac habitasse platea dictumst. Phasellus congue nulla at mi. Aliquam quis erat et augue imperdiet sagittis. Donec laoreet felis id ipsum. Aliquam erat volutpat. Integer eget lectus ut ligula mollis interdum. Aliquam erat volutpat. Phasellus dictum convallis elit. 
</div>

</div>

<div id="footer">bodum</div>

</body>
</html>

Cascading Stylesheet:

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
} 

body {
    padding: 0;
    margin: 10px 0 10px 0;
    text-align: center;
    font: normal normal 11px/17px Verdana, Arial, sans-serif;
    overflow-y: scroll;
}

#header {
    background: transparent url(../images/top.jpg);
    width: 800px;
    height: 180px;
    margin: 0 auto 0 auto;
}

#center {
    background: lightblue;
    margin: 0px 0px 0px 0px;
    text-align: left;
    width: 800px;
}

#text1 {
    position: relative;
    left: 0px;
    top: 10px;
    background: lightgreen;
    padding: 15px 15px 15px 15px;
    text-align: left;
    width: 260px;
}

#text2 {
    position: relative;
    left: 261px;
    top: 10px;
    background: orange;
    padding: 15px 15px 15px 15px;
    text-align: left;
    width: 260px;
}

#footer {
    background: pink;
    margin: 0px auto 0 auto;
    height: 31px;
    width: 800px;
}

Het resultaat kan je hier zien: http://www.inlustris.nl/layout

Wat gaat er fout? De tweede kolom, oranje, komt niet naast de eerste kolom, groen. Wat ik ook probeer. Ben al vanuit een stuk of 5 "header footer 3 columns" CSS voorbeelden uitgegaan. Maar telkens gaat er wat fout. Bovenstaande code is een begin vanuit mezelf.

Hoe krijg ik die oranje kolom naast die groene?? Daar moeten dan ook weer divjes in, maar dat komt later wel. Eerst dit, want dit is echt om te huilen

[ Voor 4% gewijzigd door _Brake_ op 14-06-2006 03:10 ]

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

woensdag 14 juni 2006 08:46

Acties:

Verwijderd

Haal die 'position: relative' en 'top' en 'left' eens weg bij #text1 en #text2, en voeg bij beide 'float: left' eens toe?

[ Voor 21% gewijzigd door Verwijderd op 14-06-2006 08:46 ]

woensdag 14 juni 2006 10:04

Acties:

BtM909

Watch out Guys...

En gebruik sowieso even volledige doctypes om sommige browsers in strict mode te duwen. Zie ook: http://hsivonen.iki.fi/doctype/

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 14 juni 2006 10:29

Acties:

_Brake_

Topicstarter

Verwijderd schreef op woensdag 14 juni 2006 @ 08:46:
Haal die 'position: relative' en 'top' en 'left' eens weg bij #text1 en #text2, en voeg bij beide 'float: left' eens toe?

BtM909 schreef op woensdag 14 juni 2006 @ 10:04:
En gebruik sowieso even volledige doctypes om sommige browsers in strict mode te duwen. Zie ook: http://hsivonen.iki.fi/doctype/

Tsjah... Het werkt nu

Hartelijk bedankt heren! $_/-\o_$ Op naar het vervolg!

Dell Vostro 7620 / Intel Core i7 12700H / NVIDIA GeForce RTX 3050 Ti 4GB / 40GB DDR5RAM / Samsung 990 Pro 1TB / Dell WD22TB4 / 2x Dell G2724D / Dell Premier KM900 / Universal Audio Volt 1 / 2x KRK Rokit RP8 G4 / KRK S12.4

woensdag 14 juni 2006 10:39

Acties:

Verwijderd

Voor de volledigheid: met het juiste doctype heb je dit niet meer nodig:

Cascading Stylesheet:

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}

woensdag 14 juni 2006 11:33

Acties:

Verwijderd

_Brake_ schreef op woensdag 14 juni 2006 @ 11:13:
En het vervolg gaat nu ook goed! Nogmaals hartelijk bedankt!

Graag gedaan