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

Bild macht was es will !

Niklas

Niklas

Neues Mitglied
Hallo,

Ich bin echt am verzweifeln mich regt seit über 2 Stunden ein Bild auf das einfach nicht das machen will was ich mache will !

Die Rede ist von dem Bild das unter der gelb gefärbten Text ist auf dieser Seite http://w-d-b-testgelände.de/testen/testen.html ! Das soll genauso wie das gleiche Bild sein nur eben rechts positioniert.

Css Teil

Code: 
.bild1 {
margin: 0px 0px 0px 40px;
float:left;
}
.bild2 {
margin: 0x 0px 0px 600px;
float:left;
}
.schrift1 {
margin: 0px 0px 0px 290px;
}
Legende:

bild 1 Linkes Bild
bild 2 Das Problem Bild
schrift 3 Der Gelbe Text

Html Teil

Code: 
<img class=bild1 src="../Bilder/testsss2.png" alt="wow-bild" /><br><div class=schrift1 style="background-color:yellow;width:400px;height:auto;">Herzlich Wilkommen<br>Dies hier wird eine WOW Fanseite !</div><img class=bild2 src="../Bilder/testsss2.png" alt="wow-bild" />

FG Niklas
 
Bei mir auch nicht ist aber alles richtig geschrieben musst einfach wen die Fehlermeldung kommt in die Adressleiste klicken und Enter dan gehts !
 
Setze die CSS-Eigenschaft "float" auf "right" und schiebe den HTML-Code des betreffenden Bildes vor die beiden anderen HTML-Tags die auf dieser Zeile stehen. Und nimm das <br /> raus.
 
Hallo,

Ist immernoch nicht an der Richtigen stelle ich begreif das einfach nicht da ist doch Platz !

Css Teil

Code: 
.bild1 {
margin: 0px 0px 0px 40px;
float:left;
}
.bild2 {
margin: 0x 40px 0px 0px;
float:right;
}
.schrift1 {
margin: 0px 0px 0px 290px;
}

Html Teil

Code: 
<img class=bild1 src="../Bilder/testsss2.png" alt="wow-bild" /><br><div class=schrift1 style="background-color:yellow;width:400px;height:auto;">Herzlich Wilkommen dies hier wird eine WOW Fanseite !</div><img class=bild2 src="../Bilder/testsss2.png" alt="wow-bild" />

FG Niklas
 
HTML: 
position:relative;top:-50px;
left:180px;
Bei der klasse "bild2"
Nicht die eleganteste Methode aber funktioniert
Und mach das <br /> raus
 
ok klappt danke

Aber wen ich jetzt einen Absatz machen will in dem Text wie mach ich das ich darf ja kein <br> benutzen !
 
Zuletzt bearbeitet:
Niklas schrieb:
ok klappt danke

Aber wen ich jetzt einen Absatz machen will in dem Text wie mach ich das ich darf ja kein <br> benutzen !
Zum Vergrößern anklicken....
Klar darfst du im Text einen Umbruch mit <br erzeugen.
Aber deine Auszeichnung:
HTML: 
<div class=schrift1 style="background-color:yellow;width:400px;height:auto;">Herzlich Wilkommen dies hier wird eine WOW Fanseite !</div>
Ist semantisch falsch!
Wenn es eine Überschrift ist, nimmst du h1-8 (jeh nach Bedeutung, h1=erste Überschrift, h2 die zweite etc...)

Text zeichnest du mit <p aus. Und da drinne ist es richtig, wenn man <br benutzt um einen Umbruch zu erzielen.
Wenn du einen richtigen Absatz machen möchtest, benutzt du <p>vieltext</p><p>vieltext mit absaatz zum anderen text</p> und arbeitest mit margin/padding.

Mfg
 
okok,

Mich machen diese Bilder Fertig :D Schon habe ich ein bisschen mehr Text geschrieben verschiebt sich das Bild schonwieder versuche das Bild wieder an die Position zu rücken scheitern !

Schaut selber : http://w-d-b-testgelände.de/testen/testen.html

Code: 
<img class=bild1 src="../Bilder/testsss2.png" alt="wow-bild" /><div class=schrift1 style="background-color:#2F4F4F;width:400px;height:auto;"><p>Herzlich Wilkommen dies hier wird eine WOW Fanseite !</p><br><p>Diese Seite Befindet sich noch im Aufbau!</p></div><img class=bild2

Was habe ich jetzt schonwieder Falsch gemacht ?

FG Niklas
 
Oh man .. ist doch simpel, wie von mir vorhin gesagt:

HTML
Code: 
<div id="wrapper">
<img alt="wow-bild" src="../Bilder/wow-bild3.png"/>
<img class="bild2" alt="wow-bild" src="../Bilder/testsss2.png"/>
<img class="bild1" alt="wow-bild" src="../Bilder/testsss2.png"/>
<img role="presentation" class="twisty"><div class="schrift1" style="background-color: rgb(47, 79, 79); width: 400px; height: auto;">
</div>

CSS
Code: 
bild2 {
float:right;
margin-right:40px;
}

Rest so lassen wie du es hast.
 
Danke threadi,

klappt fast hab das mal umgetauscht
Code: 
<div id="wrapper">
<img alt="wow-bild" src="../Bilder/wow-bild3.png"/>
<img class="bild1" alt="wow-bild" src="../Bilder/testsss2.png"/>
<img role="presentation" class="twisty"><div class="schrift1" style="background-color: rgb(47, 79, 79); width: 400px; height: auto;"><p>Herzlich Wilkommen dies hier wird eine WOW Fanseite !</p><br><p>Diese Seite Befindet sich noch im Aufbau!</p>
<img class="bild2" alt="wow-bild" src="../Bilder/testsss2.png"/>
</div>
Jetzt gehört aber das zweite Bild mit zu dem Textfeld ! Wie kann man angeben das das Textfeld zuende ist und das es ein Alleinstehendes Bild ist ?

Schau hier : http://w-d-b-testgelände.de/testen/testen.html

FG Niklas
 
Dann darfst Du diesen img-Tag nicht innerhalb des divs platzieren, welches für die Mitte gedacht ist, sondern davor und gleichzeitig "float" auf "right" setzen.
 
Hab das div jetzt einfach am Ende beendet jetzt wird das Bild nichtmehr zum Text gezählt ist aber immernoch nicht an seinem Platz ich versteh das nicht das müsst doch laut margin und float:right; an der richtigen stelle sein.

Code: 
<div id="wrapper">
<img alt="wow-bild" src="../Bilder/wow-bild3.png"/>
<img class="bild1" alt="wow-bild" src="../Bilder/testsss2.png"/>
<img role="presentation" class="twisty">[COLOR=Red]<div[/COLOR] class="schrift1" style="background-color: rgb(47, 79, 79); width: 400px; height: auto;"><p>Herzlich Wilkommen dies hier wird eine WOW Fanseite !</p><br><p>Diese Seite Befindet sich noch im Aufbau!</p>[COLOR=Red]</div>[/COLOR]
<img class="bild2" alt="wow-bild" src="../Bilder/testsss2.png"/>
</div>

FG Niklas
 
Nicht "einfach" machen, sondern mal meinen Beitrag lesen und mitdenken. Mir scheint Du hast das Boxmodell noch nicht verstanden.
 
"float: right;" bedeutet nicht, dass das betreffende Elemente "rechts positioniert" wird, sondern dass die nachfolgenden Blockelemente links von dem Element umflossen werden. D.h. du hast den img-Tag der "float: right;" als Eigenschaft hat weiterhin (und entgegen meinen Tipps) an der falschen Stelle, denn es muss vor denen kommen die links stehen sollen.
 
Kann es sein das das ganze Problem 2 Zeilen höher ist ?

Code: 
#wrapper {
width: 980px;
margin: 0 auto; 
font-size: 20px;
[COLOR=Red]text-align: center;[/COLOR]
}
^^

ok wie gibt man Bildern eine positionierung aus der Mitte ? z.b 40 px von der mitte weg ?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben