Neuaufbau einer Hompage

[Eragon-02]

schon okay so von der Höhe des Buttons 1-2 Pixel mal weniger dann sollte das gut sein


und in der länge mall 1-2 pixel also ein kleines bißel weniger

[goefi-chiangmai]

Habe ich ja gemacht, aber ging nicht um das!
-----------------------------
Beantworte meine frage selber um weiter zu kommen, um den Button einzustellen, müssen wir ja die grösse der grafik bestimmen

Lösung:

Auf Die Grafik gehen - Rechte Mausetaste - GRAFIK INFO ANZEIGEN
Was sehen wir da 147(breit) x 90(hoch) Pixel

Wie gross ist jetzt dein button, sind ja 2 auf dem Bild?

[Eragon-02]

die selben maße
147(breit) x 90(hoch) Pixel

[goefi-chiangmai]

die selben maße
147(breit) x 90(hoch) Pixel

Falsch!

ein Button ist 147 x 45

90 / 2 Button = 45
--------------------------------------------------------------------------------------------------------------------------------
so jetzt stellen wir das zuerst ein in deiner CSS

deine jetzige bestehende sieht so aus:

Code: Alles auswählen

#navigation a {
background:url("http://file2.npage.de/011827/41/bilder/navi_bg1.png") no-repeat;
width:170px;
height:25px;
display:block;
padding-left:25px;
margin:5px 0;
font-size:13px;
color:white;
text-decoration:none;
line-height:25px;
}

#navigation a:hover {
background-position:0 bottom;  
} 

Und weil wir ja die eigentliche grösse des Button bestimmt haben, geben wir folgende werte ein
Bei der breite: width:147px; Und die höhe height:45px; Die angaben sind eigentlich immer in Englisch, aber man versteht es Schnell wenn man auch nicht so Englisch kann

So muss es jetzt Einstellen, dasnach gehen wir zum nächsten Schritt!

Code: Alles auswählen

#navigation a {
background:url("http://file2.npage.de/011827/41/bilder/navi_bg1.png") no-repeat;
width:147px;
height:45px;
display:block;
padding-left:25px;
margin:5px 0;
font-size:13px;
color:white;
text-decoration:none;
line-height:25px;
}

#navigation a:hover {
background-position:0 bottom;  
}

[Eragon-02]

okay habe ich

noch mall cach leren kann mann das auch ohne den cc clener

so und noch eine frage kann Mann die Schrift im Button auch mitich setzen also Center von der Höhe er

[goefi-chiangmai]

ok, jetz kommen wir zu den abständen, du woltest ihn kleiner haben von button zu button.
(Solange wir jetzt über den button sprechen ist das immer die gleiche Div ID #navigation ich werde jetz nicht den ganzen div reinstellen nur den teil
---------------------
Der Abstand margin (Rand/Abstand) müssen wir jetzt so einstellen,

im momment hast Du das auf 5 pixel eingestellt

Code: Alles auswählen

margin:5px 0;

Mach daraus mal eine 2

Code: Alles auswählen

margin:2px 0;

[Eragon-02]

okay

wie siehts bei ihn aus bei mir hat sich nicht groß geändert

http://dragons-sims-3-bastel-ecke.npage.de/

die Schrift im Button müsste ein wenig nach unten noch

[goefi-chiangmai]

Weiter:
geht es mit dem Text auf deinem Button, im momment erscheint der zimmlich weit oben! und der anfang der Schrift weit rechts!

Frage ist was Du willst am besten versuch es selber indem Du Pixelwerte änderst an Volgender Stelle!

1.
Um den Anfang der Schrift im Button weiter nach links zu kriegen musst Du volgenden wert ändern das padding-left: (Abstand vom linken rand). Im momment ist er auf 25 px eingestellt (Das heisst: von links 25 pixel bis zum ersten Buchstabe).

Code: Alles auswählen

padding-left:25px; 

Mache daraus mal 15 ( Oder guck wieviel passend ist für Dich

Code: Alles auswählen

padding-left:15px; 

----------------------------------------------------------------------------------------------

2.
Um die Schrift weiter nach unten zu nehmen musst du das line-height: Einstellen! Da du bei height:45px; hast ist 45 der wert wo die Schrift genau in der mitte ist.
Deine Einstellung jetzt

Code: Alles auswählen

line-height:25px; 

Mache daraus mal 45 danach ist die Schrift vertikal in der mitte, fals sie weiter nach unten willst mach diew zahl grosser (Bsp. 50) oder lieber nach oben, kleiner als 45

Code: Alles auswählen

line-height:45px; 

-------------------------------------------------------------------------------------------------

Zum nächsten Schritt, brauche ich angaben über Farbe und grösse der Schrift

[Eragon-02]

okay danke habe es jetzt so wies sein sollte so kann ich es lasen habe es so jetzt

Code: Alles auswählen

#navigation a {
background:url("http://file2.npage.de/011827/41/bilder/navi_bg1.png") no-repeat;
width:147px;
height:45px;
display:block;
padding-left:24px;
margin:2px 0;
font-size:13px;
color:white;
text-decoration:none;
line-height:45px;
}

wieder was gelernt so langsam Wirts so jetzt haben wir das kann könne wir ja zum Nächten schritt langsam übergehen oder

obwohl zwichen den buttons etwas luft noch 1 2 pixel

[Jasko]

Hallo, ich wieder, bin gerade vorbei gekommen und lese das hier, und sage mir da kann ich helfen.

Also font-size bestimmt die groesse der Schrifft, je hoeher die Zahl ist desto groesser die Schrifft.

Den zwischenraum bei den Buttons regelt man mit dem Attribut margin:2px 0;

Hierbei bedeuten die 2px der abstand des Buttons nach oben und unten, die 0 heisst das der abstand recht und links 0 pixel ist, also wenn du den abstand veraendern willst kannst du z.B. aus 2px ein 1px oder 0 machen, wobei ich null nicht empfehle.

MFG