Bildposition
aziloni
- css
Man soll ja auch mal die Anderen fragen....
Deshalb bin ich jetzt hier eingestiegen. Also Hallo und Grüße in die Runde...
Mein Kenntnisstand : Leicht fortgeschrittener Anfänger.
Nur damit die Schläge bitte etwas dosiert werden :D
Mein Problem:
Ich möchte einen Container mit Bild einfügen, so daß er direkt am oberen Bildrand "klebt". Und mit float:left oben bleibt, aber verschiebbar ist, wenn was dazukommt. Wie auf der Gardinenstange :-)
In IE und Mozilla ok, in Opera hängt es 8px darunter. Da kann ich mit margin-top:0px etc. operieren, wie ich will. Das ist doch aber ein gültiger CSS-Befehl?
Zwei Erklärungen noch:
Bitte um Frustabbau,
Aziloni.
Hallo aziloni.
In IE und Mozilla ok, in Opera hängt es 8px darunter. Da kann ich mit margin-top:0px etc. operieren, wie ich will. Das ist doch aber ein gültiger CSS-Befehl?
Nö. In CSS gibt es keine Befehle, nur Selektoren, Regeln, Regelsätze, Eigenschaften und Werte.
Opera <= 9 setzt hier und da einen von 0 abweichenden Wert für padding.
Setze dies für alle in Frage kommenden Elemente auf den entsprechenden Wert.
(Meine persönliche allgemeine Vorgehensweise sieht wie folgt aus:
* {
margin:0;
padding:0;
}
Dies notiere ich am Anfang jeder meiner Stylesheets. Damit muss ich nicht mehr auf eventuell werksseitig gesetzte Abstände achten und kann meine eigenen nach Bedarf setzen.)
Einen schönen Donnerstag noch.
Gruß, Ashura
Hallo Ingrid.
Opera <= 9
Recht sinnfrei.
Natürlich meinte ich Opera < 9(TP1).
Einen schönen Donnerstag noch.
Gruß, Ashura
Hab meinen Text aus Versehen oben reingehängt,
sorry.
In IE und Mozilla ok, in Opera hängt es 8px darunter. Da kann ich mit margin-top:0px etc. operieren, wie ich will.
aziloni,
Wenn übergeordnete Elemente wie html und body im Browserdefault von 0 verschiedene Werte für margin/padding haben, ja. ;-)
Das ist doch aber ein gültiger CSS-Befehl?
Nein, es gibt in CSS keine „Befehle“; ist ja keine Programmiersprache.
Live long and prosper,
Gunnar
Hallo, Gunnar,
hallo Ashura,
Hui, das geht ja hier wie das oder so ähnlich, danke.
Ist schon klar - no Befehle. Aber ich bin Elektroniker, da kann mir sogar das Wort Anweisungen mal rausrutschen :D
Nee im Ernst, ich bin da zu lax, ok.
Ich stell dann doch mal den QT rein, So wie er jetzt nach hundert Fehlversuchen aussieht. Eine Galerie, hierfür freilich gekürzt.
------------------------------
.............
<style type="text/css">
body
{
background-image:url(shared/back_mh.jpg);
background-repeat:repeat-x; margin-top:0px;
}
.holder
{
width: auto; height: 330px;
padding-left: 10px; padding-right:10px;
margin-left: 90px; margin-top:0px;
position:relative; top:50px; float:left;
background:darkred; color:gold;
border-width:1px; border-style:solid; border-color:red;
font-family:arial; font-weight:normal; font-size:18px;
white-space:nowrap
}
.rgtpic
{
width: auto; height: auto;
position:relative; top:0px; float:left;
padding: 0px; margin:0px; margin-top:0px; margin-left: 90px;
border-width:0px; border-style:none; border-color:transparent;
}
-->
</style>
</head>
<body bgcolor="darkgreen" onload="self.focus();">
<div class="holder" style="">
<img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
<a href="#zzz" onClick="window.open('gallery/01.html','XYZ','toolbar=no und so weiter etc. .....>
<img src="gallery/m1_wueste1_001.jpg" alt="" height="180" width="176" border="0" />
</a><br>
Click ▲
</div>
<div class="rgtpic" style="">
<img src="shared/monigal_rgt.jpg" alt="" height="445" width="498" border="0" />
</div>
<div class="holder" style="">
<img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
<a href="#zzz" onClick="window.open('gallery/02.html','XYZ','toolbar=no und so weiter etc. .....>
<img src="gallery/m1_wueste3_001.jpg" alt="" height="180" width="166" border="0" />
</a><br>
Click ▲
</div>
..............
Da seht ihr auch, warum ich kein "absolute" nehmen kann.
Ich hätt ja kein Problem, wenn sich das Hintergrund-Tile mit absenken würde...
bg,
aziloni.
Hallöchen,
Hui, das geht ja hier wie das oder so ähnlich, danke.
hä? ;-)
Ich stell dann doch mal den QT rein, So wie er jetzt nach hundert Fehlversuchen aussieht. Eine Galerie, hierfür freilich gekürzt.
Juhuuuu! Endlich mal einer, der das Wort "Galerie" mit der richtigen Anzahl von 'l' schreiben kann!
body
{
background-image:url(shared/back_mh.jpg);
background-repeat:repeat-x; margin-top:0px;
}
So, da geht's doch schon los: An margin-top hast du gedacht, gut. Aber was ist mit padding (Innenabstand)? Den hast du nicht berücksichtigt, also gilt der Defaultwert des Browsers, also meistens ein Wert >0px.
.holder
{
width: auto; height: 330px;
padding-left: 10px; padding-right:10px;
margin-left: 90px; margin-top:0px;
position:relative; top:50px; float:left;
background:darkred; color:gold;
border-width:1px; border-style:solid; border-color:red;
font-family:arial; font-weight:normal; font-size:18px;
white-space:nowrap
}
Noch ein Kandidat. Als neutrales Blockelement hat ein div wahrscheinlich ein Default-padding und margin von 0 - aber willst du dich darauf verlassen?
<body bgcolor="darkgreen" onload="self.focus();">
Warum legst du die Hintergrundfarbe nicht auch mit CSS fest, was doch naheliegend wäre?
<div class="holder" style="">
Ein leeres style-Attribut? Das ist IMHO völlig zweckfrei. Zumal inline-Styles sowieso nicht gerade vorteilhaft sind. Du hast doch einen separaten style-Block weiter oben - also vergiss das zusätzliche style-Attribut!
<img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
Auch das border="0" kannst du im CSS regeln, zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.
<img src="shared/monigal_rgt.jpg" alt="" height="445" width="498" border="0" />
Du verwendest XHTML? Sicher? Das br-Element sah nicht danach aus...
So long,
Martin
<img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
Auch das border="0" kannst du im CSS regeln, zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.
Martin,
Eher nicht. Wo käme dann der blaue Rand bei <a href="foo"><img src="bar" alt="baz" /></a>
her?
Live long and prosper,
Gunnar
Hallo Gunnar,
<img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
Auch das border="0" kannst du im CSS regeln, zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.
Eher nicht. Wo käme dann der blaue Rand bei
<a href="foo"><img src="bar" alt="baz" /></a>
her?
der Einwand ist berechtigt, wenn das img-Element in einem Link steckt. Bei einem _nicht_ verlinkten img-Element, wie im obigen Beispiel, unterscheidet sich die Darstellung mit border="0" jedoch in keiner Weise von der Darstellung bei fehlendem border-Attribut. Bei dem blauen Rahmen muss es sich also um eine CSS-Regel im Default-Browserstylesheet handeln, die nicht auf img als Selektor angewendet wird, sondern auf a img. Jedenfalls hat img allein ohne weitere Festlegungen kein border.
So long,
Martin
der Einwand ist berechtigt, wenn das img-Element in einem Link steckt. Bei einem _nicht_ verlinkten img-Element, wie im obigen Beispiel, unterscheidet sich die Darstellung mit border="0" jedoch in keiner Weise von der Darstellung bei fehlendem border-Attribut.
In der Tat, Martin.
Bei dem blauen Rahmen muss es sich also um eine CSS-Regel im Default-Browserstylesheet handeln, die nicht auf img als Selektor angewendet wird, sondern auf a img.
So kompliziert hatte ich gar nicht gedacht. Es ist aber noch komplizierter: im Firefox ist es jedenfalls a:link img.
Live long and prosper,
Gunnar
im Firefox ist es jedenfalls a:link img.
Keinesfalls. Eher a[href] img. Oder a:link img, a:visited img, …
Live long and prosper,
Gun*Ingrid*nar
Hallo Martin,
Juhuuuu! Endlich mal einer...
Ja, ich brauch halt net dezent auf latente inglish-Kenntnisse hinweisen :D
So, da geht's doch schon los: An margin-top hast du gedacht, gut. Aber was ist mit
padding (Innenabstand)? Den hast du nicht berücksichtigt, also gilt der Defaultwert
des Browsers, also meistens ein Wert >0px.
Es kann doch nicht waaahhh sein !!!
Aber es mußte ja so eine Schusselei bei mir sein!
Natürlich ist default padding mal größer null, mal nicht.
Aber solange die Browser nicht für User geschrieben werden, sondern um sich gegenseitig zu profilieren, wird man halt reinfallen mit sowas. Leider hab ich noch einen störenden Job und will dann schnell mal abends...nun ja.
Margin:0px hatte ich allerdings schon mal drin, brachte aber nix, habs dann aus Schlankheitsgründen wieder rausgetan.
Warum legst du die Hintergrundfarbe nicht auch mit CSS fest,
was doch naheliegend wäre?
Ja, solche Ausputzarbeiten müssen eh noch kommen. Historie halt. Genau wie das Style"", da hatt ich was getestet. <br> kommt auch noch dran. Sorry.
zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.
Da hatte ich aber schon mal irgendwo Ärger damit. Muß ich nochmal dran...etwas später...