div & bild nebeneinander

[inetEXT]

Hallo liebe community.
Folgendes
Ich habe ein Bild und daneben soll ne Box sein diese Box soll eine width von 100% haben, das Problem ist wenn ich das mache ist die Textbox unter dem Bild und nicht daneben.

Textbox :

.servicebox{
	background-color:#1c1c1c;
	float:left;
	height:130px;
	width:100%;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#4c4c4c;
}

Bildbox :

.picbox{
	float:left;
	height:auto;
	width:auto;
	border-style:solid;
	border-width:1px;
	border-color:#999;
}

HTML code :

<div class="picbox">
	<img src="link alt="picture" style="width:130px; height:130px;"/>
</div>

<div class="servicebox">
	<div class="font10">
		BLABLABLA<br />
        <a href="bla" target="_self">bla</a>
        <a href="bla" target="_self">bla</a>
	</div>
</div>

Mit freundlichen Grüßen , inetEXT

 

[NocturnalDeath]

AW: div & bild nebeneinander

Da deine Servicebox 100% Breite hat und zwar von der gesamten Seite, rutscht sie automatisch tiefer, da du sonst bei mehr als 100% landen würdest. Wenn du die Breite der Servicebox verringerst sollte es klappen.

 

[patrick_l]

AW: div & bild nebeneinander

Strukturierung und Formatierung voneinander trennen. Eine Div ist auch wenn nicht anders angegeben 100% breit. Also musst du es nicht nochmal extra notieren. Nun zu deinem Problem. Ich würde deine Service-Box anders aufbauen.

<div id="service">
  <div class="inside">
    <!-- service content here! -->
  </div>  
</div>

/* --| CSS |-------- */
#service {background:url(pfad/zum/bild.jpg) no-repeat top left; padding-left:;}
#service .inside {}

Der äußeren Div im CSS über background die gewüschte Grafik verpassen. Anschließend mit padding-left arbeiten und die eigentliche "Content-Box" passend positionieren.

Liebe Grüße, Patrick

 

[inetEXT]

AW: div & bild nebeneinander

Das ding ist folgendes ich nutze diese
picbox öfter
d.h ich müsste dann im css jedem eine neue id zuweissen für denn background?
edit: auf 80% geändert und ist nicht mehr nebeneinander aber füllt nicht denn ganzen content bereich aus vielleicht das bild 20% geben und dem text bereich 80 ?

 

[Myhar]

AW: div & bild nebeneinander

Bei diesem Aufbau ist der von Patrick vorgeschlagene Lösungsweg nicht zu empfehlen (Aber das konnte er ja aufgrund der mangelhaften Informationen, die du geliefert hast, nicht wissen)
Dein Denkfehler ist, dass die div Box nicht 100% breit sein soll, sondern "100%-Breite vom Bild" haben muss. Auch bezweifle ich, dass es eine div Box sein muss, sondern die semantisch korrekte Auszeichnung wohl ein Absatz (p) ist.
Dein HTML müsste korrekterweise also so aussehen:

<div class="row">
 <img />
 <p> Da stehen viele Infos, semantisch korrekt in einem Paragraphen.</p>
</div>

.row>img{float:left;width:20}
.row >p{float:left;width:80%}

Das CSS wirst du anpassen müssen, damit der Text auch bei zu langen Beschreibungen nicht unter das Bild rutscht, eventuell wirst du dir auch mit einer div-Suppen Lösung leichter tun.

 

[inetEXT]

AW: div & bild nebeneinander

Ich werds so mal versuchen.
Was ist mit einer div-suppen lösung gemeint ?

was ist mit der class="row" ?

.row {

}

edit:
Es funktioniert hatte noch ein div drin der die Font eigenschaften enthält
deswegen hatte deins auch nicht funktioniert hab das jetzt angepasst und es funktioniert.

Eine Frage bleibt offen ist es besser Texte gennerel mit <p> zu machen ?

 

[patrick_l]

AW: div & bild nebeneinander

Es funktioniert hatte noch ein div drin der die Font eigenschaften enthält

Nochmal, Formatierungen ausschließlich im CSS notieren. Mit HTML nur die Inhalte strukturieren. Anschließend die einzelnen Bereiche (Elemente) im CSS ansprechen und stylen. Dazu gehört auch die Größe und das Aussehen der Schrift.

Eine Frage bleibt offen ist es besser Texte gennerel mit <p> zu machen ?

Myhar hat es ja auch schon geschrieben. Text in ein p-tag packen. Anschließend Bild und Text entsprechend floaten.

Liebe Grüße, Patrick

 

[inetEXT]

AW: div & bild nebeneinander

So neues Problem
sobald ich mit dieser Methode den Browser kleiner mache resize wie auch immer
rutscht der <p></p> unter die website (also footer) liegt wohl daran das <p> auf 80%steht oder ?

 

[Myhar]

AW: div & bild nebeneinander

Da können wir dir helfen, wenn du uns deinen aktuellen Stand von HTML+CSS lieferst.
Aber ja, theoretisch wird wohl irgendwo was bei den Breiten nicht ordentlich zugewiesen sein.
Wenn du uns den HTML/CSS Code nicht zeigen willst, dann kann ich dir nur zu Firebug oder ein ähnliches Webdeveloper Werkzeug raten, mit dem du die Seite selber debuggen kannst.

 

[inetEXT]

AW: div & bild nebeneinander

www.nn-d.eu auf service klicken und fenster kleiner machen dann rutscht dern text nach unten

 

[Myhar]

AW: div & bild nebeneinander

Beschäftige dich mit dem Die Breite berechnet sich demzufolge also aus width plus margin plus padding plus border. Dein Absatz hat eine Breite von 80 plus dem padding. Entferne das padding, dann passt es wieder. Nachdem du es aber bestimmt nicht so haben willst, dass der Text am Bild klebt, verringere einfach die Breite des Absatzes. Nimm geschätzte 70-75%, dann hast du auch gleich einen Abstand nach rechts und genug Spielraum.
Zweitens sind deine Bilder keine 20 Breit, bei denen wird eine fixe Breite im Stylesheet angegeben, weshalb die Bilder auch mehr als 20% Breit sein können.
Drittens könntest du überlegen, ob du einen Satz mit zwei Links nciht in einen Absatz packen kannst. Du kannst den Zeilenumbruch auch mit <br /> realisieren.

 

[inetEXT]

AW: div & bild nebeneinander

Danke erstmal werd es test und mich dann melden.