• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

probleme mit css styles

C

chui

New member
Hi ihr!

ich (total unerfahren) brauche dringenst hilfe in sachen css *g*
ich hab meine seite nun soweit, das ich 2 header habe, ein textfeld und einen footer. der footer bleibt immer unterm textfeld! nun sollen neben dem textfeld und footer noch zwei linien - rechts und links
die linien sollen genauso groß sein wie textfeld+footer (also mit footer ende abschließen) und das textfeld soll sich + footer mit der seite abschließen, auch wenn kein text rinne steht (je nach browsergröße) -

hier erstmal mein quellcode des stylesheets

Code: 
	body {
			margin:0;
			padding:0;
			background:#ffffff;
			text-align:center;}
		
		
			#header {
				z-index:3;
				width:779px;
				height:100px;
				background:#efefef;
				border:0px;
				text-align:center;
				margin: 0;
				padding:0px;}
			
			#showcase {
				z-index:3;
				width:779px;
				height:80px;
				background:#0000ff;
				border:0px;
				text-align:center;
				margin: 0;
				padding:0px;}
		
					#flash {
						z-index:3;
						width:452px;
						height:139px;
						float:left;
						background:#ffff00;
						border:0px;
						text-align:center;
						padding:0px;
						top:100px;}
		
					#memberlogin {
						z-index:3;
						width:327px;
						height:139px;
						float:left;
						background:#aabbcc;
						border:0px;
						text-align:center;
						padding:0px;
						top:100px;}
			
				#content {
					z-index:1;
					width:771px;
					background:#ff0000;
					border:0px;
					margin:0;
					padding:0;
					height:100%;
					top:239px;}
					
					#lineleft {
					z-index:2;
					width:4px;
					background:#00ff00;
					border:0px;
					margin:0;
					padding:0;
					height:100%;
					float:left;
					top:239px;}
					
					#lineright {
					z-index:2;
					width:4px;
					background:#00ff00;
					border:0px;
					margin:0;
					padding:0;
					height:100%;
					float:right;
					top:239px;}
			
					#footer {
						z-index:1;
						width:771px;
						height:80px;
						clear:center;
						background:#efefef;
						border:0px;
						text-align:center;
						margin-top:0;
						padding:0px;}

und hier der code der html seite

Code: 
<html>
<head>
	<title>websitename</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<link rel="Stylesheet" media="all" type="text/css" href="style.css">
</head>

<body>

	<div id="header">head</div>
	
	<div id="showcase"><div id="flash">flash</div><div id="memberlogin">member</div></div>
	<div id="lineleft">1</div><div id="lineright">2</div>
	<div id="content">
	
		textfeld
	</div>
	
	
	<div id="footer">
		footer
	</div>


</body>
</html>

und so solls später aussehen (nur zur vereinfachung mal)

52c3d07bd7c0bf38de88f2b3b6876be9.JPG


problem1: wenn ich jetzt die linien in den content packe, bleiben sie totz 100 % klein.
problem 2 : die linien sind nicht mit dem footer abgeschlossen (so wies jetzt ist) und auch net links und rechts vom content (zumindest net 0px entfehrnt)
problem 3: wie bekomme ich das textfeld bzw. den footer mit der auflösung der seite abgeschlossen (von den linien ganz zu schweigen!)

css is schwierig, aber ich wollt mal was ohne tabellen probieren und aufgeben will ich auch noch nich ;)

ich hoffe ihr könnt mir helfen, sons werd ich noch ganz konfus!

Much thanks chui
 
Mach statt Linien, border.

Einen Border um das Textfeld
HTML: 
...
border-left:1px solid #ccc;
border-right:1px solid #ccc;
...

und einen um den Footer
HTML: 
...
border-left:1px solid #ccc;
border-right:1px solid #ccc;
...
und dann noch die Line-Bereiche löschen. Fertig...
 
hmm ... ich möchte ja nachher die divs mit hintergrundgrafiken belegen ... und die haben ne breite von 4 px
trotzdem thx
 
HTML: 
<html>
<head>
<title>websitename</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="Stylesheet" media="all" type="text/css" href="style.css">
</head>

<body>
<div id="main">
<div id="header">head</div>
<div id="flash">flash</div><div id="memberlogin">member</div>
<div id="lineleft">1</div>
<div id="content">
textfeld
</div>
<div id="lineright">2</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
HTML: 
body {
}

#main {
text-align: left;
vertical-align: middle;	
margin: 0px auto;
padding: 0px;
width:800px;
color:#000;
line-height:20px;
}

#header {
background-color:#f00;
height:150px;
width:508px;
position:absolute;
top:0px;
left:0px;
}

#flash {
position:absolute;
height:50px;
width:254px;
top:150px;
left:0px;
background-color:#00f;
}

#memberlogin {
width:254px;
top:150px;
left:254px;
height:50px;
background-color:#0f0;
position:absolute;
}

#lineleft {
clear:right;
background-color:#0ff;
float:left;
position: absolute; 
left:0px; 
width:4px; 
top: 200px;
height:500px; 
}

#lineright {
background-color:#0ff;
position:absolute; 
left:504px; 
width:4px; 
top:200px; 
height:500px;
overflow: auto;
}

#content {
background-color:#f0f;
position: absolute; 
left:4px; 
width:500px; 
height:470px;
top: 200px; 
overflow: auto;
}

#footer {
background-color:#ff0;
position:absolute;
width:500px;
top:670px;
left:4px;
height:30px;
}

Nicht dynamisch, aber funzt.
 
hmm ... so ganz hübsch ... aber wenn jetzt das textfeld größer wird, scrollt des mit ... wenn mehr text hinein kommt soll die ganze seite scrollen und der footer unter dem textfeld bleiben .... ich versuch mal an dem ding ein wenig rumzubasteln ... ;)
thx
 
ich pass jetzt einfach mal en hitergrund an die divs an und geb em ein padding:4px; ... für weitere lösungen bin ich immer dankbar (auch rein interessehalber) ;)

see ya chui
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben