• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

FF Probleme mit flexiblen Layouts?

M

MellZi

Neues Mitglied
Hallo, hat der FF Probleme mit flexiblen Layouts? Wenn ich Bilder einfüge muss ich immer eine feste Breite in px angeben, damit man es FF ordentlich sieht. Oder gibt es einen Trick :wink:

Viele Grüße,
Mell
 
Danke...hier ist der Code....dort hab ich den Container ne feste Breite gegeben und dann funktioniert es auch im FF. Vorher hatte ich eine Breite von 100% da klappte es nicht.

Hier html-Code:

HTML: 
</style>
<![endif]-->
</head>
<body>
<div class="container">
  <div class="header"><!-- end .header --><img src="banner1.gif" width="1070" height="333" align="absmiddle"></div>
  
  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Hyperlink 1</a></li>
      <li><a href="#">Hyperlink 2</a></li>
      <li><a href="#">Hyperlink 3</a></li>
      <li><a href="#">Hyperlink 4</a></li>
    </ul>
    <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Anweisungen</h1>
    <p>Beachten Sie, dass der CSS-Code für diese Layouts mit vielen Kommentaren versehen ist. Wenn Sie vor allem in der Entwurfsansicht arbeiten, werfen Sie einen Blick auf den Code, um Tipps zum Verwenden von CSS für die fließenden Layouts zu erhalten. Sie können diese Kommentare vor dem Veröffentlichen Ihrer Site löschen. Weitere Informationen zu den in diesen CSS-Layouts verwendeten Methoden finden Sie in diesem Artikel im Adobe Developer Center - <a href="http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>.</p>
    <h2>Clearing-Methode</h2>
    <p>Da alle Spalten fließend sind, wird bei diesem Layout die Deklaration clear:both in der Regel .footer verwendet.  Diese Clearing-Methode bewirkt, dass .container das Ende der Spalten erkennt, damit alle in .container platzierten Rahmen oder Hintergrundfarben angezeigt werden. Wenn Sie in Ihrem Entwurf die Regel .footer aus .container entfernen müssen, ist eine andere Clearing-Methode erforderlich. Am zuverlässigsten ist das Hinzufügen eines &lt;br class=&quot;clearfloat&quot; /&gt;- oder &lt;div  class=&quot;clearfloat&quot;&gt;&lt;/div&gt;-Tags nach der letzten fließenden Spalte (jedoch vor dem Ende von .container). Dadurch wird der gleiche Clearing-Effekt erzielt.</p>
  <!-- end .content --></div>
  
  <div class="footer">
    <p>Diese .footer-Regel enthält die Deklaration position:relative. So erhält Internet Explorer 6 die Eigenschaft hasLayout für</p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>


CSS-Code:

Code: 
 @charset "utf-8";

body {
 font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
 margin: 0;
 padding: 0;
 color: #000;
 background-color: #9A8E6A;
}

/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl {
 padding: 0;
 margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
 margin-top: 0;  
 padding-right: 15px;
 padding-left: 15px; 
 font-family: Verdana, Geneva, sans-serif;
 color: #F68A1E;
}

a img { 
 border: none;
}

a:link {
 color:#414958;
 text-decoration: underline; 
}

a:visited {
 color: #4E5869;
 text-decoration: underline;
}

a:hover, a:active, a:focus { 
 text-decoration: none;
}

.container .content p {
 font-family: Verdana, Geneva, sans-serif;
 font-weight: bold;
 color: #382E1D;
}

.container .footer p {
 font-family: Verdana, Geneva, sans-serif;
 font-weight: bold;
 color: #382E1D;
}

.container {
 width: 1070px;
 max-width: 1260px;
 min-width: 780px; 
 border-radius: 50px;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
}

.header {
 margin-top: 40px; 
}

.sidebar1 {
 float: left;
 width: 30%;
 padding-bottom: 10px;
 margin-top: 20px;
 border-radius: 0px 50px 50px 0px;
}

.content {
 width: 70%;
 float: left;
 background-color: #57462D;
 border-radius: 50px;
 padding-top: 10px;
 padding-right: 0;
 padding-bottom: 10px;
 margin-top: 50px;
 margin-bottom: 30px;
 background-repeat: repeat;
 background-image: url(hg.jpg);
}

.content ul, .content ol { 
 padding: 0 15px 15px 40px; 
}

ul.nav {
 list-style: none; 
 margin-bottom: 15px; 
 margin-top: 50px;
 margin-right: 15px;
 width: 300px;
}

ul.nav li {
 background-image: url(button.gif);
 background-repeat: repeat;
 width: auto; 
}

 ul.nav a, ul.nav a:visited { 
 padding: 5px 5px 15px 15px;
 display: block; 
 text-decoration: none;
 color: #000;
 color: #F68A1E;
 display: block;
 text-decoration: none;
 width: auto;
 margin-top: 15px;
 background-image: url(button.gif);
 font-size: 24px;
 font-weight: bold;
 font-style: normal;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
 color: #FFF;
 }

/* ~~ Fußzeile ~~ */
.footer {
 position: relative; 
 clear: both; 
 background-color: #FFFFFF;
 background-image: url(hg.jpg);
 margin-bottom: 25px;
 padding-top: 10px;
 padding-right: 0;
 padding-bottom: 10px;
 padding-left: 0;
 border-radius: 20px;
 background-repeat: repeat;
}

.fltrt {  
 float: right;
 margin-left: 8px;
}

.fltlft {  float: left;
 margin-right: 8px;
}

.clearfloat {  clear:both;
 height:0;
 font-size: 1px;
 line-height: 0px;
}

Viele Grüße,
Mell
 
Hallo,

du machst es den Hilfswilligen nicht grade einfach dir zu helfen.

1. Habe ich um einen Link gebeten, um

2. einen unvollständigen Quelltext wie von dir gepostet zu vermeiden, da mit

HTML: 
</style>

eher kein Quelltext anfängt und

3. damit alle Elemente vorhanden sind. Wie sollen wir z. B. an deine Bilder kommen?

Außerdem ist 4.

dort hab ich den Container ne feste Breite gegeben und dann funktioniert es auch im FF
Zum Vergrößern anklicken....

eher der nicht funktionierende Quelltext sinnvoll.

Gruss

MrMurphy
 
Ok, vielen Dank....ich werd mir jetzt nen Buch kaufen und Internet schauen....werd es schon lernen.
LG Mell
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben