Problem beim Ausrichten der Schrift

[alex1234]

ich hab noch 2 Problem beim Ausrichten

1. Bei der Box Überschrift soll das Wort Überschrift in die Mitte, aber auch vertikal....hab schon vieles versucht aber nix klappt

2. In der horizontalen Navi-Leiste sollen Login & Registrieren in die Mitte kommen. Aber wenn ich das Versuche ordnen sich beide untereinander an

dankeschön für tipps

[beni]

zu 1) wenn du die überschrift in ne table packst, dann kannste den text über vertical-align: middle; vertikal positionieren.
also table -> tr -> td -> ueberschrift. Table und Td haben die entspr. width, height und vertical-align attribute.

zu 2) gib einen von den beiden buttons einfach mal die eigenschaft clear:both oder display:block und die sache hat sich erledigt

lieber gruß, beni

ps: sorry für die schlechte schreibweise/groß- und kleinschreibung. ich sitz grad mit dem laptop am aquarium

[Mork vom Ork]

ich hab noch 2 Problem beim Ausrichten :(

Wo? Es wäre hilfreich, wenn du den problematischen Code zeigen könntest, einschließlich dessen, was du probiert hast.

1. Bei der Box Überschrift soll das Wort Überschrift in die Mitte, aber auch vertikal....hab schon vieles versucht aber nix klappt :(

Für die vertikale Ausrichtung ist vertical-align zusammen mit line-height verantwortlich, da kann aber auch die weitere Umgebung mit reinspielen. Für konkrete Hilfe bitte Code zeigen, das Wort Überschrift konnte ich auf der Energie-Forums-Seite nicht finden.

2. In der horizontalen Navi-Leiste sollen Login & Registrieren in die Mitte kommen. Aber wenn ich das Versuche ordnen sich beide untereinander an :(

Kann ich nicht nachvollziehen. Diese Leiste auf der Energie-Forums-Seite ist eine einzelne Zeile mit aufeinanderfolgenden Wörtern, da kann es gar nicht passieren, dass zwei Wörter mitten im „Satz“ untereinander stehen. Auch hier: Bitte den Code zeigen, der geändert werden soll, und jenen, der nicht wie gewünscht funktioniert.

Nachtrag:
Bitte bleib' doch in deinem Thread, oder wenn du schon einen neuen aufmachst, dann nenne die URL, um die es geht.
Die Überschrift konnte ich zwar immer noch nicht finden, aber was Login und Registrieren angeht:
1. text-align wird auf das Block-Element angewendet, dessen Inhalt ausgerichtet werden soll, nicht auf den Inhalt selbst. Wenn du also text-align:center beim div#navigation_horizontal setzt und nicht bei Login/Registrieren, werden die beiden Wörter auch korrekt zentriert. Für zu zentrierende Block-Elemente (hier nicht vorhanden) ist margin:auto gedacht.
2. Dass sie links liegen, liegt am float:left. Was rechts umflossen und somit links angeordnet werden soll, liegt auch links.
3. Dass Untereinanderfallen liegt an display:block. Blockelemente werden immer untereinander angeordnet (Ausnahme: umflossene Elemente, siehe 2.), anders als inline-Elemente.

Du solltest dich davon unabhängig mit HTML anfreunden, im Moment bist du drauf und dran, eine <div>-Wüste zu fabrizieren. Wenn du beispielsweise eine Liste aufbauen möchtest, so wie links im Menü, dann verwende auch eine Liste (<ul>) und nicht ein <div>, in dem lauter <a> per CSS entgegen ihrer Natur untereinander gezwungen werden (oder, was auch gerne gemacht wird, lauter <a>-<br>-Paare). <div> (und <span>) ist eine Notlösung für Fälle, in denen gar nichts anderes passt. Grob gesagt: Wer mehr <div>/<span> als sonstige Elemente benutzt, macht etwas falsch.

[alex1234]

also ich bin jetz dabei einiges zu verbessern.

1. Hab ich jetz für die Navigationsleiste eine Liste genommen
2. Bei der rechten Box "Partner" bekomm ich das Partner nich in die Mitte...ich habe es wie oben beschrieben in eine Tabelle gepackt....funktioniert aber irgendwie nicht. Der Text soll vertikal und horizontal mittig stehen

Seit so net & sagt mir bitte was ich verbessern kann. Ich will die Startseite neu aufbauen & programmiertechnisch korrekt erstellen.

www.energie-foren.de/Startseite1.html

habt tausend dank

[alex1234]

ich habe probleme beim erstellen meiner seite komm mit der einteilung nicht klar

hat jemand zeit und erklärt es mir per icq? Wäre echt sau net

473083838

[Mork vom Ork]

Bei der rechten Box "Partner" bekomm ich das Partner nich in die Mitte...ich habe es wie oben beschrieben in eine Tabelle gepackt....funktioniert aber irgendwie nicht.

Tabelle hat da nix zu suchen. Wenn dir einer eine Tabelle für Layoutmaßnahmen andrehen will, ist er verzweifelt - das bedeutet aber nicht, dass es nicht anders ginge :)

Wie schon geschrieben, zentrierst du die Inhalte eines Elements horizontal mit text-align, sowie vertikal mit vertical-align, wobei sich die Zentrierung immer auf die Zeilenhöhe line-height bezieht, nicht auf das gesamte Element.

Ersetze

Code: Alles auswählen

<div style="background&#58;url&#40;templates/fisubsm_blue/images/cellpic1.gif&#41; repeat-x; height&#58; 28px; width&#58; 100px;">
    <table>
     <tr>
       <td align="center" valign="middle" width="100px">Partner</td>

     </tr>
    </table>
   </div>

durch

Code: Alles auswählen

<h2>Partner</h2>

Code: Alles auswählen

h2 {
	background:url(templates/fisubsm_blue/images/cellpic1.gif) repeat-x center;
	margin:0;
	padding:0;
	font-size:1em;
	line-height:2em;
	vertical-align:middle;
	text-align:center;
}

<h2> statt <div> benutze ich, weil das zweifelsohne eine Überschrift sein soll, also gehört da auch ein Überschriftselement hin. Ob das nun <h2>, <h3> oder sonst ein h wird, hängt nur von der inhaltlichen Struktur deiner Seite ab. Hauptsache kein <div>, gleicher Grund wie schon bei der Menüliste.
Obendrein hast du ja nicht nur diese eine, derartig aussehende Überschrift, sondern mindestens drei. Auch "Übersicht" und "Portal für erneuerbare Energie" gehören in <h2>. Sie sind dann inhaltlich korrekt ausgezeichnet und du hast die Formatierungen für diese Art Überschriften an einem zentralen Platz gelagert, der schnell anzusprechen ist (<h2> statt <div class="zweite_ueberschrift">).

<div>s benutzen solltest du allerdings um diese drei Bereiche herum. div#partner und div#inhalt hast du ja schon, ein div#uebersicht fehlt dir noch. Diese <div>-Gruppierungen helfen bei der Gestaltung.

Die Breitenangabe für das Überschriftselement ist überflüssig; du hast bereits dem umgebenden Kasten div#partner eine Breite gegeben, alle Blockelemente sind von Haus aus so breit wie ihr Elternelement.

Bei background ist dir vielleicht aufgefallen, dass dort zusätzlich "center" steht. Erhöhe mal probehalber line-height auf zB 100px, die Hintergrundgrafik wird dank background(-position):center trotzdem exakt in der Mitte der Schrift zu liegen kommen.
Du kannst dir dies zu Nutze machen, indem du die Grafik höher machst als im Normalfall nötig. Einerseits fällt das nicht auf, weil Hintergründe immer am Elementrand abgeschnitten werden, andererseits würde die Grafik dann auch immer noch passen, falls jemand eine größere Schrifthöhe eingestellt hat.
Aus diesem Grunde habe ich bei line-height auch die Maßeinheit em benutzt. Sie ist eine relative Einheit, die sich letztlich auf die vom Benutzer gewählte Schriftgröße bezieht; in diesem Fall passt sie besser als px.
Die 0.9em bei <body> solltest du hingegen weglassen - der Benutzer hat (s)eine Schriftgröße X als Basis eingestellt, wozu diese Basis um 10% verringern? Das macht keinen Sinn.

Unbedingt vermeiden solltest du die Nutzung des style-Attributs. Das kann man mal als temporären Notnagel nehmen, aber für reguläre CSS-Formatierungen taugt es nichts: Du zerfledderst sowohl den HTML-Code mit vereinzelten CSS-Angaben, als auch den CSS-Code, weil vereinzelte Teile daraus im HTML-Code stecken. Der Übersichtlichkeit ist sowas auf beiden Seiten nicht zuträglich und es rächt sich, wenn der Code umfangreich wird.

Das Logo-<img> ist als Kind von <body> nicht korrekt gelagert, da es kein Block-, sondern ein Zeilenelement ist. Du könntest es zusammen mit der <h1>Seitenüberschrift in ein <div id="seitenkopf"> einlagern. Oder du legst es als Hintergrundgrafik von <h1> an.
Den Alternativtext "Portal" halte ich davon abgesehen für nicht sonderlich aussagekräftig. Bei so einer Dekografik kann alt auch genauso gut leer bleiben.

Ich will die Startseite neu aufbauen & programmiertechnisch korrekt erstellen.

Wie soll sie denn am Ende aussehen, so wie die alte?

[alex1234]

@Mork vom Ork

vielen Dank für deine Antwort ich hab versucht es so umzusetzen wie du geschrieben hast.

Der Aufbau soll an sich sein wie die Startseite von www.energie-foren.de
Soll aber viel übersichtlicher werden und ohne Frames und so

Die Spalte Inhalt in der Mitte, wie schaff ich es dass das Hintergrundbild bis rechts zur spalte "Partner" geht?

Und dann hab ich in der Navi wenn man auf Startseite mit der Maus drüber fährt zwischen dem Hintergrundbild noch ne kleine weiß leiste....bekomm sie nicht weg

Danke

[Mork vom Ork]

Die Spalte Inhalt in der Mitte, wie schaff ich es dass das Hintergrundbild bis rechts zur spalte "Partner" geht?

Den <h2>-Hintergrund meinst du? div#inhalt hat im Moment float:left gesetzt, deshalb ist das Element nur so schmal wie gerade nötig, denn rechts davon soll, das ist der Sinn von float, ja noch Text vorbeilaufen können.
Nimm dieses Attribut raus, dann nimmt der Bereich wie üblich wieder die gesamte Seitenbreite ein und damit auch <h2> mit seinem Hintergrund. Aber: Es wird tatsächlich die gesamte Seitenbreite, d.h. die Außenspalten liegen über dem mittleren Bereich, und der Inhalt des mittleren Bereichs wird dort, wo die Außenspalten unten abschließen, sich bis ganz an den Fensterrand ausstrecken. Vermutlich möchtest du das nicht, sondern normale, senkrechte Spalten haben, setze deshalb bei div#inhalt margin-left bzw. -right in der Breite, die die Außenspalten einnehmen, also margin:0 100px 0 150px;.

Das hier:

Code: Alles auswählen

<ul id="navigation_senkrecht">
<div id="&uuml;bersicht">
<h2>&Uuml;bersicht</h2>
</div>
<li>&#91;...&#93;
</ul>

möchtest du zudem durch das hier ersetzen, denn div#uebersicht soll ja das gesamte Menü umfassen, nicht in ihm drinstecken:

Code: Alles auswählen

<div id="uebersicht">
<h2>&Uuml;bersicht</h2>
<ul id="navigation_senkrecht">
<li>&#91;...&#93;
</ul>
</div>

Einige CSS-Angaben müssen dann von ul#navigation_senkrecht nach div#uebersicht verschoben werden, und zwar:

width: 150px;
height: 500px;
float: left;
background-color: #F5F5FF;

Und dann hab ich in der Navi wenn man auf Startseite mit der Maus drüber fährt zwischen dem Hintergrundbild noch ne kleine weiß leiste

Kann ich hier leider nicht nachvollziehen, wieso zwischen dem Bild, es kann doch nur zwischen zwei Elementen eine Lücke entstehen, aber nicht in einem Bild?
Meinst du vielleicht zwischen dem <h2> "Überschrift" und den nachfolgenden Listenpunkten, oder zwischen den Listenpunkten selbst? Vielleicht hilft es, wenn du statt <a> kurzerhand das Listenelement <li> selbst formatierst (was ich davon abgesehen eh besser fände):

Code: Alles auswählen

ul#navigation_senkrecht li {
    list-style: none;
    margin:0;
    padding:6px 0 0 10px;
    height:1.5em;
}
ul#navigation_senkrecht a {
    color: #003366;
    text-decoration: none;
}
ul#navigation_senkrecht li:hover {
    background-color: #5C81B1;
    border-left: 6px solid #aaaaaa;
    padding-left: 4px;
}
ul#navigation_senkrecht li:hover a {
    color: white;
}
ul#navigation_senkrecht li.aktiv {
    border-left: 6px solid #aaaaaa;
    padding-left: 4px;
}

[alex1234]

du bist echt der beste vielen dank!!!

Ja ich mein die Linie zwischen h2 überschrift und dem Listenpunkt "Startseite" ich will praktisch das das nahtlos übergeht ohne zwischenraum.
ich habe margin-top: 0px gesetzt aber geht nicht.

Bei waagerechnten Navigationsleiste hab ich wieder das Problem das das hintergrundbild nich komplett von links nach recht geht.

ich habe margin-left und -right eingefügt aber geht trotzdem nicht

[Mork vom Ork]

Ja ich mein die Linie zwischen h2 überschrift und dem Listenpunkt "Startseite" ich will praktisch das das nahtlos übergeht ohne zwischenraum.

Ist hier nicht zu sehen (Firefox 3, Opera 9). Wundert mich auch etwas, denn die Überschrift sitzt ja in dem hellblauen Übersichtskasten, da kann also eigentlich gar kein Weiß durchblinken, bestenfalls hellblau. Aber selbst das ist nicht der Fall, der graue Balken links von „Startseite“ schließt bündig an den <h2>-Hintergrund an.

Zum Experimentieren eignet sich Firefox zusammen mit der Erweiterung Firebug ganz hervorragend, weil du in letzterer sämtliche CSS-Eigenschaften und sogar den HTML-Code direkt im Browser bearbeiten kannst. Zudem werden die Abmessungen aller Elemente mitsamt Innen- und Außenrändern hervorgehoben. Zum Probieren, Spielen und Üben eine feine Sache.

ich habe margin-left und -right eingefügt aber geht trotzdem nicht :(

Inwiefern? Für mich sieht's ordentlich aus. Meinst du die weißen Zwischenräume zwischen den drei <h2>-Überschriften bzw. den Spalten? Das liegt an den 5 Pixeln Innenrand (padding), die du div#inhalt gegeben hast.
Falls du den <h2>-Hintergrundbalken ganz durchgezogen haben, aber trotzdem möchtest, dass die Inhalte der Mitte nicht an den Außenspalten kleben, belässt du es beim Innenrand für div#inhalt und gibst div#inhalt h2 einen entsprechenden negativen Außenrand:

Code: Alles auswählen

div#inhalt {
    padding-left:5px;
    padding-right:5px;
}
div#inhalt h2 {
    margin-left:-5px;
    margin-right:-5px;
}

[alex1234]

hallo, gut das mit dem firebug probier ich mal aus

nein ich meinte nicht den abstand zwischen dem inhalt und der navi und der partnerbox ....das mit den 5 pixeln passt da so.

ich mein unter dem bild(header)soll ja die navi leiste ran,,,,so wie bei www.energie-foren.de

nur so wie ich es jetzt hab geht sie ja nicht von links außen bis nach rechts.....verstehst was ich mein?

[Mork vom Ork]

ich mein unter dem bild(header)soll ja die navi leiste ran,,,,so wie bei www.energie-foren.de

nur so wie ich es jetzt hab geht sie ja nicht von links außen bis nach rechts.....verstehst was ich mein?

Du meinst ul#navigation_waagerecht? Dann solltest du das Element ein wenig formatieren, im Moment hat's ja gar nix. Mit den drei Zeilen

margin:0;
padding:0;
background-image:url(templates/fisubsm_blue/images/cellpic_nav.gif);

dürfte es deinen Wünschen schon näher kommen.

Du hast in der Ecke auch wieder die falschen Elemente zu fassen; background gehört zu ul#navigation_waagerecht, margin zu li, beides hast du bei a. padding bei a ist überflüssig da wirkungslos, height ebenso.

[alex1234]

ok thanks!!!

hab noch ein paar kleinere Fragen

1. Wenn ich mir die Seite www.energie-foren.de/Startseite1.html mit einer anderen Auflösung anschaue dann ist der Header oben ganz links weil er ja nur eine Weite von 996 pixeln hat und die Balken "Übersicht" der Mittelteil und " Partner" nutzen den Bildschirm ganz aus.

Ziel ist es den Header in der Mitte zu haben und die 3 Teile also "Übersicht", Mittelteil und "Partner" darunter.
Links und rechts soll dann einfach frei sein...so wie bei energie-foren.de.

Ich habe mir überlegt die einzelnen Teile einfach mit einer festen Größe zu bestimmen und dem ganzen einfach einen Außenrand der eine Mindestgröße hat, so dass egal welche Auflösung verwendet wird, sich die Sache anpasst.

Würde das so funktionieren?

2. Weshalb gibt es z.b #navigation & #navigation a ???Hab den Unterschied noch nicht ganz verstanden.

Vielen Dank!!!!

[Hobby_SEO79]

Zu 2)

#navigation legt für alle Elemente im besagten Container Eigenschaften fest.

#navigation a legt für die Links im besagten Container gesonderte Eigenschaften fest.

Am besten liest du dir mal diese Seite durch:
https://www.html-world.de/program/css_3.php
https://www.html-world.de/program/css_4.php
https://www.html-world.de/program/css_5.php

[Mork vom Ork]

Ziel ist es den Header in der Mitte zu haben und die 3 Teile also "Übersicht", Mittelteil und "Partner" darunter.
Links und rechts soll dann einfach frei sein...so wie bei energie-foren.de.

Ich habe mir überlegt die einzelnen Teile einfach mit einer festen Größe zu bestimmen und dem ganzen einfach einen Außenrand

Dann bist du in jedem Falle auf eine bestimmte Fenstergröße festgelegt, alle kleineren „Leute“ müssen horizontal schieben, was nicht so schön ist - und unnötig:

Setze stattdessen für body die Eigenschaft max-width auf die gewünschte Maximalbreite und margin-left sowie -right auf auto (auto bewirkt, dass der Rand automatisch gleich aufgeteilt wird, bei Elementen mit fester Breite bekommst du so eine Zentrierung).
Wenn du dann noch die Kopfgrafik als Hintergrund eines Elements definierst, dem du keine Breite gibst (dazu haben wir praktischerweise div#seitenkopf), sollten deine Seiten über einen großen Bereich von Fensterbreiten ohne Umstände lesbar sein.

Code: Alles auswählen

body {
   margin-right: auto;
   margin-left: auto;
   max-width:996px;
}

div#seitenkopf {
    background:url(/templates/fisubsm_blue/images/logo.jpg) no-repeat;
    padding-top:175px;
}

&#40;Im HTML-Code <img src=/templates/fisubsm_blue/images/logo.jpg> ersatzlos streichen.&#41;

2. Weshalb gibt es z.b #navigation & #navigation a ???Hab den Unterschied noch nicht ganz verstanden.

Du kannst nicht nur einzelne Elemente ansprechen, sondern einen ganzen Pfad anlegen, anhand dessen der Browser sich durch den Dokumentenbaum hinabhangelt. Es könnte ja sein, dass du die <a>s in einem Bereich deiner Seite anders aussehen lassen möchtest, als die <a>s in einem anderen Bereich - dann muss du angeben können, welche <a> du meinst: #navigation a. Andersrum kann es auch sein, dass du zum Beispiel einem Bereich ein Hintergrundbild geben willst, aber nicht jedem Element, das in ihm liegt, einzeln: #navigation.
#navigation spricht das Element an, welches im Attribut id das Wörtchen navigation stehen hat, #navigation a spricht alle <a>s an, die irgendwo innerhalb des #navigation-Elements liegen.

Alle Möglichkeiten sind im CSS-Standard 2.1, Kapitel 5 beschrieben (ohne Layerwerbung ;).