Ich war jung und... wills jetzt besser machen

nabe · #1 (**permalink**) 03.03.2008, 16:09

Erstmal möcht ich alle hier begrüssen, ich les zwar scho ne weile mit aber war wohl bisher zu faul zum anmelden

Also jetzt zu meinem Problem, ich hatte vor einiger Zeit eine Seite erstellt, die damals mein erster ernsthafter exkurs in Sachen PHP, CSS und HTML war. Ich hab mich damals zwar schon um halbwegs validen und sauberen Code bemüht aber konnte es leider nicht durchhalten und möchte das ganze jetzt endlich bereinigen

Das meiste klappt au sehr gut (wie gesagt ich lese schon länger mit ^^), aber der folgende Code bringt mich leider zur Verzweiflung. Den alten Code und das Bild hab ich jetzt einfach mal gepostet, damit ihr seht was draus werden soll:

Bildchen (bevor einer fragt, die Farben sind natürlich nicht mein ernst

):

CSS:

Code:

div {
	background: green;
	border: solid 3px black;
	color: black;
	height: 169px;
	margin-bottom: 15px;
	padding: 7px;
	width: 500px;
}
div:hover {
	border: solid 3px red;
	color: red;
}
a {
	text-decoration: none;
}
img {
	border: none;
	float: left;
	height: 169px;
	margin-right: 10px;
	width: 120px;
}
h3 {
	font-weight: bold;
	font-size: 11pt;
	line-height: 11pt;
	margin-bottom: 20px;
}
.info span {
	color: black;
	margin: 0 15px 5px 0;
	font-weight: bold;
}
p.text {
	color: white;
	font-size: 9pt;
	text-align: justify;
}

HTML:

Code:

<a href="?id=1">
<div onmouseover="this.style.cursor='pointer'">
<img src="http://www4.picfront.org/picture/CufJP8d59hZ/img/bild.jpg" alt "bild">
<h3>Überschrift</h3>
<p class="info"><span>Info 1: abc</span><span>Info 2: abc</span><span>Info 3: abc</span></span></p>
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur...</p>
</div>
</a>

Die Geschichte mim Div und a hab ich jetzt schon gelöst mit Threads wie http://xhtmlforum.de/37911-gesamtes-div-als-link.html . Worum es mir jetzt vorallem geht wie löse ich xhtml-valide den Teil von der Überschrift bis zum Text, so das sie weiterhin schön neben der Grafik ist. Das einzige was mir bisher einfiel ist, die einzelnen Parts in <span> zu stecken und dann irgendwie hinzu-floaten, aber ich glaub das ist nicht so das gelbe vom Ei. Würde mich über Tips (will erstmal keine komplettlösung) freuen

mfg

Crizzo · #2 (**permalink**) 05.03.2008, 20:15

Du darfst keine Blockelemente (p, ul, tabelle, div usw.) in Inlineelemente stecken (a, span, em, strong).

Liest du eine Einführung in CSS/HTML? (Buch, ebook, Online-Artikel)?

Dieter · #3 (**permalink**) 05.03.2008, 20:36

Hallo, nabe!

Das hier

Code:

<p class="info"><span>Info 1: abc</span><span>Info 2: abc</span><span>Info 3: abc</span></span></p>

sieht aber nach einer Liste aus!

nabe · #4 (**permalink**) 05.03.2008, 20:38

Das weiss ich ja, wären Blockelemente möglich würde ich net fragen wie man das anderst macht. Ich brauch halt nen tip mit welchem Inline Element man das am besten machen könnte. Wäre es vielleicht möglich in das a zwei span zu stecken, welche dann mit display:table-cell entsprechend angeordnet werden?

Edit: Listen sind in a doch net erlaubt?
Edit2: Oder wäre es das einfachste, das ganze als div zu machen und dann mit entsprechenden Javascript zu arbeiten (onmouseover, onclick...). JavaScript wäre für die Seite eigentlich eh nötig, dann könnte ich es auch gleich dort einsetzen

Dieter · #5 (**permalink**) 05.03.2008, 20:55

Wozu willst Du denn einen ganzen Bereich, der mehrere Informationen enthält, zu einem einzigen Link machen bzw. degradieren?

nabe · #6 (**permalink**) 05.03.2008, 21:03

Find ich eigentlich schick. Und über sinn oder Unsinn lässt sich jawohl bei vielem Streiten, sowas ist einfach Geschmack.

Dieter · #7 (**permalink**) 05.03.2008, 21:31

Hallo, nabe!

Zitat:

sowas ist einfach Geschmack.

Deinen Geschmack darfst Du ja auch befriedigen - aber halt nur innerhalb bestimmter Grenzen.

Code (HTML und CSS) ist nun mal notwendigerweise für die Anwendung reglementiert und eine Seite im Web sollte sich in Aussehen und Bedienung auch anderen Menschen erschließen.

nabe · #8 (**permalink**) 05.03.2008, 22:04

deshalb frag ich ja wie man das schön valide lösen kann

Dieter · #9 (**permalink**) 06.03.2008, 00:03

Zitat:

deshalb frag ich ja wie man das schön valide lösen kann

Gar nicht!

Und valider Code ist nur ein Kriterium unter mehreren für eine gute Seite!

nabe · #10 (**permalink**) 06.03.2008, 14:55

Zitat:

Zitat von Dieter

Und valider Code ist nur ein Kriterium unter mehreren für eine gute Seite!

Ich halte es für ausgesprochen arrogant mir solcherart Belehrungen zu machen, wenn man nicht mal den Rest der Seite kennt (Nein es ist auch nicht nötig das ich den zeige).

Zitat:

Zitat von Dieter

Gar nicht!

BlackHawk hat mich (mit seiner Frage über Einführung...) nach meinem Wissensstand gefragt. Diese Frage solltest du dir selbst auch mal stellen. Wenn man auch nur ein wenig Ahnung von Informatik Allgemein hat, weiss man das so ziemlich alles zu lösen ist.

Aber zurück zur Topic. Nach dem du mich ein wenig in rage versetzt hast, hab ich nochmal selbst ausführlich über dem Problem geknobelt und siehe da es gibt eine Lösung:

Anschauen: Link mit Inhalt

CSS:

Code:

/* --------------------------- Browserdefaults zurücksetzen --------------------------- */
* {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
/* --------------------------- Link mit Inhalt --------------------------- */
a,
a:link,
a:visited {
	border: 4px solid blue;
	color: blue;
	cursor: pointer;
	display: block;
	font-family: arial;
	height: 175px;
	margin: 100px;
	position: relative;
	text-decoration: none;
	width: 500px;
}
a:hover,
a:focus,
a:active {
	border: 4px solid fuchsia;
	color: fuchsia;
}
span.img {
	background: red;
	display: block;
	height: 169px;
	left: 0;
	padding: 3px;
	position: absolute;
	top: 0;
	width: 120px;
}
.img img {
	border: none;
	display: inline;
}
span.info {
	background: green;
	display: block;
	height: 169px;
	left: 126px;
	padding: 3px;
	position: absolute;
	top: 0;
	width: 368px;
}
.info span.headline {
	display: block;
	font-size: 12pt;
	font-weight: bold;
	margin-bottom: 10px;
}
.info span.details {
	color: blue;
	display: block;
	font-size: 8pt;
	font-weight: bold;
	margin-bottom: 5px;
}
.info .details span {
	margin-right: 5px;
}
.info span.text {
	color: white;
	display: block;
	font-size: 8pt;
}

xHTML:

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<!-- Meta Angaben -->
			<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
			<meta http-equiv="Content-Style-Type" content="text/css" />
			<meta http-equiv="expires" content="300" />
		<!-- Seitentitel -->
			<title>Link mit Inhalt</title>
		<!-- Link Angaben -->
			<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<a href="?id=1">
			<span class="img">
				<img src="http://www1.picfront.org/picture/YksNZhQkr/img/at_zlc_02.jpg" alt="bild" />
			</span>
			<span class="info">
				<span class="headline">Überschrift</span>
				<span class="details">
					<span>Info 1: abc</span>
					<span>Info 2: abc</span>
					<span>Info 3: abc</span>
				</span>
				<span class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur...</span>
			</span>
		</a>
	</body>
</html>

Das ganze ist komplett Valide. Getestet habe ich jetzt mal in folgenden Browsern:

Opera 9.26: OK
Firefox 2.0.0.12: OK
Safari 3.1: OK
IE 7: OK
IE 6: span des Bildes geht ein wenig über den Rand

Was ich nun noch bräuchte wäre wenn jemand so lieb wäre das in einigen anderen Browsern zu testen und einen Tip wie ich das ganze im IE 6 fixe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hintergrundverlauf...welche Möglchkeit ist besser?	mischaef	CSS	4	28.10.2010 15:04
Subdomains oder besser Pfadangaben?	netspy	Serveradministration und serverseitige Scripte	27	24.07.2008 15:12
UTF-8: Was ist besser?	Senshi	(X)HTML	7	14.01.2006 13:26
Zwei Designs - welches ist besser?	XManTwo	Site- und Layoutcheck	7	19.07.2005 14:37
Was klingt besser?	Pablo	Offtopic	7	21.03.2005 18:04