Brauch Hilfe - mein Layout zerreißts beim Zoomen

Sakul · #1 (**permalink**) 17.03.2011, 17:32

Hi

danke schonmal im vorraus, dass sich das jemand durchliest und mir auch antwortet

Ich möchte noch vorrausschicken, dass das mein erstes Projekt in CSS ist und ich somit keinerlei Erfahrung habe - mein Wissen beruht momentan auf das eines Buches ^^

Ich arbeite gerade an einer Webseite für ein Schulprojekt. Die Seite sieht sehr gut aus, allerdings wird das Layout bei Zoom oder anderer Bildschirmauflösung als meiner (1280x1024) auseinandergerissen und das Menü bleibt als Riesenbalken stehen.

Das Zeil wäre, dass das Layout beim Zoom/Bildschirmanpassung sich gar nicht ändert, sondern sich im Prinzip wie ein Bild verhält, dass man vergrößert oder verkleinert - ohne Änderung der Verhältnisse zwischen den einzelnen Elementen und zwischen dem Menü und dem Hauptbereich. - Also das beim reinzoomen scrollbalken nach links/rechts und nach oben/unten auftreten (genau so wie die MSN-Webseite)

URL: Homepage des Schlerradios 'Radio Headset'

Ich hab schon versucht, alles in em-Werte umzurechnen, in dem ich im CSS folgendes vorangestellt habe und alle px-Werte durch 12 dividiert habe - hat aber absolut nichts gebracht, außer dass sich alle Größen und Abstände komplett geändert haben, da dürfte ich also auch irgendwas falsch gemacht haben...

Code:

html {
font-size: 75%; }

html>body {
fontsize:12px; }

der vollständige HTML-Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:"lang="de" lang="de">

<head>

<title>Homepage des Schülerradios 'Radio Headset'</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
<meta name="robots" content="all"/>
<meta name="revisit-after" content="5 days"/>
<meta name="keywords" content="radio headset, schülerradio, radio rosasgasse, rosasgasse, headset, grg 12, grg rosasgasse, rosasgasse radio" />
<meta name="description" content="Willkommen auf der Homepage des Radio Headsets, dem Schülerradios des GRG/BG Rosasgasse."/>
<meta name="author" content="Lukas Baronyai"/>
<meta name="copyright" content="(c) 2011 Copyright content: Lukas Baronyai. Copyright Design: Lukas Baronyai"/>

<link href="images/Radio_Headset-Favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<!-- start header -->

	<div id="logo">
		<img src="images/Radio_Headset_Logo.png" width="960" height="191" alt="Radio Headset Logo"/></div>
		
<!-- end header -->

<!-- start menu -->

<div class="menu">

	<ul>
		<li>
			<a id="current" target="_self" href="Home.html">Home</a>  
		</li>
		<li>
			<a target="_self" href="">News</a>
			<ul>
				<li><a href="" target="_self">neueste Sendung</a></li>
			</ul>
		</li>
		<li><a href="" target="_self" >Mitglieder</a>
			<ul>
				<li><a href="" target="_self">Mitglied 1</a></li>
				<li><a href="" target="_self">Mitglied 2</a></li>
				<li><a href="" target="_self">Mitglied 3</a></li>
				<li><a href="" target="_self">Mitglied 4</a></li>
			</ul>
		</li>
		<li><a href="" target="_self" >Programme</a>
			<ul>
				<li><a href="" target="_self">Programm 1</a></li>
				<li><a href="" target="_self">Programm 2</a></li>
				<li><a href="" target="_self">Programm 3</a></li>
				<li><a href="" target="_self">Programm 4</a></li>
			</ul>
		</li>
		<li><a href="" target="_self" >Archiv</a>
		</li>
		<li><a target="_self" href="http://www.rosasgasse.at/">Schulhomepage</a></li>
		<li><a target="_self" >Impressum</a>
		</li>
	</ul>
</div>

<!-- end menü -->

<!-- start page -->

<div id="page" style="width: 960px">

<!-- start sidebar -->

<div id="sidebar1" class="sidebar">
&nbsp;
<img border="0" src="images/grau.JPG" width="300" height="200">
&nbsp;
<img border="0" src="images/grau.JPG" width="300" height="200">
&nbsp;
<img border="0" src="images/grau.JPG" width="300" height="200">

</div>

<!-- end sidebar -->

<!-- start content -->

<div id="content" >
			
	<div class="post">
		<p style="text-align:justify;text-justify:inter-ideograph">&nbsp;</p>
		<p style="line-height: normal; margin-bottom: .0001pt" class="MsoNormal">
		<span style="font-size: 12.0pt; line-height: 115%; font-family: Tahoma,sans-serif; color: white">
		<h1>Ium pario has Viduitas Sordes suborior</h1> 
		
		rufus ut Simul Sperno rixa mos turbo lucus Mortifera veles Chalybs 
		imperito ardor. Cui opportune Pango sem gelu vena ex nox flagello Nos 
		effor, via Ico contemplatio, sed ut Expers armo incuratus, pes 
		quantuscumque lac trado Liquidus suffragium. Dito abeo solum captus 
		fastigate, se Contentus gaza eduro redigo, se Cuneus aura stupeo tam ac 
		Despero sedulo de Agrarius. Solito nego sepulcrum vos Ergo nam ualeo lex 
		desero. Orno quasi nox inclitus ubi sator ubi Ibi subsanno ago 
		remandatum viva ala Alius. Pala iam, voluptuosus Didicerat, 
		sesquimellesimus Lama nam administratio Tumulosus, nos ne 
		edo Agger trunco, poeta aula dum dono tueor iam typus dummodo sciscitor. 
		Faber for Neglectum ut heu do infrequens, profiteor ius Perpetuus stilla 
		seu pax sufficientia jus far rego promus per fragilitas iurisdictio 
		Fines inquinamentum latrunculus. Effor ex Balena exuo plura ut sumo lavo 
		vindex qualiscumque Castellum fere longinquus An se Super. Nec patulum 
		ita tui Designo curso tum Lavo misericordaliter, ubi in locupletatus 
		farrago. Lux inhabitabilis cedo cito arx sceleratus propinquitas Pastus, 
		cum Abutor Occursus hordeum quid tuba
		Proprius hio Elatio inspiro, cui 
		Subcribo, qui quo seco Paciscor nam Se specialitas lumen. Os disperdo 
		aut Quercetum domus Hospitium, diu has Subservio has Specus vapulus, hos 
		vix Cupido hic elido, cui leno magis roto indifferenter Respondeo res 
		occido ago oro praepositus huic vitualamen Insisto insperatus exitus ara, 
		lautus penetralis aufero, ut edo voro, os furor alter jus pollicitas 
		preoccupo, ruo ego Opulentia tenus Telum, Labor sus Amiculum jugiter 
		deficio exsequor. Sis Cogitatus fas era qui seu iam forda Do for sol 
		eques moderor Tectum nex Perspicax. Ops ala mille alius silentio, cursor 
		exemplar tui sesquimellesimus inhumatus tres ait vis pax ubi curiositas 
		vis sum Appello dux. Ne edo Palus profusius dedecus St quibus, se 
		inculta silva sis anima Secundum in Feri.<p></span></div>
	</div>
	
<!-- end content -->

		<div style="clear: both;">&nbsp;</div>
	</div>
	
<!-- end page -->

</div>

<div id="footer">

	<p class="copyright">©&nbsp;&nbsp;2010 All Rights Reserved &nbsp;•&nbsp; Design by Lukas Baronyai</p>
	
</div>

</body>

</html>

der dazugehörige CSS-Code:

Code:

body {
	margin: 30px 100px 0px 100px;
	padding: 30;
	background: #000000;
	text-align: justify;
	font-family:  Tahoma, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}

h1, h2, h3 {
	margin-top: 0;
}

h1 {
	font-size: 1.6em;
	font-weight: normal;
}

h2 {
	font-size: 1.6em;
}

h3 {
	font-size: 1em;
}

ul {
}

a {
	text-decoration: none;
	color: #2C4449;
}

a:hover {
	border-bottom: none;
}

a img {
	border: none;
}

img.left {
	float: left;
	width: 230px;
}

img.right {
	float: right;
	margin: 0 0 0 20px;
}

#header {
	width: 960px;
	margin: 0 auto;
}

/* Header */

#logo {
	width: 960px;
	height: 191px;
	margin: 0 auto;
	background: url(images/img02.jpg) no-repeat left top;
}

#logo h1, #logo p {
	margin: 0;
	color: #FFFFFF;
}

#logo span {
	color: #FFFFFF;
}

#logo h1 {
	padding: 25px 0 0 40px;
	letter-spacing: -1px;
	text-transform: lowercase;
	font-weight: normal;
	font-size: 4.8em;
}

#logo p {
	text-transform: lowercase;
	padding: 4px 0 0 43px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 22px;
	color: #FFFFFF;
}

#logo a {
	border: none;
	text-decoration: none;
	color: #FFFFFF;
}
.menu{
	border:none;
	border:0px;
	margin: 0px 50px 0px 50px;
	padding:0px;
	font-family:verdana;
	font-size:14px;
	font-weight:bold;
	color:#FFFFFF;
	}
.menu ul{
	background:url(images/menu-bg.gif) top left repeat-x;
	height:43px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px 5px 0px 5px;
		}
	.menu li a{
		color:#000000;
		display:block;
		font-weight:bold;
		line-height:43px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover{
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background:#e0e0e0;
		border-left:2px solid #000000;
		border-right:2px solid #000000;
		border-bottom:2px solid #000000;
		display:none;
		height:auto;
		filter:alpha(opacity=95);
		opacity:0.95;
		position:absolute;
		width:225px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		}
	.menu li li {
		display:block;
		float:none;
		padding:0px;
		width:225px;
		}
	.menu li ul a{
		display:block;
		font-size:12px;
		font-style:normal;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		.menu li ul a:hover{
			background:#949494;
			color:#000000;
			opacity:1.0;
			filter:alpha(opacity=100);
			}
	.menu p{
		clear:left;
		}	
	.menu #current{
		background:url(images/current-bg.gif) top left repeat-x;
		color:#ffffff;
		}
		
/* Wrapper */

#wrapper {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

/* Page */

#page {
	width: 960px;
	margin: 0 auto;
	padding: 0px;
	background: url(images/img03.jpg) no-repeat left top;
}

#page-bg {
}

/* Content */

#content {
	float: left;
	width: 460px;
	margin: 0px 20px 20px 100px;
}

.post {
	padding-bottom: 15px;
	line-height: 200%;
}

.post h1 {
	font-weight: normal;
}

.title {
	margin: 0;
	padding: 30px 0 4px 0px;
	font-size: 28px;
	font-weight: normal;
}

.title a {
	border-bottom: none;
	color: #FFFFFF;
}

.title a:hover {
	border-bottom: 1px dotted #000000;
}

.byline {
	margin: 10px 0px 20px 0px;
	padding: 4px 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
}

.tag {
	padding: 0 15px;
}

.entry {
	padding: 0px 0px;
}

.links {
	width: 80px;
	height: 33px;
	background: url(images/img05.jpg) no-repeat left top;
	text-align: right;
	font-weight: bold;
}

.links a {
	display: block;
	height: 25px;
	padding-top: 8px;
	padding-left: 10px;
	text-align: left;
}

.links a:hover {
}

/* Sidebars */

#sidebar1 {
	float: left;
	width: 230px;
}

img_left{
	float: left;
	width: 230px;
}

/* Footer */

#footer {
	width: 960px;
	height: 80px;
	margin: 0 auto;
	padding: 0 20px;
	border-top: 1px solid #2C4449;
}

#footer p {
	margin: 0;
	padding: 10px 0 0 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #737373;
}

#footer a {
	color: #BDBDBD;
}

#footer .link {
}

#footer .copyright {
}

Ich hoffe, jemand kann mir helfen!
bis dahin
Gruß
Sakul

cebito · #2 (**permalink**) 17.03.2011, 17:50

Wenn ich sowas sehe

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

da bricht sogar der Validator ab, weil er nicht weiß nach was er eigentlich validieren soll. Vielleicht könntest dich mal für einen Doctype entscheiden.

... seh grad, im zweiten Anlauf hat ers doch geschafft http://validator.w3.org/check?uri=ht...Inline&group=0 also, erstmal den Code bereinigen und dann mal schaun

Sakul · #3 (**permalink**) 17.03.2011, 17:54

Um ehrlich zu sein, habe ich keine Ahnung, welchen Unterschied es bei den Doctyps gibt - welcher sollte den dort stehen?

Webcoder · #4 (**permalink**) 18.03.2011, 04:35

Zitat:

Zitat von Sakul

Um ehrlich zu sein, habe ich keine Ahnung, welchen Unterschied es bei den Doctyps gibt - welcher sollte den dort stehen?

Hi Sakul

ich empfehle dir die zweite Variante (HTML 4.01 Strict) zu verwenden.

Damit du auch weisst was du da tust, solltest du mal bei Selfhtml nachlesen.

Weiteres Vorgehen:
Nachdem du nur noch ein Doctype drin hast, validierst du die Seite und dann schaust du dir die Seite mal ohne Styles an, so sieht man ob das reine HTML auch deinen Vorstellungen entspricht. Danach bindet man die Style-Sheet-Datei ein und erstellt das Design. Eine Mischung von Styles in der CSS-Datei und dem HTML-Code sollte möglichst vermieden werden. Im Prinzip ist es nämlich nicht notwendig und bedeutet meistens, dass es Designfehler gibt.

Mit freundlichem Gruß
Webcoder

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bitte um Layout hilfe	gunnar_hst	CSS	0	20.06.2010 14:57
Layout selbst coden - Hilfe !	kgsbm	CSS	3	25.03.2008 19:25
Hilfe bei gesamten CSS Layout	mexxat	CSS	0	22.08.2007 13:40
Brauche Hilfe beim 2-Spaltigen Layout	Kaimane	CSS	1	15.08.2007 00:10
Layout Hilfe	claude	Site- und Layoutcheck	12	25.02.2007 12:32