nicht angemeldet
Layout wird auseinandergerissen
Hallo zusammen
Ich versuche gerade ein Layout zu entwerfen, welches flexibel in den Auflösungen und bis zu einem gewissen Punkt bei den Zoom-Funktionen der Browser ist.
Im Firefox kann ich die Schriftgröße weitestgehend skalieren im IE7 leider nicht, sobald ich dort mit "STRG-Scrollrad" arbeite, muss ich waagerecht scrollen.
Wie kann ich das verhindern?
Hier mein css-code:
@charset "utf-8";
body{
margin:0;
padding:0;
background-color:#FFFFCC;
color:#333333;
}
#container{
width:96%;
left:50%;
top:25px;
position:absolute;
margin-left:-48%;
background-color:#FFFFCC;
font-family:Helvetica, sans-serif;
font-size:0.8em;
}
#wrapFooter{
padding:5px;
}
#wrapBreadCrump{
padding:2px;
}
#wrapContent{
padding:10px 2px;
}
#wrapper{
padding:10px;
}
#header{
height:150px;
width:100%;
}
#breadcrump{
width:80%;
margin-left:20%;
font-size:0.7em;
font-weight:bold;
}
#nav_r{
width:15%;
float:left;
vertical-align:top;
font-size:0.9em;
}
#nav_l{
width:20%;
float:left;
vertical-align:top;
font-size:0.9em;
}
.nav_box{
width:100%;
border:1px solid #bcb786;
border-collapse:collapse;
}
.nav_th{
background-image:url(../pics/navi/nav_back.gif);
}
.nav_link{
display:block;
}
#content{
width:65%;
float:left;
vertical-align:top;
font-size:0.9em;
}
.content_box{
border:1px solid #bcb786;
border-collapse:collapse;
background-color:#FFFFFF;
}
#footer{
width:100%;
clear:both;
text-align:center;
font-size:0.7em;
font-weight:bold;
}
a:link { text-decoration:none; color:#333333;}
a:visited { text-decoration:none; color:#333333;}
a:hover { text-decoration:underline; color:#990000; }
a:active { text-decoration:none; color:#333333; }
a:focus { text-decoration:none; color:#333333;}
<!-- HTML start -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout_02</title>
<link rel="stylesheet" type="text/css" href="css/layout_01.css" media="screen" />
</head>
<body>
<div id="container">
<div id="header">
<div id="wrapper">Ich bin der Header</div>
</div>
<div id="breadcrump">
<div id="wrapBreadCrump">Pfad</div>
</div>
<div id="nav_l">
<div id="wrapper">
<table class="nav_box">
<tr>
<th class="nav_th">Allgemeines</th>
</tr>
<tr>
<td><a href="#" class="nav_link">Home</a></td></tr>
<tr><td><a href="#" class="nav_link">Kontakt</a></td></tr>
<tr><td><a href="#" class="nav_link">Impressum</a></td></tr>
<tr><td><a href="#" class="nav_link">Über uns</a></td></tr>
</table>
<br />
<table class="nav_box">
<tr><th class="nav_th">Produkte</th></tr>
<tr><td><a href="#" class="nav_link">Herrenhemden</a></td></tr>
<tr><td><a href="#" class="nav_link">Damenhemden</a></td></tr>
<tr><td><a href="#" class="nav_link">Anzüge</a></td></tr>
<tr><td><a href="#" class="nav_link">Kravatten</a></td></tr>
</table>
</div>
</div>
<div id="content">
<div id="wrapContent">
<table class="content_box">
<tr><td>
<p>
Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam nonumy eirmod tempor invidun ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</td>
</tr>
<tr>
<td align="center">
<img src="pics/content/start_pic.jpg" />
</td>
</tr>
<tr>
<td>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p></td>
</tr>
</table>
</div>
</div>
<div id="nav_r">
<div id="wrapper">
<table class="nav_box">
<tr><th class="nav_th">Warenkorb</th></tr>
<tr><td>nichts drin</td></tr>
</table>
<br />
<table class="nav_box">
<tr><th class="nav_th">Werbung</th></tr>
<tr><td>.....<br />.....</td></tr>
</table>
</div>
</div>
<div id="footer">
<div id="wrapFooter">
FooterText
</div>
</div>
</div>
</body>
</html>
Im Voraus vielen Dank für Eure Hilfe
mfg
Cyclon
-
Grüße,
Im Firefox kann ich die Schriftgröße weitestgehend skalieren im IE7 leider nicht, sobald ich dort mit "STRG-Scrollrad" arbeite, muss ich waagerecht scrollen.
Wie kann ich das verhindern?ich kenne mich da nicht so gut aus, aber wen du ein paar schläger anheuern könntest, die IE7 nutzer zu verprügeln und Firefox nutzen zu zwingen - könnte es dein problem beheben.
oder wir entfernen die sicherheitshinweise von den plastiktüten und lassen das problem sich selbst lösen ];-)
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
http://www.sexgott-or-not.com/?test=428054-
[Zitat]wir ... lassen das problem sich selbst lösen ];-)[/Zitat]
Spätestens hier darf/kann/muss ich Dir widersprechen! Es geht darum einen Weg zu finden ein Problem zu lösen und nicht in Träumen zu schwelgen.
Ich habe bislang nur fixe Layouts auf Tabellenbasis gebaut. Das möchte ich aber nicht mehr, sondern tatsächlich versuche ich, anständige flexible Layouts auf CSS-Basis zu entwickeln und mich dazu noch an den W3C-Standard zu halten.
Das dass nicht ganz einfach ist dürfte auch Dir klar sein.
Dass Du mit diesem Beitrag nicht den intelligentesten losgelassen hast, weisst Du sicherlich selbstlg
Cyclon-
Grüße,
Das dass nicht ganz einfach ist dürfte auch Dir klar sein.
Dass Du mit diesem Beitrag nicht den intelligentesten losgelassen hast, weisst Du sicherlich selbstich rieche einen künstler^^ - du hast den nichtinhaltsrelevanten teil unter die lupe genommen ;( - meine aussage war "es ist wie IE sich verhält", und auf das browserverhalten hast du nur bedingt einfluss.
für die zukunft empfehle ich dir auch ein tick höfflicher zu sein - außer du magst regelmäßige nicknamewechsel.
MFG
bleicher--
__________________________-
Menschen an sich , sind nicht schlecht - es sind nur ihre Taten (c).
http://www.sexgott-or-not.com/?test=428054-
für die zukunft empfehle ich dir auch ein tick höfflicher zu sein - außer du magst regelmäßige nicknamewechsel.
@bleicher
Sorry, wenn Du meine Aussage als unhöflich empfindest. So war das allerdings nicht gedacht. Es ist aber so, dass viele, mit denen ich zu tun habe, auf den IE schwören und sich den FireFox gar nicht oder nur bedingt antun (...warum auch immer).
Auch wenn ich Deine Meinung teile was die Browser angeht, einen ernsthaften Lösungsansatz konnte ich Deinem Beitrag leider nicht entnehmen.Im grossen und ganzen hast du ein problem mit den width angaben, da würde sich unter Umständen die Masseinheit em besser eignen, da du aber anscheindend nicht so Fit bist in CSS, nimm doch erstmal was fertiges und passe es deinen bedürfnissen an.
@Malcolm Beck´s
Danke für den Hinweis. Ich werde das Layout erst in em umsetzen und sehen wie es in den Browsern reagiert. Sollte das nicht wie gewünscht funktionieren, werde ich Deinen Vorschlag wahrnehmen und mich erst mal auf ein fertiges Layout beziehen.mfg
Cyclon
-
-
-
-
hi,
Im Voraus vielen Dank für Eure Hilfe
Im grossen und ganzen hast du ein problem mit den width angaben, da würde sich unter Umständen die Masseinheit em besser eignen, da du aber anscheindend nicht so Fit bist in CSS, nimm doch erstmal was fertiges und passe es deinen bedürfnissen an.
Nach und nach kannst du dann anfangen eigene CSS Layouts zu schreiben, so hab ich das gemacht und hat ganz gut geklappt.
grüße