[Erledigt] CSS: Elemente nebeneinander anordnen

14.10.2005, 10:16

Hi Leute!

Ich versuche gerade 3 Bilder mit Text darunter per CSS nebeneinander anzuordnen.
Meinen Versuch könnt ihr auch da ansehen:
http://wolfib.wo.funpic.de/

Ausschnitt des Stylesheets:

Code:

div#Home_Cont div {
  display:inline;
}
div#Home_Cont p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  color: #333333;
}

Wenn ich das richtig verstanden habe klappt das mit display:inline. Ich kann zwar z.B. den Text und das Bild nebeneinander anordnen aber die Bilder nebeneinander klappt nicht. Was mach ich da falsch?

14.10.2005, 11:53

machs doch einfach mit einer tabelle

Code:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

DiBo33 · 14.10.2005, 13:31

Beispiel:
3 Bilder nebeneinander jeweils 150 Pixel breit und eine Beschreibung (oder Link) unten.

Code:

<style type="text/css">
ul.bld { list-style-type:none;float:left;margin:0;padding:0;width:510px; }
ul.bld li { float:left;margin:0px 10px 7px 2px;font-size:9px; }
ul.bld img { display:block;width:150px;height:113px;border:0; }
</style>
<ul class="bld">[*][img]bild[/img]Bild1[*][img]bild[/img]Bild2[*][img]bild[/img]Bild3[*][img]bild[/img]Bild4[*][img]bild[/img]Bild5[/list]

17.10.2005, 09:55

@karl-150:
Nein bitte keine Tabellen fürs Layout. Bin gerade dabei das umzustellen!

@DiBo33:
Ja, mit float:left funktionierts! Aber soweit ich das verstanden habe ist dafür display:inline gedacht oder? Zumindest kann ich damit Bild und Text nebeneinander anordnen.

Wo sind die CSS Experten?

17.10.2005, 10:03

wenn du weg von tabellen willst dann benutz <div>s
da kannst du genau bestimmen wo was sein soll.

aber die lösung mit float sollte auch passen.

mfg

17.10.2005, 10:06

Ich verwende ja divs. Die werden aber untereinander angezeigt!

17.10.2005, 10:12

probier mal das

PHP-Code:

  HTML:

         <div id="bild1"> </div>

         <div id="bild2"> </div>

 
CSS:

        #bild1

{

    background: transparent url(*1.jpg) top no-repeat; 

    position: absolute; 

    top: 10px; 

    right: 210px;

}

        #bild2

{

    background: transparent url(*2.jpg) top  no-repeat; 

    position: absolute; 

    top: 10px; 

    right: 110px;

}

da findest du zwar keine Hilfe aber Anregungen:
www.csszengarden.com

DiBo33 · 17.10.2005, 13:09

Zitat:

Zitat von wolfi_b

Ja, mit float:left funktionierts! Aber soweit ich das verstanden habe ist dafür display:inline gedacht oder?

Mitnichten

Anwendbar auf: Alle außer positionierte Elemente

also sowohl inline als auch block

http://css4you.de/float.html

Zitat:

Zitat von wolfi_b

Zumindest kann ich damit Bild und Text nebeneinander anordnen.

Bei deiner Anordnung handelt es sich eindeutig um eine Liste von Elementen, warum also nicht auch eine solche verwenden?

17.10.2005, 14:32

Hm aber das sind ja gar keine absolut positionierten Elemente!?

Aber das mit der Liste werde ich ausprobieren.

DiBo33 · 17.10.2005, 14:35

Zitat:

Zitat von wolfi_b

Hm aber das sind ja gar keine absolut positionierten Elemente!?

Ja eben, desshalb darfst du ja auch float nutzen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Div Container nebeneinander anordnen	tomtaz	HTML, Usability und Barrierefreiheit	10	04.06.2008 12:45
Welche Elemente B sind ähnlich dem Element A	Anwender27	Scriptbörse	7	01.05.2008 11:45
DIV anordnen	stefan a	HTML, Usability und Barrierefreiheit	6	24.04.2008 08:28
block elemente nebeneinander		HTML, Usability und Barrierefreiheit	2	30.07.2005 12:12
Tabellen Inhalt nebeneinander auslesen ?		PHP Tipps 2005-2	6	01.07.2005 14:21
Daten auslesen und nebeneinander wiedergeben		PHP Tipps 2005-2	4	28.06.2005 13:44
[Erledigt] XML mit PHP - alles weg bis auf die veränderten Elemente?		PHP-Fortgeschrittene	2	22.06.2005 18:39
DIVs nebeneinander	freitz	HTML, Usability und Barrierefreiheit	4	21.04.2005 22:47
[Erledigt] Grapische Elemente		PHP-Fortgeschrittene	6	18.04.2005 18:19
einzelne elemente eines arrays gehn verloren bei "inclu		PHP Tipps 2005	2	16.03.2005 23:32
[Erledigt] 2 divs nebeneinander		HTML, Usability und Barrierefreiheit	8	12.01.2005 17:27
[Erledigt] drei divs nebeneinander		HTML, Usability und Barrierefreiheit	5	10.01.2005 20:27
Alle dynamisch erstellen Elemente verschicken		HTML, Usability und Barrierefreiheit	3	23.09.2004 15:38
[Erledigt] Tabellen nebeneinander und nicht untereinander		HTML, Usability und Barrierefreiheit	7	21.07.2004 21:57
Tabellen nebeneinander?		HTML, Usability und Barrierefreiheit	24	14.06.2004 16:17

14.10.2005, 10:16
Gast Beiträge: n/a	[Erledigt] CSS: Elemente nebeneinander anordnen Hi Leute! Ich versuche gerade 3 Bilder mit Text darunter per CSS nebeneinander anzuordnen. Meinen Versuch könnt ihr auch da ansehen: http://wolfib.wo.funpic.de/ Ausschnitt des Stylesheets: Code: div#Home_Cont div { display:inline; } div#Home_Cont p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; color: #333333; } Wenn ich das richtig verstanden habe klappt das mit display:inline. Ich kann zwar z.B. den Text und das Bild nebeneinander anordnen aber die Bilder nebeneinander klappt nicht. Was mach ich da falsch?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.10.2005, 11:53
Gast Beiträge: n/a	machs doch einfach mit einer tabelle Code: <table> <tr> <td></td> <td></td> <td></td> </tr> </table>

17.10.2005, 09:55
Gast Beiträge: n/a	@karl-150: Nein bitte keine Tabellen fürs Layout. Bin gerade dabei das umzustellen! @DiBo33: Ja, mit float:left funktionierts! Aber soweit ich das verstanden habe ist dafür display:inline gedacht oder? Zumindest kann ich damit Bild und Text nebeneinander anordnen. Wo sind die CSS Experten?

17.10.2005, 10:03
Gast Beiträge: n/a	wenn du weg von tabellen willst dann benutz <div>s da kannst du genau bestimmen wo was sein soll. aber die lösung mit float sollte auch passen. mfg

17.10.2005, 10:06
Gast Beiträge: n/a	Ich verwende ja divs. Die werden aber untereinander angezeigt!

17.10.2005, 10:12
Gast Beiträge: n/a	probier mal das PHP-Code: `HTML: <div id="bild1"> </div> <div id="bild2"> </div> CSS: #bild1 { background: transparent url(1.jpg) top no-repeat; position: absolute; top: 10px; right: 210px; } #bild2 { background: transparent url(2.jpg) top no-repeat; position: absolute; top: 10px; right: 110px; }` da findest du zwar keine Hilfe aber Anregungen: www.csszengarden.com

17.10.2005, 14:32
Gast Beiträge: n/a	Hm aber das sind ja gar keine absolut positionierten Elemente!? Aber das mit der Liste werde ich ausprobieren.