Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Titelzeile positionieren
Autor: willi0513
Datum: 23.12.2011 08:44:44
Hallo zusammen,
ich habe diverse Info's und Tutorials zu CSS gelesen und
bin jetzt dabei, meine Homepage zu erweitern und von Tabellenlayout auf CSS-Layout umzustellen.
Ich bin soweit, dass ich links ein Logo, das Menü und einen kurzen Text habe.
Alles in einer Datei (first.inc.php), damit man es leichter pflegen kann.
Wenn ich jetzt die Headerzeile einbaue, schiebt sie sich zwischen Logo und Menü. Ich hätte sie aber gern oben rechts vom Logo.
Habe schon probiert mit clear:both, left, right etwas zu erreichen, aber ohne Erfolg.
Nicht probiert habe ich es mit position:absolute, da das ja nur in Ausnahmefällen angewendet werden soll.
Klickt bitte den Link an, um zu sehen, was ich meine.
Hier mal der HTML-Code:
<div id="logo"></div>
<div id="titel"><p><?php echo "Titel" ?></p></div>
<ul id="Navigation">
<li><a href="/index.php?Titel=Startseite"> Startseite</a></li>
...
</ul>
<ul id="Ideen">
<p class="textmittig"><br>Ideen, Vorschläge, Anregungen und Kritik gerne per E-Mail:</p>
<p><a style="color:#FFFF00" href="mailto:Info@Aktivsingles-Hamburg.de">E-Mail senden</a><br><br><img src="/tinc?key=TmAvWuCl" alt="BZ"><br><br></p>
</ul>
<div id="content_main">
Und der entsprechende CSS-Code:
#logo {
background: url(Grafiken/logo.jpg);
width: 200px;
height: 200px;
float: left;
}
#titel {
clear:both;
width: 900px;
height: 50px;
float:right;
font-size: 200%;
color: 000000;
text-align: center;
text-decoration: underline;
background-color: lightgreen;
margin-top: 0px;
margin-left: 0px;
padding-top: 7px;
}
#content_main {
color: black;
float: right;
/*width: 60%;*/
}
Da fällt dann auch gleich mein nächstes Problem auf:
Die Kontaktdaten sollen nicht mitten in der Seite eingegeben werden können, sondern direkt unter der
Titelzeile. ZUm einen wüßte ich gerne, wie ich das positionieren kann, zum anderen wüßte ich aber auch gerne,
warum es dort angezeigt wird, wo es jetzt steht. Zum besseren Verständnis.
Die Datei newuser.php liegt innerhalb der id="content_main".
Ich kann einfach nicht erkennen, woran es liegt.
Ich hoffe, ich konnte mich verständlich ausdrücken.
Gruß
Willi
Re: Titelzeile positionieren
Autor: willi0513
Datum: 29.12.2011 19:07:30
Hallo Forum,
hat keiner eine Idee, wie ich meine Titelzeile richtig positionieren kann?
Gruß
Willi
> Hallo zusammen,
> ich habe diverse Info's und Tutorials zu CSS
> gelesen und
> bin jetzt dabei, meine Homepage zu erweitern und
> von Tabellenlayout auf CSS-Layout umzustellen.
> Ich bin soweit, dass ich links ein Logo, das Menü
> und einen kurzen Text habe.
> Alles in einer Datei (first.inc.php), damit man
> es leichter pflegen kann.
> Wenn ich jetzt die Headerzeile einbaue, schiebt
> sie sich zwischen Logo und Menü. Ich hätte sie
> aber gern oben rechts vom Logo.
> Habe schon probiert mit clear:both, left, right
> etwas zu erreichen, aber ohne Erfolg.
> Nicht probiert habe ich es mit position:absolute,
> da das ja nur in Ausnahmefällen angewendet werden
> soll.
> Klickt bitte den Link an, um zu sehen, was ich
> meine.
> Hier mal der HTML-Code:
>
> <div id="logo"></div>
> <div id="titel"><p><?php echo
> "Titel" ?></p></div>
> <ul id="Navigation">
> <li><a
> href="/index.php?Titel=Startseite"> Startseite</a></li>
> ...
> </ul>
> <ul id="Ideen">
> <p class="textmittig"><br>Ideen,
> Vorschläge, Anregungen und Kritik gerne per
> E-Mail:</p>
> <p><a style="color:#FFFF00"
> href="mailto:Info@Aktivsingles-Hamburg.de">E-Mail
> senden</a><br><br><img
> src="/tinc?key=TmAvWuCl"
> alt="BZ"><br><br></p>
> </ul>
> <div id="content_main">
>
> Und der entsprechende CSS-Code:
>
> #logo {
> background: url(Grafiken/logo.jpg);
> width: 200px;
> height: 200px;
> float: left;
> }
> #titel {
> clear:both;
> width: 900px;
> height: 50px;
> float:right;
> font-size: 200%;
> color: 000000;
> text-align: center;
> text-decoration: underline;
> background-color: lightgreen;
> margin-top: 0px;
> margin-left: 0px;
> padding-top: 7px;
> }
> #content_main {
> color: black;
> float: right;
> /*width: 60%;*/
> }
>
> Da fällt dann auch gleich mein nächstes Problem
> auf:
> Die Kontaktdaten sollen nicht mitten in der Seite
> eingegeben werden können, sondern direkt unter
> der
> Titelzeile. ZUm einen wüßte ich gerne, wie ich
> das positionieren kann, zum anderen wüßte ich
> aber auch gerne,
> warum es dort angezeigt wird, wo es jetzt steht.
> Zum besseren Verständnis.
> Die Datei newuser.php liegt innerhalb der
> id="content_main".
>
> Ich kann einfach nicht erkennen, woran es liegt.
>
> Ich hoffe, ich konnte mich verständlich
> ausdrücken.
>
> Gruß
> Willi
Re: Titelzeile positionieren
Autor: Matthias
Datum: 02.01.2012 23:09:56
Frohes Neues Jahr an alle!
> bin jetzt dabei, meine Homepage zu erweitern und
> von Tabellenlayout auf CSS-Layout umzustellen.
Eine gute Idee!
> Wenn ich jetzt die Headerzeile einbaue, schiebt
> sie sich zwischen Logo und Menü. Ich hätte sie
> aber gern oben rechts vom Logo.
Was ist denn eigentlich eine Headerzeile? Wir können zwar gerne weiter im Englischen bleiben, aber es ist aus meiner Sicht wichtig zu zeigen, warum Du Tabellen abschaffst, aber sie letztlich durch andre Fehler konsequent ersetzt.
Header ist in reinem Deutsch "Überschrift". HTML ist eine Textauszeichnungssprache, also muss an dieser Stelle eine Überschrift ausgezeichnet werden. In Deinem Quelltext schreibst Du aber:
<div id="titel"><p>Titel</p></div>
Dein Titel ist also nicht als Überschrift, sondern als Absatz ausgezeichnet. Das alles dann noch zu einem Hauptbestandteil zusammengeklammert und schon ist da etwas enstanden, das es so gar nicht gibt und doppelt so groß wie nötig.
<h1>Titel</h1>
wäre korrekt. Eine Überschrift ist eine Überschrift ist eine Überschrift. Was Du machst, ist das ersetzen von Tabellen durch eine ausufernde Div-Suppe.
Da Dein logo offenbar mit der Überschrift zusammenhängt, wäre jetzt denkbar, das Logo mit in die Überschrift zu legen. Dazu befreien wir es aus dem Überflüssigen Container
<div id="logo"></div>
wird zu
<img src="titelbild.jpg" ... />
und dies kommt jetzt mit in die Überschrift:
<h1><img src="titelbild.jpg" ... />Titel</h1>
Fertig! Der Rest sind Feinjustierungen an den CSS der Überschrift und des Bildes.
Natürlich gibt es auch andere Wege aber wichtig ist es, HTML so zu nutzen, wie es konzipiert wurde, ansonsten kannst Du auch PDF-Dateien verlinken.
> Da fällt dann auch gleich mein nächstes Problem
> auf:
> Die Kontaktdaten sollen nicht mitten in der Seite
> eingegeben werden können, sondern direkt unter
> der
> Titelzeile. ZUm einen wüßte ich gerne, wie ich
> das positionieren kann, zum anderen wüßte ich
> aber auch gerne,
> warum es dort angezeigt wird, wo es jetzt steht.
> Zum besseren Verständnis.
> Die Datei newuser.php liegt innerhalb der
> id="content_main".
Dieses Problem kann erst dann rationell gelöst werde, wenn Du die vielen überflüssigen Container entfernst und vor allem die vielen Validierungsfehler beseitigst. (siehe Link)
Wenn Fragen sind, dann frag!
Grüße
Matthias
Re: Titelzeile positionieren
Autor: Matthias
Datum: 02.01.2012 23:09:58
Frohes Neues Jahr an alle!
> bin jetzt dabei, meine Homepage zu erweitern und
> von Tabellenlayout auf CSS-Layout umzustellen.
Eine gute Idee!
> Wenn ich jetzt die Headerzeile einbaue, schiebt
> sie sich zwischen Logo und Menü. Ich hätte sie
> aber gern oben rechts vom Logo.
Was ist denn eigentlich eine Headerzeile? Wir können zwar gerne weiter im Englischen bleiben, aber es ist aus meiner Sicht wichtig zu zeigen, warum Du Tabellen abschaffst, aber sie letztlich durch andre Fehler konsequent ersetzt.
Header ist in reinem Deutsch "Überschrift". HTML ist eine Textauszeichnungssprache, also muss an dieser Stelle eine Überschrift ausgezeichnet werden. In Deinem Quelltext schreibst Du aber:
<div id="titel"><p>Titel</p></div>
Dein Titel ist also nicht als Überschrift, sondern als Absatz ausgezeichnet. Das alles dann noch zu einem Hauptbestandteil zusammengeklammert und schon ist da etwas enstanden, das es so gar nicht gibt und doppelt so groß wie nötig.
<h1>Titel</h1>
wäre korrekt. Eine Überschrift ist eine Überschrift ist eine Überschrift. Was Du machst, ist das ersetzen von Tabellen durch eine ausufernde Div-Suppe.
Da Dein logo offenbar mit der Überschrift zusammenhängt, wäre jetzt denkbar, das Logo mit in die Überschrift zu legen. Dazu befreien wir es aus dem Überflüssigen Container
<div id="logo"></div>
wird zu
<img src="titelbild.jpg" ... />
und dies kommt jetzt mit in die Überschrift:
<h1><img src="titelbild.jpg" ... />Titel</h1>
Fertig! Der Rest sind Feinjustierungen an den CSS der Überschrift und des Bildes.
Natürlich gibt es auch andere Wege aber wichtig ist es, HTML so zu nutzen, wie es konzipiert wurde, ansonsten kannst Du auch PDF-Dateien verlinken.
> Da fällt dann auch gleich mein nächstes Problem
> auf:
> Die Kontaktdaten sollen nicht mitten in der Seite
> eingegeben werden können, sondern direkt unter
> der
> Titelzeile. ZUm einen wüßte ich gerne, wie ich
> das positionieren kann, zum anderen wüßte ich
> aber auch gerne,
> warum es dort angezeigt wird, wo es jetzt steht.
> Zum besseren Verständnis.
> Die Datei newuser.php liegt innerhalb der
> id="content_main".
Dieses Problem kann erst dann rationell gelöst werde, wenn Du die vielen überflüssigen Container entfernst und vor allem die vielen Validierungsfehler beseitigst. (siehe Link)
Wenn Fragen sind, dann frag!
Grüße
Matthias
Re: Titelzeile positionieren
Autor: willi0513
Datum: 03.01.2012 18:33:00
Hallo Matthias,
jetzt wo du es erwähnst fällt mir auch auf, dass ich im Prinzip das Tabellenlayout 1:1 in CSS umsetzen wollte.
Werde ich deine Vorschläge erstmal umsetzen und dann die Validierungsfehler beseitigen, bevor ich die nächste Frage stelle.
Aber schon einmal Vielen Dank für deine Antwort.
Gruß
Willi
> Frohes Neues Jahr an alle!
>
> > bin jetzt dabei, meine Homepage zu erweitern
> und
> > von Tabellenlayout auf CSS-Layout
> umzustellen.
>
> Eine gute Idee!
>
>
> > Wenn ich jetzt die Headerzeile einbaue,
> schiebt
> > sie sich zwischen Logo und Menü. Ich hätte
> sie
> > aber gern oben rechts vom Logo.
>
> Was ist denn eigentlich eine Headerzeile? Wir
> können zwar gerne weiter im Englischen bleiben,
> aber es ist aus meiner Sicht wichtig zu zeigen,
> warum Du Tabellen abschaffst, aber sie letztlich
> durch andre Fehler konsequent ersetzt.
>
> Header ist in reinem Deutsch "Überschrift". HTML
> ist eine Textauszeichnungssprache, also muss an
> dieser Stelle eine Überschrift ausgezeichnet
> werden. In Deinem Quelltext schreibst Du aber:
>
> <div
> id="titel"><p>Titel</p></div>
>
> Dein Titel ist also nicht als Überschrift,
> sondern als Absatz ausgezeichnet. Das alles dann
> noch zu einem Hauptbestandteil zusammengeklammert
> und schon ist da etwas enstanden, das es so gar
> nicht gibt und doppelt so groß wie nötig.
>
> <h1>Titel</h1>
>
> wäre korrekt. Eine Überschrift ist eine
> Überschrift ist eine Überschrift. Was Du machst,
> ist das ersetzen von Tabellen durch eine
> ausufernde Div-Suppe.
>
> Da Dein logo offenbar mit der Überschrift
> zusammenhängt, wäre jetzt denkbar, das Logo mit
> in die Überschrift zu legen. Dazu befreien wir es
> aus dem Überflüssigen Container
>
> <div id="logo"></div>
>
> wird zu
>
> <img src="titelbild.jpg" ... />
>
> und dies kommt jetzt mit in die Überschrift:
>
>
> <h1><img src="titelbild.jpg" ...
> />Titel</h1>
>
> Fertig! Der Rest sind Feinjustierungen an den CSS
> der Überschrift und des Bildes.
>
> Natürlich gibt es auch andere Wege aber wichtig
> ist es, HTML so zu nutzen, wie es konzipiert
> wurde, ansonsten kannst Du auch PDF-Dateien
> verlinken.
>
>
>
> > Da fällt dann auch gleich mein nächstes
> Problem
> > auf:
> > Die Kontaktdaten sollen nicht mitten in der
> Seite
> > eingegeben werden können, sondern direkt
> unter
> > der
> > Titelzeile. ZUm einen wüßte ich gerne, wie
> ich
> > das positionieren kann, zum anderen wüßte
> ich
> > aber auch gerne,
> > warum es dort angezeigt wird, wo es jetzt
> steht.
> > Zum besseren Verständnis.
> > Die Datei newuser.php liegt innerhalb der
> > id="content_main".
>
>
> Dieses Problem kann erst dann rationell gelöst
> werde, wenn Du die vielen überflüssigen Container
> entfernst und vor allem die vielen
> Validierungsfehler beseitigst. (siehe Link)
>
> Wenn Fragen sind, dann frag!
>
>
> Grüße
>
> Matthias
Re: Titelzeile positionieren
Autor: willi0513
Datum: 03.01.2012 18:33:02
Hallo Matthias,
jetzt wo du es erwähnst fällt mir auch auf, dass ich im Prinzip das Tabellenlayout 1:1 in CSS umsetzen wollte.
Werde ich deine Vorschläge erstmal umsetzen und dann die Validierungsfehler beseitigen, bevor ich die nächste Frage stelle.
Aber schon einmal Vielen Dank für deine Antwort.
Gruß
Willi
> Frohes Neues Jahr an alle!
>
> > bin jetzt dabei, meine Homepage zu erweitern
> und
> > von Tabellenlayout auf CSS-Layout
> umzustellen.
>
> Eine gute Idee!
>
>
> > Wenn ich jetzt die Headerzeile einbaue,
> schiebt
> > sie sich zwischen Logo und Menü. Ich hätte
> sie
> > aber gern oben rechts vom Logo.
>
> Was ist denn eigentlich eine Headerzeile? Wir
> können zwar gerne weiter im Englischen bleiben,
> aber es ist aus meiner Sicht wichtig zu zeigen,
> warum Du Tabellen abschaffst, aber sie letztlich
> durch andre Fehler konsequent ersetzt.
>
> Header ist in reinem Deutsch "Überschrift". HTML
> ist eine Textauszeichnungssprache, also muss an
> dieser Stelle eine Überschrift ausgezeichnet
> werden. In Deinem Quelltext schreibst Du aber:
>
> <div
> id="titel"><p>Titel</p></div>
>
> Dein Titel ist also nicht als Überschrift,
> sondern als Absatz ausgezeichnet. Das alles dann
> noch zu einem Hauptbestandteil zusammengeklammert
> und schon ist da etwas enstanden, das es so gar
> nicht gibt und doppelt so groß wie nötig.
>
> <h1>Titel</h1>
>
> wäre korrekt. Eine Überschrift ist eine
> Überschrift ist eine Überschrift. Was Du machst,
> ist das ersetzen von Tabellen durch eine
> ausufernde Div-Suppe.
>
> Da Dein logo offenbar mit der Überschrift
> zusammenhängt, wäre jetzt denkbar, das Logo mit
> in die Überschrift zu legen. Dazu befreien wir es
> aus dem Überflüssigen Container
>
> <div id="logo"></div>
>
> wird zu
>
> <img src="titelbild.jpg" ... />
>
> und dies kommt jetzt mit in die Überschrift:
>
>
> <h1><img src="titelbild.jpg" ...
> />Titel</h1>
>
> Fertig! Der Rest sind Feinjustierungen an den CSS
> der Überschrift und des Bildes.
>
> Natürlich gibt es auch andere Wege aber wichtig
> ist es, HTML so zu nutzen, wie es konzipiert
> wurde, ansonsten kannst Du auch PDF-Dateien
> verlinken.
>
>
>
> > Da fällt dann auch gleich mein nächstes
> Problem
> > auf:
> > Die Kontaktdaten sollen nicht mitten in der
> Seite
> > eingegeben werden können, sondern direkt
> unter
> > der
> > Titelzeile. ZUm einen wüßte ich gerne, wie
> ich
> > das positionieren kann, zum anderen wüßte
> ich
> > aber auch gerne,
> > warum es dort angezeigt wird, wo es jetzt
> steht.
> > Zum besseren Verständnis.
> > Die Datei newuser.php liegt innerhalb der
> > id="content_main".
>
>
> Dieses Problem kann erst dann rationell gelöst
> werde, wenn Du die vielen überflüssigen Container
> entfernst und vor allem die vielen
> Validierungsfehler beseitigst. (siehe Link)
>
> Wenn Fragen sind, dann frag!
>
>
> Grüße
>
> Matthias
|
