[HTML/CSS] Menüpunkte & Überschriften mittels CSS definieren

[Benutzer-1170]

Hallo zusammen. Ich habe auf meinen Seiten Menüpunkte immer mit einem kleinen schwarzen Quadrat eingeleitet, welches ganz normal als Grafik eingebunden wurde. Danach kam ein Leerzeichen und der entsprechende, verlinkte Menüpunkt. HTML-technisch also wie folgt:

<img alt="" src="" style="height: px; width: px;" /> <a href=""> </a>

Nun möchte ich diese Optik der Menüpunkte aber in meiner CSS festlegen, so dass ich quasi in dem tag nur noch den Menüpunkt schreiben muss. Habe das wie folgt schon festgelegt in der CSS:

li
{
list-style-image:url(./quadrat_schwarz.gif);
list-style-position:inside;
margin:0px;
padding:0px;
}

Klappt auch problemlos, allerdings wird nach der Grafik nicht ein Leerzeichen gemacht, sondern der festgelegte, breitere Abstand für Auflistungen. Ich möchte aber definitiv, u. a. aus Platzgründen, nur ein Leerzeichen. Kann man das einstellen? Oder wie müsste eine andere Lösung mittels eigener Klasse aussehen?


Außerdem würde ich gerne meine Überschriften in der CSS mit <h1> definieren. Meine überschriften sind ganz einfach nur Fett und in der Schriftgröße wie der Rest der Seite, in der HTML-Datei allerdings muss ich dann immer

<p style="font-weight:bold;"> </p>

schreiben. Bei <h1> habe ich das Problem, dass er mir quasi vor der Überschrift immer ein Leerzeichen setzt, also die einmal runter rückt. Das möchte ich aber nicht. Wie lässt sich das lösen?

Ich danke euch für eure Hilfe und renne erstmal schnell zum Ofen, damit meine Lasagne nicht verbrennt.

sonniger Gruß,
Matthias

 

[Crazy_EB]

(...)
Außerdem würde ich gerne meine Überschriften in der CSS mit <h1> definieren. Meine überschriften sind ganz einfach nur Fett und in der Schriftgröße wie der Rest der Seite, in der HTML-Datei allerdings muss ich dann immer

<p style="font-weight:bold;"> </p>

schreiben. (...)

Das Problem mit der Überschrift in Fett kann ich Dir lösen:

h1 {
[B] font-weight: bold;[/B]
....
}

MfG: Crazy_EB

 

[Benutzer-1170]

Hallo.

Das ist leider keine Lösung, weil es nicht mein problem ist. Soweit bin ich ja, nur mein Problem entsteht ja dadurch mit dem oben beschrieben Leerzeichen vor der Überschrift.

 

[Orbit9]

Klappt auch problemlos, allerdings wird nach der Grafik nicht ein Leerzeichen gemacht, sondern der festgelegte, breitere Abstand für Auflistungen. Ich möchte aber definitiv, u. a. aus Platzgründen, nur ein Leerzeichen.

das ist die normale listen einrückung, ja. kannst du in manchen browsern mit einem negativen wert für margin ausgleichen, aber afaik nicht in allen.

alternative wäre auf <li> zu verzichten einfach nur elemente untereinander zusetzen. denen gibst du per css eine hintergrundgrafik mit dem kästchen und einen abstand links (margin-left) so dass der text immer hinterm kästchen beginnt.

Bei <h1> habe ich das Problem, dass er mir quasi vor der Überschrift immer ein Leerzeichen setzt, also die einmal runter rückt. Das möchte ich aber nicht. Wie lässt sich das lösen?

wenn du statt leerzeichen eine leerzeile meinst, dann ist das völlig normal und richtig bei <h1> oder <p>

nutze einfach <span>

 

[Zman]

* {
margin:0; 
padding:0;
}

Bewirkt, dass alle Elemente erst einmal prinzipiell ohne Außen und Innenabstand gehandelt werden. Weiterführende Werte, kann man dann direkt an die Elemente legen.

Falls einen nur der Abstand bei den Überschriften stört macht man folgendes.

h1,h2,h3,h4,h5,h6 {
font-size:Standardwert deiner Seite einsetzen;
font-weight:bold;
margin:0; 
padding:0;
}

Zu dem Menü. Leider interpretieren die gängigen Browser das list-style-image völlig anders, so dass ich im Moment eher dafür tendieren würde, es als ein background-image zu setzen ohne Bildwiederholung und durch background-position an die richtige Höhe. Zusätzlich kannst du dann durch den padding Wert direkt die Breite angeben, die der Hyperlink vom linken Rand des Menüpunktes einnimmt.

 

[Dreamworker]

genau, zman sagt es. list style image sachen sind bei sowas echt unflexibel.

wegen der background geschichte. schau dir einfach mal den code auf www.klammlinks.de an. dort verwende ich auch statt list style geschichten lieber ein hintergrund bild ... einfach angucken, lernen und dann weiterverarbeiten!

 

[Benutzer-1170]

ich danke euch! beides super geklappt.