Linienbreite bei border

[Neolity]

Hi,

wahrscheinlich ist mein Problem recht simpel, aber mir fehlen geeignete Stichworte zum suchen.

Es geht um folgendes:
Ich habe ein div, das 10em breit ist. Darin sollen mal Überschriften mit einigen Unterpunkten stehen. In etwa so:

Rubriken:
- Spiele
- Programmieren
- Allgemein

etc.

Die Überschriften (hier Rubriken) sollen oben und unten gepunktete Linien haben. Das ließ sich noch recht leicht mit:

	border: none; 
	border-top: 1px dotted #C20000; 
	border-bottom: 1px dotted #C20000;

realisieren. Allerdings möchte ich, dass die gepunkteten Linien nicht nur ober- und unterhalb vom Text stehen, sondern nach rechts über die volle Breite meines Menüs gehen. Und genau das bekomme ich nicht hin. Wenn ich einfach padding-right: 6em o.ä. einfüge, dann kann ich das zwar für eine überschrift anpassen. Die nächste Überschrift, die dann textmäßig etwas breiter ist, passt dann nicht mehr...

Ich hoffe das ist einigermaßen verständlich was ich möchte.

 

[Maik]

Hi,

kannst du bitte mal den HTML-Code und die übrigen CSS-Formatierungen des Menüs zeigen?

mfg Maik

 

[Neolity]

Natürlich!

CSS Code vom Menü:

div#menu {
	float: left; width: 10em;
	margin-top: 1em;
	margin-left: 2.5em;	
	padding-left: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

CSS Code für die angesprochenen Überschriften. Da wird wohl noch irgendwas fehlen:

.headLeft {
	color: #C20000;
	border: none; 
	border-top: 1px dotted #C20000; 
	border-bottom: 1px dotted #C20000;
}

HTML-Code vom Menü (ich hab die restlichen <li> </li> rausgenommen, um das übersichtlicher zu halten):

<div id="menu">
	<b class="headLeft"> Archiv </b>
	<p>
		<ul class="archiv">
			<li> Januar 2009 </li>
		</ul>
		<br>
	</p>


	<b class="headLeft"> Rubriken </b> 
	<p>
		<ul class="archiv">
			<li> Fortuna </li>
		</ul>
	</p>
</div>

 

[Sven Mintel]

Ich würde mal tippen, diese Elemente, die du dort gestaltest, sind Inline-Elemente..diese wären dann nur so breit wie es ihnen ih Inhalt abverlangt.

Du könntest dies per display:block ändern.

<edit>richtig getippt </edit>

 

[Maik]

Auf mein Näschen ist eben Verlaß

Tausch mal die <b>-Tags gegen <h1> (oder <h2> - <h6>) aus.

So zeichnest du die Überschriften semantisch aus, und erhälst automatisch die von dir gewünschte Rahmendarstellung.

mfg Maik

 

[Neolity]

Tatsächlich!
Ich wußte doch, dass da irgendwas ganz einfaches hinter steckt!

Hier nochmal der korrekte CSS Code für die Überschriften:

.headLeft {
	color: #C20000;
	border: none; 
	border-top: 1px dotted #C20000; 
	border-bottom: 1px dotted #C20000;
	display:block;
}

Vielen Dank!

 

[Neolity]

Mit <h1> statt <b> geht es auch! ich werde es aber mit "display: block" machen, weil ich sonst die Größe und ähnliches wieder ändern müsste!
Es sei denn an dem <b> ist irgendwas grundsätzlich falsch oder schlechter Stil?!

 

[Maik]

Das wäre ebenso nur eine Zeile mehr CSS-Code (font-size:... anstelle von display:block) für ein semantisch ausgezeichnetes (X)HTML-Dokument. Wenn das mal keinen Mehrwert hat.

mfg Maik