| Vorheriges Thema anzeigen :: Nächstes Thema anzeigen |
| Autor |
Nachricht |
Suse
Gast
|
 Leidiges Thema Firefox /Internet Explorer |
 |
|
Bin am Verzweifeln. Habe eine Artikelseite für Ebay gemacht. Und zwar habe ich für die Buttons folgende Anleitung als Basis genommen:
| Code: | CSS:
<!--
#button
{
position: relative;/*fuer IE*/
width: 8em;
padding: 0px;
border: 3px solid;
border-color: #e2bf87 #78561d #78561d #e2bf87;
float: left;
}
#button .fatbutt,
#button .aa,
#button .bb
{
position: relative;/*fuer IE*/
display: block;
}
#button .fatbutt
{
padding: 2px 1px 2px 0;
text-decoration: none;
text-align: center;
font-weight: bold;
font-family: verdana;
background-color: #e0d0b0;
color: #600;
border: 3px solid;
border-color: #e7dbc2 #d6c093 #d6c093 #e7dbc2;
}
#button .aa
{
padding: 1px;
border: 2px solid;
border-color: #937639 #c2a361 #c2a361 #937639;
}
#button .bb
{
border: 1px solid #555;
}
#button a:hover.fatbutt
{
padding: 2px 0px 2px 1px;
border: 3px solid;
border-color: #d6c093 #ebdfc6 #ebdfc6 #d6c093;
background-color: #e6d9bc;
color: #900;
}
--> |
| Code: | HTML:
<div id="button">
<span class="aa">
<span class="bb">
<a class="fatbutt" href="#"><big>AGB</big><br><br><br><img src="tor5.jpg" width=70" height="90" border="0"></a>
</span>
</span>
</div> |
Diesen Button habe ich vergrössert und ein Bild eingefügt, so wie es auf folgender Seite zu sehen ist:
http://freenet-homepage.de/Tulpendi...Shop/michseite/ASneu.html
Der Hintergrund der Säulen muss noch transparent gemacht und evtl. noch einiges andere angepasst werden. Es geht erst mal um die grobe Aufteilung. Der Rahmen der Tabelle ist natürlich unsichtbar, zur besseren Ansicht, was da los ist, habe ich diesen verbreitert.
Den Banner und die zwei ersten Buttons habe ich zwischen zwei Säulen gesetzt mit folgendem Tag:
| Code: |
<img src="http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEKTpCwfwkEcV&size=l" width="70" height="160" align="left">
<img src="http://links.pictures.aol.com/pic?id=21c0CxsmUBlXzM1FlvKDytNiEKTpCwfwkEcV&size=l" width="70" height="160" align="right"> |
Damit der zeite Button (INFO) sich neben den ersten positioniert habe ich in den style-Bereich bei #button den Befehl (nennt man das so?) float: left geschrieben.
Das ist der obere Bereich. Die folgende Zeile/den folgenden Bereich habe ich mit einer Tabelle in zwei Bereiche geteilt, damit ich neben den dritten Button (Kontakt) Text setzen kann. Im Interent Explorer wird das sauber angezeigt. In Firefox beginnt die Tabelle nicht in der nächsten Zeile ( ich habe mal Border auf 5 gesetzt damit man die Tabelle sehen kann), sondern neben den anderen Buttons oben im Kopfbereich. Die Seite wird auch automatisch breiter.
Ich kann mir denken, dass dies an "float:left" liegt, doch warum wird das im IE dann richtig angezeigt?
Wie könnte man das Problem lösen bzw. wie kann man den float-Effekt nach dem zweiten Button aufheben. Habe da mal was von "clear" gehört.
Wäre dankbar für einen Rat. Ansonsten muss ich mir was anderes ausdenken.
Suse |
|
|
|
| 10 Mai 2007 00:24 |
|
  |
line
Gast
|
|
|
|
"float: left" hebst Du mit "clear: left" wieder auf,
dann rutscht Deine Tabelle auch im MF runter.
Wenn Du schon css-Formatierst, dann kannst Du doch
aber doch auch schickerweise Deine Tabelle durch
container ersetzen. |
|
|
|
| 10 Mai 2007 20:50 |
|
|
suse
Gast
|
|
|
|
Hallo line,
danke für die Antwort. Ist schon erledigt, ich habe alles jetzt mit container (boxen) gemacht und siehe da es gibt bei Firefox keine Probleme mehr ( bis jetzt jedenfalls nicht). |
|
|
|
| 12 Mai 2007 00:10 |
|
|
|
