Kleines CSS Problem bei Design

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

20:02, 10.2.2012

Hallo !

Ich habe ein kleines CSS Problem bei einem Design.

Ein Text soll neben dem Bild im Design erscheinen. Das geht auch, allerdings nur solange der Text nicht länger als das Bild ist.

Ich habe das Design hier mal hochgeladen: http://php-oop.lima-city.de/design/test.html

Der zugehörige CSS-Code ist:

body { font-family: Arial, sans-serif;}

  .content{margin:0px 0px 10px 20px;padding:40px 50px;border:1px solid #aaa;font-family:arial;font-size:12px;line-height:150%;}

  .content img{max-width:300px;margin:0px 50px 40px 0px;float:left;}

  .content p, .content blockquote{text-align:justify;}

.titel {margin-left:10px;margin-top:5px; font-size: 20px; color: rgb(46, 46, 46); font-weight: bold;}

  h1{margin:0px 0px 20px;font-size:1.4em;line-height:150%;}

  h2{margin:0px 0px 20px;font-size:1.2em;line-height:150%;}

  h3{margin-top:30px;font-size:1.2em;clear:both;}

  h4{margin:0px;color:#ff0000;}

  h5{margin-top:30px;font-size:1.4em;color:#008000;}

  h6{margin:0px 0px 20px;font-size:1.4em;color:#ff0000;}

Ich hoffe, ihr versteht mein Problem.
Könnt Ihr mir helfen, wie ich den Text, auch bei viel Text, neben dem Bild anzeigen lasse?

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
inetandfun

inetandfun hat kostenlosen Webspace.
20:15, 10.2.2012
Ich hoffe ich habe dein Problem verstanden :D

Wenn du den Text nur rechts vom Bild und nicht unter dem Bild anzeigen möchtest,
musst du einen Div-Container erstellen, ihn nach rechts setzten und seine Länge/Breite angeben.

Also so ungefähr:
```
<html>
<head>
</head>
<body>
<img src="dein bild" />
<div id="rechtertext">rechter Text</div>
</body></html>
```
und CSS:
```
#rechtertext {
   float:right;
   width: ?px;
   height: ?px;
}
```
Autor dieses Themas
php-oop

php-oop hat kostenlosen Webspace.
20:45, 10.2.2012
inetandfun schrieb:
Ich hoffe ich habe dein Problem verstanden :D

Wenn du den Text nur rechts vom Bild und nicht unter dem Bild anzeigen möchtest,
musst du einen Div-Container erstellen, ihn nach rechts setzten und seine Länge/Breite angeben.

Also so ungefähr:
```
<html>
<head>
</head>
<body>
<img src="dein bild" />
<div id="rechtertext">rechter Text</div>
</body></html>
```
und CSS:
```
#rechtertext {
   float:right;
   width: ?px;
   height: ?px;
}
```
Danke, werde ich mal so probieren!
businesscard

businesscard hat kostenlosen Webspace.

23:26, 10.2.2012
generell kannst du mit float das Verhalten von elementen auf deiner website beeinflussen...w3schools erklärt dies eigentlich immer sehr gut: http://www.w3schools.com/css/css_float.asp

Du solltest für Folgeelemente jedoch den float durch "clear: both" wieder aufheben.
gentleman1

gentleman1 hat kostenlosen Webspace.
18:04, 12.2.2012
Auch bei anderen Elementen (zum Beispiel Youtube-Videos o.a.) kannst du float benutzen. Du weißt besagten Elementen eine class oder id zu und gibst im CSS einfach folgenden Code ein:
```
#elementid {float: left/right}
```
Damit ist festgelegt, das das Element mit der ID elemntid immer links bzw. rechts gefloatet wird. Solltest du das ganze nicht per id="elementid" gemacht haben, sondern mit class="elementclass", musst du im CSS-Code folgendes eingeben:
```
.elementclass {float: left/right;}
```
Also nur anstatt des Gartenzaunes einen Punkt machen. In deinem Fall würde es folgendermaßen aussehen:
```
<html>
<head>
<style rel="stylesheet" type="text/css">
</head>
<body>
[... (Über Bild)]
<img src="blubb.png" style="float: left;" />
[... (Neben und unter Bild)]
</body>
</html>
```
VG
Gentleman1
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city