CSS is making me cry

Grawl · #1 (**permalink**) Sep 27th, 2007, 23:23

Current site: http://www.grawl.nl/sp

Current CSS:

/*------------Basic styles------------*/

body 
 { 
 background: #2e3735;
 background-image: url("img/bg.jpg");
  text-align: center;
 }

p
  {
 color: black;
 font-family: verdana, arial;
 font-size: 11px;
 padding: 0 10 0 10; 
 text-align: justify;
 }
 
a
 {
 color: orange;
 font-family: verdana, arial;
 font-size: 10px; 
 }

h1
 {
 color: #9900cc;
 font-family: verdana, arial;
 font-size: 22px;
 padding: 5 10 5 10;
 }

/*-------------Layout----------------*/

.bigcontainer {
 margin: 0 auto;
 width: 762px;
 text-align: left;
 float: center;
 margin-bottom: 10px;
 height: auto;
}

.rowcontainer {
    float: center;
    margin-bottom: 5px;
 width: 762px;
     height: 100%;
}

.footer {
    float: center;
    margin-bottom: 5px;
 width: 762px;
    overflow: hidden;
    background: white;
    text-align: center;    
    border: 1px solid black;    
}

.logo {
 float: center;
 width: 762px;
 margin-bottom: 10px;
 padding: 0px;
 background: url('img/logo.jpg');
 height: 133px;
 border: 1px solid black;
}

.fullcolumn { 
 float: left; 
 width: 762px;
     border: 1px solid black;
}
            
.halfcolumn { 
float: left;
 width: 374px;
     height: 100%;
    background: white;
    margin: 0 7 0 0;
        border: 1px solid black;
}

.firstcolumn {
float: left;
 width: 184px; 
     height: 100%;
     background: white;
        margin: 0 7 0 0;
            border: 1px solid black;
}

.secondcolumn {
float: left;
 width: 184px; 
     height: 100%;
     background: white;
        border: 1px solid black;
}

Current HTML:

Code: Select all

<html>
<head>
<title>SnoepPapier</title>
<meta author="Arjen Voogt">
<link rel="stylesheet" type="text/css" href="snoeppapier.css">
</head>
<body>

<div class="bigcontainer">

<div class="logo"></div>

 <div class="rowcontainer">
 
  <div class="halfcolumn">
<h1>Justin doet waarschijnlijk <s>niet</s> mee</h1>
<p><b>Tilburg</b> - <s>Justin, voormalig oprichter van het NSDAP, heeft donderdagmiddag aangegeven hoogstwaarschijnlijk niet
mee te werken aan het project SnoepPapier. De reden hiervoor is niet gegeven, maar anonieme bronnen verklaren dat het hier gaat om
een combinatie lusteloosheid en pedofilie. Johan huiverde. Hij had nog nooit een dinosaurus van zo dichtbij gezien. Nu ook niet.</s></p>
<h1>Nieuws</h1>
<p>Op zekere dag, ergens in de maand 2001, liep Johannes de palingboer zijn ongecontroleerde bewegingen voort te varen op de aanstootgevende vangrail van familie Dijkstra. Daar eenmaal aangekomen, want wat schoot hij er mee op om meerdere keren aan te komen, kookte hij geen ei. Had hij daar dan geen zin in of zo, zul je je afvragen. Antwoord daarop is nee, want anders had hij dat wel gedaan.
Kopje koffie? vroeg Thea aan haar man. Johannus gaf geen antwoord. Dat was ook niet zo gek, want Johannes was de man niet van Thea en 
de vraag werd in een heel andere plaats gesteld dan waar Johannes zich bevond. Johannes beefde. Hij beefde gewoon omdat hij het koud had. Waarom zet ie dan de verwarming niet aan, vraag je je af.
Afvalemmer is als antwoord op deze vraag een heel onduidelijk en slecht antwoord. Wat wordt het vanavond, vroeg Johannes, 
vooruitconserveblikkend op de vanavond te spelen wedstrijd De Koreaanse Radzinskikikkers – De geïndoctrineerde tetanuspapegaaien. Donker, 
was het antwoord van de man wiens intellect vergelijkbaar was met dat van een voorbijzwetende woestijnotter. Oh, riep Johannes, zijn 
darmwanden rustig behangend, dan is het verhaal al bijna uit. Hij knikte nog een keer, liet zijn adamsappel even kleven aan een strandbal, 
veegde nog eenmaal langs het vogelnestje en leefde nog lang (2 meter 10) en gelukkig (16 Volt).</p>
<h1>Nog meer tekst</h1>
<p>Vlees aan de haak, is een begrip wat vaak in het leven wordt geroepen door de sinds april intens gegroeide theemakrelen. Dit in tegenstelling tot de zeeuwse tepelpapegaai die wel iets anders te doen heeft.
Zo werd John het middelpunt van irritatie, tractatie, rotatie en segmentatie, hetgeen leidde tot hevig verzet van het Afghaanse volk.
Niemand heeft ooit nog iets vernomen van Saskia, die op geen enkele wijze in verband staat met John.
Woensdag 11 november: Peter Cely komt vol goede moed uit z'n bed. Ver, heel ver van hier gebeurde PRECIES hetzelfde met Ann Deivy, alleen kwam zij niet met goede moed uit haar bed, maar met gemengde gevoelens van haar hobbelpaard.
Soms is vaker dan nooit.</p>
<h1>De ozonlaag</h1>
<p>De ozonlaag is een laagje om de Aarde. Vergelijk het met een sinaasappel en zijn schil. De schil is eigenlijk best vies, maar er zitten wel vitamientjes in.
Zo ook de ozonlaag. Een ozonlaag smaakt tamelijk vies, kan ik je uit eigen ervaring vertellen.
Ik heb vroeger een jeugd doorgemaakt (jaar of twee, drie) en van die tijd heb ik nog wel een anekdote omtrent dit punt:
'Ik nam een hapje van een ozonlaag die mijn oma had gebakken voor Kerstmis. Was eens een keer wat anders dan een gevulde kalkoen.
Ik liet de ozon over mijn tong glijden en raad eens? Het was SMERIG. Het smaakte naar zuurstof (O2), met een extra zuurstofatoom (O) er aan.
De gemiddelde wiskundige onder u zou zo onderhand toch wel moeten opspringen van vreugde.
'O, dat zijn samen 3 atomen!'
Goh. Heel knap.
3 Atomen zuurstof over mijn tong. En het smaakte naar een varken die het alfabet probeerde te schijten. Hij kwam tot de Q.
Kortom; het smaakt vies, maar er zitten wel vitamientjes in! Volgt u me nog? Het staat net onder de inleiding.
De ozonlaag heeft namelijk - naast zijn gore ranssmaak - ook een beschermende laag. Een laag die er voor zorgt dat we niet allemaal de pijp uit gaan aan huidkanker.
Dat klinkt misschien wel hard, maar het is een feit.
De ozonlaag houdt UV-straling tegen. Vraag me niet hoe; ik ben niet zo thuis in UV ( iets met Urethraal Voelen ofzo?) maar het schijnt in ieder geval een naar stofje te zijn waar we ziek van kunnen worden.
Credits naar de ozonlaag dus, zou je zo zeggen. </p>
  </div>
  
  <div class="firstcolumn">
<?php
include('google.php');
?>
  </div>

  <div class="secondcolumn">
  
  <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
  
  </div>
 </div>

 <div class="footer">
  <div class="fullcolumn">
<p>Copyright (c) 2007 SnoepPapier.</p>
  </div>
 </div>

</div>
</body>
</html>

As can been seen while loading the site, in IE there's a lot of space, and in FF the text overflows the box. I would like to have the text to fit the box, while the others also fill to match that one.

alexgeek · #2 (**permalink**) Sep 27th, 2007, 23:26

set the div to overflow: auto and remove the height setting for it.

Quote:

Originally Posted by Grawl

Current site: http://www.grawl.nl/sp
in IE there's a lot of space

* {margin: 0; padding: 0;}
different browsers add their own padding and margins automatically.
this tells them not to

And finally

for dummy text (for the empty divs)
generate some random latin:
http://www.lipsum.com/

AdRock · #3 (**permalink**) Sep 27th, 2007, 23:37

Have a look here and grab the source code and play around with the CSS. He has a stickie on sitepoint.com and all layouts for for use. This should suit your needs

http://www.pmob.co.uk/temp/3col-centred-template.htm

Grawl · #4 (**permalink**) Sep 27th, 2007, 23:46

Quote:

Originally Posted by AdRock

Have a look here and grab the source code and play around with the CSS. He has a stickie on sitepoint.com and all layouts for for use. This should suit your needs

http://www.pmob.co.uk/temp/3col-centred-template.htm

I'm even more confused right now.

My current CCS:

Code: Select all

/*------------Basic styles------------*/

body 
 { 
 background: #2e3735;
 background-image: url("img/bg.jpg");
  text-align: center;
 }

p
  {
 color: black;
 font-family: verdana, arial;
 font-size: 11px;
 padding: 0 10 0 10; 
 text-align: justify;
 }
 
a
 {
 color: orange;
 font-family: verdana, arial;
 font-size: 10px; 
 }

h1
 {
 color: #9900cc;
 font-family: verdana, arial;
 font-size: 22px;
 padding: 5 10 5 10;
 }

/*-------------Layout----------------*/

.bigcontainer {
 margin: 0 auto;
 width: 762px;
 text-align: left;
 float: center;
 margin-bottom: 10px;
 overflow: auto;
}

.rowcontainer {
    float: center;
    margin-bottom: 5px;
 width: 762px;
 overflow: auto;
}

.footer {
    float: center;
    margin-bottom: 5px;
 width: 762px;
    overflow: hidden;
    background: white;
    text-align: center;    
    border: 1px solid black;    
}

.logo {
 float: center;
 width: 762px;
 margin-bottom: 10px;
 padding: 0px;
 background: url('img/logo.jpg');
 height: 133px;
 border: 1px solid black;
}

.fullcolumn { 
 float: left; 
 width: 762px;
     border: 1px solid black;
}
            
.halfcolumn { 
float: left;
 width: 374px;
 overflow: auto;
    background: white;
    margin: 0 7 0 0;
        border: 1px solid black;
}

.firstcolumn {
float: left;
 width: 184px; 
 overflow: auto;
     background: white;
        margin: 0 7 0 0;
            border: 1px solid black;
}

.secondcolumn {
float: left;
 width: 184px; 
 overflow: auto;
     background: white;
        border: 1px solid black;
}

My current PHP/HTML:

Code: Select all

<html>
<head>
<title>SnoepPapier</title>
<meta author="Arjen Voogt">
<link rel="stylesheet" type="text/css" href="snoeppapier.css">
</head>
<body>

<div class="bigcontainer">

<div class="logo"></div>

 <div class="rowcontainer">
 
  <div class="halfcolumn">
<h1>Justin doet waarschijnlijk <s>niet</s> mee</h1>
<p><b>Tilburg</b> - <s>Justin, voormalig oprichter van het NSDAP, heeft donderdagmiddag aangegeven hoogstwaarschijnlijk niet
mee te werken aan het project SnoepPapier. De reden hiervoor is niet gegeven, maar anonieme bronnen verklaren dat het hier gaat om
een combinatie lusteloosheid en pedofilie. Johan huiverde. Hij had nog nooit een dinosaurus van zo dichtbij gezien. Nu ook niet.</s></p>
<h1>Nieuws</h1>
<p>Op zekere dag, ergens in de maand 2001, liep Johannes de palingboer zijn ongecontroleerde bewegingen voort te varen op de aanstootgevende vangrail van familie Dijkstra. Daar eenmaal aangekomen, want wat schoot hij er mee op om meerdere keren aan te komen, kookte hij geen ei. Had hij daar dan geen zin in of zo, zul je je afvragen. Antwoord daarop is nee, want anders had hij dat wel gedaan.
Kopje koffie? vroeg Thea aan haar man. Johannus gaf geen antwoord. Dat was ook niet zo gek, want Johannes was de man niet van Thea en 
de vraag werd in een heel andere plaats gesteld dan waar Johannes zich bevond. Johannes beefde. Hij beefde gewoon omdat hij het koud had. Waarom zet ie dan de verwarming niet aan, vraag je je af.
Afvalemmer is als antwoord op deze vraag een heel onduidelijk en slecht antwoord. Wat wordt het vanavond, vroeg Johannes, 
vooruitconserveblikkend op de vanavond te spelen wedstrijd De Koreaanse Radzinskikikkers – De geïndoctrineerde tetanuspapegaaien. Donker, 
was het antwoord van de man wiens intellect vergelijkbaar was met dat van een voorbijzwetende woestijnotter. Oh, riep Johannes, zijn 
darmwanden rustig behangend, dan is het verhaal al bijna uit. Hij knikte nog een keer, liet zijn adamsappel even kleven aan een strandbal, 
veegde nog eenmaal langs het vogelnestje en leefde nog lang (2 meter 10) en gelukkig (16 Volt).</p>
<h1>Nog meer tekst</h1>
<p>Vlees aan de haak, is een begrip wat vaak in het leven wordt geroepen door de sinds april intens gegroeide theemakrelen. Dit in tegenstelling tot de zeeuwse tepelpapegaai die wel iets anders te doen heeft.
Zo werd John het middelpunt van irritatie, tractatie, rotatie en segmentatie, hetgeen leidde tot hevig verzet van het Afghaanse volk.
Niemand heeft ooit nog iets vernomen van Saskia, die op geen enkele wijze in verband staat met John.
Woensdag 11 november: Peter Cely komt vol goede moed uit z'n bed. Ver, heel ver van hier gebeurde PRECIES hetzelfde met Ann Deivy, alleen kwam zij niet met goede moed uit haar bed, maar met gemengde gevoelens van haar hobbelpaard.
Soms is vaker dan nooit.</p>
<h1>De ozonlaag</h1>
<p>De ozonlaag is een laagje om de Aarde. Vergelijk het met een sinaasappel en zijn schil. De schil is eigenlijk best vies, maar er zitten wel vitamientjes in.
Zo ook de ozonlaag. Een ozonlaag smaakt tamelijk vies, kan ik je uit eigen ervaring vertellen.
Ik heb vroeger een jeugd doorgemaakt (jaar of twee, drie) en van die tijd heb ik nog wel een anekdote omtrent dit punt:
'Ik nam een hapje van een ozonlaag die mijn oma had gebakken voor Kerstmis. Was eens een keer wat anders dan een gevulde kalkoen.
Ik liet de ozon over mijn tong glijden en raad eens? Het was SMERIG. Het smaakte naar zuurstof (O2), met een extra zuurstofatoom (O) er aan.
De gemiddelde wiskundige onder u zou zo onderhand toch wel moeten opspringen van vreugde.
'O, dat zijn samen 3 atomen!'
Goh. Heel knap.
3 Atomen zuurstof over mijn tong. En het smaakte naar een varken die het alfabet probeerde te schijten. Hij kwam tot de Q.
Kortom; het smaakt vies, maar er zitten wel vitamientjes in! Volgt u me nog? Het staat net onder de inleiding.
De ozonlaag heeft namelijk - naast zijn gore ranssmaak - ook een beschermende laag. Een laag die er voor zorgt dat we niet allemaal de pijp uit gaan aan huidkanker.
Dat klinkt misschien wel hard, maar het is een feit.
De ozonlaag houdt UV-straling tegen. Vraag me niet hoe; ik ben niet zo thuis in UV ( iets met Urethraal Voelen ofzo?) maar het schijnt in ieder geval een naar stofje te zijn waar we ziek van kunnen worden.
Credits naar de ozonlaag dus, zou je zo zeggen. </p>
  </div>
  
  <div class="firstcolumn">
<?php
include('google.php');
?>
  </div>

  <div class="secondcolumn">
  
  <p>Text om te testuuuuuh2.</p>
    <p>Text om te testuuuuuh2.</p>
  
  </div>
 </div>

 <div class="footer">
  <div class="fullcolumn">
<p>Copyright (c) 2007 SnoepPapier.</p>
  </div>
 </div>

</div>
</body>
</html>

Site: http://www.grawl.nl/sp/

I want all the 'cells' to fill up horizontal, so it fills 100% of the box. Also I'm wondering why in FF there is a horizontal scroll, while in IE there's none.

Why is the footer bigger in FF, than in IE?

Anyway, first things firsts - I want all my 'boxes' (divs) to have the same height and also expand text when needed, while the other boxes adjust.

alexgeek · #5 (**permalink**) Sep 27th, 2007, 23:48

URL not found.
and different browsers do different thing.
we had a pie chart thing about how long it takes to do web design.

Grawl · #6 (**permalink**) Sep 27th, 2007, 23:53

Quote:

Originally Posted by alexgeek

URL not found.
and different browsers do different thing.
we had a pie chart thing about how long it takes to do web design.

Did they also have a pie chart regarding posting, and how much posts in a certain amount of time would be equal to spamming? I might be worth the trouble.

AdRock · #7 (**permalink**) Sep 27th, 2007, 23:54

Quote:

Originally Posted by Grawl

I'm even more confused right now.

Go to that link i posted and view the source code. Copy and paste the code and edit the css so that the widths are as you would like.

What it does is all the columns have equal height so the footer will always be at the bottom of the page

alexgeek · #8 (**permalink**) Sep 27th, 2007, 23:58

Quote:

Originally Posted by Grawl

Did they also have a pie chart regarding posting, and how much posts in a certain amount of time would be equal to spamming? I might be worth the trouble.

eh? you might be worth what?

jtyoungs · #9 (**permalink**) Sep 28th, 2007, 10:08

This is the a great tutorial to help you learn, it takes you through the steps and helps you understand what does what rather then just knowing it, i found that looking at some websites and getting the finished code confused me more because of the hacks and fixes they put in without explaining them, in this tutorial he explains what they do.

don't give up just yet

http://www.subcide.com/tutorials/csslayout/index.aspx

Lchad · #10 (**permalink**) Sep 28th, 2007, 10:18

Excellent link jtyoungs!

jtyoungs · #11 (**permalink**) Sep 28th, 2007, 10:20

thankyou

but im upset now because my avatar isn't showing

im a pirate in it

pa007 · #12 (**permalink**) Sep 28th, 2007, 10:59

Why is everyone so upset. Think of rainbows ands puppies!

Pete.

karinne · #13 (**permalink**) Sep 28th, 2007, 12:29

Quote:

Originally Posted by Grawl

Anyway, first things firsts - I want all my 'boxes' (divs) to have the same height and also expand text when needed, while the other boxes adjust.

The Faux Columns method is what you are looking for here

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Making MHT-CET easier!	RohanShenoy	Free Web Site Critique	32	Dec 26th, 2007 22:54
Are you making it up as you go along?	rmk93	Webforumz Cafe	2	Nov 17th, 2007 19:10
Making your own homepage	Looeess	Starting Out	1	May 12th, 2007 16:24
Making a graphic 3D	Geeky Girl	Graphics and 3D	2	Nov 16th, 2005 04:14
Making it up!	bauer	Introduce Yourself	3	Oct 1st, 2005 22:15

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS is making me cry