nicht angemeldet
Etwas nach rechts verschobener, zentrierter Text
Liebe Selfhtml-Helfer,
ich hoffe einmal, dass mir als Newbie hier mit meiner Anfrage etwas Nachsicht entgegengebracht wird.
Ich habe mir von Fractatulum das 5. Beispiel heruntergeladen (ich finde die Sachen sehr schön und bin auch dankbar dafür) und angefangen es im CSS anzupassen. Bisher habe ich nur links und rechts den Abstand zum Fenster auf je 40px verkleinert und mich an den Kopfbereich herangemacht. Genau da ist mein Problem:
Oben in dem Kopfbereich, der im Original das blaue Rechteck oben ist, sollen zwei Grafiken sein, linksbündig von einem Gebäude, rechtsbündig mit 10px Abstand von rechts ein Logo. Mittig davon der Name des kleinen Vereins. Da dieses Layout je nach Fenstergröße mitskaliert, habe ich das folgendermaßen gelöst und das funktioniert auch zu 2/3:
Die Gebäudegrafik (300px breit) habe ich als Hintergrundbild des Kopfelements genommen, das Logo (85px breit) habe ich dann einfach als rechtsbündiges Bild mit 10px Abstand eingefügt.
Nur den Namen bekomme ich einfach nicht mittig im Verhältnis zu den zwei Grafiken (die eine Grafik ist ja breiter als die andere, also liegt die Mitte zwischen den zwei Grafiken nicht in der Mitte des divs). Ich habe ein <div> mit einer neuen id genommen und im CSS einen z-index genommen, und dazu in der CSS-Datei schon etliches versucht, aber entweder wird der Name genau zentriert angezeigt oder komplett nach rechts verschoben.
Dies war mein letzter Versuch:
#name{
background: transparent;
text-align: center;
width: 100%
z-index: 2;
position: absolute;
font: bold 20px verdana, sans-serif;
margin: 21px 125px 15px 340px;
}
Der Text erscheint aber mit diesem CSS-Teil genau zentriert vom Kopfbereich, eben nicht zentriert in Bezug auf die beiden Grafiken.
Ich habe statt margin auch schon padding genommen, doch dann war das Ganze aus mir unerfindlichen Gründen ganz nach rechts verschoben, sodass unten eine Scrolleiste erschien. (Entschuldigung, ich habe den CSS-Code einfach nicht farbig bekommen)
Bitte nicht über die seltsame Reihenfolge wundern. Ich hoffe ich liege richtig, dass die Reihenfolge nichts ausmacht. Das ist so beim Ausprobieren entstanden. Ich arbeite mit Topstyle lite. Wenn ich mit Hilfe von hier (hoffentlich) die Lösung gefunden habe, dann sortiere ich das schon nach der Reihenfolge des Topstyle Lite Style Inspectors.
Bitte, ich bin absolute Amateurin, bekomme auch nichts vom Verein für die Seite. Durch berufliche Verbindungen einiger Mitglieder unterstützen sie vor Ort eine Schule in Afrika mit ihrem privaten Geld. Da inzwischen auch einige Leute aus dem Freundskreis mitmachen, die nicht mit am Ort wohnen, hätten sie gerne eine Webseite. Ich gehöre auch zum Freundeskreis und hab mich nun in die Sache gestürzt.
Ich bin für jeden Tipp, der mich zur Lösung des Problems bringt, sehr dankbar.
Gruß Ulrike S.
-
Hi Ulrike,
Da dieses Layout je nach Fenstergröße mitskaliert (..)
Genau, darum variiert auch der Bereich, den Du für #name nutzt in der Breite. Aber ein rechter Außenabstand von z.B. 125px ist immer gleich groß, stimmt also nur bei genau einer bestimmten Skalierung. Prozentangaben wären vielleicht besser.
z-index: 2;
... ist dafür da, die Reihenfolge in der "vertikalen" Schichtung festzulegen, wolltest Du das?
font: bold 20px verdana, sans-serif;
Unglücklich... Du solltest Eine Lösung anstreben, die auch dann funktioniert, wenn der Benutzer die Schriftgröße im Browser ändert (und Ihm das auch erlauben, z.B. mit Schriftgrößen in em).
Könntest Du etwas mehr HTML und CSS von diesem Header posten? Gerade so viel, daß andere das Beispiel nachstellen können?
CU
-
Hallo Shepard,
für den Quelltext hatte ich gedacht, dass da die Links am besten wären, weil sonst das Posting zu lang wird. Aber ich versuche es einmal.
Bitte den Link Beispiel 5 folgen und dann einfach den Quelltext anzeigen lassen.
Ich habe den Quelltext bisher so abgeändert:<body>
<div id="container">
<div id="name">Der Name</div>
<div id="head"><img src="logo.jpg" style="" width="85" height="100" border="0" alt="logo"></div>der div Container wird später im html, nachdem auch noch das Menü darin steht, geschlossen.
Hier nun das CSS, das diese divs betrifft:
body{
color:black;
background:#D8E4F2;
margin:0;
padding:0;
font:13px verdana, sans-serif;
}#name{
background: transparent;
text-align: center;
width: 100%
z-index: 2;
position: absolute;
font: bold 20px verdana, sans-serif;
margin: 21px 125px 15px 340px;
}#container{
background:#ff0000;
padding:0;
margin:0 20px 0 20px;
}#head{
color: black;
height: 100px;
background: #699cde;
background-image: url(hint1.jpg);
background-position: left;
background-repeat: no-repeat;
text-align: right;
}zum z-index:
Also der es ist doch so, dass der div name über dem div head liegen muss und ich dachte das ginge mit den z-index. Alle anderen Versuche, schoben dann nämlich den div name unter den div head.Zu der Schriftgröße
Ich weiß, dass man heute em nehmen sollte, aber daran habe ich noch gar nicht gearbeitet, das ist noch vom Original übernommen. Ich wollte erst mal die divs in die richtige Lage bekommen, dann hätte ich mich an das Menü und die Schriftgröße gemacht. Die Sachen fallen mir leichter, es ist nur das eine div name, von dem ich nicht weiß, wie ich das lösen kann.Gruß Ulrike S.
-
Hallo Ulrike,
liest Du noch mit?
<body>
<div id="container">
<div id="name">Der Name</div>
<div id="head"><img src="logo.jpg" style="" width="85" height="100" border="0" alt="logo"></div>So? Dann ist "name" ja gar nicht im "head".
zum z-index:
Also der es ist doch so, dass der div name über dem div head liegen muss und ich dachte das ginge mit den z-index. Alle anderen Versuche, schoben dann nämlich den div name unter den div head.Siehe oben, der Name ist Teil des Seitenkopfes, also sollte das DIV mit ID="name" _im_ DIV mit ID="head" stehen.
Du meinst mit "über" und "unter" die vertikale Position? z-index ist für die "Tiefe", damit kann man Elemente sich gegenseitig überlappen lassen.Laß im Style für "name" doch mal das position:absolute und im "head" das text-align:right weg. Dann gibt dem Logo noch style="float:right;".
Dein HTML sollte dann in etwa so aussehen:
<div id="head">
<img src="logo.jpg" style="float:right;" width="85" height="100" alt="logo">
<div id="name">Der Name</div>
</div>Die Reihenfolge ist wichtig: Erst das Bild, dann der Name.
Versuche es einfach mal, ich habe es nicht genau an Deinem Beispiel getestet, sollte aber gehen.
Grüße
Shepard
-
-
Hallo,
ich habe gerade gemerkt, dass ich etwas übersehen habe in meiner Antwort:
Zu der Sache mit margin.
Meine Überlegung war, dass ich eben den Rand links und rechts bis jeweils zu den Bildern angeben, denn der beleibt ja auch bei der Skalierung gleich groß, die Bilder behalten schließlich ihre Größe bei. Was ich nun bräuchte ist etwas, dass man den Platz dazwischen mittig erreicht, der jeweils unterschiedlich groß ist und leider auch nicht prozentual ausgedrückt werden kann, weil eben gerade die Mitte sakaliert und links und rechts außen gleichgroß bleibt. Ich habe gedacht, das jetzt mit text-align aber anscheinend ist das eine absolute Angabe.Gruß Ulrike S.
-