[css] divs goed alignen - Softwareontwikkeling

maandag 27 maart 2006 01:14

Acties:

Topicstarter

Ik wil deze post graag starten met de opmerking dat ik een hekel aan de verschillen tussen IE en Firefox heb.

Maargoed, mijn probleem:
ik wil de berichten voor mijn gastenboek als volgt in divs weergeven:
Afbeeldingslocatie: http://www.student.tue.nl/Q/m.v.zee/gastenboek_vb.jpg

Afbeeldingslocatie: http://www.student.tue.nl/Q/m.v.zee/gastenboek_vb.jpg

nou dat is niet zo moeilijk he? goed ik deed het eerst gewoon in firefox, en toen kreeg ik dit:

HTML:

<div style="background: #95B0DD; color: white; margin: 0px auto -1px auto; padding: 2px">
<div style="text-align: left; float: left; font-weight: bold;">(naam)</div>
<div style="text-align: right; ">(datum)</div></div>
<div style="border: 1px solid #95B0DD; color: black; margin: 0px auto -1px auto; padding: 2px;">(bericht)</div><br \><br \>

dit werkte prima, tot ik het in afgrijzen in IE bekeek, toen bleken de divs van 'naam' en 'datum' niet naast elkaar te staan, maar onder elkaar!
afijn, toen veranderde ik daar weer iets, wat dan weer niet in FF werkte, enzovoorts, enzovoorts.

uiteindelijk heb ik de volgende code gekregen die bij allebei werkt:

HTML:

<div style="width: 750px; position: relative;">
<div>
<div style="float: left; padding: 2px; position: relative; background: #1B2992; color: white; width: 100%;">
<div style="font-weight: bold; float: left; position: relative;">(naam)</div>
<div style="float: right; position: relative; padding-right: 3px;">(datum)</div>
</div>
<div style="background-color: #E2EEf3; float: left; width: 100%; padding-left: 2px; padding-top: 7px; padding-bottom: 7px; position: relative; border: 1px solid black;">(bericht)</div>
</div>
</div>

maar komop, dit is toch om te huilen?
mijn vraag is dan ook, is er geen makkelijkere, íets kortere manier om dit op te lossen?

maandag 27 maart 2006 02:05

Acties:

Technicality

Vliegt rechtsom...

In ieder geval je css extern of intern, maar iig niet inline plaatsen. Het ziet er niet uit, is lastig aan te passen en niet te gebruiken bij meerdere pagina's. MAW: lees je eens in over externe stylesheets.
Dat maakt het geheel in ieder geval al een stuk makkelijker leesbaar.

Over je probleem op zich kan ik even niets zeggen geen zin in het ontleden van die style uit de html, sorry

Edit: om even een voorbeeldje te geven van een (simpele) externe stylesheet:

Cascading Stylesheet:

body
{
  background-color: White ;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #666;
  margin: 0;
}
form
{
margin: 10px auto 10px auto;
}

h1,h2,h3,h4,h5,h6, form, p
{
  margin: 10px;
  text-align: center;
}
div.ubercontainer
{
  border: 1px solid black;
  margin: 10px auto 10px auto; 
  width: 800px;
  height: 430px;
  background-image: url(achtergrond.gif);
  background-repeat: no-repeat;
}
div.para
{
  margin: 0px auto;
  width:600;
}

Daar hoort dan deze html bij:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//NL"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
    <title>Rooster rsg slingerbos</title>
    <link rel="stylesheet" type="text/css" href="css/rooster.css" />

<div class="ubercontainer">
        <div class="para"><h1>Rooster</h1><p>
        
        <form action="rooster.php" target="_blank" onsubmit="return controle(this)">
            <label for="leerlingnr">Voer je leerlingnummer in:</label> <input type="text" name="inputbox" value="leerlingnummer hier" id="leerlingnr">
            <input type="submit" value="Bekijk">
        </form>
    </div>
</div>
</body>
</html>

Dat is een stuk korter en makkelijker... (Dit was dus een voorbeeldje van iets dat ik eens in elkaar geprutst heb

)

[ Voor 92% gewijzigd door Technicality op 27-03-2006 02:15 ]

maandag 27 maart 2006 02:17

Acties:

MAZZA

Barbie is er weer!

Njah het kan wel wat makkelijker opzich.

HTML:

<div id="box">
    <ul>
        <li>Naam</li>
        <li class="right">Datum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

Cascading Stylesheet:

#box {
    border: 1px solid black;
    width: 20em;
    margin: 0;
    padding: 0;
}
#box ul {
    margin: 0;
    padding: 0;
    list-style-type:none;
}
#box ul li {
    float: left;
    width: 50%;
    border-bottom: 1px solid black;
}
.right {
    text-align: right;
}

Kan vast nog wel netter..

maandag 27 maart 2006 12:01

Acties:

Marc

Topicstarter

Technicality: dat van die externe css wist ik eigenlijk wel, dat en doe ik ook, maar ik dacht juist dat jullie het makkelijker zouden vinden om alles ineen te hebben

MAZZA: die werkt inderdaad, bedankt!
maar ik wil eigenlijk wel wat padding kunnen hebben zonder dat de border-bottom in die UL te kort wordt, en dat gaat hier niet helemaal goed...

maandag 27 maart 2006 12:04

Acties: