|
|||
CSS - align="right" nur Im Opera. Firefox und IE nicht
Hallo,
Ich habe mir mal ein CSS Template geschnapt und darauf versuche ich gerade eine Seite aufzubauen. Soweit, so gut. Jetzt stehe ich vor dem Problem das Firefox und der IE es genau so anzeigt wie ich es gerne hätte, nur der Opera "springt aus der Reihe". Hier der Link Das Problem ist ganz unten das Feld mit den Ergebnissen. Im IE und Firefox steht dieses Feld links neben der Navigation, im Opera ist dieses Feld rechts. Auch der Text ist im Opera rechtsbündig. Wie kann ich dem Opera sagen das es Links hin soll. Hier der Auszug aus der HTML: Code: Code:
<div id="bodyblock" align="right"> <div id="navigation"> <div id="trenner_oben"></div> <div id="ausschreibungen"><a href="#">Zu den Ausschreibungen vom Ibergrennen</a></div> <div id="fotos"><a href="#">Hier finden sie die Fotos vom Ibergrennen</a></div> <div id="links"><a href="#">Links</a></div> <div id="zimmer"><a href="#">Sie suchen Zimmer in Heiligenstadt? Dann schauen sie mal hier!</a></div> <div id="gaestebuch"><a href="#">Schreiben sie in unser Gästebuch!</a></div> <div id="unsere_fahrer"><a href="#">Hier stellen wir die Fahrer vom Motorsportclub Heiligenstadt vor.</a></div> <div id="team"><a href="#">Das Organisationsteam stellt sich vor.</a></div> <div id="trenner_unten"></div> <div id="sponsor">Das Bergrennen in Heilbad Heiligenstadt wird gesponsort von:</div> </div> <div id="inhalt"> <div id="newsheader"> <h1>Neuigkeiten vom Ibergrennen in Heilbad Heiligenstadt</h1></div> <div id="news">Der Starttext...</div> <!-- Die Ergebnisse --> <div id="ergebnisseheader"> <h1>Ergebnisse - Die Rennergebnisse</h1></div> <div id="ergebnisse">Hier der Text der Verrückt werden soll</div></div> </div> Hier die CSS: Code: Code:
#bodyblock { position:relative; background: #FFFFFF; color: #333333; width:700px; padding:0; background: url(images/navi_bg.jpg); background-repeat: repeat-y; } #navigation { float:left; background:#FFFFFF; color: #000000; width:212px; padding:0; margin:0; background: url(images/navi_bg.jpg); background-repeat: repeat-y; } #inhalt { width:488px; background:#ffffff; color: #000000; text-align:left; } /*Extrawurst für den Internet Explorer*/ * html div#inhalt { float:left } #newsheader { position:relative; text-indent:-5000px; height: 124px; width:485px; left: 0px; top: 0px; font-weight: bold; text-decoration: none; color: #000000; text-align: left; z-index: 3; visibility: visible; overflow: visible; background: url(images/artikel_news.jpg) no-repeat; } #news { position:relative; width:460px; left: 8px; top: -10px; text-decoration: none; color: #000000; text-align: left; z-index: 3; } #ergebnisseheader { position:relative; text-indent:-5000px; height: 139px; width:241px; left: 0px; top: 0px; font-weight: bold; text-decoration: none; color: #000000; text-align: left; z-index: 3; visibility: visible; overflow: visible; background: url(images/artikel_ergebnisse.jpg) no-repeat; } #ergebnisse { position:relative; width:230px; left: 8px; top: -10px; text-decoration: none; color: #000000; text-align: left; z-index: 3; } Ich denke das es Opera eigentlich richtig macht, denn ich habe dem DIV bodyblock align="right" gesagt, aber wenn ich das weglösche passt nichts mehr. |
Sponsored Links |
|
|||
ergebniss-header -> float:right;
clearen ergebnisse -> float:right clearen Würde ich sagen.. Nochwas: Bei CSS gibt es keine Sachen mehr wie align, valign, bcolor, etc.. Das wird alles über css-Dateien und zur Not über Inline-Styles gemacht. Das ist ja scshließlich der Sinn von css
__________________
... Meine Meinung Geändert von xm22 (08.06.2006 um 12:50 Uhr) |
Sponsored Links |
|
|||
Zitat:
Ich schätze eher das es an der ersten Zeile Code:
<div id="bodyblock" align="right"> Und komischer weise wird es im IE und im Firefox so angezeigt wie ich es gerne hätte |
|
|||
Zitat:
|
|
|||
Wenn Du den ganzen Container rechts haben willst, nutze die float-Eigenschaft, in dem Fall float:right (und dann das Clearen nicht vergessen!). Dann muss das rechts floatierte Element aber vor dem anderen HTML-Code stehen, der dann "links liegengelassen" wird.
Alternativ geht das auch mit float:left und entsprechendem margin-left (Vorsicht for double-margin bug beim IE). Dein Versuch zeigt ein HTML-Attribute anstelle des CSS. Beides nebeneinander zu benutzen ist zum einen haarig aufgrund der aufwändigen Fehlersuche und nur unter bestimmten Umständen valider Code. Ich benutze HTML-Attribute gar nicht mehr für Webseiten. Ich denke aber, dass align="right" nur den Text ausrichtet, nicht den Container positioniert oder anordnet. |
|
|||
Ich habe es jetzt einmal komplett neu geschrieben und nun folgendes versucht:
html: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>Unbenanntes Dokument</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="test2.css" rel="stylesheet" type="text/css"> </head> <body> <div id="container"> <div id="header">Das ist der Kopfbereich</div> <div id="navigation">Das ist ein testtext, der auch blindtext genannt wird, ohne sinn, eigentlich auch ohne daseins berechtigung, dennoch erfüllt der text hier seine arbeit, obwohl er doch keinen sinn macht ... sehr kontrovers, oder nicht ... der arme text, jetzt wird er noch gelesen, in der hoffnung, das vielleicht doch noch etwas sinnvolles kommt ... aber da kommt einfach nichts gescheites nach. das schlimmste an... </div> <div id="inhalt">Das ist ein testtext, der auch blindtext genannt wird, ohne sinn, eigentlich auch ohne daseins berechtigung, dennoch erfüllt der text hier seine arbeit, obwohl er doch keinen sinn macht ... sehr kontrovers, oder nicht ... der arme text, jetzt wird er noch gelesen, in der hoffnung, das vielleicht doch noch etwas sinnvolles kommt ... aber da kommt einfach nichts gescheites nach. das schlimmste an solchen blindtexten ist das sie sich, wie auch dieser hier, immer wiederholen. das bedeutet, es kommt nochmal ein text ohne sinn.. und trotzdem macht es sinn, einen solchen text zu verwenden. genau so gut, könnte man tante mizi´s eintopf rezept hier rein schreiben, was wahrscheinlich noch mehr sinn machen würde .. </div> <div id="footer">der Footer</div> </div> </body> </html> Code:
html,body { height:100%; margin:0; padding:0; text-align:center; } div#container { width:100%; min-height:100%; /*Für die guten Browser*/ background:#ff0000; width:700px; margin:auto; text-align:left; } /*Extrawurst für den Internet Explorer*/ * html div#container { height:100%; } #header { width:700px; height: 185px; background-color:#c3c3c3; } #navigation { width:212px; background-color:#FF00FF; float:left; } #inhalt { float:left; width:488px; background-color:#0000FF; } #footer{ width:700px; clear:left; background-color:#00FFFF; } Jetzt sieht es schon gut aus, aber wenn ich den Text kürzer habe, dann sitzt der Footer nicht mehr unten an der Seite. Dann habe ich es mit footerStickAlt versucht, dabei bleibt aber der Container nicht in der größe der kompletten seite wenn ich viel Text habe, also der hintergrund geht nicht bis unten hin rot. (P.S.: Ich habe dabei natürlich den Footer hinter den Container gesetzt) Was mache ich denn falsch? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Redesign für Steiner Cycling Team | pkipper | Site- und Layoutcheck | 11 | 09.02.2011 13:25 |
Firefox generiert ungültigen HTML Code bei Einbindung eines CSS | Pr0g | (X)HTML | 4 | 14.07.2010 22:36 |
CSS für Firefox, IE, Opera Probleme - Browserweiche | talkuvit | CSS | 4 | 31.10.2009 19:07 |
bitte seite testen IE kleiner 6, opera und firefox + code verbessern | dexta² | Site- und Layoutcheck | 3 | 09.03.2007 09:54 |
CSS Interpretation Firefox und IE - Grundgerüsst verzerrt | EvilGeorge | CSS | 2 | 26.10.2005 14:22 |