Text positionieren

Webdesign & Technik HTML & CSS
1

Hallo
Ich habe in einem Conatiner mainnav (der das Menü darstellt) ein Hintergrundbild das 900 x 28 pixel groß ist
Da dies die Buttons darstellen soll, soll der Text in der Mitte ist
Doch bei mir schaut das so aus:

was muss ich für einstellungen im style.css vornehmen das der text nicht an der linken seite “klebt” und nicht so weit oben ist?
lg
und vielen dank

2 
margin-left: 5px;
margin-top: 5px;
3

Das Kernproblem ist ja vermutlich, daß das Hintergrundbild
Pixelgraphik ist und sich nicht an die Schriftgröße anpaßt.
Je nachdem, welche Schriftgröße der jeweilige Nutzer eingestellt
hat, kann der Text also oben in der Ecke kleben oder auch sogar
unten noch überstehen. Das kann man als Autor nicht
vorhersehen und der Versuch daran etwas zu ändern,
verschlechtert meist die Lesbarkeit des Textes für den Nutzer,
weil man dann die Textgröße an die des Hintergrundbildes
anpassen müßte - ist natürlich Unfug, weil das Bild ja nur
Dekoration ist und der Text als eigentlicher Inhalt optimal lesbar
sein sollte (was eine Bedingung ist, die drastisch vom Nutzer
abhängt, nicht vom Autor).

Formal technisch kann man das mit einer skalierbaren
Hintergrundgraphik vermeiden (SVG), funktioniert bei den
technisch aktuellen browsern derzeit aber nur bei Opera.

Deswegen wird da seit zig Jahren um das Problem
herumgearbeitet, man verwendet mehrere geschickt
verschachtelte Elemente und dann jeweils ein anderes
Hintergrundbild. So kann man erreichen, daß sich der zentrale
monochrome Bereich hinter dem Text flexibel an die Textgröße
anpaßt und die äußeren Bereiche in Farbe und Form wie
gewünscht strukturiert sind und sich immer um den Text herum
anordnen.

4

hi
vielen dank für eure antworten
michi7x7 das hab ich schon vorher probiert aber da kommt das dabei herraus:

es verschiebt sich der ganze mainnav container!
was hab ich da falsch gemacht?

#mainnav
{
	width: 900px;
	height: 28px;
	background-color: #CCCCCC;
	background-image: url(images/mainnav.PNG);
	color: #FFFFFF;
	font-family: "Comic Sans MS", "Times New Roman";
	font-size: 14px;
	margin-left: 5px;
	margin-top: 5px;
	
}
5

mach mal

margin-left: 5px; margin-top: 5px;
in

padding-top: 5px; padding-left: 5px;

6

hi
jetzt wird der container größer
er verlängert sich um 5 pixel und nach unter vergrößert sich er ebenfalls auf 5 pixel
aber der text wäre jetzt richtig positioniert

7

Ja, so funktioniert die Grössenberechnung in CSS, Stichwort Box Model.

Wenn du eine Navigation vernünftig auszeichnest (UL->LI->A), dann hast du aber eigentlich genügend Elemente zur Verfügung, um alles so ausgerichtet zu bekommen, wie gewünscht.

8

Hallo nasahl

Das ist dein css:

[code]#mainnav
{
width: 900px;
height: 28px;
background-color: #CCCCCC;
background-image: url(images/mainnav.PNG);
color: #FFFFFF;
font-family: “Comic Sans MS”, “Times New Roman”;
font-size: 14px;
margin-left: 5px;
margin-top: 5px;

}[/code]

Füge einfach das dazu:line-height: 28px;
und du hast deinen Text in der mitte! :smiley: