Bilder verschoben

[emotioncatcher]

Hallo,erstmal meine "Problemhomepage": Emotioncatcher´s TutorialsWenn ich bei Phase 5 die Vorschau anschaue, passt alles. In jeder Zeile sind 5 Bilder, darüber immer der Name. Jetzt hab ich die Seite hochgeladen und plötzlich sind es nur noch 4. Sieht natürlich alle schrecklich aus.Auch die Navigationsleiste (bzw. deren Hintergrund) sollte eigentlich länger sein. So sieht es bei meiner Vorschau aus:Wenn ihr meinen Code vom Stylesheet oder so braucht sagt Bescheid.Und ich bin Anfängerin beim homepage erstellen, also bitte versuchen so einfach wie möglich zu antworten :)Danke und viele Grüße!Julia

 

[Waffelheld]

Hallo,

das deine Website im Browser nicht so aussieht wie in deinem Editor ist kein Wunder.
Du hast für horizontale Abstände einfache Leerzeichen und für vertikale Abstände Zeilenumbrüche verwendet.
Das ist der falsche Weg!
Benutze für den Inhalt HTML und für alles was das Layout betrifft (Abstände, Rahmen etc.) CSS.

 

[emotioncatcher]

das ging aber schnell, danke.
was muss ich denn dann bei der Navigationsleiste als Höhe angeben, dass sie einfach bis zur nächsten Box (footer) nach unten geht? Bisher habe ich dort height: 100%, dann ist es aber nur so lang wie der Text (deshalb hab ich auch das mit den Umbrüchen gemacht... )

Aber zwischen den Bildern habe ich ja nur eine Leerzeile und nach jeweils 5 Bildern einen Zeilenumbruch, da versteh ich nicht ganz was ich am layout ändern muss. Ich hab nur links einen Innenabstand von 7px angegeben in dieser Box und rechts garkeinen, trotzdem wird das letzte Bild in die nächste zeile verschoben als würde es nicht mehr hinpassen.

 

[Waffelheld]

Der Aufbau der Navigation ist schon von grundauf nicht wirklich richtig.
Navigationen baut man mit dem ul-Element(Aufzählung), dann sind auch die Suchmaschienen glücklich.

Beispiel

<ul>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>

Dann kann man die abstände und alles weitere per CSS bestimmen

z.B.

li
{
   list-style:none;
   margin:5px 0px;
   padding:0;
}

edit:

das die Bilder nichtmehr nebeneinander sind, liegt daran, das das Inhalts-Element scheinbar nicht breit genug ist.

 

[emotioncatcher]

so hab meine Navigation jetzt "ordentlich" gemacht. Allerdings reicht sie dadurch immer noch nicht automatisch bis zu nächsten div Box...
hab aber eine einfache Lösung gefunden (auch für das Bilder-Problem), ich hab meine Navigationsleiste einfach horizontal gemacht. Ist auch in Ordnung und jetzt ist genug Platz für die Bilder.

Kannst du mir vllt noch sagen, wie ich jetzt den Abstand zwischen den einzelnen Listenelementen vergrößern kann, im Moment ist es sehr unübersichtlich.

 

[Waffelheld]

je nach Wunsch mit margin oder padding.

 

[emotioncatcher]

danke nochmal für deine Zeit und Hilfe :)

 

[Waffelheld]

nunnoch als kleine Anmerkung. Da dein Inhalt ja tabellarisch aufgebaut ist wäre es auch sinnvoll ihn in eine Tabelle zu tun. ;)

 

[Elroy]

nunnoch als kleine Anmerkung. Da dein Inhalt ja tabellarisch aufgebaut ist wäre es auch sinnvoll ihn in eine Tabelle zu tun. ;)

Nein wäre es nicht.

Es handelt sich um eine Liste von Bildern nicht um tabellarische Daten.
Man sollte die Bilder als Liste auszeichnen und für die Abstände CSS verwenden.

Gruss
Elroy