Hallo Leute,
Ich hab das html-Seminar durchgearbeitet und begonnen eine Website zu erstellen.
Leider gibt der Firefox das Design nicht so wieder wie der IE und ich weiß nicht woran es liegt.
Ich habe mich für ein dreispaltiges Layout mit Kopfzeile und horizontaler Steuerung darunter entschieden (links menü, rechts news, mitte inhalt).
Im IE wird die Inhaltsspalte zwischen den beiden Randspalten angezeigt.
Dazu habe ich nur eine Höhe für den Inhalt definiert und die Breite undefiniert gelassen.
Im Firefox wird der Inhalt allerdings hinter den Randspalten angezeigt.
Warum?
Bevor nun der Code kommt noch eine Frage:
Momentan passt sich meine Hompage der Fenstergröße des Browsers an, bzw die Kopfzeile, die Steuerung und der Inhaltsbereich verhalten sich so, die Randspalten haben eine definierte Breite.
Problem an der Sache ist das der Inhaltsbereich unter die beiden Spalten rutscht sobald das Fenster zu klein wird und übelste Stauchungen und Zeilenumbrüche entstehen die so nie geplant waren^^
Außerdem Verschwindet das Bild (im mom nur Platzhalter) hinter den Randspalten
Meine Frage: gibt es eine Möglichkeit eine bestimmte Mindestgröße bzw Mindestbreite für den Inhaltsbereich zu bestimmen, ohne das er unter die Randspalten rutscht wenn der Platz nicht mehr ausreicht?
Auch gut wäre ein Mindestgröße für die gesamt Hompage...
Naja...
ich poste euch mal meinen Code:
CSS:
ZitatAlles anzeigen<style type="text/css">
html, body {
font: 100% arial, helvetica, sans-serif;
}
*{
margin:0;
padding:0;
}
#kopfzeile {
height:114px;
background:url(<!-- m --><a class="postlink" href="http://www.flender-flux.de/0graf/head0_1.gif">http://www.flender-flux.de/0graf/head0_1.gif</a><!-- m -->) no-repeat center;
background-color: #dedede;
border-bottom:2px solid white;
}
#navigation {
background-color: #aab3b6;
border-bottom: 2px solid white;
}
#navigation ul {
text-align: center;
}
#navigation li {
display: inline;
}
#navigation a {
display: inline-block;
text-decoration: none;
color: #ffffff;
list-style: none;
padding: .3em 3em .3em 3em;
}
#navigation a:hover {
background-color: #051cff;
}
#produktnavigator {
float: left;
width: 13em;
background-color: white;
}
#produktnavigator h3 {
padding: 0.5em;
text-align: center;
background-color: #dde1e2;
}
#produktnavigator ul {
list-style: none;
margin: 0;
padding: 0;
}
#produktnavigator li {
text-align:left;
font-size: 80%;
padding: 1px 0 1px 0;
}
#produktnavigator li a {
display:block;
background-color:#dde1e2;
color: #474747;
text-decoration: none;
padding: .2em 1em .2em 1em;
}
#produktnavigator a:hover {
color: #051cff;
}
#news {
float:right;
background-color:#dde1e2;
height: 30em;
width: 13em;
}
#news h3 {
text-align: center;
padding: 0.5em;
border-bottom: solid black 1px;
}
#news ol {
padding-left: 2em;
}
#news li {
padding-left: 20px;
font-size: 80%;
padding: 3px;
}
#slogan {
background: url(<!-- m --><a class="postlink" href="http://www.flender-flux.de/100graf/start_fo.jpg">http://www.flender-flux.de/100graf/start_fo.jpg</a><!-- m -->) no-repeat center top;
height: 120px;
background-color:#dde1e2;
}
#inhalt {
background-color:#dde1e2;
height: 25em;
border-bottom: white solid 2px;
}
#inhalt h1 {
text-align: center;
padding: 1em;
}
#inhalt p {
text-align: center;
margin-left:10em;
margin-right: 10em;
}
#foot {
clear: both;
background-color: #aab3b6;
}
#foot p {
text-align: center;
padding: .3em;
}
</style>
HTML:
ZitatAlles anzeigen<div id="kopfzeile"></div>
<div id="navigation">
<ul>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Aktuelles</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
<div id="produktnavigator">
<h3>Produktnavigator</h3>
<ul>
<li><a href="#">Blitzschutz</a></li>
<li><a href="#">Photovoltaik</a></li>
<li><a href="#">Thermie</a></li>
<li><a href="#">Montagesysteme</a></li>
<li><a href="#">Artikel für das Steildach</a></li>
<li><a href="#">Schiefer</a></li>
<li><a href="#">Ziegel</a></li>
<li><a href="#">Stehfals</a></li>
<li><a href="#">Artikel für das Flachdach</a></li>
<li><a href="#">Begehungssysteme</a></li>
<li><a href="#">Fluchtwege</a></li>
<li><a href="#">Wartungswege</a></li>
<li><a href="#">Umwährungen</a></li>
<li><a href="#">Absturzsicherungen</a></li>
<li><a href="#">Auständerungssysteme</a></li>
<li><a href="#">Sonderzubehör für Dachandwerker</a></li>
</ul>
</div>
<div id="news" >
<h3>News</h3>
<ol>
<li>Sunblocker...</li>
<li>Topneuheit!</li>
<li>Erster Platz...</li>
</ol>
</div>
<div id="slogan" ></div>
<div id="inhalt" >
<h1>Flender Flux</h1>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
<p>texttexttexttexttexttexttexttexttexttexttexttexttexttextte</p>
</div>
<div id="foot">
<p>Impressum</p>
</div>
Ich hoffe ihr könnt mir bei meinen Problemchen helfen!
1. Firefox 'verstümmelt' mein Layout
2. Mindestgröße für den Inhaltscontainer/ die gesamte Seite definieren
mfg Sethur