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

[HELP] Layout Problem mit CSS :-/

F

flashfreak

New member
guten abend allezusammen,
ich versuche mich solangsam daran meine homepages W3C konform zu gestalten und fange mit meiner privaten hp an.

folgendes layout habe ich bisher verwendet:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
		<title>{bereich}{title}</title>
		<style type="text/css" media="screen"><!--
body { color: #000000; font-size: 11; background: url(bg_main.png) repeat-y fixed center; padding-top: 0 }
.header { color: black; font-size: 11; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; background-color: white; text-align: left; margin: 0 auto; width: 620px }
.blog { position: relative; top: 4px }
.blog_navi { text-indent: 20px }
.blog_footer { color: #000; font-size: 11px; position: relative; top: 6px; width: 570px; height: 12px; border: solid 1px #b7b7b7 }
--></style>
	</head>
<body topmargin="0">
		<div align="center">
			a<a name="top" id="top"></a>
			<div id="header">
			<table width="620" border="0" cellspacing="0" cellpadding="0">
				<tr height="82">
					<td height="82"><a href="./"><img src="images/freakblog-logo.jpg" alt="" height="120" width="620" border="0"></a></td>
				</tr>
			</table>
			</div>
			<table width="620" border="0" cellspacing="0" cellpadding="0" background="images/mein-blog-header.jpg" height="19">
				<tr>
					<td class="blog_navi">{blog_navi}</td>
				</tr>
			</table>
			<table class="blog" width="620" border="0" cellspacing="0" cellpadding="2" height="70%">
				<tr>
					<td align="left" valign="top" width="420">{bodydata}</td>
					<td align="left" valign="top">{news}</td>
				</tr>
			</table>
			<br>
			<table class="main_footer" width="620" border="0" cellspacing="0" cellpadding="0" background="images/mein-blog-footer.jpg" height="20">
				<tr>
					<td>Copyright © freaky666.com 2003-2005</td>
				</tr>
			</table>
		
	</body>
</html>

wenn ich die grösse vom browser fenster verändere bleiben die tabellen immer in der position in der sie auf bei der normalen/vollbildgrösse waren.

habe ich allerdings nun dieses layout:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Freaky666.com</title>
		<style type="text/css" media="screen"><!--
html { 
  padding:0px;
  margin:0px;
}
body {
  background: url("bg_main.png") repeat-y fixed center top;
  font-size: 11px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  padding:0px;
  margin:0px;
}
#logo   { background-image: url(../images/freakblog-logo.jpg); visibility: visible; position: absolute; top: 0; left: 20%; width: 620px; height: 120px }
#navi  { background-image: url(../images/mein-blog-header.jpg); visibility: visible; position: absolute; top: 119px; left: 20%; width: 620px; height: 19px }
#content  { background-color: #fff; visibility: visible; position: absolute; top: 137px; left: 20%; width: 620px; height: 250px }
#footer  { background-color: #fff; background-image: url(../images/mein-blog-footer.jpg); visibility: visible; position: absolute; top: 386px; left: 20%; width: 620px; height: 20px }
--></style>
</head>
<body>
		<div id="logo"></div>
		<div id="navi"></div>
		<div id="content"></div>
		<div id="footer"></div>
	</body>
</html>

richtet sich die <div> elemente wie angegeben immer prozentual zum rand aus.
wie kann man das so hinbekommen das sie wie beim oberen layout immer ihre position beibehalten ?

habe mich schon mit den einzelnen möglichkeiten auseinandergesetzt (http://www.intensivstation.ch/css/8.html) komme aber nicht so recht weiter..


mfg
freaky
 
Zuletzt bearbeitet:
Naja, mit absoluten Angaben.
Statt 20% dann eben 180px oder so...

Aber nebenbei. Dieses position:absolute brauchst Du eigentlich gar nicht.
Z.B. könntest Du
Code: 
body {
margin:0px 0px 0px 180px; }
machen und dann Deine Divs einfach definieren.
So sollte es eigentlich auch gehen (ungetestet):
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Freaky666.com</title>
		<style type="text/css" media="screen"><!--
html, body {
  background: url("bg_main.png") repeat-y fixed center top;
  font-size: 11px;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  padding:0px;
  margin:0px 0px 0px 180px; 
}
#logo   { background-image: url(../images/freakblog-logo.jpg); width: 620px; height: 120px }
#navi  { background-image: url(../images/mein-blog-header.jpg); width: 620px; height: 19px }
#content  { background-color: #fff; width: 620px; height: 250px }
#footer  { background-color: #fff; background-image: url(../images/mein-blog-footer.jpg); width: 620px; height: 20px }
--></style>
</head>
<body>
		<div id="logo"></div>
		<div id="navi"></div>
		<div id="content"></div>
		<div id="footer"></div>
	</body>
</html>
 
erstmal danke für den tip,
nur bleiben logischerweise auch so die <div> elemte immer mit einem abstand von 180px (deinem bsp) vom rand weg stehen wenn man die grösse vom browserfenster ändert.

und so schauts aus:


der oberste und erste quellcode aus meinem threadpost funzt so wie ich es gerne haben will, sprich das der mittlere bereich sich auch anpasst beim ändern der browserfenstergrösse.

denn nicht jeder surft mit 1024x768 ;)



mfg
freaky
 
klar kann ich den gesamten content mit algin einfach zentrieren, aber dann tun sich andere probleme auf... naja egal.
trotzdem danke erstmal für die hilfestellungen.


mfg
freaky
 
Stehe ich auf der Leitung?
Kannst Du mal in einfachen Worten erklären, was Du wie haben willst?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben