meerdere div's horizontaal centreren - Softwareontwikkeling

maandag 12 september 2005 15:51

Acties:

Topicstarter

Dacht ik het CSS box model een beetje te begrijpen...

Voor een pagina met adresgegevens wil ik het postadres, postbusadres en de overige gegevens mooi presenteren, door het geheel te centreren onder een afbeelding. Ook wil ik de bezoekers de gelegenheid geven om een bepaald adres in één actie te kopiëren.

De afbeelding staat gecentreerd in een container div met vaste breedte (width: 600px).

De contactgegevens wil ik in vier div's onderbrengen, waarna deze vier als totaal ook gecentreerd moeten komen te staan in de container div. Wat ik ook probeer, het gewenste resultaat komt niet in beeld.

Wie snap er wel hoe browsers het CSS box model uitvoeren en kan mij op weg helpen?

Overigens lukt het wel met een tabel, maar volgens diverse stijlgidsen is dat eigenlijk niet gewenst.

De HTML:

XML:

!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>
  <title>Contact  box test with stylesheets</title>
  <link rel="stylesheet" type="text/css" href="boxtest2.css" />
  </head>

  <body>
     <div class="container">
        <div class="col_a">
            NNN<br/>
            Aaaaaaaaaaaaa<br/>
            Bbbbbbbbbbb bbb<br/>
            1234 AB Wwwwwww
        </div>
        
        <div class="col_b">
            NNN<br/>
            <br/>
            Postbus nn<br/>
            1234 AA Wwwwww
        </div>
        
        <div class="col_c">
            NNN<br/>
            Telefoon:<br/>
            Fax:<br/>
            Email:
        </div>
        
        <div class="col_d">
            <br/>
            0123 - 456789<br/>
            0123 - 456790<br/>
            info@nnn.tld
        </div>
    </div>
  </body>
</html>

Een (niet-werkende) poging:

Cascading Stylesheet:

div.container {
    width: 600px;
    color: black;
    background-color: #C0C0C0;
    border: thin black solid;
    margin: 0;
}

div.container div {
    float: left;
    margin-right: 1em;
}

div.col_a {
    color: inherit;
    background-color: red;
    margin-left: auto;
}

div.col_b {
    color: inherit;
    background-color: green;
}

div.col_c {
    color: yellow;
    background-color: blue;
}

div.col_d {
    color: inherit;
    background-color: #ccc;
    margin-right: auto;
}

maandag 12 september 2005 15:52

Acties:

disjfa

be

Je probeert tabulaire data in div`s te smijten; Waarom

disjfa - disj·fa (meneer)
disjfa.nl

maandag 12 september 2005 16:09

Acties:

Willem

Wat is er precies tabulair aan NAW gegevens

We hebben er een

HTML:

<address>

tag voor.

[ Voor 10% gewijzigd door Willem op 12-09-2005 16:10 ]

Motor onderhoud bijhouden

maandag 12 september 2005 16:15

Acties:

Andre-85

Sid

willem169 schreef op maandag 12 september 2005 @ 16:09:
Wat is er precies tabulair aan NAW gegevens

We hebben er een
HTML:
1
<address>
tag voor.

Volgens mij is hetgeen je nu voorstelt toch niet echt de bedoeling van deze tag.

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

_bron

Lorem
Whenever we feel the need to comment something, we write a method instead. - Martin Fowler
People who think they know everything really annoy those of us who know we don't - Bjarne Stroustrup

maandag 12 september 2005 16:24

Acties:

KoKro

Topicstarter

Mijn vraag gaat over het horizontaal centreren van vier kolommen met tekst. Oorzaak van die vraag is o.a. het willen weergeven van adresinformatie op een "Contact" pagina van een bedrijf.

Volgens de W3C is de <address> tag:

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form.

Dat is niet het doel van de pagina die ik wil maken. Dit gaat over diverse kanalen waarmee een bedrijf kan worden bereikt. Hierbij komt ook een formulier waarmee direct een vraag kan worden gesteld.

maandag 12 september 2005 16:40

Acties:

StalieN

als je in de CSS effe dit veranderd:

Cascading Stylesheet:

div.container div {
    float: left;
    margin-right: 0px;
    width: 150px;
}

dan werkt het bij mij gewoon

www.stevelock.nl

maandag 12 september 2005 16:40

Acties:

Boelie-Boelie

code:

        <div class="col_c">
            NNN<br/>
            Telefoon:<br/>
            Fax:<br/>
            Email:
        </div>
        
        <div class="col_d">
            <br/>
            0123 - 456789<br/>
            0123 - 456790<br/>
            info@nnn.tld
        </div>

Dat is niet erg logisch. De aanduiding 'Telefoon' hoort overduidelijk bij '0123 - 456789', maar jij scheidt ze van elkaar. Iemand met een tekst- of speechbrowser leest/hoort waarschijnlijk:
NNN, telefoon, fax, email, 0123 - 456789, 0123 - 456790, info@nnn.tld

Ik zou dat eerst oplossen en dan pas verder gaan met de layout.

[ Voor 13% gewijzigd door Boelie-Boelie op 12-09-2005 16:42 ]

Cogito ergo dubito

maandag 12 september 2005 16:48

Acties:

StalieN

volgens mij zijn het voorbeelden..

kokro: stop je alle adresgegevens in 1 divje en heb je dan dus vier keer een 'blokje' adresgegevens op een rij of verspreid je de gegevens over meerdere divjes?

in het tweede geval is het namelijk semantisch wel juist om tabellen te gebruiken... en moet je inderdaad aan de layout sleutelen... in het eerste geval kan je het oplossen met die css

www.stevelock.nl

dinsdag 13 september 2005 09:14

Acties:

KoKro

Topicstarter

Op onze contactpagina moeten inderdaad enkele kolommen komen met de contactgegevens als postadres, bezoekadres en andere kanalen.

Het idee achter drie DIV's met deze gegevens is dat de bij elkaar horende gegevens ook als zodanig worden getagd en, zoals Boelie-Boelie aangeeft, ook in tekst/speech browsers herkenbaar wordt weergegeven.

@StalieN
Een tabel is naar mijn idee eigenlijk een vorm van layout en zou dus in de CSS thuishoren. Maar eerlijk gezegd breek ik mijn eigen regel, want inderdaad gebruik ik vierDIV's om de labels (Telefoon:, Fax: en E-mail) en de bijbehorende gegevens mooi in kolommen te kunnen weergeven.

dinsdag 13 september 2005 09:28

Acties:

DJ Buzzz

Natuurlijk is een tabel een vorm van layout, maar dus bedoeld om tabulaire data ook in een tabel te zetten... Verder zou je nog eens kunnen kijken naar b.v. het colgroup element voor als je bepaalde relaties in je tabel wilt aangeven.

dinsdag 13 september 2005 10:00

Acties:

BtM909

Watch out Guys...

Andre-85 schreef op maandag 12 september 2005 @ 16:15:
[...]

Volgens mij is hetgeen je nu voorstelt toch niet echt de bedoeling van deze tag.

[...]
_bron

En als de website over een bedrijf gaat, waarom zouden de contact gegevens niet in een <address> mogen staan? Er staat in je quote may en niet should

TS: Ik snap je vraag niet helemaal, kan je aangeven wat je anders wilt hebben dan onderstaand voorbeeld?

HTML:

<!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> 
  <title>Contact  box test with stylesheets</title> 
  <link rel="stylesheet" href="style.css" />
</head> 
<body> 
  <div id="container"> 

    <address id="adr1"> 
      NNN<br/> 
      Aaaaaaaaaaaaa<br/> 
      Bbbbbbbbbbb bbb<br/> 
      1234 AB Wwwwwww 
    </address> 

    <address id="adr2">
      NNN<br/> 
      <br/> 
      Postbus nn<br/> 
      1234 AA Wwwwww 
    </address> 

    <address id="adr3">
      NNN<br/> 
      Telefoon:<br/> 
      Fax:<br/> 
      Email: 
    </address>

    <address id="adr4"> 
      0123 - 456789<br/> 
      0123 - 456790<br/> 
      info@nnn.tld 
    </address>

    <br clear="all" />
</div>
</body> 
</html>

Cascading Stylesheet:

body{
    margin: 0;
    padding: 0;
}

address{
    font-style: normal;
    float: left;
    width: 150px;
}

#adr1{
    background-color: red;
}

#adr2{
    background-color: green;
}

#adr3{
    background-color: blue;
}

#adr4{
    background-color: gray;
}

#container{
    margin: 50px auto;
    padding: 0;
    width: 600px;
    border: 1px solid black;
}

[ Voor 13% gewijzigd door BtM909 op 13-09-2005 10:01 ]

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.

dinsdag 13 september 2005 10:11

Acties:

Michali

Geen deprecated attributes gebruiken hè

Clearen doen we vanuit de stylesheet.

Noushka's Magnificent Dream | Unity

dinsdag 13 september 2005 10:26

Acties:

BtM909

Watch out Guys...

Michali schreef op dinsdag 13 september 2005 @ 10:11:
Geen deprecated attributes gebruiken hè Clearen doen we vanuit de stylesheet.

Effe snel erin geflanst, deze opzet is ook niet klaar om te gebruiken he

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.

dinsdag 13 september 2005 11:11

Acties:

KoKro

Topicstarter

@BtM909:

Op zich is het gegeven voorbeeld wel redelijk wat ik wil.

Hier een vergelijking met hoe het er nu uitziet: Afbeeldingslocatie: http://kokro.nl/images/schermvoorbeeld.png

Afbeeldingslocatie: http://kokro.nl/images/schermvoorbeeld.png

Waar het mij om gaat is dat de afstand van de "B" in "Bedrijfsnaam" tot het plaatje gelijk is aan die van het plaatje tot en met de "r" in "Telefoonnummer". Door een hard-coded width property op te nemen gaat de boel verschuiven.

woensdag 14 september 2005 00:52

Acties:

KoKro

Topicstarter

Op mijn eigen site heb ik een bijgewerkte versie geplaatst. Hierin is rekening gehouden met het feit dat in de HTML alleen tekst met relevante mark-up is geplaatst. Alle layout wordt dan via de css geregeld. Dat is niet gemakkelijk als je het in meerdere browsers gelijkvormig wilt krijgen (ik beschik over IE6, FF 1.06 en Opera8 op WinXP)

Ook nu nog worden de adressen in FF op 100% gewrapt, terwijl de container breed genoeg is. Als ik de tekstgrootte verklein, dan past het opeens weer wel een tijdje..

Voor IE ontkom ik niet aan twee extra DIV tags, vanwege de fixed navigatiebalk (zwart, links in beeld)

Persoonlijk vind ik dat CSS nog wat te weinig mogelijkheden biedt om een goede layout te maken. Waarom moet ik de width opgeven voor de

HTML:

1	<div class="fysiek">

Zonder dat werkt de margin-left: auto niet en komt het hele blok links in beeld in FF en Opera.

woensdag 14 september 2005 01:28

Acties:

MueR

Admin Devschuur® & Discord

is niet lief

width: auto; werkt dan lekker

Anyone who gets in between me and my morning coffee should be insecure.