✔ Bild und Text per CSS ausrichten

Der Einfachheit halber und mit Blick auf ein semantisch wohlgeformtes Markup würde ich anstelle der zwei umfliessenden unsortierten Listen (.liste und .liste2) direkt eine Definitionsliste nutzen, die sich entsprechend formatieren lässt, damit die Definition (<dd>) des zu definierenden Ausdrucks (<dt>) in einer Zeile neben ihm angeordnet ist :-)

Was die strukturelle Abtrennung der Blöcke betrifft, gibt es da keine allgemein verbindliche Aussage, zumal die horizontale Linie mittels <hr>, oder das Absetzen der "Überschrift" mit einem Hintergrund, die sich übrigens anstelle des allgemeinen <div>-Blockelements mit einem der dafür vorgesehenen <h1> / <h6>-Tags treffender auszeichnen lässt, noch lange nicht das Ende der Fahnenstange an möglichen optischen Effekten sind.

Nicht nur die "Einfachheit", sondern auch die "Semantik" solltest du für eine gute Seitenentwicklung im Auge haben, ansonsten könnte dir schnell Div Wahnsinn, Div Suppe oder Div Chaos. Wie kann man es vermeiden? drohen.

mfg Maik
 
Ich hab mal eben in meinen Bookmarks gestöbert, und tatsächlich etwas Inspiration zur Formatierung von Überschriften gefunden :-)


Diese bekäme von mir in deiner Seite einen größeren Abstand nach oben, damit die Blöcke nicht so dicht aufeinander folgen, eventuell für das umschließende Element einen unteren Rahmen einrichten, anstelle von <hr>, und fertig ist die Laube ;-)

mfg Maik
 
Maik hat gesagt.:
Nicht nur die "Einfachheit", sondern auch die "Semantik" solltest du für eine gute Seitenentwicklung im Auge haben, ansonsten könnte dir schnell Div Wahnsinn, Div Suppe oder Div Chaos. Wie kann man es vermeiden? drohen.
Zum Vergrößern anklicken....
*lol*

Ich hab vorhin beim Überfliegen deiner Quellcodes im Firebug die Textblöcke wohl nicht näher / genauer beachtet, denn wie mir gerade auffällt, hast du anstelle des <p>-Elements, das einen Textabsatz semantisch umschreibt, wieder zum allseits geliebten <div> gegriffen :-)

Und nun stell dir mal dieses Markup in einem Webdokument vor, in dem gleich mehrere solcher Textabsätze in einem <div>-Block enthalten sein sollen :p

mfg Maik
 
Das sind hilfreiche Links zu den Überschriften. Hab auch schon was passendes gefunden. Danke dir! :)

Mit der Definitionsliste hab ich noch Probleme. Die Einträge bekomme ich nicht auf eine Zeilenhöhe. Mein (X)HTML sieht so aus:

Code: 
<dl class="liste">
        <dt>Herkunft: </dt><dd>Brasilien</dd>
	    <dt>Lebensweise: </dt><dd>Bodenbewohner</dd>
	    <dt>Lebensraum: </dt><dd>feuchtwarme Regenw&auml;lder,  Trockenw&auml;lder, schattige felsreiche<br />
Gegenden</dd>
</dl>

Muß ich den <dt> und <dd> Klassen zuweisen und floaten? Oder muß da noch was anderes beachtet werden?

greets,
kanecorpse
 
Hab's hier mal anhand des SELFHTML-Beispiels nachgestellt:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Definitionslisten definieren - dl, dt, dd</title>
</head>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
dt {
float:left;
clear:left;
width:100px;
}
dd {
margin-left:110px;
}
-->
</style>
<body>
<h1>DFÜ-Abkürzungen</h1>

<dl>
  <dt>AA</dt>
  <dd>Auto Answer (Modem)</dd>
  <dt>AAE</dt>
  <dd>Allgemeine Anschalte-Erlaubnis</dd>
  <dt>AARP</dt>
  <dd>Appletalk Address Resolution Protocol</dd>
  <dt>ABATS</dt>
  <dd>Automatic Bit Access Test System</dd>
  <dt>ABC</dt>
  <dd>AtanasoffBerryComputer</dd>
  <dt>ABEL</dt>
  <dd>Advanced Boolean Expression Language</dd>
  <dt>ABI</dt>
  <dd>Application Binary Interface (Sun)</dd>
  <dt>ABM</dt>
  <dd>Asynchronous Balanced Mode</dd>
  <dt>ACC</dt>
  <dd>Area Communication Controller (Modacom)</dd>
  <dt>ACE</dt>
  <dd>Advanced Computing Environment (Hersteller)</dd>
  <dt>ACIA</dt>
  <dd>Asynchronous Communications Interface Adapter</dd>
  <dt>ACL</dt>
  <dd>Advanced CMOS Logic</dd>
  <dt>ACM</dt>
  <dd>Association for Computing Machinery (USA)</dd>
  <dt>ACR</dt>
  <dd>Attenuation to Crosstalk Radio (Netzkabel)</dd>
  <dt>ACS</dt>
  <dd>Advanced Communications System, oder</dd>
  <dd>Architekten, Computer, Systeme (Messe), oder</dd>
  <dd>Australian Computer Science</dd>
  <dt>ACSE</dt>
  <dd>Association Control Service Element (OSI)</dd>
</dl>

<p><a href="http://de.selfhtml.org/html/text/listen.htm#definition">zurück</a></p>
</body>
</html>


mfg Maik
 
Super. Es funktioniert. Ich hab nen Denkfehler bei der Sache gehabt. Das hätte nie funktioniert. Danke schön für die Hilfe!

greets,
kanecorpse
 
Ich habe mich für eine Gestaltung der Headlines entschieden. Ich hab nur eine Problem dabei. <h4> ist die Überschrift. Die habe ich mit einem dunklen Anfangsbereich versehen. Bei padding-right:140px erscheint eine kleine Grafik mit Farbübergang. Das Problem ist, das die Hintergrundgrafik nun immer 140px hinter der Überschrift angezeigt wird. Sie sollte aber immer bei 275px vom linken Rand aus gesehen angezeigt werden. Mit float hat das nicht geklappt.

Hier der CSS-Code
Code: 
h4 {
font-family: Verdana, Arial, sans-serif;
letter-spacing: 0.2em;
font-size: 14px;
font-weight: normal;
background: #CCBA96;
padding: 0px;
margin: 10px 0 2px 0;
}
h4 span {
padding-right: 140px;
padding-left: 5px;
background: #404021 url(bg2.jpg) repeat-y right;
color: #F1E3C0;
}
* {
margin:0;
padding:0;
}
dt {
float:left;
clear:left;
font-weight:bold;
width:170px;
}
dd {
margin-left:180px;
}
dt p,dd p {
margin:0px 0;
}


(X)HTML dazu:
Code: 
<h4><span>Eckdaten</span></h4>
     <dl>
        <dt><p>Herkunft: </p></dt>
		<dd><p>Brasilien</p></dd>
	    <dt><p>Lebensweise: </p></dt>
		<dd><p>Bodenbewohner</p></dd>
	    <dt><p>Lebensraum: </p></dt>
		<dd><p>feuchtwarme Regenw&auml;lder,  Trockenw&auml;lder, schattige felsreiche Gegenden</p></dd>
	    <dt><p>Terrarium (LxBxH): </p></dt>
		<dd><p>40*30*30cm, Unterschlupf, Wasserschale</p></dd>
	    <dt><p>Substrat: </p></dt>
		<dd><p>feucht, 8-10cm</p></dd>
		<dt><p>Luftfeuchtigkeit: </p></dt>
		<dd><p>85%</p></dd>
	    <dt><p>Temperatur Tag/Nacht: </p></dt>
		<dd><p>24°C - 28°C/22°C</p></dd>
     </dl>

Link zur Seite

Wie bekommt man das hin?

greets,
kanecorpse
 
Mit Blick auf die rechtsbündige Positionierung des Hintergrundbildes in dem <span>-Element, wäre es ja dann blos eine reine Maßarbeit (z.B. mit http://www.spadixbd.com/freetools/jruler.htm) zur Ermittlung des korrekten padding-right-Werts :suspekt:

Wenn du aber diesem Inline-Element <span> mit der CSS-Eigenschaft display:block "Block-Level-Charakteristaka" verleihst, damit es sich wie ein Block-Element verhält, und automatisch die verfügbare Breite im Anzeigebereich des übergeordneten <h4>-Elements einnimmt, kannst du stattdessen ganz einfach deine gewünschte linke Position für das Hintergrundbild festlegen.

mfg Maik
 
Hab es geschafft :) Thx!

Jetzt hab ich noch ein einzieges Problem. Ich habe Seiten, wo der Inhalt kleiner als die Navigation ist. Jetzt habe ich gedacht, daß ich mit min-height eine angemessene Mindeshöhe für den #content festlegen könnte. Aber das wird irgendwie nicht angenommen. Nach wie vor hört er am Inhaltsende auf, auch wenn der Div dann nur eine Zeile Inhalt enthält. Das wollte ich mit in die exterene Css-Datei machen, da es einige Seiten gibt, in denen sich der Inhalt mal vergrößert und mal verringert. Was mache falsch?

greets,
kanecorpse
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück