div richtig ausrichten

[unsterblich]

Hallo,

ich bin neu hier und habe einige Fragen (ich kenne mich zwar ein wenig mit HTML aus, aber ich benötige dennoch eure Hilfe).

Das Design soll später einmal so aussehen:
http://h-7.abload.de/img/thefinaleone0uct.jpg

Ich habe in der CSS Datei mehrere div container erstellt und in jeder befindet sich jeweils ein png. Die Hintergrundgrafik ist 50x50px groß und wird einfach beliebig oft wiederholt.

Meine Frage nun:

Wie richte ich die "PORTFOLIO" Grafik so aus, dass sie immer exakt mittig ist? Ich möchte im späteren Design keine Scrollbalken haben.

div.maintext {
background-image: url(bilder/maintext.png);
position: center;
background-repeat: no-repeat;
width:510;height:140; 
}

Ich habe bereits auch background-position: center; probiert, aber die Grafik wird mir einfach immer links oben im Eck angezeigt. Was mache ich falsch? Wie kann ich die Grafik ausrichten?

Und wie platziere ich danach die Buttons am geschicktesten, so dass sie wie oben auf der Grafik zu sehen sich genau immer so unter der Grafik befinden?

Vielen Dank im Voraus.

Gruß,
unsterblich

 

[prm]

Du musst in diesem Fall nicht die Hintergrundgrafik positionieren, sondern den Div.
Wie das geht, findest du hier erklärt: Horizontale Zentrierung mit CSS
Horizontale und vertikale Zentrierung mit CSS
Meines Erachtens bedarf es in diesem Fall keiner Hintergrundgrafik, sondern du kannst das auch als image einbinden.
Für die Links verwende am besten eine Listen-Navi, siehe Horizontale Listennavigation.
Für die exakte Ausrichtung und die Abstände musst du die Abstände anhand der Linkbreiten berechnen.

 

[unsterblich]

Hi,

danke für die Erklärung bzw. die Links! Die Grafik habe ich nun positioniert, als nächstes kommen die Links dran. Sollte ich weitere Fragen haben oder Probleme auftauchen werde ich mich wieder melden!

 

[unsterblich]

Hi,

ich bräuchte noch einmal eure Hilfe. Die Hintergrundgrafik ist nun platziert und bleibt auch mittig wenn man das Browserfenster verkleinert oder vergrößert - also so wie ich es wollte. Nun kriege ich aber die Links/Buttons nicht anständig platziert. Ich könnte sie zwar per width und heigth ausrichten, aber dann bleiben sie an ihrem Platz wenn ich die Fenstergröße veränder.

Wie kann ich die Buttons nun anständig platzieren.

Der Code der Buttons sieht momentan so aus:

div.about {
background-image: url(bilder/about.png);
position: absolute;
width:101px;height:36px;
}

und der Coder der Hintergrundgrafik so:

div.center {
position: absolute;
top: 50%;
left: 50%;
margin: 0px auto;
width: 510px;
height: 140px;
margin-left: -255px;
margin-top: -70px;
}
			
div.background {
background-image: url(bilder/background.png);
background-repeat: repeat;
}

Kann mir bitte jemand verraten wie ich die Buttons anständig platzieren kann? :(

 

[prm]

Poste mal einen Link zu deiner Seite, damit man alles im Zusammenhang sieht.
Besorge dir dazu ggf. Freewebspace.

 

[unsterblich]

Hi,

habs hier mal schnell hochgeladen. Kann dir die CSS Datei auch per PN oder so senden wenn du die brauchst.

Portfolio by Stefan Hohmann

Gruß,
unsterblich

 

[Andreas B]

Hallo Stefan,
das kannst du mit dem CSS-Attribut "margin" machen.
Um margin zu verstehen, würde ich dir raten folgendes Tutorial anzusehen: SELFHTML: Stylesheets / CSS-Eigenschaften / Auenrand und Abstand
Mit freundlichen Grüßen

 

[unsterblich]

Hallo Andreas,

danke für den Tip, das werde ich morgen mal testen! :)

Gruß,
unsterblich

 

[prm]

Verwende für die mittlere Grafik ein direktes Image.
Binde dieses in einen zentrierten div ein.
Binde innerhalb des gleichen divs und unterhalb des images deine Navi ein.
Verwende für die Navi eine Liste.