Webseite statisch machen

europachat

Hallo,

habe ein Webdesign auf http://wakestars.de/seite.php und das Design ist leider dynamisch. Wie mach ich das, das das komplette Design statisch ist, weil bei Dynamisch das mit den größen immer so umständlich ist. Wäre super, wenn mir dabei jemand helfen könnte es statisch zu machen.

Hier mal der CSS Code:

PHP

.body {
	width: 100%;
	height: 100%;


}


#header {
	background-image:url(images/header.jpg);
	background-repeat:repeat-x;
	background-color: #14005E;
	margin: 0;
	width: 100%;
	min-height: 147px;
}


#header-up {
	background-image:url(images/toolbar-up.png);
	background-repeat: repeat;
	height: 30px;
	border-bottom: 1px #FFFFFF;
}

#up-content {
	font-family: 'Trebuchet MS',Arial,sans-serif;
	unicode-bidi: embed;
	color: #EBF1F6;
	margin:auto;
	width:80%;
}


#UserNote {
	display: table-cell;
	float: left;
	padding: 10px 5px 3px 0;
	vertical-align:top;
	white-space: nowrap;
	height: 12px;
}


#UserMenu {
	display: table-cell;
	padding: 10px 5px 3px 0;
	vertical-align:top;
	white-space: nowrap;
	height: 12px;
}


#header-middle {
	height: 90px;
	width: 100%;
}


#middle-content {
	height: 100%;
	width: 80%;
	margin:auto;
	text-align: center;
}


#content-logo {
	background-image:url(images/logo.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 260px;
	float: left;
	margin: 5px 0;
}


#content-search {
	background-image:url(images/search-middle.png);
	background-repeat: no-repeat;
	float: right;
	height: 44px;
	margin: 23px 0;
	width: 230px;
}


#search-place {
	border-width: 0;
    margin: 0;
    padding: 10px;
	color: #57595A;
}


#header-bottom {
	background-image:url(images/menu-top.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 37px;
}


#bottom-content {
	height: 37px;
	width: 80%;
	margin:auto;
	text-align: center;
}


#content-menu {
	unicode-bidi: embed;
}


#content-menu a {
	float: left;
    	line-height: 1;
   	padding: 3px 5px 6px;
	height: 21px;
	width: auto;
}


.menu-one {
	margin-left:-1px;
	text-align: left;
	float: left;
	border-color: #C2C2C2;
    	border-style: solid;
    	border-width: 0 1px 1px;
}


.menu-text {
	position: relative;
	float: right;
	padding-left: 5px;
	line-height: 2;
}


a.menu-place {
	display:block;
	height:30px;
	color: #333333;
	text-shadow: 0 1px 0 #FFFFFF;
	text-decoration: none;
	text-underline: none;
}


a.menu-place:active { 
	display:block;
	background-image:url(images/menuActive.png); 
	height:30px;
	color: #D9E5EF;
	text-shadow: 0 -1px 0 #003366;
}


a.menu-place:active:hover {
	color: #FFFFFF;
}


a.menu-place:hover { 
	background-image:url(images/menuHover.png);  
	height:30px;
	color: #333333;
	text-shadow: 0 1px 0 #FFFFFF;
}


a.menu-place:visited {
		color: #333333;
}


.menu-place img { float:left; }


* {margin:0;padding: 0px 0;text-decoration:none;}
#men {font-size:10px}
#men {width:218px;}
#men p, #men div {margin:9px;}
#men .img a {border-bottom:1px solid #99f;}
#men .bsection {border:1px solid #99f;}
#men .img a, .bsection * {padding:.3em;}
#men a, dt {color:#aad;display:block;}
#men h2 {background:#eef;color:#779;font-weight:bold;font-size:1.1em;}
#men {font:normal normal normal 1em/1em sans-serif;font-size:10px;}

Alles anzeigen

Hier mal der HTML Code:

PHP

<? session_start();?>
<?php print "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n"; ?>




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<?
include("connect.inc.php");
include("inc/onlinestatus.inc.php");
include("inc/status.inc.php");


$usernasme_session = $_SESSION['username'];
$username_get = $_GET['username'];


if($username_session == $username_get){$s = "mp";}


###################User Daten###########################
$abfrage_ud = "SELECT * FROM member WHERE username = '$username_session'";
$ergebnis_ud = mysql_query($abfrage_ud);
$user_daten = mysql_fetch_object($ergebnis_ud) ;


#########Datenabfrage anhand des Usernames##############
$abfrage = "SELECT * FROM member WHERE username = '$username_get'";
$ergebnis = mysql_query($abfrage);
$daten = mysql_fetch_object($ergebnis);


//Datenbankabfrage mit der ermittelten ID
$abfrage = "SELECT * FROM member WHERE id = '$id'";
$ergebnis = mysql_query($abfrage);
$row = mysql_fetch_object($ergebnis);


//Profilbild Aktiv / Inaktiv
if($user_daten->profilbild_aktiv == 0){$profilbild = "np.gif";}
else{$profilbild = $user_daten->bild;}
?>
<?
$domain =  "http://".$_SERVER['SERVER_NAME'];
?>
<head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" >
 <title>Wen kennst Du - Wer kennt dich - Vernetze dich mit anderen</title>
 <script type="text/javascript" src="<?echo $domain;?>/design/JS.js"></script>
 <script type="text/javascript" src="<?echo $domain;?>/design/bbcode.js"></script>
 <script type="text/javascript" src="<?echo $domain;?>/design/suche_username.js"></script>
 
<link rel="stylesheet" type="text/css" href="<?echo $domain;?>/design/standart.css">
<link rel="stylesheet" href="<?echo $domain;?>/design/header.css">
</head>
<body>


	<div id="header" > 
		<div id="header-up">
			<div id="up-content">
				<div id="UserNote" >Sie sind nicht angemeldet.
				</div>
				<div id="UserMenu" >Menu</div>
			</div>
		</div>
		<div id="header-middle">
			<div id="middle-content">
				<div id="content-logo">
				</div>
				<div id="content-search">
					<div id="search-place">
					</div>
				</div>
			</div>
		</div>
		<div id="header-bottom">
			<div id="bottom-content">
				<div id="content-menu">
					<div class="menu-one">
						<a class="menu-place" title="Startseite" href="#">
							<img alt="Forum" src="<?echo $domain;?>/design/images/icons/menu001.png">
							<p class="menu-text">Startseite</p>
						</a>
					</div>
					<div class="menu-one">
						<a class="menu-place" title="Anmelden" href="#">
							<img alt="Bugtracker" src="<?echo $domain;?>/design/images/icons/menu002.png">
							<p class="menu-text">Anmelden</p>
						</a>
					</div>
					<div class="menu-one">
						<a class="menu-place" title="Login" href="#">
							<img alt="Kalender" src="<?echo $domain;?>/design/images/icons/menu003.png">
							<p class="menu-text">Login</p>
						</a>
					</div>
					<div class="menu-one">
						<a class="menu-place" title="Hilfe" href="#">
							<img alt="Mitglieder" src="<?echo $domain;?>/design/images/icons/menu004.png">
							<p class="menu-text">Hilfe</p>
						</a>
					</div>
					<div class="menu-one">
						<a class="menu-place" title="Forum" href="#">
							<img alt="Galerie" src="<?echo $domain;?>/design/images/icons/menu005.png">
							<p class="menu-text">Forum</p>
						</a>
					</div>
					<div class="menu-one">
						<a class="menu-place" title="Impressum" href="#">
							<img alt="Blog" src="<?echo $domain;?>/design/images/icons/menu006.png">
							<p class="menu-text">Impressum</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>


<?php if ($username_session !== null) { ?>
<div id="men" style="right:929px; position:absolute; width: 220; height: 314; float:left;">
<p class="img">
<img id="profile_pic" class="logo img" alt="User Bild" src="<?echo $domain;?>/img/thumb3/<?echo $profilbild;?>" width="200" height="150">
<a href="<?echo $domain;?>/startseite/meine_fotos/">Fotos von mir zeigen</a>
<a href="<?echo $domain;?>/einstellungen">Einstellungen bearbeiten</a>
</p>
<p class="bsection"><a href="<?echo $domain;?>/einstellungen/startseite">Schreib etwas über dich</a></p>
<div class="bsection">
<h2>Informationen</h2>
<dl>
<dt>Geburtstag:</dt>
<dd><?echo $user_daten->gb_tag.".".$user_daten->gb_monat.".".$user_daten->gb_jahr;?></dd>
<dt>Derzeitiger Wohnort:</dt>
<dd><?echo $user_daten->plz;?> <?echo $user_daten->stadt;?></dd>
</dl>
<?php } ?>
</div>
</div>
<?php if ($username_session !== null) { ?>
<div style="padding:0 126px 0 335px">
<?php }else{ ?>
<div style="width:1015px;margin:0 auto">
<?php } ?>
<div id="content">
</div>
</body>
</html>

Alles anzeigen

sejuma

Die prozentualen width-Werte musst du mit fixen Pixelwerten ersetzen.

Gebby

Zitat von europachat

Hallo,
habe ein Webdesign auf http://wakestars.de/seite.php und das Design ist leider dynamisch.

Was heißt leider dynamisch? Letzteres ist gut. Leider füllt deine Seite nicht den Bildschirm aus.

europachat

Ja, ich möchte es statisch haben, das sich da nichts verschiebt und immer gleich groß bleibt.

Sejuma: Muss ich alle % in Pixel ändern? Wenn ja, woher weiß ich die Werte? Was möchtest dafür, wenn du es mir machen könntest, bitte?

sejuma

Der Prozentwert richtet sich nach der jeweiligen Größe des Browserfensters. Insofern kannst du - und ich auch nicht - wissen, wieviele Pixel du einsetzen musst.
Ich persönlich verwende meist eine Gesamtbreite von ca. 900 - 1000px.

Die zu verwendenden Breiten hängen u.a. auch von den Breiten der verwendeten Grafiken ab, so dass diese dann auch in die entsprechenden '"Spalten" passen.
Wird viel Text verwendet, sollte die Breite nicht zu groß sein, da dann für den Leser der "Tennis-Zuschauer-Effekt" eintritt. D.h., er muss beim Lesen den Kopf von lin ks nach rechts bewegen, was viel Konzentration erfordert und die Seite dann deshalb unattraktiv macht. Siehe hierzu insbesondere Ziffer 3: http://www.ohne-css.gehts-gar.net/0015.php

Tags