• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder nebeneinander anordnen ?

Niklas

Niklas

Neues Mitglied
Hallo,

Ich bekomme es nicht hin auf dieser Seite Test die 3 Unteren Bilder nebeneinander zu bekommen egal was ich mache, gibt es da einen Code der den Zeilenumbruch verhintert ?

Gruß Niklas
 
Werbung:
bette die 3 divs mal in einem weiteren ein und dann gebe den 3 div den style="float:left; width=???px"
achte darauf, dass das einbettende div in der width größer ist als die summe der 3.
 
Du musst alle 3 Elemente links floaten und dann noch die Außenabstände links und rechts etwas verringern. Dann passt es eigentlich. Clearen nicht vergessen.
 
Werbung:
das bekommst du mit float:left hin


Ich würde diesen drei Bildern die Klasse "bild" geben und darüber stylen, und über die id der Bilder nur die unterschiedliche Hintergründe (ich gehe ma davon aus, dass da unterschiedliche Sachen reinkommen) festlegen. Dadurch musst du nicht bei jeder id einzeln z.B. den margin o.A. ändern.

Code: 
.bild
{
[COLOR=#C80000]  margin[/COLOR]: 10px 20px 10px 20px;
[COLOR=#C80000]  width[/COLOR]: 303px;
[COLOR=#C80000]  height[/COLOR]: 90px;
[COLOR=#C80000]  display[/COLOR]: block;
[COLOR=#C80000]  float[/COLOR]: left;
}
#bild-links
{ [COLOR=#C80000]background[/COLOR]: url([URL="http://weltderforen.de/bilder/mitte.jpg"]../bilder/mitte.jpg[/URL]); }
#bild-mitte
...
HTML: 
<div class="bild" id="bild-links"></div>
 
Werbung:
Dann mach mal die anderen Fehler weg, manchmal sind die Meldung eine Folge von anderen Fehlern. Auf jeden Fall ist ein </div> zu viel und der abschließende / beim Link ist bei deinem DOCTYPE nicht erlaubt.
 
So das eine Div ist weg war echt ein Fehler und hier beim Link im Doktype welches / muss da weg ?

"http://www.w3.org/TR/html4/loose.dtd">
 
Werbung:
nicht im DOCTYPE. Bei der Verwendung von HTML 4.01 strict darf ein Element nicht die Form <xyz ... /> besitzen
Code: 
<link rel=... [U][B]/[/B][/U]>
Der Slash muss wech
 
Bei deinem DOCTYPE darf der <link> nicht mit einem / enden, also statt <link .... /> nur <link ....>, das schreibt der Validator aber doch deutlich.
 
Achso Achso ja mein Fehler

Habs jetzt behoben sind jetzt alle Fehler weg nurnoch 2 Warnings

Naja zurück zu Thema

Wieso sind die Bilder jetzt aus der äußeren Box ich hab die doch nur links gefloatet !
 
Werbung:
Werbung:
threadi schrieb:
Mit über 1000 Beiträgen hast Du die CSS-Eigenschaft clear noch nicht entdeckt? Wie mans macht: Firefox stellt Hintergrund nicht vollständig dar
Zum Vergrößern anklicken....

Habs anscheindend noch nie gebraucht :p

So habs mal durchgelesen und eingesetzt

Code: 
<div id="bild-links">[COLOR=#ff0000]<div style="clear: both;">[/COLOR]</div></div><div id="bild-mitte">[COLOR=#ff0000]<div style="clear: both;"></div>[/COLOR]</div><div id="bild-rechts"></div>

Code: 
#bild-mitte {
margin: 10px 15px 10px 15px;
background: url(../bilder/mitte.jpg);
width: 303px;
height: 90px;
float: left;
[COLOR=#ff0000]overflow: auto;
[/COLOR]}
#bild-mitte:hover {
background: url(../bilder/beeindruckend.png);
}
#bild-rechts {
margin: 10px 10px 10px 10px;
background: url(../bilder/mitte.jpg);
width: 303px;
height: 90px;
float: left;
[COLOR=#ff0000]overflow: auto;
[/COLOR]}
#bild-rechts:hover {
background: url(../bilder/beeindruckend.png);
}
#bild-links {
margin: 10px 10px 10px 10px;
background: url(../bilder/mitte.jpg);
width: 303px;
height: 90px;
float: left;
[COLOR=#ff0000]overflow: auto;
[/COLOR]}
#bild-links:hover {
background: url(../bilder/beeindruckend.png);
}

Nur ist malwieder irgentwas Falsch :(
 
Werbung:
Erst die 3 Bilder und am Ende nach den Bildern ein einziges MAL <div style="clear: both;">
Nicht nach jedem Bild clear, sonst hebst ja den float wieder auf.
Hab ich das denn mit ERST (alles) floaten, DANN 1x Clearen so undeutlich gesagt??????
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben