Wie Galerie zentrieren ?

html.de-Forum HTML, XHTML & CSS
1

€dit: Fehler selber gefunden :wink: .

Lg

JTanski

2

ALLES was mit dem Aussehen zu tun hat, schreibt man in CSS.
Somit sind deine Attribut zB im -Tag falsch.
Du kannst allen HTML-Elementen/Tags Namen geben (zB mit class oder id) und dann mit einem C-Style-Sheet formatieren.
Eine gute Anlaufstelle dafür ist CSS4You.

Ich hoffe damit erübrigt sich deine Frage, falls nicht gebe ich noch die Stichwörter „float“ und „clear“. Das sind CSS-Attribute, welche du auf deine iframes anwenden solltest um dein Problem zu lösen.

Zudem befürchte ich, du nutzt im ersten Script die Tabelle für das Aussehen oder die Anordnung. Nimm diese bitte heraus, denn Tabellen sind für tabellarische Daten und HTML (und damit

) ist für die inhaltliche Auszeichnung. Tabellenmissbrauch

3

Oh, ich war zu spät. Beachte bitte trotzdem meine Tipps!

4

Danke dir , aber wie kann ich auf ein bild eine id festlegen, bei einer liste ist es ja einfach …

Liste:

  • blabla
  • blabla2

aber beim bild:

so, wenn ich nun „bild“ in css bearbeite, kann ich dort nicht center schreiben, also es wird nicht in der mitte angezeigt …

Lg

JTanski

5

genau so
[HTML]<img src=„bild.png“ alt"Bild" id=„bild“>[/HTML]
und dazu der CSS-Code:

img#bild{ /*Die Attribute zB width oder height*/ }

6 
img#bild {
width:875px;
right:100px;
float:center;
}

float:center; wird aber nicht ausgeführt, d.h. das bild wird nicht mittig angezeigt …

Lg

JTanski

7

„right“ gibt es bei CSS nicht. Ich glaube du meinst „margin-right“.
float regelt den Textumfluss und nicht die Ausrichtung.
Wenn ich diesen Code-Schnippsel richtig entziffere, dann hast du zum einen vor den rechten Abstand vom Bild zum Elternelement auf 100px zu setzen aber auf der anderen Seite das Bild zu zentrieren? Ich weiss nicht was von beidem du eigentlich vor hast.
Versuche es mal mit „margin: 0 auto;“ um es zu zentrieren oder mit

img#bild{ width: 875px; margin-right: 100px; }
wenn du den rechten Abstand willst.

8 
img#bild {
    width:875px;
    margin-right:0 auto;
}

bild ist immernoch links am rand =/ …

Lg

JTanski

9

„margin-right: 0 auto;“ kann nicht funktionieren.
wenn man bei „margin“ zwei parameter angibt, dann bewirkt der erste von ihnen den Aussenabstand von oben und unten und der zweite Parameter von links und rechts.
auto bedeutet auf beiden Seiten der gleiche Abstand.
Bei „margin-right“ kann man nur einen Längenparameter angeben, du hast aber zwei angegeben.

Nutze zum zentrieren den Code den ich oben gepostet habe, also mit „margin: 0 auto;“.

10

es funktioniert einfach nicht , Hier mal mein ganzer code, vllt findest du den fehler =/ :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>***</title>
</head>


<style>
ul#navi {
    float:left;
    list-style:none;
    text-align:center;
    }

img#bild {
    width:875px;
    margin: 0 auto;
}

</style>


<body bgcolor="#000000" text="#FFFFFF" >


<a href="index.html"><img src="Bilder/logo.jpg" border="0" id="bild" /></a>


<br />
<ul id="navi">
<li><a href="index.html">Startseite</a></li>
<li><a href="galerie.htm">Galerie</a></li>
</ul>
<fieldset id="field">
<center>


<font size="6">W</font><font size="3">illkommen auf ***.tk den Download vom Spiel findet ihr <a href="#">Hier</a> oder unter dem Men&uuml;punkt "Download" .
<br />
Euer *** - Team </font>

</center>

<br />

<div id="footer" align="center">
<p><font size="1">Copyright &copy; by ***, All Rights &reg; by ***</font></p>
</div>


</fieldset>
</body>
</html>
11

„right“ gibt es schon, genauso wie „left“, „top“ und „bottom“. Das macht aber nur im Zusammenhang mit „position“ einen Sinn.

@JTanski:
Nein, das kann so auch nicht funktionieren. Denn die Methode mit „margin“ zentriert Block-Elemente. Du willst aber ein Inline-Element zentrieren. Das funktioniert nur, indem das umschließende Block-Element die Eigenschaft „text-align:center“ bekommt. So ein Element hast Du aber nicht. Abgesehen davon ist Dein Code auch sehr weit weg von dem, wozu HTML eigentlich da ist. Da hast Du noch erheblichen Nachholbedarf. Du solltest zuerst HTML lernen, bevor Du CSS lernst, denn sonst ist CSS eine Qual für Dich, wenn Du die Basics nicht beherrschst. CSS funktioniert nur anständig, wenn Du eine valide und semantisch sinnvolle Basis aus HTML hast - und das hast Du nicht.

12

Frage @ Efchen:
Per PN hatten JTanski das mit „display: block; margin: 0 auto;“ gelöst. hat auch funktioniert, aber ist das zulässig und wird dabei das Bild zu einem Block-Element?

13

Mit display:block wird einem Element gesagt, es soll sich wie ein Block-Element verhalten.

Wie schon gesagt, da die Auszeichnung mit HTML ja falsch ist, stellt sich das Darstellungsproblem nach der Korrektur des HTML-Codes ja ganz anders dar.

Aber ich muss prinzipiell kein Element zum Block-Element machen, wenn ich nicht weiß, wie ich Inline-Elemente zentriere.

Aber hier muss erstmal der HTML-Code korrigiert werden. Ich sage ja nicht umsonst immer, dass CSS nur funktioniert, wenn die Basis aus HTML stimmt.