✔ Bild und Text per CSS ausrichten

kanecorpse · 23. Dezember 2009

Hallo!

Ich arbeite am neuen Design meiner HP. Bisher hatte ich immer alles mit Tabellen ausgerichtet. Das ist mir jetzt zu unübersichtlich. Auf meiner Homepage sind viele Texte zu finden. Bilder gibts auch dazu. Jetzt steh ich aufm Schlauch. Wie richte ich Text und Bild aus?

Ich stelle mir eine flexible Lösung vor, wo sich die Größen für die Textbereiche automatisch anpassen. Ich befürchte, daß es sonst zu viele Divs werden könnten. Das ist bei meinen bisherigen Versuchen so gewesen.
Praktisch wäre es, wenn das (die) Bild(er) mal links und mal rechts vom Text ausgerichtet werden können. Als Beispiel hab ich ein Bild angehängt.

Ich hab keine vernünftige Idee mehr. Hab natürlich auch hier nachgesehen. Aber ich kann es entweder nicht umsetzen oder versteh es aufgrund meiner Lernschwäche erst gar nicht. Ich bin für jede Hilfe dankbar.

Hier findet ihr eine der Textseiten

Anbei mal der XHTML-Code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ingo&acute;s Exoten VS Das Futter</title>
<link rel="stylesheet" href="../../ex09style/ie2009c.css" type="text/css">
<link rel="SHORTCUT ICON" href="http://www.ingos-exoten.de/favicon.ico">
<meta http-equiv="content-language" content="de">
</head>
<body>
<div id="head">
<!--erster-->
<div id="head1">
 </div>
 <div id="headtitle" align="center">
  <img src="../../ex09style/banner.jpg" alt="Banner" width="468" height="60" style="width: 468px; height: 60px;"> </div>
<div id="head2">
 </div>
</div>
<!--erster ende-->
 <div id="conlayer">
 <div id="left">
  <div class="menucontainer">
   <p class="menutitle">VOGELSPINNEN</p>
   <a href="../../indexb.html" target="_self" class="menu">Home</a>
   <a href="../spec/specvs.html" target="_self" class="menu">Arten</a>
   <a href="../myvs/myvs.html" target="_self" class="menu">Meine Tiere</a>
   <a href="../kauf/buyvs.html" target="_self" class="menu">Der Kauf</a>
   <a href="../terra/ter.html" target="_self" class="menu">Das Terrarium</a>
   <a href="food.html" target="_self" class="menu">Das Futter</a>
   <a href="../renew/renewvs.html" target="_self" class="menu">Die Häutung</a>
   <a href="../zuvs/zuvs.html" target="_self" class="menu">Vermehrung</a>
   <a href="../illvs/illvs.html" target="_self" class="menu">Krankheiten</a>
   <a href="../ga/pics.html" target="_self" class="menu">Die Galerie</a></div>
 </div>
<div id="maintitle">
  <p class="maintitle">FUTTER</p>
</div>
 <div id="content">
   <h2><strong>Das Futter </strong></h2>
   <p>Gro&szlig;e Bedeutung</p>
</div>
  <div id="fuss">.:: Ingo´s Exoten 2009 ::.
 </div>
 <br style="clear: both;">
</div>
</body>
</html>

Hier dann der CSS-Code. Der ist für alle Seiten gedacht.

Code:

body 
{
 font-family:Verdana;
 font-size:12px;
 text-align:center;
 margin:10px;
 background-image:url(back.jpg);
 scrollbar-face-color:#E7DC8F;
 scrollbar-shadow-color:#000080;
 scrollbar-highlight-color:#E7DC8F;
 scrollbar-3dlight-color:#FFFFFF;
 scrollbar-darkshadow-color:#FFFFFF;
 scrollbar-track-color:#EEE7B5;
 scrollbar-arrow-color:#D9B359;
}

h1 {font-size:18px;color:#000000;margin-bottom:0px;}
h2 {font-size:16px;color:#000000;}
h3 {font-size:14px;color:#000000;}

/* allgemeine links im text */

a:link{ color: #291E05; text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:visited{ color: #291E05;text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:active{ color: #291E05;text-decoration:underline;font-family: verdana; font-size: 10pt;}
a:hover{ color: #291E05;text-decoration:none;font-family: verdana; font-size: 10pt;}

a.navi:link, a.navi:visited {
  text-decoration:none;
  color:#000000;
}
a.navi:active, a.navi:hover {
  text-decoration:none;
  color:#737994;
}
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #643200;
 background:url(conie.jpg);
 text-align:left;
 color:#000000;
 text-decoration:none;
}
a.menu:link, a.menu:visited { 
 background:url(conie.jpg);
}
a.menu:active, a.menu:hover { 
 color:#737994;
 background:#eeeeee;
}

/* ======================================
3. Styles für Layoutbereiche
====================================== */

/*  Kopf */

#head {
 text-align: left;
 margin: 0px auto;
 width: 760px;
 background-color: rgb(243, 239, 198);
 border: 1px solid rgb(100, 50, 0);
}
#head1 {
 height:18px;
 background-color:#DFCCA6;
 border-bottom:1px solid #643200;
}
#headtitle {
 height:62px;
 padding:8px;
 background-image:url(conie.jpg);
 border-bottom:1px solid #643200;
}
#head2 {
 text-align:center;
 color:#000000;
 height:16px;
 background-color:#F2E3B7;
}

/* contentlayer */

#conlayer {
 text-align: left;
 width: 760px;
 background-image:url(back.jpg);
 border: 0px solid rgb(187, 143, 43);
 margin: 8px auto;
}

/* Navigation links */

#left {
 float:left;
 width:128px;
 background-image:url(back.jpg);
}
.menutitle{
 text-align:center;
 margin:2px;
}
.menucontainer {
 width:118px;
 background-color:#E6D29F;
 border:1px solid #643200;
 margin-bottom:8px;
}

/* Inhalt */

.maintitle{
 text-align:left;
 margin:2px;
}
#maintitle {
 float:right;
 width:610px;
 background-color:#DFCCA6;
 padding:0px 10px;
 border-top:1px solid #643200;
 border-left:1px solid #643200;
 border-right:1px solid #643200;
}
#content {
 float:right;
 font-family:Verdana;
 font-size:12px;
 width:610px;
 background-image:url(conie.jpg);
 padding:10px;
 border:1px solid #643200;
}
#konform {
 width:470px;
 background-color:#F6EBCA;
 margin:auto;
 padding-top:8px;
 padding-left:8px;
 padding-right:8px;
 border:1px solid #643200;
}
.gallery { /*ie2009c.css (Linie 141)*/
 margin:20px auto 0 auto; /* Außenabstand oben - rechts - unten - links */
 width:604px;
}
.gallery ul {
 list-style:none;
}
.gallery ul li {
 float:left;
 text-align:center; /* Inhalt horizontal zentrieren */
 width:120px;
 margin:5px;
 padding-top:10px;
 display:inline;
 background-color:#CCBA96;
}
.gallery ul li p {
 text-align:center;
 background-color:#CCBA96;
 margin:2px auto 6px auto;
}
#fuss {
 font-family:Verdana;
 font-size:7pt;
 color:#000000;
 text-align:center;
 padding:1px;
 float:right;
 height:16px;
 width:628px;
 background-color:#F2E3B7;
 border-bottom:1px solid #643200;
 border-left:1px solid #643200;
 border-right:1px solid #643200;
}
/* ======================================
E N D E   D E S   S T Y L E S H E E T S
====================================== */

Würd mich freuen, wenn ihr mir auf die Sprünge helft. Ich bekomme es nicht hin.

lg,
kanecorpse

queicherius · 23. Dezember 2009

Du gibst den Bildern einfach 2 verschiedene Klassen, die du per CSS (float) ausrichtest:

CSS:

.floatleft{
  float: left;
  padding-right: 15px;
}

.floatright{
  float: right;
  padding-left: 15px;
}

Du musst aber bei den Überschriften das floaten beenden (einfach noch eine Klasse für die Überschriften), da ansonsten die Überschrift auch nach dem Bild kommt, wenn der zugehörige Text zu kurz ist

CSS:

.clearfloat{
clear:both;
}

kanecorpse · 23. Dezember 2009

Aha. Doch mit float. Das hatte ich probiert. Ging nur nicht, weil das clear nicht mit drin hatte.

Allerdings bleibt die Überschrift nun direkt unterm Bild hängen. Muß ich clearfloat noch margin hinzufügen, oder wie macht man das am Besten?

lg,
kanecorpse

queicherius · 23. Dezember 2009

Ja entweder

CSS:

margin-top

oder

CSS:

padding-top

kanecorpse · 23. Dezember 2009

Das funktioniert zwar, die Überschrift hat dann Abstand zum Bild. Aber die 15px werden dann bei jeder Überschrift dazuaddiert. Dadurch ist der Abstand dann zu groß bei einigen Absätzen. Hab auch mal alle <p>- Elemente entfernt und die Fettschrift gegen richtige Überschriften <h3> ausgetauscht. Mit dem gleichen Ergebnis. Gibt es noch eine andere Möglichkeit?

Ich habe noch etwas rumprobiert. Soweit geht es schonin Ordnung. Optimal ist es aber noch nicht. Ich werde noch darauf zurück kommen, wenn die Größe der Bilder endgultig fest steht. Danke erst mal für den Anstoß.

lg,
kanecorpse

queicherius · 24. Dezember 2009

Probiere mal padding-top: 10px, das sah bei mir gar nicht so schlecht aus:

CSS:

.clearfloat b{
 padding-top: 10px;
}

Oder füge den Bilder noch ein padding-bottom: 10px hinzu.

kanecorpse · 26. Dezember 2009

Frohe Weihnachten euch allen!

Ich bin schon recht weit gekommen, nicht zuletzt mit eurer Hilfe. Nun steck ich aber wieder mal fest. Ich woltle 2 Bilder untereinander rechts neben dem Text positionieren. Die Bilder ordnen sich aber rechts nebeneinander an.

Hier ein Auszug vom CSS-Code für den Bereich

Code:

#content {
 float: right;
 font-family: Verdana;
 font-size: 12px;
 width: 610px;
 background-image: url(conie.jpg);
 padding: 10px;
 border: 1px solid #643200;
}

* Bild Text Ausrichtung */

#text {
 padding-bottom: 1px;
}
.floatleft { 
 float: left;
 padding-right: 15px;
}
.floatright {
 float: right;
 padding: 2px 0 5px 15px;
}
.clearfloat {
 clear: both;
}

Und hier das XHTML dazu

Code:

<div id="content">
 <h2>Mäuse</h2>
   <div id="text"><img src="thumbs/mouse0074.jpg" alt="" width="200" height="150" class="floatright" />Text ...
 </div>
  <h3 class="clearfloat">Unterbringung</h3>
 <div id="text">
   <img src="thumbs/mouse0056.jpg" alt="" width="200" height="150" class="floatright" />Text...
 </div>
</div>

Zuletzt noch der Link zur betreffenden Seite

Hat einer nen Tip für mich, wie man das hinbekommt?

lg,
kanecorpse

queicherius · 26. Dezember 2009

Bei mir werden sie doch untereinander angezeigt?

kanecorpse · 26. Dezember 2009

Ja. Das war die Seite, wo im 2. Abschnitt das 2. Bild fehlte. Habs korrigiert. Kannste mal gucken?

lg,
kanecorpse

queicherius · 26. Dezember 2009

Bei mir funktioniert es so:

HTML:

<span class="floatright">
<img width="200" height="150" alt="" src="thumbs/mouse0056.jpg"/><br/>
<img width="120" height="160" alt="" src="thumbs/mouse0079.jpg"/>
</span>

   Für die Zucht eignen sich bestimmte Kunsstoffkisten mit Deckel. Diese sollten mindestens eine Grundfläche 45*30 cm haben. Größer kann natürlich nicht schaden. In den Deckel bohrt man viele Löcher, die höchstens 2mm Durchmesser haben sollten. Ansonsten knabbern sich die Tiere durch und fliehen. Wenn nicht genug Löcher vorhanden sind, bildet sich durch verdunstendes Trinkwasser zuviel Feuchtigkeit in der Kiste und die Einstreu wird nass. Das sollte unbedingt vermieden werden, da es zu Krankheiten führt. Ich verzichte auf Kunststoffdeckel für die Zuchtkisten. Aus einem verzinkten Maschendraht (auch als Hasendraht bekannt) mit einer Maschenweite von höchstens 1 cm mache ich die Abdeckung selber. Auf den Bildern ist zu sehen wie Kiste und Deckel zusammenpassen.
Ein Trinknapf gehört in jede Zuchtbox. Er sollte nicht zu leicht sein. Denn sonst stoßen ihn die Mäuse um. Man kann auch Trinkflaschen zum befestigen an Gitterstäben nehmen. Das Wasser bleibt dann auch frei von Einstreu und anderem Dreck.
Ein Freßnapf ist nicht zwingend notwendig. Ich gebe das Futter direkt auf die Einstreu. Für die Mäuse ist es eine zusätzliche Beschäftigung, wenn sie ihr Futter erst im Streu suchen müßen.
Wer mag, kann denn Mäusen einen Unterschlupf in Form eines Plastikhäuschens oder Korkrinde geben. Bei Plastikhäuschen muß der Boden entfernt werden. Ansonsten sammelt sich Feuchtigkeit darin. Das bekommt weder den großen noch den Babymäusen.
Material zum Zernagen muß angeboten werden. Äste oder anderes Holz eignen sich. Es muß aber unbedingt unbehandelt sein! Sonst könnten irgendwann Schäden bei den Mäusen oder deren Vertilger auftreten.

Es gibt bestimmt eine bessere Lösung mit Css aber die fällt mir grad nicht ein...
(Maik?

)

Übrigens könntest du mal die Rechtschreibfehler beseitigen, das wirkt leicht unseriös.

✔ Bild und Text per CSS ausrichten

kanecorpse

Mitglied

Anhänge

queicherius

♥ PHP ♥

kanecorpse

Mitglied

queicherius

♥ PHP ♥

kanecorpse

Mitglied

queicherius

♥ PHP ♥

kanecorpse

Mitglied

queicherius

♥ PHP ♥

kanecorpse

Mitglied

queicherius

♥ PHP ♥

Neue Beiträge