zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS - align="right" nur Im Opera. Firefox und IE nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2006, 12:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2006
Beiträge: 4
frankm123 befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.06.2006, 12:48
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.06.2006, 13:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2006
Beiträge: 4
frankm123 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von slayer2205
ergebniss-header -> float:right;
clearen
ergebnisse -> float:right
clearen


Würde ich sagen..
Daran liegt es nicht.
Ich schätze eher das es an der ersten Zeile
Code:
<div id="bodyblock" align="right">
liegt, aber wenn ich das rausnehme liegt alles über der Navigation.
Und komischer weise wird es im IE und im Firefox so angezeigt wie ich es gerne hätte
Mit Zitat antworten
  #4 (permalink)  
Alt 08.06.2006, 13:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von frankm123
Code:
<div id="bodyblock" align="right">
Du mischst da externes CSS und HTML-Attribute. Lösch das align="right" aus dem HTML-Code und gib diese Eigenschaft (text-align: right im CSS für #bodyblock mit.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.06.2006, 13:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2006
Beiträge: 4
frankm123 befindet sich auf einem aufstrebenden Ast
Standard

Wenn ich das so ändere sieht es so aus:


Denn
Code:
align="right"
setzt doch alles rechtsbündig und text-
Code:
align: right
nur den Text, oder täusche ich mich da?
Mit Zitat antworten
  #6 (permalink)  
Alt 08.06.2006, 13:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.06.2006, 14:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 29.07.2005
Beiträge: 1.073
xm22 befindet sich auf einem aufstrebenden Ast
Standard

align="right" richtet meiner Meinung nach alle Elemente innerhalb des Elements mit dieser Eigenschaft rechts aus..
__________________
... Meine Meinung
Mit Zitat antworten
  #8 (permalink)  
Alt 08.06.2006, 15:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

Die Definition von "align" in HTML ist unterschiedlich. Bei DIV, TD, etc. entspricht es tatsächlich text-align, aber bei TABLE und IMG entspricht es float.

Robin
Mit Zitat antworten
  #9 (permalink)  
Alt 08.06.2006, 15:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.06.2006
Beiträge: 4
frankm123 befindet sich auf einem aufstrebenden Ast
Standard

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&uuml;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&ouml;nnte man tante mizi&acute;s eintopf rezept hier rein 
			schreiben, was wahrscheinlich noch mehr sinn machen w&uuml;rde ..
		</div>
		<div id="footer">der Footer</div>
</div>
</body>
</html>
css:
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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:48 Uhr.