nicht angemeldet
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