[gelöst] div in zwei spalten mit css
Eingetragen von reggaefish (190)am 25.02.2009 - 11:52 Uhr in
hallöchen,
mal wieder eine kleine (große?) frage:
ich hab mit cck einen neuen inhaltstyp erstellt, der ca. 10 felder enthält. mal bild, mal text. (es geht um ein produkt)
5 dieser felder sind 400px breit, 5 sind 300 px breit, so dass zwei gut nebeneinander passen.
der inhalt ist bei den meisten der divs variabel in der menge. d.h. es kann mal eine zeile sein, mal aber auch 20.
jetzt hätte ich gerne, dass 5 dieser felder immer links untereinander, die anderen rechts untereinander auf der seite angeordnet werden.
ich floate mich hier gerade zu tode, vielleicht hat einer nen kleinen tip, wies einfacher geht...
im prinzip kann man die frage runterbrechen auf:
wie schaffe ich es, dass 10 divs in 2 spalten angeordnet werden.
vielleicht hat einer ne idee...
grüße und danke
- Anmelden oder Registrieren um Kommentare zu schreiben
Styling
am 03.03.2009 - 15:24 Uhr
Moin!
<div class="container"><div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="container-item">...</div>
<div class="clear" />
</div>
.container { width: 720px; }.container-item {
float: left;
display: block;
margin: 10px 9px;
padding: 0;
}
.clear {
clear: both;
}
So in etwa sollte das funktionieren. Wenn jetzt zwei aufeinanderfolgende "container-item" eine Breite <= 700px haben, solltest Du immer zwei Einträge nebeneinander sehen.
hth,
Stefan
hi, erstmal danke für die
am 03.03.2009 - 16:04 Uhr
hi,
erstmal danke für die antwort.
leider funzt es so nicht.
bzw. erstmal von vorne:
cck > inhaltstyp produkt.
10 felder.
5 davon sollen IMMER links sein,
5 davon IMMER rechts.
=> nich immer haben alle felder inhalt.
und da liegt das problem. (zumindest für mich ;-) )
sind nämlich auf der linken seite alle felder ausgefüllt, auf der rechten aber nur das 1. und das 5., dann richtet sich das erste (rechts) an der oberkante vom ersten auf der linken seite aus. das 5. (rechts) richtet sich an der oberkante vom linken 5. aus.
sprich, da entsteht eine lücke auf der rechten seite...
ich hoff es war einigermassen verständlich ;-)
was ich gen hätte, ist dass im prinzip 2 spalten entstehen, wo jeweils 5 divs drin sind, die sich einfach untereinander anordnen.
technisch is mir das auch alles klar, bzw. ich wüsste wie ich es von hand coden kann.
mein wirkliches problem is also:
wie bekomme ich die ersten 5 felder in ein div und die zweiten 5 felder in ein anderes div.
in php bin ich nich so fit, dass ich da irgendwelche sachen hacken könnte ;-)
ich hoff ich hab einigermaßen verständlich erklärt worums geht... ;-)
vielleicht steh ich aber auch dermaßen aufm schlauch... ;-)
grüße und danke
-------------------------------------------------
arguing on the internet is like competing in the special olympics
- even if you win, you are still retarded.
so, problem gelöst. ein
am 16.03.2009 - 16:14 Uhr
so, problem gelöst.
ein einarbeiten ins anfänglich doch recht unübersichtliche Modul "Contemplate" hat den stein ins rollen gebracht.
der dort erzeugte code sieht in etwa so aus:
<div id="left_content">
<?php print $node->content['field_over_de']['#children'] ?>
<?php print $node->content['field_prod_tech_data']['#children'] ?>
<?php print $node->content['field_prod_technology']['#children'] ?>
<?php print $node->content['field_prod_ship']['#children'] ?>
</div>
<div id="right_content">
<?php print $node->content['field_prod_img']['#children'] ?>
<?php print $node->content['field_prod_labels']['#children'] ?>
<?php print $node->content['field_prod_serv']['#children'] ?>
<?php print $node->content['field_prod_opt']['#children'] ?>
</div>
damit werden dann alle felder im linken div untereinander dargestellt, eben so im rechten.
sind felder leer, führt das nicht zu abständen usw. sondern "volle" felder rutschen einfach nach "oben"
so far, vielleicht hilfts ja de einen oder anderen weiter...
grüße
-------------------------------------------------
arguing on the internet is like competing in the special olympics
- even if you win, you are still retarded.