Verschiedene Css Probleme

Stefan Krause · 7 Juni 2011

Hallo User,

ich wollte eben seit langem mal wieder eine Website basteln. Bis jetzt finde ich das Resultat aber eher schlecht. Ich hoffe ihr könnt mir bei einigen Problemen helfen.

Problem 1:
Die Rahmen über und unter "Stefan Krause", sollen doppelt sein. Ich habe das auch in den CSS Code geschrieben. Wird aber leider nicht umgesetzt.

Problem 2:
Neben "Stefan Krause", soll ein dünner Rahmen sein also praktisch nur ein feiner horizontaler Strich. Daneben soll "Hallo" stehen. Hallo ist selbstverständlich nur ein Lückenfüller...

Problem 3:
Mein Content fängt nicht ganz oben am Dokument an und hört auch nicht ganz unten auf, obwohl ich height auf 100% habe...

Hier folgt der html Code:

HTML:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" /> 
	</head>
	<body>
		<div id="content">
				<div id=header>
				<h1>Stefan Krause</h1>
				<p> Hallo</p>				
				</div>
		
			<div id="navi">
				<ul id="navigation">
				    <li><a href="#Beispiel">Startseite</a></li>
				    <li><a href="#Beispiel">Zur Person</a></li>
				    <li><a href="#Beispiel">Blog</a></li>
				    <li><a href="#Beispiel">Kontakt</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Und hier der CSS-Code:

Code:

body {

background-color: #3A3A3C;
width: 100%;
height: 100%;
}

#content {

height: 100%;
width: 80%;
margin: 0 auto;
background-color: #D9D9D9;
border-left: 2px solid #333333;
border-right: 4px solid #333333;
padding: 30px;
color: #3A3A3C
}

#header {
display: inline;
border-right: 2px solid black;
}

h1{
font-size: 50px;
padding-left: 30px;
border-top: 1px double #565555;
border-bottom: 1px double #565555;
}

ul#Navigation {
    	margin: 0; 
	padding: 5px;
	text-align: center;
	text-decoration: none;
	margin: -30px 0 -30px 0;
	font-size: 25px;
	border-bottom: 1px double #565555;


}
  
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
     text-decoration: none;

}


li {
list-style: none;
text-decoration: none;
}

a{
     text-decoration: none;
	color: #3A3A3C

}

Gruß
Stefan

toney · 7 Juni 2011

Problem 1: Wenn du eine doppelte border willst musst du die border natürlich größer als 1 Pixel machen. 1px für Linie 1 und 2, 1px für den Platz zwischen beiden.

Problem 2: Wenn du einen dünenn Rahmen willst aber 2px schreibst ist das klar, dass das schief geht. Um den Text neben dein h1 zu setzen mach das mit float.

Problem 3: Du musst deinen Body margin/padding auf 0 bringen. Siehe CSS.

Code:

body {
background-color: #3A3A3C;
width: 100%;
height: 100%;
margin:0;
padding:0;
}

#header {
display: inline;
border-right: 1px solid black;
float:left; 
}

h1{
font-size: 50px;
padding-left: 30px;
border-top: 3px double #565555;
border-bottom: 3px double #565555;
}

Code:

<div id="header">
<h1>Stefan Krause</h1>
</div>
<div id="hallo">
<p> Hallo</p>
</div>
<div style="clear:left;"></div>

Stefan Krause · 7 Juni 2011

Danke erstmal für die Hilfe. Klingt auch alles sehr logisch und nachvollziehbar. Habe das ganze eben gerade das ganze mal ausprobiert, aber irgendwie verschlechtert sich alles eher. Ich glaube ich habe irgendwo einen Fehler gemacht...

HTML:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" /> 
	</head>
	<body>
		<div id="content">
				<div id="header">
					<h1>Stefan Krause</h1>
				</div>
				<div id="hallo">
					<p> Hallo</p>
				</div>
				<div style="clear:left;"></div>

			<div id="navi">
				<ul id="navigation">
				    <li><a href="#Beispiel">Startseite</a></li>
				    <li><a href="#Beispiel">Zur Person</a></li>
				    <li><a href="#Beispiel">Blog</a></li>
				    <li><a href="#Beispiel">Kontakt</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Code:

body {

background-color: #3A3A3C;
width: 100%;
height: 100%;
margin:0;
padding:0;

}

#content {
height: 100%;
width: 80%;
margin: 0 auto;
background-color: #D9D9D9;
border-left: 2px solid #333333;
border-right: 4px solid #333333;
padding: 30px;
color: #3A3A3C;
}

#header {
display: inline;
border-right: 1px solid black;
float:left; 


h1{
font-size: 50px;
padding-left: 30px;
border-top: 3px double #565555;
border-bottom: 3px double #565555;

}

ul#Navigation {
    	margin: 0; 
	padding: 5px;
	text-align: center;
	text-decoration: none;
	margin: -30px 0 -30px 0;
	font-size: 25px;
	border-bottom: 1px double #565555;


}
  
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
     text-decoration: none;

}


li {
list-style: none;
text-decoration: none;
}

a{
     text-decoration: none;
	color: #3A3A3C;

}

toney · 7 Juni 2011

Du hast im CSS bei #header die schließende Klammer } vergessen

Stefan Krause · 7 Juni 2011

Diese dummen kleinen Fehler...
Letzte Frage für Heute, stehe eh gerade irgendwie auf dem Schlauch...
Wie bekomme ich meine Überschrift "Stefan Krause| Hallo" zwischen die beiden Rahmen?

HTML:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" /> 
	</head>
	<body>
		<div id="content">
			<div id="head">						
				<div id="header">
					<h1>Stefan Krause</h1>
				</div>
				<div id="hallo">
					<p> Hallo</p>
				</div>
				<div style="clear:left;"></div>
			</div>
			<div id="navi">
				<ul id="navigation">
				    <li><a href="#Beispiel">Startseite</a></li>
				    <li><a href="#Beispiel">Zur Person</a></li>
				    <li><a href="#Beispiel">Blog</a></li>
				    <li><a href="#Beispiel">Kontakt</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Code:

body {

background-color: #3A3A3C;
width: 100%;
height: 100%;
margin:0;
padding:0;

}

#content {
height: 100%;
width: 80%;
margin: 0 auto;
background-color: #D9D9D9;
border-left: 2px solid #333333;
border-right: 4px solid #333333;
padding: 30px;
color: #3A3A3C;
}


#head {
border-top: 3px double #565555;
border-bottom: 3px double #565555;
height: 60px;

}


#header {
display: inline;
float:left; 

}

h1{
font-size: 50px;
padding-left: 30px;


}

ul#Navigation {
    	margin: 0; 
	padding: 5px;
	text-align: center;
	text-decoration: none;
	margin: 200px 0 -30px 0;
	font-size: 25px;
	border-bottom: 1px double #565555;


}
  
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
     text-decoration: none;

}


li {
list-style: none;
text-decoration: none;
}

a{
     text-decoration: none;
	color: #3A3A3C;

}

toney · 7 Juni 2011

Wie "zwischen die Rahmen" ?
Versteh ich grad nich ganz, sorry ;)

Stefan Krause · 7 Juni 2011

So sieht es ja momentan aus. Und ich möchte halt, dass die Überschrift "Stefan Krause.... " zwischen die beiden Rahmen/Border kommt.

struppi · 7 Juni 2011

Deiner Seite würde darüber hinaus ein DOCTYPE gut bekommen, der Quirksmode in dem sie im Moment dargestellt wird, birgt einige Fallstricken

toney · 7 Juni 2011

Ah, du nutzt Chrome, damit hab ichs mir nicht angeschaut. Ich denke mal du solltest in deinem <h1> ein wenig mit line-spaing bzw. line-height rumexperimentieren (also verringern), dann sollte das passen.

Stefan Krause · 7 Juni 2011

BTW: Das Doctype hat die Lage eher verschlimmert, aber Danke für den Tipp...

toney · 7 Juni 2011

Der Doctype hat die Lage nicht verschlimmert, sondern schlimmen Code normalisiert :)

struppi · 7 Juni 2011

Stefan Krause schrieb:
BTW: Das Doctype hat die Lage eher verschlimmert, aber Danke für den Tipp...

Dann hast du einige Fehler in deinem Code, die durch den Standardmode erst angezeigt werden.

Stefan Krause · 7 Juni 2011

Beim nächsten Mal baue ich das Doctype gleich am Anfang mit ein ;-)
Die Überschrift und der Text daneben sind jetzt endlich von einem gemeinsamen Rahmen umgeben, die beiden Elemente konnte ich/wir ja auch erfolgreich mithilfe des feinen Rahmens trennen. Eigentlich dachte ich dran ganz rechts oben auch das Datum anzeigen zu lassen, dass mache ich dann Morgen. Aber ich bräuchte nochmal Hilfe bei der gepunkteten Linie.
Ich möchte gerne alle drei Elemente mit feinen Lininen von einander abtrennen, aber leider hören die Border mit drinne auf...

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css" /> 
	</head>
	<body>
		<div id="content">
			<div id="head">						
				<div id="name">
					<h1>Stefan Krause</h1>
				</div>
				<div id="discr">
					<p>Ein kleiner privater Blog</p>
				</div>
				<div id="b">
					<p> </p>
				</div>
				<div style="clear:left;"></div>
			</div>
			<div id="navi">
				<ul id="navigation">
				    <li><a href="#Beispiel">Startseite</a></li>
				    <li><a href="#Beispiel">Zur Person</a></li>
				    <li><a href="#Beispiel">Blog</a></li>
				    <li><a href="#Beispiel">Kontakt</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Code:

body {

background-color: #3A3A3C;
width: 100%;
height: 100%;
margin:0;
padding:0;

}

#content {
height: 100%;
width: 80%;
margin: 0 auto;
background-color: #D9D9D9;
border-left: 2px solid #333333;
border-right: 4px solid #333333;
padding: 30px;
color: #3A3A3C;
}


#head {
border-top: 3px double #565555;
border-bottom: 3px double #565555;
height: 10% ;


}


#name {
display: inline;
float:left; 
border-right: 1px dotted #565555;
padding-right:10px;
font-size: 25px;

}

h1{
line-height: 0%;
}

#discr {
margin-left: 32%;
font-size: 20px;
border-right: 1px dotted #565555;
margin-right: 47%;
height: 100%;
}

#b{
border-left: 1px dotted #565555;

}
ul#Navigation {
    	margin: 0; 
	padding: 5px;
	text-align: center;
	text-decoration: none;
	margin: 200px 0 -30px 0;
	font-size: 25px;
	border-bottom: 1px double #565555;


}
  
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
     text-decoration: none;

}


li {
list-style: none;
text-decoration: none;
}

a{
     text-decoration: none;
	color: #3A3A3C;

}

Marv · 7 Juni 2011

Das liegt daran, dass deine Divs, unterschiedliche Höhen haben.
Da z.B. das p-Tag in deinem "#discr" Container margin-top hat, verschiebt dieses das #discr -Div nach unten,
somit fängt der border an der Stelle auch erst an und nicht ganz oben.

Stefan Krause · 7 Juni 2011

Ich habe jetzt mal alle Höhen entfernt... Sieht immer noch nicht so gut aus, auch wenn sich die Verschiebung jetzt gelegt hat. Nur wie kann ich den Border von dem rechten Element jetzt "richtig" machen? http://stefankrause.square7.ch/Versuche/Sommer/

Marv · 7 Juni 2011

Ich habe ja nicht gesagt, dass alle Höhen raus sollen, sondern dass z.B. das p-Tag noch margin nach oben und unten hat und so die Höhe des Containers beeinflusst.

Die Lösung wäre, allen p-Tags margin:0; zuzuweisen, ebenso der h1,
oder die p-Tags im Div mit der ID "discr" und dem Div mit der ID "b" zu entfernen,

und dann allen 3 Containern die selbe Höhe gibst (z.B. 67px - wie im Moment das div mit der h1).

Insgesamt ist halt wichtig, dass alle Divs die selbe Höhe haben, damits wie gewünscht aussieht.
Dabei musst du halt beachten, dass die Elemente in den Divs durch margin oder padding dieses in der Höhe verändern.

Selbst wenn du den Elementen (h1 oder p) kein margin / padding zugeweisen hast sind für diese Elemente durch den Browser immer schon werte vordefiniert.
Diese lassen sich z.B. durch eine CSS-Reset-Datei auf 0 zurück setzen.

Stefan Krause · 8 Juni 2011

Ist es möglich auf die Reset.css zu verzichten, weil wenn nicht sieht das nach relativ viel Arbeit aus...
Hier nochmal mein neuer CSS Code. Sieht damit aber auch nicht besser aus.

Code:

body {

background-color: #3A3A3C;
width: 100%;
height: 100%;
margin:0;
padding:0;

}

#content {
height: 100%;
width: 80%;
margin: 0 auto;
background-color: #D9D9D9;
border-left: 2px solid #333333;
border-right: 4px solid #333333;
padding: 30px;
color: #3A3A3C;
}


#head {
border-top: 3px double #565555;
border-bottom: 3px double #565555;
width: 100%;


}


#name {
display: inline;
float:left; 
border-right: 1px dotted #565555;
padding:0 auto;
font-size: 18px;
width: 34%;
height: 30px;

}

h1 {
margin: 0;
padding: 0;
}

p{
margin: 0;
padding: 0;
}

#discr {
padding: 0 auto;
font-size: 20px;
border-right: 1px dotted #565555;

width: 33%;
height: 30px;
margin: 0 auto;
}

#b{
#border-left: 1px dotted #565555;
width: 33%;
height: 30px;
margin: 0 auto;
}

ul#Navigation {
    	margin: 0; 
	padding: 5px;
	text-align: center;
	text-decoration: none;
	margin: 200px 0 -30px 0;
	font-size: 25px;
	border-bottom: 1px double #565555;


}
  
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
     text-decoration: none;

}


li {
list-style: none;
text-decoration: none;
}

a{
     text-decoration: none;
	color: #3A3A3C;

}

Marv · 8 Juni 2011

Hallo, unten mal den von mir korrigierten Code.
Die 0-Setzung der paddings und margins hätte dir eine Reset-Datei ja schonmal abgenommen
und wirkt in der regel immer positiv darauf, dass dein Design in allen Browsern möglichst gleich dargestellt wird.
Mir persönlich hat eine Reset-Datei immer geholfen, wenn man sie von Anfang an einbindet (sonst hätte ich sie nicht empfohlen). Aber natürlich gibt es auch über CSS-Reset-Dateien verschiedene Meinungen.

Zum Code:
-Das die Ränder nicht nach unten gingen lag an dem "b"-Div darunten, da du das discr-Div nicht gefloatet hast (hab ich geändert)
-Damit alle Divs im head-Div die selbe Höhe haben habe ich folgende Angaben gemacht (Welche die Div Elemente in der ersten Ebene im head-Div anspricht):

HTML:

#head > div {
height:60px;
}

und dem float-Div, was auf der selben Ebene liegt height:0; gegeben (Das soll ja schließlich keine Höhe haben).
-Das die h1 einen größen Abstand nach oben hat liegt an der line-height.

So sollte es klappen: (Die Positionierung der inneren Elemente der Divs regelst du dann entsprechend wieder per padding / margin )

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<title></title>
		
	</head>
	<body>
		<div id="content">
			<div id="head">						
				<div id="name">
					<h1>Stefan Krause</h1>
				</div>
				<div id="discr">
					<p>Ein kleiner privater Blog</p>
				</div>
				<div id="b">
					<p> </p>
				</div>
				<div style="clear:left;height:0;"></div>
			</div>
			<div id="navi">
				<ul id="navigation">
				    <li><a href="#Beispiel">Startseite</a></li>
				    <li><a href="#Beispiel">Zur Person</a></li>
				    <li><a href="#Beispiel">Blog</a></li>
				    <li><a href="#Beispiel">Kontakt</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

Und CSS

Code:

body {

background-color: #3A3A3C;
width: 100%;
height: 100%;
margin:0;
padding:0;

}

#content {
height: 100%;
width: 80%;
margin: 0 auto;
background-color: #D9D9D9;
border-left: 2px solid #333333;
border-right: 4px solid #333333;
padding: 30px;
color: #3A3A3C;
}


#head {
border-top: 3px double #565555;
border-bottom: 3px double #565555;
width: 100%;
}

#head > div {
height:60px;
}



#name {
display: inline;
float:left; 
border-right: 1px dotted #565555;
padding:0 auto;
font-size: 18px;
width: 34%;
height: 30px;

}

h1 {
margin: 0;
padding: 0;
}

p{
margin: 0;
padding: 0;
}

#discr {
padding: 0 auto;
font-size: 20px;
border-right: 1px dotted #565555;
float:left;
width: 33%;
height: 30px;
margin: 0 auto;
}

#b{
#border-left: 1px dotted #565555;
width: 33%;
height: 30px;
margin: 0 auto;
}

ul#Navigation {
    	margin: 0; 
	padding: 5px;
	text-align: center;
	text-decoration: none;
	margin: 200px 0 -30px 0;
	font-size: 25px;
	border-bottom: 1px double #565555;


}
  
ul#Navigation li {
    list-style: none;
    display: inline;
    margin: 0.4em; padding: 0;
     text-decoration: none;

}


li {
list-style: none;
text-decoration: none;
}

a{
     text-decoration: none;
	color: #3A3A3C;

}

Verschiedene Css Probleme

Stefan Krause

Neues Mitglied

toney

Guest

Stefan Krause

Neues Mitglied

toney

Guest

Stefan Krause

Neues Mitglied

toney

Guest

Stefan Krause

Neues Mitglied

struppi

Guest

toney

Guest

Stefan Krause

Neues Mitglied

toney

Guest

struppi

Guest

Stefan Krause

Neues Mitglied

Marv

Mitglied

Stefan Krause

Neues Mitglied

Marv

Mitglied

Stefan Krause

Neues Mitglied

Marv

Mitglied

Neueste Beiträge