• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Layout Problem

Status
Für weitere Antworten geschlossen.
S

Sven_SN

Neues Mitglied
Hallo,
ich habe ein Problem mit einem Layout :

http://img375.imageshack.us/img375/848/homepagenq7.jpg

Also ich habe soweit alles fertig ( den Header, Navigation, linken Content, Menü Empfehlung ) in die richtigen Container eingefügt.
Nun kriege ich es aber irgendwie nicht hin, das Menü " Neuigkeiten " unter dem Menü " Empfehlung " ( wie auf dem bild zu sehen ) .

Weiß jemand einen Befehlt, dafür ?
Weiß net, ob das an Informationen reicht, was ich euch jetzt gegeben habe, frage sowas das erste Mal ;ugl
Falls ihr noch mehr braucht ( css datei oder so ) einfach posten ;Jump

Ansonsten würde ich mich erstmal über eine Antwort freuen.
Danke.

MfG Sven_SN
 
Hi,
danke für die Antwort.
Es lag, aber nicht daran float: right; hatte ich drinne.
War ein kleiner " Schönheitsfehler " in der Breite und Höhe, deswegen verrutschte alles irgendwie.

Nu habe ich aber wieder ein neues Problem.
Und zwar bin ich jetzt an der Navigation dran.
Möchte jetzt meinem Link ein Hintergrundbild geben

#navigation {
float: left;
width: 1004px;
height: 76px;
background: url(../Bilder/Homepage_05.gif);
}

#navigation ul {
margin: 25px;
white-space: nowrap;
}
#navigation ul li {
margin: 100px;
list-style-type: none;
display: inline;
}
#navigation a:link {
color: #FFFFFF;
text-decoration: none;
background: url(../Bilder/beispiel.gif); <--- Ist soweit klar
}
Zum Vergrößern anklicken....
Ist ja soweit klar nur dann umkreist er ja nur den Link.
Mein Link - Hintergrund Bild soll, aber eine Breite von 200px*76px haben.
Wie kann man das defenieren ?

edit: Achso und der Link soll natürlich in der Mitte von dem Hintergrund - Bild sein.
Übrigens ist die Navigation 1004px*76px*
Und die Links mit den Hintergründen sollen in die Mitte.

MfG Sven
​
 
Zuletzt bearbeitet:
Was Du möchtest, geht mit
Code: 
display: block;
und einer festen Zuweisung von Höhe und Breite.
Mittiges Zentrieren von Blockelementen geht mit
Code: 
margin: 0 auto;
. Du solltest dennoch grundsätzlich Deinen Ansatz überdenken. Webseiten mit "Pixelbreiten" etc. sind für nicht wenige Benutzer der Zielgruppe oft schwer zugänglich.

Gruß
Junny
 
Junny schrieb:
Webseiten mit "Pixelbreiten" etc. sind für nicht wenige Benutzer der Zielgruppe oft schwer zugänglich.
Zum Vergrößern anklicken....

Man sollte einfach die richtige Breite wählen ;) Naja, ich selbst habe 900px, ich frag mich grade was ich mir dabei gedacht habe ;ugl
Aber wenn man "Pixelbreiten" benutzt, kann man alles schön positionieren und proportionieren, und dann sieht es bei jedem (ordentlicher Browser vorrausgesetzt) gleich aus ;)
 
Also ich benutze auch immer die volle Pixelbreite.. :)
Habe mir, dass auch noch garnicht anders beigebracht ;ugl

Ich hab das alles jetzt mal gehostet auf ... Kostenlose Templates - Meine Homepage ...
Damit ihr es jetzt mal alles besser sieht...
Also die liste ist soweit in ordnung, habe soweit alles.
Nur ist die Liste leider ( die Navi ) leider nicht in der Mitte und der Textlink leider auch nicht.
Habe, es mit margin: 0 auto; auch versucht klappt auch nicht.

Also bräuchte bitte noch einen der mir bitte erklären, kann wie ich alles in die mitte kriege und den Texlink in die Mitte kriege.
Derzeit sieht man Code so aus :

#navigation li {
background-color: transparent;
padding: 0;
margin: 25px;
list-style: none;
display:inline;
}

#navigation ul {
background-color: transparent;
padding: 0;
margin: 0;
}

#navigation A {
font: normal 22px/35px sans-serif;
color: #FFF;
text-decoration: none;
text-align: center;
padding: 0px 0 0;
margin: 0px 0 0 0px;
width: 200px;
height: 76px;
display: block;
float:left;
}

#navigation A:link, #navigation A:visited {
background: url(../Bilder/standard.gif) center no-repeat;
}

#navigation A:hover, #navigation A:focus {
background: url(../Bilder/hover.gif) center no-repeat;
}
#navigation a#hier:link, #navigation a#hier:visited,
#navigation a#hier:hover, #navigation#hier:active {
background: url(../Bilder/start.gif); center no repeat;
}
Zum Vergrößern anklicken....
 
Achte darauf, dass Du der Menüliste eine Breite geben musst, damit sie per
Code: 
margin: 0 auto;
zu zentrieren ist.

Übrigens solltest Du Dich mal mit dem Thema semantische Auszeichnung des Inhalts beschäftigen - das, wozu html einzig und allein gut ist. Du hast schon gut angefangen - Menü als ungeordnete Liste und Formatierung per CSS, aber an einigen Stellen machst Du typische logische Fehler:

Code: 
<a href="index.html">Startseite</a> <strong>-</strong>
Strong ist dazu da, bestimmte Textpassagen stark zu betonen. Was soll dieser betonte Bindestrich hinter dem Link?

Code: 
<div id="navigation">
<ul>
    <li><a id="hier" href="index.html" title="Zur Starseite">Start</a></li>
    <li><a href="styles.html" title="Zu den Styles">Styles</a></li>
    <li><a href="archiv.html" title="Zum News Archiv">Archiv</a></li>

</ul>
</div>
Div ist dazu da, Abschnitte, die inhaltlich zusammengehören, zu gruppieren. Ein div um ein einziges Element ist fast immer sinnfrei (es sei denn, es handelt sich um einen Workaround für Browserfehler).

Außerdem solltest Du Deine Seite validieren und von den >25 Fehlern befreien, aber das hast Du ja sicher noch vorgehabt.

Gruß
Junny
 
Ja, ich weiß, dass ich noch viele Fehler drinne habe, ist auch erst meine 2 Seite mit css und html, sonst habe ich mich immer nur mit Photoshop auseinandergesetzt :)

Mit dem Bindestrich, weiß ich das, dass eigentlich nicht richtig ist, aber ein normaler fiel irgendwie nicht so auf, daher habe ich ihn dick gemacht. Besser, als wenn ich dem ganzen noch eine extra " p.klasse " gebe, finde ich.
Man sag ja immer, dass man sowas nicht machen soll, aber wenn er dann nicht auffällt ( ich finde diese Schnell - Links sind halt wichtig ) muss ich sie ja irgendwie betonen.

Meine rechten Menü-Boxen sind eigentlich auch falsch, wenn man es so sehen will, weil ich dorf einfach nur eine hintergrund - grafik eingefügt habe und die Liste einfach drüber, dass habe ich jetzt bei meiner ersten gelungen Navigation kapiert :-)
Also ist noch viel abzuändern...

Div ist dazu da, Abschnitte, die inhaltlich zusammengehören, zu gruppieren. Ein div um ein einziges Element ist fast immer sinnfrei (es sei denn, es handelt sich um einen Workaround für Browserfehler).
Zum Vergrößern anklicken....

Das verstehe ich, aber irgendwie nicht.
Ich hab dem Div ein Hintergrund ( einfarbig ) gegeben und eine Liste mit den Links erstellt. Wieso ist das falsch ? Wie soll man es dann sonst machen ?
Ich mein, wenn ich nicht mehr Grafiken verwenden möchte, sieht es halt mal leer aus. Kann ja nicht einfach jetzt noch paar Effekte reinhauen, wenn es garnicht passt. Oder wie meinst du das ? :roll:

Aber, danke schon mal übrigens, dass du soviel Geduld mit mir hast :-D
 
Sven_SN schrieb:
Mit dem Bindestrich, weiß ich das, dass eigentlich nicht richtig ist, aber ein normaler fiel irgendwie nicht so auf, daher habe ich ihn dick gemacht. Besser, als wenn ich dem ganzen noch eine extra " p.klasse " gebe, finde ich.
Zum Vergrößern anklicken....
Nein, Du hast ihn nicht "dick" gemacht, Du hast ihn "wichtig" gemacht. Dass der dick wird, ist Sache von CSS und wenn Du es nicht im Stylesheet explizit gesetzt hast (font-weight:bold), dann hast Du auch keine Garantie, dass es im Browser so angezeigt wird.
Um etwas "dick" zu machen, ist HTML nicht geeignet. Das geht nur mit CSS (s.o.). Und genau dafür sind Klassen da, das <strong> hier in dem Fall besser sein soll, war von Dir falsch gedacht, weil HTML nicht für das Aussehen zuständig ist, sondern CSS.
 
Ah ok, dass ist mir dann wohl in meinem Buch untergegangen :)
Habe ich direkt geändert und doch in eine p.klasse eingeteilt.
Das ist ja wirklich ein grober Fehler dann.

Hab der Liste eine feste Breite gegeben und es funktioniert ;Jump
Sie befindet sich jetzt in der Mitte, aber leider der Text nicht.
Habs wie normal auch mit

text-align: center
Zum Vergrößern anklicken....

probiert, aber klappt leider nicht. Brauch man bestimmt wieder irgendson Spezial Code, wie ? :lol:

Hab gerade mal den Validator durchlaufen lassen... Eigentlich habe ich nur 5 Fehler. Die 20 anderen Fehler liegen den dem Link von der Werbung. ist ja heftig... ;ugl
 
Sven_SN schrieb:
Ich hab dem Div ein Hintergrund ( einfarbig ) gegeben und eine Liste mit den Links erstellt. Wieso ist das falsch ? Wie soll man es dann sonst machen ?
Zum Vergrößern anklicken....
Ganz einfach: Gib der ungeordneten Liste den gewünschten Hintergrund und stelle sie ggf. mit
Code: 
display: block;
als Blockelement dar, damit sie den gleichen Platz wie die unnötige Box vorher eingenommen hat einnimmt.

Sven_SN schrieb:
Hab der Liste eine feste Breite gegeben und es funktioniert ;Jump
Sie befindet sich jetzt in der Mitte, aber leider der Text nicht.
Habs wie normal auch mit
Code: 
text-align: center;
probiert, aber klappt leider nicht. Brauch man bestimmt wieder irgendson Spezial Code, wie ? :lol:
Zum Vergrößern anklicken....
Code: 
text-align: center;
ist dazu da, Inlineelemente (wie z.B. Links) horizontal mittig zu positionieren. Vertikale Zentrierung gibt es da nicht. Dafür musst Du dem Listeneintrag einen Innenabstand oder dem Link darin einen Außenabstand geben.

Gruß
Junny
 
Also sollte man einem Container nie eine Hintergrund-Grafik geben ?
Sondern nur eine Farbe und den Rest mit Listen geschalten ?

Okay. Habe den Fehler gefunden.

#navigation A:link, #navigation A:visited {
background: url(../Bilder/standard.gif) center no-repeat;
}

#navigation A:hover, #navigation A:focus {
background: url(../Bilder/hover.gif) center no-repeat;
}
#navigation a#hier:link, #navigation a#hier:visited,
#navigation a#hier:hover, #navigation a#hier:active {
background: url(../Bilder/start.gif) center no-repeat;
}
Zum Vergrößern anklicken....

Daran lag es, dass er

margin-top: bzw. padding-top:
Zum Vergrößern anklicken....

Nicht angenommen hat :)

Ich würde sagen, dann bin ich soweit fertig.. Die Sidebars noch umbauen und dann wars das auch soweit, dank eurer Hilfe ;Jump

Vielen Dank ! 8-)

MfG Sven
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben