zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Ich war jung und... wills jetzt besser machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.03.2008, 16:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 10
nabe befindet sich auf einem aufstrebenden Ast
Rotes Gesicht Ich war jung und... wills jetzt besser machen

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.03.2008, 20:15
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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)?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.03.2008, 20:36
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #4 (permalink)  
Alt 05.03.2008, 20:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 10
nabe befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von nabe (05.03.2008 um 20:46 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 05.03.2008, 20:55
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

Wozu willst Du denn einen ganzen Bereich, der mehrere Informationen enthält, zu einem einzigen Link machen bzw. degradieren?
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #6 (permalink)  
Alt 05.03.2008, 21:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 10
nabe befindet sich auf einem aufstrebenden Ast
Standard

Find ich eigentlich schick. Und über sinn oder Unsinn lässt sich jawohl bei vielem Streiten, sowas ist einfach Geschmack.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.03.2008, 21:31
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
  #8 (permalink)  
Alt 05.03.2008, 22:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 10
nabe befindet sich auf einem aufstrebenden Ast
Standard

deshalb frag ich ja wie man das schön valide lösen kann
Mit Zitat antworten
  #9 (permalink)  
Alt 06.03.2008, 00:03
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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!
__________________
Informationen aus Koblenz-Metternich
-----------------------------------
"Wissen heißt, Fragen zu erwerben."
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.03.2008, 14:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.03.2008
Beiträge: 10
nabe befindet sich auf einem aufstrebenden Ast
Blinzeln

Zitat:
Zitat von Dieter Beitrag anzeigen
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 Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:39 Uhr.