Problem: h2 = inline-Element

davidos_no.1

Komischerweise werden meine Überschriften als inline-Element dargestellt. Habe keine Ahnung wieso...

Code

/*


Informations


*/






* {
margin: 0px;
padding: 0px;
}


body {
background-color: #FFFFFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
font-size: 100.1%;
}


#wrapper {
width: 760px;
height: auto;
margin: 0px auto;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
font-size: 62.5%;
word-spacing: 0.3em;
}


	#header {
	width: 760px;
	height: 30px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: #E1E1E1;
	}

	#navi {
	width: 760px;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 5px 0px;
	border-bottom: 3px solid #E1E1E1;
	}

		#navi ul {
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;		
		list-style-type: none;
		}

		#navi ul li {
		margin: 0px 0px 0px 0px;
		padding: 0px 5px 0px 5px;
		float: left;
		}

			#navi ul li a:link, #navi ul li a:visited, #navi ul li a:active, #navi ul li a:hover {
			padding: 0px 2px 0px 2px;
			text-decoration: none;
			font-size: 1.3em;
			word-spacing: 0.3em;
			color: #252525;
			}

			#navi ul li a:hover {
			padding: 20px 2px 2px 2px;
			background: #252525;
			color: #FFFFFF;
			}

	#main {
	width: 760px;
	height: auto;
	margin: 30px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

		#content {
		width: 440px;
		height: auto;
		margin: 0px 50px 0px 0px;
		padding: 0px 0px 0px 0px;
		float: left;
		text-align: justify;
		}

			.post {
			width: auto;
			height: auto;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			}	

				.post img {
				margin: 12px 0px 12px 0px;
				padding: 1px;
				border: 1px solid 222222;
				}

				.post h2 {
				padding: 0px 0px 0px 0px;
				}	

					.post h2 a:link, .post h2 a:visited, .post h2 a:active, .post h2 a:hover {
					padding: 0px;
					text-decoration: none;
					font-size: 2.0em;
					word-spacing: 0.0em;
					font-weight: lighter;
					color: #454545;
					border-bottom: 1px solid #252525;
					}

					.post h2 a:hover {
					padding: 0px;
					background: #252525;
					color: #FFFFFF;
					}

				.date {
				width: auto;
				height: auto;
				margin: 10px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				font-size: 0.8em;
				word-spacing: 0.3em;
				color: #999999;
				}

				.entry {
				width: auto;
				height: auto;
				margin: 30px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				font-size: 1.1em;
				word-spacing: 0.3em;
				letter-spacing: 0.0em;
				font-weight: lighter;
				color: #252525;
				}

					.entry a:link, .entry a:visited, .entry a:active, .entry a:hover {
					padding: 0px;
					text-decoration: none;
					color: #999999;
					}

					.entry a:hover {

					}

				.info {
				width: auto;
				height: auto;
				margin: 10px 0px 0px 0px;
				padding: 0px 0px 30px 0px;
				font-size: 0.8em;
				word-spacing: 0.3em;
				color: #999999;
				}

					.info a:link, .info a:visited, .info a:active, .info a:hover {
					text-decoration: none;
					color: #252525;
					}

					.info a:hover {

					}

		#sidebar {
		width: 220px;
		height: auto;
		margin: 0px 0px 0px 50px;
		padding: 0px 0px 0px 0px;
		float: left;
		text-align: right;
		}

			#sidebar h2 {
			font-size: 0.7em;
			word-spacing: 0.3em;
			color: ;
			}

			#sidebar ul {
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
			list-style-type: none;
			}

				#sidebar ul li {
				font-size: 0.7em;
				word-spacing: 0.3em;
				color: ;
				}

					#sidebar ul li a:link, #sidebar ul li a:visited, #sidebar ul li a:active, hover {

					}

			.about {
			width: auto;
			height: auto;
			margin: 0px 0px 0px 0px;
			padding: 10px;
			text-align: justify;
			font-size: 0.7em;
			word-spacing: 0.3em;
			color: ;
			border-top: 1px solid #E1E1E1;
			border-bottom: 1px solid #E1E1E1;
			}

			#sidebar h2 {
			font-size: 1.2em;
			word-spacing: 0.3em;
			color: ;
			}

	#footer {
	width: 760px;
	height: auto;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

		#pagenavi {
		width: auto;
		height: auto;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		}

		#pageinfo {
		width: auto;
		height: auto;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		}

	.clearer {
	clear: both;
	}

Alles anzeigen

jojo87

Kannst du das mal an einem Beispiel zeigen?
Ich sehe nicht, worauf du hinauswillst

sejuma

Könnte daran liegen, weil a ein Inline-Element ist:

Zitat

.post h2 a:link,

Lass hier h2 doch einfach weg und formatiere über a.

davidos_no.1

Zitat von jojo87

Kannst du das mal an einem Beispiel zeigen?
Ich sehe nicht, worauf du hinauswillst

Wenn ich border-bottom definiere, geht es nur über die Breite des Textes - deswegen inline-Element. Allerdings soll border-bottom über die gesamte Breite des Div's gehen - block-Element, was eine Überschrift ja normal ist.

Zitat von sejuma

Könnte daran liegen, weil a ein Inline-Element ist:
Lass hier h2 doch einfach weg und formatiere über a.

Habe ich jetzt so gemacht

Code

.post a:link.h2, .post a:visited.h2, .post a:active.h2, .post a:hover.h2 {
					padding: 0px;
					text-decoration: none;
					font-size: 2.0em;
					word-spacing: 0.0em;
					font-weight: lighter;
					color: #454545;
					border-bottom: 1px solid #252525;
					}

Leider hat sich nichts verändert...

sejuma

So meinte ich das nicht.
Ein Link ist ein Link und keine Überschrift. Deshalb wird er (seperat) mit "a" definiert.
Überschriften werden separat mit "h" definiert.
Somit macht es m.E. keinen Sinn, "a" und "h" innerhalb einer Angabe zu kombinieren.

Du solltest also "a" und "h" in der CSS-Datei vollkommen trennen.

"h" darf auf HTML-Seite auch nicht innerhalb von "a" vorkommen: http://de.selfhtml.org/html/referenz/elemente.htm#h1_h6
Ansonsten wäre ein Link nicht schlecht, damit man mal den Gesamtzusammenhang sieht.

davidos_no.1

Zitat von sejuma

So meinte ich das nicht.
Ein Link ist ein Link und keine Überschrift. Deshalb wird er (seperat) mit "a" definiert.
Überschriften werden separat mit "h" definiert.
Somit macht es m.E. keinen Sinn, "a" und "h" innerhalb einer Angabe zu kombinieren.

Du solltest also "a" und "h" in der CSS-Datei vollkommen trennen.

"h" darf auf HTML-Seite auch nicht innerhalb von "a" vorkommen: http://de.selfhtml.org/html/referenz/elemente.htm#h1_h6
Ansonsten wäre ein Link nicht schlecht, damit man mal den Gesamtzusammenhang sieht.

Ok, jetzt habe ich es verstanden - vielen Dank!

Tags