Antworten zum Thema „CSS position im FF2 / IE6“

spapic · 21.06.2008

hallo experten,
ich versuche gerade eine tabelle als css umzubauen, stolper aber schon gleich am anfang,,,,
im kopfbereich (headarea) soll rechts die überschrift stehen (später kommen darunter einige links)
der firefox 2 begreift was ich will, aber die microsofties vom IE6 drehen mir 'ne lange Nase und positionieren die h1 zum rand hin

ich habe es auch schon mit einem extra DIV für die h1 und die folgenden href's versucht - selbes resultat
wie kriegt man das in den griff ?

mfg
spapic

so sieht es z.Zt. aus >>>

# # # # # CSS # # # # #
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
}
body {
padding: 10px 5%;
background-color: #dce0d3;
color: white;
}
#headarea {
position: relative;
background-color: #9ea985;
color: black;
}
#headarea h1{
position: absolute;
top: 20px;
right: 20px;
}

# # # # # HTML # # # # #
<body>
<div id="wrapper">
<div id="headarea">
<div id="flag">
<img src="images/Flag_01.jpg" width="150" height="100" alt="">
</div>
<h1>
S E P T E M B E R   2 0 0 7 
</h1>

Herr_D · 21.06.2008

AW: CSS position im FF2 / IE6

Was willst du denn erreichen?

wenn du irgendwas absolut positionierst ist die relative Positionierung des übergeordneten Div für die Katz...

Habt ihr alle irgendwie das Kapitel position im css-Buch entdeckt?

Ordne den Text (mit text-align: right; ) nach rechts aus... und bestimm den Abstand mit margin bzw. padding

spapic · 21.06.2008

AW: CSS position im FF2 / IE6

naja, aussehen soll es wie im FF
ich hatte es so verstanden, dass position=absolute sich auf das verwandte element bezieht, wenn dies auch eine position enthält (daher #headarea {position: relative; )
oder bin ich da völlig neben der spur ?

sokie · 21.06.2008

AW: CSS position im FF2 / IE6

spapic schrieb:
naja, aussehen soll es wie im FF
ich hatte es so verstanden, dass position=absolute sich auf das verwandte element bezieht, wenn dies auch eine position enthält (daher #headarea {position: relative; )
oder bin ich da völlig neben der spur ?

ja, bist du.
Der Unterschied der absoluten Positionierung zur relativen liegt gerade darin, dass sie sich NICHT_bezieht.

man kann das zB so machen:

Code:

#headarea {
height: 100px;
background: #9ea985 url(images/Flag_01.jpg) left center no-repeat;
color: black;
}
#headarea h1{
float:right;
margin-right: 20px;
margin-top: 20px; // oder margin: 20px 20px 0 0;
letter-spacing: 20px;//statt der &nbsp; in der Zeile (mit dem wert 20px -+ experimentieren)
}

nun musst du im html die Überschrift nicht mehr mit den   sperren, und das Bild brauchst du auch nicht extra zu notieren.

spapic · 22.06.2008

AW: CSS position im FF2 / IE6

hi sokie
erstmal danke, denn mit float ist das problem mit dem "rechts raus" beim IE erledigt.
auch deine anderen ideen habe ich gerne uebernommen,,, aber wie erreiche ich, dass das image im bg trotz "left" nicht ganz links klebt
(nochmal bg-im

adding o.ä. hat nichts gebracht)
sorry für so viel basic's, aber haettest du da auch noch einen tip
danke
spapic

Herr_D · 22.06.2008

AW: CSS position im FF2 / IE6

spapic schrieb:
hi sokie
erstmal danke, denn mit float ist das problem mit dem "rechts raus" beim IE erledigt.
auch deine anderen ideen habe ich gerne uebernommen,,, aber wie erreiche ich, dass das image im bg trotz "left" nicht ganz links klebt
(nochmal bg-imadding o.ä. hat nichts gebracht)
sorry für so viel basic's, aber haettest du da auch noch einen tip
danke
spapic

Du kannst dein img als Hintergrund für den Bereich einbauen... und den Hintergrund positionieren...

spapic · 22.06.2008

AW: CSS position im FF2 / IE6

danke Herr_D,,, genau das war es

(shame on me - SELFHTML sollte man schon kennen)