CSS Probleme
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansehen
attribut
aussehen
background
banner
body
bor
datei
gen
image
inhalt
kommentar
layout
margin
navigation
quelltext
richtig anzeigen
right
-
Hi,ich habe ein problem mit einem CSS table Layout....
Da ich m?chte das sich das layout dem inhalt anpasst...das heisst das das layout auch gr?sser als 100% sein kann wenn der inhalt gr?sser ist...
Nur habe ich jetzt verschiedene Probleme wie die folgenden screenshots zeigen werden....
ohne Attribute table-layout:fixed
IE
http://stevestyxx.xardas.lima-city.de/screen/ie.jpg
FF
http://stevestyxx.xardas.lima-city.de/screen/ff.jpg
mit Attribute table-layout:fixed
IE
http://stevestyxx.xardas.lima-city.de/screen/fixed_ie.jpg
FF
http://stevestyxx.xardas.lima-city.de/screen/fixed_ff.jpg
Hier noch die externe CSS Datei
body { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; background-color:#191e3b; }
#full { width:100%; }
#banner { background-image:url(templates/banner.jpg); width:100%; height:150px; background-color:#000000; background-repeat:no-repeat; background-position:left; }
#headr { background-image:url(templates/rand_oben.jpg); height:50px; }
#shadow { background-image:url(templates/schatten_mitte.jpg); height:14px; }
#eol { width:25px; height:35px; background-image:url(templates/navi_oben_links.jpg); }
#eor { width:25px; height:35px; background-image:url(templates/navi_oben_rechts.jpg); }
#eom { width:150px; height:35px; background-image:url(templates/navi_oben_mitte.jpg); }
#eml { width:25px; background-image:url(templates/navi_mitte_links.jpg); }
#emr { width:25px; background-image:url(templates/navi_mitte_rechts.jpg); }
#navigation { background-color:#000000; }
#eul { background-image:url(templates/navi_unten_links.jpg); width:25px; height:50px; }
#eum { background-image:url(templates/navi_unten_mitte.jpg); width:150; height:50px; }
#eur { background-image:url(templates/navi_unten_rechts.jpg); width:25px; height:50px; }
#bol { background-image:url(templates/box_oben_links.jpg); width:505px; height:55px; background-repeat:no-repeat; background-position:left; }
#bom { background-image:url(templates/box_oben_mitte.jpg); height:55px; }
#bor { background-image:url(templates/box_oben_rechts.jpg); width:25px; height:55px; background-repeat:no-repeat; background-position:right; }
#bml { background-color:#000000; border-left-width:10px; border-right-width:0px; border-top-width:0px; border-bottom-width:0px; border-color:#191e3b; border-style:solid;table-layout:fixed; }
#bmr { background-image:url(templates/box_mitte_rechts.jpg); width:25px;}
#bul { background-image:url(templates/box_unten_links.jpg); width:505px; height:55px; background-repeat:no-repeat; background-position:left; }
#bum { background-image:url(templates/box_unten_mitte.jpg); height:55px; }
#bur { background-image:url(templates/box_unten_rechts.jpg); width:25px; height:55px; background-repeat:no-repeat; background-position:right; }
#navipad { padding-left:10px; padding-right:3px; width:200px; }
#boxpad { width:100%; padding-right:10px; }
Und hier der quelltext
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><Title>Christoph Finnly</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/css.css" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="full">
<tr><td id="headr" colspan="2"></td></tr>
<tr><td id="banner" colspan="2" align="right" valign="top"></td></tr>
<tr><td id="headr" colspan="2"></td></tr>
<tr><td id="shadow" colspan="2"></td></tr>
<tr>
<td id="navipad" valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td id="eol"></td>
<td id="eom"></td>
<td id="eor"></td>
</tr>
<tr>
<td id="eml"></td>
<td id="navigation" style="height:200px;"></td>
<td id="emr"></td>
</tr>
<tr>
<td id="eul"></td>
<td id="eum"></td>
<td id="eur"></td>
</tr>
</table>
</td>
<td valign="top" align="left" id="boxpad">
<table border="0" cellspacing="0" cellpadding="0" id="full" style="table-layout:fixed">
<tr>
<td id="bol" width="505"></td>
<td id="bom"></td>
<td id="bor" width="25"></td>
</tr>
<tr>
<td id="bml" colspan="2" align="left" style="padding-left:15px; padding-top:5px;"><img src="1.jpg">
</td>
<td id="bmr" style="height:200px;"></td>
</tr>
<tr>
<td id="bul" width="505"></td>
<td id="bum"></td>
<td id="bur" width="25"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Schonmal danke im vorraus....
mfg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mich w?rde mal interesieren, wie es denn aussehen soll.
Aber ich w?rde eine ifIE einf?gen...:
<!--[if IE]>
<link rel="Stylesheet" href="css/ie.css" type="text/css" />
<![endif]-->
<!--[if lt IE 6]>
<link rel="Stylesheet" href="css/ie5.css" type="text/css" />
<![endif]-->
so steht es bei http://css4you.de im QC.
Allerdings w?rde ich das als Kommentar ansehen.
Wie man das richtig macht / Ob das richtig ist, wei? ich leider nich :-/ -
Am anfang hab ich screenshots gepostet!
wie es mit table-layout:fixed aussieht und ohne...
Dann muss ich 2 externe css dateien erstellen aber daf?r m?sste es ja erstmal ein browser richtig anzeigen...aber das tuen sie ja nicht^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
