Zur Navigation

Statt einer Tabellenformatierung css verwenden? [2]

11 xred

Zitat von Jörg
Das div benötigst du eigentlich nicht:

<div align="center">

Oje, da vertehe ich etwas doch nicht: Wenn ich das nicht habe, steht die ganze Box linksbündig

Du kannst im übergeordneten div auch die CSS-Eigenschaft text-align:center anstelle des veralteten HTML-Attributs align verwenden

Was meinst Du mit übergeordneter Box?

Das Optimum wäre allerdings wenn sich die Bildchen gleichmässig auf der Seitenbreite verteilen, geht das vielleicht auch?

Du kannst für die Links (<a>) ein entsprechendes margin-left und margin-right definieren

das verstehe ich jetzt überhaupt nicht, wie kann ich allen Links mit margin versehen? Jedes einzeln? Wie muss das aussehen? Meine Versuche sind leider unbrauchbar.
Offenbar doch nichts kapiert...

04.03.2012 16:07

12 Jörg

Wie hast du es denn versucht? Inline könnte es z.B. so aussehen:

<a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a>

Alternativ kannst du die Links auch zentral über die Klasse oder ID ihres Elternelements ansprechen:


<div class="bilder">
    <a href="example.png"">
        <img src="example.png" alt="" />
    </a>
    <a href="example2.png">
        <img src="example2.png" alt="" />
    </a>
    <a href="example3.png">
        <img src="example3.png" alt="" />
    </a>
</div>

In der CSS-Datei werden die Eigenschaften dann folgendermaßen definiert:

div.bilder a {
margin-left:20px;
margin-right:20px;
}

Siehe hierzu auch:

http://de.selfhtml.org/css/formate/zentrale.htm

04.03.2012 17:57

13 xred

Zum Inline: Danke schön, genau so habe ich das jetzt gemacht, Bild für Bild. Das haut hin und sieht perfekt aus!
Warum reicht es da eigentlich nicht wenn ich nur auf einer Seite den Abstand definiere? Ich habe das jetzt ausprobiert, das dürfte auch funktionieren, oder?

Was macht es eigentlich, dass die Bildchen so nebeneinander stehen und nicht untereinander?
Zitat von Jörg
Wie hast du es denn versucht? Inline könnte es z.B. so aussehen:

<a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a>

Ja, das ist noch eine andere Sache, da habe ich mich nicht hingetraut ;)

Wenn ich eine Klasse eröffne um die Bilder zu positionieren, wo mache ich das? Erstelle ich dazu eine eigene css-Datei oder mache ich das in der bestehenden style.css?

Wenn in dieser, wohin soll das? Das wird ja wohl nicht ganz egal sein, oder doch?

Alternativ kannst du die Links auch zentral über die Klasse oder ID ihres Elternelements ansprechen:

Elternelement? Wie finde ich das? Ich verwende Dreamweaver, für mich ist das eine undurchsichtige Sache, kann man das irgendwie Durchsichtig machen? Ich habe im Safari einen Punkt Entwickler, übersichtlicher wird es aber dadurch auch nicht.

<div class="bilder">
    <a href="example.png"">
        <img src="example.png" alt="" />
    </a>
    <a href="example2.png">
        <img src="example2.png" alt="" />
    </a>
    <a href="example3.png">
        <img src="example3.png" alt="" />
    </a>
</div>

In der CSS-Datei werden die Eigenschaften dann folgendermaßen definiert:

div.bilder a {
margin-left:20px;
margin-right:20px;
}

Siehe hierzu auch:

http://de.selfhtml.org/css/formate/zentrale.htm

08.03.2012 19:28

14 Jörg

Warum reicht es da eigentlich nicht wenn ich nur auf einer Seite den Abstand definiere?

Was meinst du mit "nur auf einer Seite" - dass das CSS nicht zentral in der CSS-Datei definiert wird? Selektoren wie "div.bilder a" kann man nur zentral definieren. Du kannst die Definitionen auch inline vornehmen, musst das dann aber natürlich bei jedem einzelnen Link machen.

Was macht es eigentlich, dass die Bildchen so nebeneinander stehen und nicht untereinander?

Das tun Bilder von sich aus, weil es Inline-Elemente sind. Zum Unterschied zwischen Inline- und Blockelementen:

http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente

09.03.2012 17:45

15 xred

Zitat von Jörg
Warum reicht es da eigentlich nicht wenn ich nur auf einer Seite den Abstand definiere?

Was meinst du mit "nur auf einer Seite" - dass das CSS nicht zentral in der CSS-Datei definiert wird? Selektoren wie "div.bilder a" kann man nur zentral definieren. Du kannst die Definitionen auch inline vornehmen, musst das dann aber natürlich bei jedem einzelnen Link machen.

Hier hat sich meine Frage darauf bezogen:

<div style="position:absolute; bottom:0px; width: 100%; height: 41px; float: left; margin-left: auto; margin-right:auto; margin-bottom: 2px;">
<a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a><a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a><a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a></div>

Hier bekommt jedes Bild sowohl links als auch rechts einen Abstand (margin) mit. Würde es nicht reichen nur einen Abstand zu definieren? Die Bilder werden ja sowieso aneinander gereiht.



Was macht es eigentlich, dass die Bildchen so nebeneinander stehen und nicht untereinander?

Das tun Bilder von sich aus, weil es Inline-Elemente sind. Zum Unterschied zwischen Inline- und Blockelementen:

http://de.selfhtml.org/html/referenz/elemente.htm#block_elemente

<div style="float: left; margin-right: 5px;width:187px;">[portfolio_slideshow id=1643][portfolio_slideshow id=1643]</div>

Das reiht die Slideshows untereinander, mit <span> statt <div> würde es ja zu einem Inline Element werden, das habe ich versucht, da aber steht es nicht nur untereinander, sondern auch noch zentriert und unskaliert (ignoriert die 178px). Offenbar habe ich da noch etwas nicht kapiert. Ich brauche die Slideshows nebeneinander und mit einem Abstand von 5px. Den Text will ich dann rechts von den beiden Slideshows vorbeifließen lassen und er soll dann unter den Slideshows die volle Breite einnehmen.


Edit Jörg: Quotes repariert

10.03.2012 05:31 | geändert von Jörg: 10.03.2012 10:18

16 Jörg

Zitat von xred
<div style="position:absolute; bottom:0px; width: 100%; height: 41px; float: left; margin-left: auto; margin-right:auto; margin-bottom: 2px;">
<a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a><a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a><a href="example.png" style="margin-left:20px; margin-right:20px">
    <img src="example.png" alt="" />
</a></div>

Hier bekommt jedes Bild sowohl links als auch rechts einen Abstand (margin) mit. Würde es nicht reichen nur einen Abstand zu definieren? Die Bilder werden ja sowieso aneinander gereiht.

Ja klar, wenn das ganze nicht zentriert ist, kannst du dich auch auf margin-right beschränken.

<div style="float: left; margin-right: 5px;width:187px;">[portfolio_slideshow id=1643][portfolio_slideshow id=1643]</div>

Das reiht die Slideshows untereinander, mit <span> statt <div> würde es ja zu einem Inline Element werden, das habe ich versucht, da aber steht es nicht nur untereinander, sondern auch noch zentriert und unskaliert (ignoriert die 178px). Offenbar habe ich da noch etwas nicht kapiert. Ich brauche die Slideshows nebeneinander und mit einem Abstand von 5px. Den Text will ich dann rechts von den beiden Slideshows vorbeifließen lassen und er soll dann unter den Slideshows die volle Breite einnehmen.

Die Breite eines Inline-Elements ergibt sich aus dessen Inhalt und lässt sich nicht anderweitig mittels width definieren. Wenn du eine Breite definieren möchtest, musst du Blockelemente nehmen und die mit float nebeneinander anordnen.

10.03.2012 10:59 | geändert: 10.03.2012 11:00

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)





[BBCode-Hilfe]