text-align bei <img>
jörg
- css
Ich versuche gerade ein rein CSS-basiertes layout zu machen und tu mir da schon am anfang sehr schwer.
Hier mal der kurze Quelltext:
CSS-Datei:
img#grafik {
border-color:#000000;
border-style:solid;
border-width:1px;
width:600px;
padding:2px;
margin-top:5px;
text-align:right;
}
HTML-Datei:
<div id="grafik">
<img src="grafik1.jpg" alt="grafik">
</div>
Ist hier das div-Element fehl am Platz?
Das Problem ist nämlich, dass die Grafik nicht, wie eigentlich gewollt, sich rechts ausrichtet :(.
Bei SelfHTML steht allerdings, dass auch das <img>-Element durch text-align beeinflussbar ist ...
Also was hab ich falsch gemacht?
Vielen Dank im Vorraus!
Hi,
Ist hier das div-Element fehl am Platz?
ja! Du kannst der Grafik nämlich gleich die ID verpassen.
Also was hab ich falsch gemacht?
Woran gemessen wird die Grafik ausgerichtet? Da liegt der Fehler!
MfG Hopsel
Hallo jörg.
~~~css
img#grafik {
border-color:#000000;
border-style:solid;
border-width:1px;
width:600px;
padding:2px;
margin-top:5px;
text-align:right;
}
Gut, damit möchtest du also ein `<img id="grafik" /> `{:.language-html}formatieren.
> HTML-Datei:
> <div id="grafik">
> <img src="grafik1.jpg" alt="grafik">
> </div>
Nanu? ein solches img-Element scheint es nicht zu geben?
> Ist hier das div-Element fehl am Platz?
Wenn du das img-Element zentrieren möchtest nicht unbedingt. (Du musst die Zentrierung dann aber schon für den Inhalt des Elternelementes angeben.)
Möglichweise bietet sich hier aber auch ein anderes Element an, je nach dem, was dein Code hergibt.
> Vielen Dank im Vorraus!
Was schlägt dir [Google](http://www.google.de/search?hl=de&q=vorraus&btnG=Suche&meta=) vor? ;-)
Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)
Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
Schonmal Danke für die Antworten!
Nun hab ich ein weiteres Problem:
Ich versuch eine Tabelle mit CSS zu ersetzen,
die Tabelle (gleichzeitig Navigation der Seite) sieht in etwa so aus:
|--------------------------|
| Link | Link | Link |
|--------------------------|
Nun hab ich versucht per CSS solche Span-Kästen zu machen:
span#navigation {
text-align: center;
margin: 0px;
width: 167px;
padding: 10px;
border-color: #000000;
border-style: solid;
border-width: 1px;
border-collapse:collapse;
}
Im HTML:
<span id="navigation">
<a href="index.html">Link1</a>
</span>
<span id="navigation">
<a href="index2.html">Link2</a>
</span>
Kann man das auch eleganter lösen?
Das Problem ist nämlich, dass das border-collapse nicht mehr funktioniert und sich die border-lines überschneiden.
Danke im voRaus ;)
Hallo jörg.
Ich versuch eine Tabelle mit CSS zu ersetzen,
Dies ist nicht möglich.
die Tabelle (gleichzeitig Navigation der Seite) sieht in etwa so aus:
|--------------------------|
| Link | Link | Link |
|--------------------------|
Also ein vorzüglicher Einsatzort für eine Liste. (Ent-/Ansprechend formatiert, versteht sich.)
Nun hab ich versucht per CSS solche Span-Kästen zu machen:
Ein aussageloses Element bietet sich hier eher weniger an.
~~~css
span#navigation {
text-align: center;
margin: 0px;
width: 167px;
padding: 10px;
border-color: #000000;
border-style: solid;
border-width: 1px;
border-collapse:collapse;
}
Die letzte Eigenschaft hat nur innerhalb von Tabellen eine Auswirkung.
> Das Problem ist nämlich, dass das border-collapse nicht mehr funktioniert und sich die border-lines überschneiden.
Müssen sich die Linien unbedingt überschneiden?
Außerdem zwingt dich niemand, alle vier Seiten mit einem Rahmen zu versehen.
> Danke im voRaus ;)
Gut, dass du es betonst. ;-)
Einen schönen Dienstag noch.
Gruß, Ashura
--
Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
[30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)
Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
[\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)