[css] boxes onder elkaar laten alignen

[bakakaizoku]

ik zit met het volgende

er is een pagina waarop de content als volgt moet worden neergezet

[content] | [content]
[content] | [content]
[content] | [content]
[content] | [content]
[content] | [content]

die | is een lijn die in het midden loopt om het zeg maar voor het oog te dividen..
ik krijg het makkelijk voor elkaar om "[content] | [content]" te krijgen.

alleen als ik er dan een volgende bij wil zetten, dan of overlapt hij de 1e, of het komt als

code:

[content] |
          | [content]

eruit.

de css die ik gebruik:

Cascading Stylesheet:

 .portfolioitem {
    position: static;
    width: 230px;
    border-width: 0px;
    background-color: #FFCC66;
}
 .portfolioitem:hover {
    width: 230px;
    border-width: 0px;
    background-color: white;
}
 #plinks {
    left: 0px;
    position: absolute;
}
 #prechts {
    left: 265px;
    position: absolute;
}

anyone?

[crisp]

de # verraadt dat je id's gebruikt; id's moeten uniek zijn in een document, ik denk dat je beter met classes kan werken. Ik weet verder ook niet hoe je HTML eruit ziet; ik neem aan dat .portfolioitem een container is? Die is dan eigenlijk niet breed genoeg, want je prechts gaat al buiten de box.

[bakakaizoku]

de html

HTML:

<div id="tekst" style="position: absolute; top: 0px; left: 0px; margin: 5px;">
     <div class="portfolioitem" id="plinks">

      [img]"pf/nimsay-tn.png"[/img]
      <div class="lijntje"></div>
      Client: Nimsay-Networks (<a href="http://www.nimsay-networks.com" target="_blank">url</a>)<br />
      What?: Website<br />
      Status: In development<br />
      <div class="lijntje"></div>

     </div>
     <div class="portfolioitem" id="prechts">
      [img]"pf/nimsay-tn.png"[/img]
      <div class="lijntje"></div>
      Client: Nimsay-Networks (<a href="http://www.nimsay-networks.com" target="_blank">url</a>)<br />
      What?: Website<br />
      Status: In development<br />

      <div class="lijntje"></div>
     </div>
     <div class="portfolioitem" id="plinks">
      [img]"pf/nimsay-tn.png"[/img]
      <div class="lijntje"></div>
      Client: Nimsay-Networks (<a href="http://www.nimsay-networks.com" target="_blank">url</a>)<br />
      What?: Website<br />

      Status: In development<br />
      <div class="lijntje"></div>
     </div>
     <div class="portfolioitem" id="prechts">
      [img]"pf/nimsay-tn.png"[/img]
      <div class="lijntje"></div>
      Client: Nimsay-Networks (<a href="http://www.nimsay-networks.com" target="_blank">url</a>)<br />

      What?: Website<br />
      Status: In development<br />
      <div class="lijntje"></div>
     </div>
    </div>

de div tekst is de container voor alles, de class portfolioitem is waar alle standaard settings in staan voor een div, en #prechts en #plinks moesten aangeven waar hij hoort te staan, links of rechts..

[ Voor 25% gewijzigd door bakakaizoku op 22-11-2003 14:37 ]

[crisp]

ik vind dit typisch iets dat je met floats zou kunnen oplossen. En zoals ik al zei: je kan id's niet hergebruiken, met een id identificeer je 1 enkel element in je document.
Je kan gewoon meerdere classes aan een element toekennen, dus in jouw geval is het ook overbodig:

HTML:

<element class="class1 class2 class3">foo</element>

[bakakaizoku]

Floats werken, danke

[bakakaizoku]

Ik blijf bezig met die boxes zeg

zit nu met ongeveer hetzelfde probleem, maar dan als volgt

Ik wil rijen maken van 3 boxes, dus

[] [] []
[] [] []
[] [] []

In IE gaat dit goed, alleen mozilla gooit het door elkaar

code:

[][][]
    []
[][]

Wat is hier de fout ?

Cascading Stylesheet:

 .boxjes {
    width: 150px;
    margin-left: 20px;
    margin-top: 10px;
    height: 30px;
    border-style: dashed;
    border-width: 1px;
    position: relative;
    margin-right: 20px;
    float: left;
    font-size: 10pt;
    text-align: center;
}

Ik heb overigens al geprobeerd ze in een container te zetten per 3, maar dat mocht ook niet baten..

[faabman]

denk dat dat wat te maken heeft met het boxing-model van mozilla, die telt borders en bij mijn weten ook margin op bij de width die je opgeeft...

i.e. doet dit niet...

wat wel eens werkt is het opgeven van een max-width... (is een property die niet door i.e. wordt herkent)

[bakakaizoku]

FvKnijff schreef op 25 november 2003 @ 21:59:
denk dat dat wat te maken heeft met het boxing-model van mozilla, die telt borders en bij mijn weten ook margin op bij de width die je opgeeft...

i.e. doet dit niet...

wat wel eens werkt is het opgeven van een max-width... (is een property die niet door i.e. wordt herkent)

Hielp niet, nja, ik kreeg wel op een gegeven moment

code:

[][][]
[][]
    []

tot ik de container z'n maxwidth met 1px verhoogde, toen ging het weer mis..

[bakakaizoku]

Nou met z'n 3en op werk izjn we erachter gekomen wat het nou was..

na elke 3e box, een <br style="clear: both" /> en het probleem was verholpen...
pfffft (c)

[grizzlybear]

Gezien het feit ik ook met zoiets bezig ben, wil ik vragen of je je CSS bestand en eventueel de HTML zou willen posten. Ik kom er zelf met die floats niet helemaal uit.

[bakakaizoku]

@grizzlybear

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 html, body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
    font-size: 12pt;
    margin-top: 10px;
    margin-bottom: 10px;
}
 a {
    text-decoration: none;
    color: #990000;
    font-weight: bold;
}
 a:hover {
    background-color: #CCCCCC;
    color: #000000;
}
 .centerdiv {
    width: 800px;
    margin-left: -400px;
    left: 50%;
    position: absolute;
    border-width: 0px;
}
 .menu {
    width: 800px;
    background-color: #CCCCCC;
    text-align: left;
    font-size: 9pt;
    height: 9,2pt;
}
 .menu a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
 .menu a:hover {
    background-color: #999999;
    color: white;
}
 .rightdiv {
    float: right;
    position: relative;
    border-left-style: dashed;
    border-left-width: 1px;
    padding-left: 5px;
    margin-right: 2px;
    text-align: right;
    font-size: 0px;
}
 .packages {
    width: 150px;
    max-width: 170px;
    margin-left: 20px;
    margin-top: 10px;
    height: 30px;
    border-style: dashed;
    border-width: 1px;
    position: relative;
    margin-right: 20px;
    float: left;
    font-size: 10pt;
    text-align: center;
}
 .packages:hover {
    background-color:#CCCCCC;
}
 .packages:hover b {
    color: darkred;
}
 .packagesprices {
    color: darkred;
    font-weight: bold;
    font-style:italic;
}
</style>
</head>
<body>
<div class="centerdiv">
 <div style="border-left-style: solid; border-right-style: solid; border-top-style: solid; border-bottom-style: dashed; border-width: 1px; border-color: #999999; width:800px;">
  [img]"i/header.png"[/img]<div class="menu"><a href="?p=news">News </a>|<a href="?p=about"> About us </a>|<a href="?p=services"> Services </a>|<a href="?p=support"> Support </a>|<a href="?p=order"> Order </a>|<a href="?p=contact"> Contact </a>|</div>

 </div>
 <div style="position: absolute; top: 50px; border-left-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-width: 1px; border-color: #999999; width:800px;">
  <div class="rightdiv">
   [img]"i/feet.jpg"[/img]<br />
   [img]"i/c3.png"[/img]<br /><br />
   [img]"i/tenner.jpg"[/img]<br />
   [img]"i/c1.png"[/img]<br /><br />
  </div>
 We offer various packages, each designed to meet your needs. Below are the packages we offer. In case you want a custom package,
please <a href="?p=support">contact support</a>.<br /><br />

 <div class="packages" style="height: 254px;">
 <div style="border-bottom-style: dashed; border-bottom-width: 1px; width: 150px; background-color: #666666; color: white; font-weight:bold; font-size: 9pt; text-align: center">Basic Webhosting</div>
 <b>100MB</b> Webspace<br />
 <b>5</b> Pop Mailboxes<br />
 Unlimited Aliases/Forwards<br />

 Auto Responders<br />
 <b>5GB</b> Monthly Transfer<br />
 CGI-Bin/PHP/Perl Support<br />
 <b>1x</b> MySQL Database<br />
 SSH Shell Access<br />

 Web based control panel for easy management<br />
 <div class="packagesprices">&pound;10 Per Month<br />
 &pound;100 Per Year</div>
 </div>

 <div class="packages" style="height: 270px;">
 <div style="border-bottom-style: dashed; border-bottom-width: 1px; width: 150px; background-color: #666666; color: white; font-weight:bold; font-size: 9pt; text-align: center">Intermediate Hosting</div>

 <b>200MB</b> Webspace<br />
 <b>20</b> Pop Mailboxes<br />
 Unlimited Aliases/Forwards<br />
 Auto Responders<br />
 <b>10GB</b> Monthly Transfer<br />

 CGI-Bin/PHP/Perl Support<br />
 <b>3x</b> MySQL Database<br />
 SSH Shell Access<br />
 Web based control panel for easy management<br />
 <div class="packagesprices">&pound;15 Per Month<br />

 &pound;150 Per Year</div>
 </div> 

 <div class="packages" style="height: 269px;">
 <div style="border-bottom-style: dashed; border-bottom-width: 1px; width: 150px; background-color: #666666; color: white; font-weight:bold; font-size: 9pt; text-align: center">Advanced Hosting</div>
 <b>300MB</b> Webspace<br />
 <b>35</b> Pop Mailboxes<br />

 Unlimited Aliases/Forwards<br />
 Auto Responders<br />
 <b>15GB</b> Monthly Transfer<br />
 CGI-Bin/PHP/Perl Support<br />
 <b>5x</b> MySQL Database<br />

 SSH Shell Access<br />
 Web based control panel for easy management<br />
 <div class="packagesprices">&pound;20  Per Month<br />
 &pound;200 Per Year</div>
 </div>

 <br style="clear: both;" />

 <div class="packages" style="height: 269px;">

 <div style="border-bottom-style: dashed; border-bottom-width: 1px; width: 150px; background-color: #666666; color: white; font-weight:bold; font-size: 9pt; text-align: center">Advanced Hosting</div>
 <b>300MB</b> Webspace<br />
 <b>35</b> Pop Mailboxes<br />
 Unlimited Aliases/Forwards<br />
 Auto Responders<br />

 <b>15GB</b> Monthly Transfer<br />
 CGI-Bin/PHP/Perl Support<br />
 <b>5x</b> MySQL Database<br />
 SSH Shell Access<br />
 Web based control panel for easy management<br />

 <div class="packagesprices">&pound;20  Per Month<br />
 &pound;200 Per Year</div>
 </div>

 <div class="packages" style="height: 269px;">
 <div style="border-bottom-style: dashed; border-bottom-width: 1px; width: 150px; background-color: #666666; color: white; font-weight:bold; font-size: 9pt; text-align: center">Advanced Hosting</div>
 <b>300MB</b> Webspace<br />

 <b>35</b> Pop Mailboxes<br />
 Unlimited Aliases/Forwards<br />
 Auto Responders<br />
 <b>15GB</b> Monthly Transfer<br />
 CGI-Bin/PHP/Perl Support<br />

 <b>5x</b> MySQL Database<br />
 SSH Shell Access<br />
 Web based control panel for easy management<br />
 <div class="packagesprices">&pound;20  Per Month<br />
 &pound;200 Per Year</div>

 </div>

 <div class="packages" style="height: 269px;">
 <div style="border-bottom-style: dashed; border-bottom-width: 1px; width: 150px; background-color: #666666; color: white; font-weight:bold; font-size: 9pt; text-align: center">Advanced Hosting</div>
 <b>300MB</b> Webspace<br />
 <b>35</b> Pop Mailboxes<br />

 Unlimited Aliases/Forwards<br />
 Auto Responders<br />
 <b>15GB</b> Monthly Transfer<br />
 CGI-Bin/PHP/Perl Support<br />
 <b>5x</b> MySQL Database<br />

 SSH Shell Access<br />
 Web based control panel for easy management<br />
 <div class="packagesprices">&pound;20  Per Month<br />
 &pound;200 Per Year</div>
 </div> </div>
</div>
</body>

</html>

[disjfa]

voor welke browser maak je deze pagina eigenlijk? hij is verschillend in ie/moz/opera

verder is de code ook niet echt wat je zegt.... netjes.... overal styles erin gegooit.....