nicht angemeldet
#kopf mit h1 zweizeilig/links u. img-logo rechts
Im <div id="kopf" befindet sich links eine zweizeilige h1-überschrift. Rechts sollte eigentlich ein logo als <img> so eingefügt werden, dass es in der höhe mittig und rechts ausgerichtet erscheint.
Auf der startseite, und nur da, ändert sich die anordnung. Das sollte dort dann jedoch analog klappen: 1-3-zeilige h1-überschrift links ausgerichtet - logo MITTIG - 1-3-zeilige h1 überschrift rechts ausgerichtet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
#kopf {
background: #FF9900;
width: 100%;
border-width:1px;
border-style:solid;
border-color:#FF9900;
}
#kopf h1 {
text-align:left;
font-weight:bolder;
font-size:150%;
letter-spacing:0.2em;
color: #f60;
margin: 0.7em 0 0.3em 10%;
display:inline;
}
#logo {height:80; width:263;}
</style>
</head>
<body>
<div id="kopf">
<h1><span style="color:#fff">1. Zeile<br>2. Zeile</span></h1>
<div style="display:inline; text-align:right; margin-right:5.5em;"><img id="logo" src="../../logo.gif" title="logo" alt="logo"></div>
</div>
</body>
</html>
Bei einzeiligen überschiften wäre zudem das logo das höchste element und sollte die höhe des kopfes bestimmen.
Danke für nen hilfreichen tip.
-
Einen guten Abend wuensch ich,
Fragen:
1. Was soll der span?
2. was soll der div um das Logo?
3. Was genau moechtest Du eigentlich? Hast Du ein Problem, mit der Startseite? Wie soll die aussehen? Versteh ich das richtig: Ein img in der Mitte und links/rechts davon je ein H?-
Einen guten Abend wuensch ich,
Fragen:
- Was soll der span?
- was soll der div um das Logo?
- Was genau moechtest Du eigentlich? Hast Du ein Problem, mit der Startseite? Wie soll die aussehen? Versteh ich das richtig: Ein img in der Mitte und links/rechts davon je ein H?
Hi steel, schön von dir zu hören.
Nuja, die startseite ist wirklich ein problem, aber das größte problem besteht in meinem noch dürftigen html/css kenntnissen. Es ist im grunde meine erste seite, und dann gleiche für meine verhältnisse recht umfangreich ( firmenauftritt des bruders renovieren ). Daher kann ich das (noch) nicht im orginal zeigen und manches ist noch änderung unterworfen, daher das rumgeeiere ...
Zum problem:
1. span nur der vollstängkeit halber mit gepostet. Diese eine überschrift weicht vom standartlayout ab, fand die farbänderung so am einfachsten.2. Ich hatte da schon <p>, jetzt eben <div>; mir ist einfach nicht klar wie ich (mir verständliche) positionierungen in <img> vornehmen kann, oder WO ich die am geeignetsten vornehme (innerhalb des img-tags? in einem umschließenden element? mit einer klasse im css? oder mit einer id im css).
<img> ist ja ein inline-element. Dachte ich komme beim positionieren besser zurecht wenn ich daraus via div ein blocklelement mache.
3. Die startseite ist recht komplex, weil sie im grunde das design ( den farbcode ) von zwei bereichen aufnimmt:
Hauptbereich:"foo.de"
Nebenbereich "subdomain.foo.de"Die startseite ist gemeinsam, es gibt KEINE "subdomain.foo.de/index.html" !
Rein technisch wäre ein trennung in subdomain_1.foo.de und subdomain_2.foo.de die *technisch* einfachste lösung, aber an diesem punkt sind wir ( noch ) nicht.Daher meine gegenwärtige entscheidung: Zu lernen wie ich einen kopfbereich so gestalte wie ich es mir vorstelle kann nicht schaden. Und wenn es nachher doch anders kommt hab ich eben wieder was dazugelernt.
Deshalb soll auf der startseite ( und nur da) abweichend vom grund-design links und rechts je eine mehrzeilige am rand ausgerichtete überschrift stehen, und das log mittig.
Auf den standardseiten ist es dann *immer* so, auch in der subdomain, dass links die ein bis dreizeilige überschrift liegt und rechts das logo. Beides sollte vertikal jeweils mittig liegen.
Dies alles stellt nur den kopfbereich dar und liegt da in einen div (#kopf) von 100% breite.
-
Schaue mir gerade
http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/beispiel.htm
an, aber bissl hilfe könnte auch nicht schaden ;-)
-
Aha!
Na dann:
Span weg. Das hilft dir gar nichts. Wenn Du nur die Farbe aendern willst dann in dem Element das betroffen wird.
Div weg. Das macht keinen Sinn. Wenn Du ein Element formatieren willst, formatier das Element selbst.
Dafuer kannst Du dich ueber die CSS Eigenschaft display und Block- und Inlineelemente informieren.
Fuer den 2 Headerbereich brauchst Du natuerlich auch noch ein <H>
Dazu schaust Du Dir mal floats an.
Versuch macht kluch. Falls deine Experimente nicht klappen: Ich kann mir dann vielleicht auch die Zeit nehmen, ein paar Zeilen Code zu schreiben.
-
Zwischenzeitlich habe ich folgenden (fehl-) versuch unternommen:
1.)
links überschrift - recht logo:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<div><head>
<title>test</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div.left { text-align:left; background-color:green; float:left;}
div.center {text-align:center; background-color:yellow; float:left;}
div.right { text-align:right; background-color:red; height:auto;}div.left h1 { margin:1em auto 1em 5em}
div.right img { margin:1em 5em 1em 0}
div.center img { margin:1em auto;}
div.right h1 { margin:1em 5em 1em 0}
div.center img { margin:1em 5em 1em 0; }
#kopf { background: blue; width: 100%; border:solid; border-width:1px;}
</style>
</head><body>
<div id="kopf">
<div class="left"><h1><span style="color:#fff">1. zeile<br>2. zeile</span></h1></div>
<div class="right"><img id="logo" src="http://src.selfhtml.org/xview.gif" title="" alt=""></div>
</div></body>
</html>2.)
1: links überschrift - mitte logo - rechts überschrift
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>test2</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div.left { text-align:left; background-color:green; float:left;}
div.center {text-align:center; background-color:yellow; float:left; }
div.right { text-align:right; background-color:red; height:auto;}div.left h1 { margin:1em auto 1em 5em}
div.right img { margin:1em 5em 1em 0}
div.center img { margin:1em auto}
div.right h1 { margin:1em 5em 1em 0}
div.center img { margin:1em 5em 1em 0}
#kopf { background: blue; width: 100%; border:solid; border-width:1px;}
</style>
</head>
<body><div id="kopf">
<div class="left"><h1><span style="color:#fff">1. zeile<br>2. zeile</span></h1></div>
<div class="center"><img id="logo" src="http://src.selfhtml.org/xview.gif"></div>
<div class="right"><h1><span style="color:#fff">1. zeile</span></h1></div>
</div></body>
</html>Meine zwischenzeitliche verzeiflung wird vermutlich spürbar. Es wird *SO* vermutlich nie klappen, die einzelnen teile zueinander vertikal mittig auszurichten. Und in den standardseiten (ohne überschrift rechts) sind die überschriften eben 1, 2, ODER 3 zeilen hoch.
-
Ok, ok...
Du moechtest also einen Kopf mit 3 Spalten, ja?
Text, Bild, Text soll das Schema sein. Das Bild soll im Kopf zentriert sein und links und rechts davon 2 gleichgrosse Container fuer Text.
Wo soll der Text stehen? Du hast da ne Menge Angaben zu raendern und aehnlichem. Womit soll der Text denn nun buendig sein? links, rechts, immaer am Bild, nach aussen?
Und wenn ich dich richtig verstehe soll alles auch noch vertikal zentriert sein?
-
Ok, ok...
Du moechtest also einen Kopf mit 3 Spalten, ja?
In der startsseite ja
Text, Bild, Text soll das Schema sein. Das Bild soll im Kopf zentriert sein und links und rechts davon 2 gleichgrosse Container fuer Text.
Ja
Wo soll der Text stehen? Du hast da ne Menge Angaben zu raendern und aehnlichem. Womit soll der Text denn nun buendig sein? links, rechts, immaer am Bild, nach aussen?
Der linke text soll linksbündig stehen, und soll auch vertikal mittig stehen.
Der rechte text rechtsbündig. Hier ist es aber wirklich nur eine zeile.
Für das mittlere logo wäre es wünschesnwert, wenn es in einem container läge innerhalb desse ich es feinjustiern könnte. Das hört sich komliziert an, hängt aber damit zusammen, dass das logo selbst nicht symetrisch ist und mittig ausgerichtet immer seitenlastig wirkt. Das ist auf den standardseiten kein problem, weil da ja das logo rechts liegt ( mit etweas randabstand).
Und wenn ich dich richtig verstehe soll alles auch noch vertikal zentriert sein?
Ja, sonst sehen die überschriften zu beschschscheiden aus.
In den standardseiten hatte ich schon etwas, was mit display:inline plaziert wurde. Aber kann das sehr schlecht kontollieren.
-
Ok.
Dein Problem ist grundsaetzlich loesbar. Allerdings hat die Sache einen Haken. Dazu gleich mehr:Es ist kein Problem, dienen Kopf quasidreispaltig zu designen. So wie du es bisher vorgegeben hast soll die Breite ja variabel sein. Das gibt ein paar Problemchen, ist aber loesbar. Nur: die vertikale zentrierung macht beim MSIE echte Probleme.
Die vertical-align Eigenschaft ist nur auf Tabellenzellen anwendbar. Das wuerde sich soagr mit http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display"title=CSS loesen lassen, aber nicht in Microsofts Bestem... Auch Workarounds waeren moeglich. Allerdings beinhalten die IE Hacks (Boxmeodelbug) und ne Menge gespiele mit paddings. Das wird zusaetzlich durch die variable Anzahl der Zeilen erschwert. Mit einer serverseitigen Sprache waere da was machbar. Dank des MSIE waere also eine entsprechende Loesung recht kompliziert umzusetzen.
Es gibt allerdings noch eine Loesung ohne Klimmzuege, die ich aber nicht besonders schoen finde: Eine richtige *schluchtz* Tabelle.
Mit einer Tabelle kannst Du gemuetlich Dein Designproblemchen loesen. Total variabel und mittig. Wenn Du also auf das vertical-align gar nicht verzichten kannst, solltest Du ueber eine Tabelle nachdenken. Eine andere Idee habe ich leider nicht. Jedenfalls nicht bei deinem variablen Layoutwunsch. Der Boxmodelbug tut sein uebriges um das Darstellen im IE noch zu verkomplizieren.
Deshalb also meine Frage: hast Du noch Bedarf an einer CSS Loesung mit Divs oder moechtest Du eine Tabelle nutzen? Ich spare mir erstmal das Posten von CSS Code ohne vertikale Ausrichtung.
-
Es gibt allerdings noch eine Loesung ohne Klimmzuege, die ich aber nicht besonders schoen finde: Eine richtige *schluchtz* Tabelle.
Genau so habe ich es mittlerweile in meiner verzweiflung gelöst:
Eine tabelle mit einer zeile und drei zellen.-
Es gibt allerdings noch eine Loesung ohne Klimmzuege, die ich aber nicht besonders schoen finde: Eine richtige *schluchtz* Tabelle.
Genau so habe ich es mittlerweile in meiner verzweiflung gelöst:
Eine tabelle mit einer zeile und drei zellen.»»
Upss...
Ich habe das mit dieser tabllenmethode auf die schnelle so hingebügelt weil ich ein (zischen-) ergebnis brauchte. Nach deinen äußerungen wird das dann wohl bei diesem projekt zur standardmethode für den kopf werden.
Für die nächsten zwei tage bin ich (immer noch) weg von zu hause und kann nicht weiterarbeiten.
Danke dass du dich da so reingekniet hast. Mir hilft das in sofern, als dass ich sehe, dass dieses problem wirklich nicht so tivial mit den üblichen css mittel zu lösen ist. Mit ner tabelle ging das ratz...fatz.
Danke und zunächstmal auf wiederlesen beim nächsten problem
michaah
-
-
-
-
-
-
-