CSS <p>? Probleme mit Abständen

furryhamster · 15. Januar 2011

Hi,

vorab: ich kenn mich so gut wie gar nicht mit css aus. daher bitte etwas ausführlicher erklären.

ich werkle gerade an einer navigationsleiste und versuche zwischen den navigationslinks abstände ohne breaks zu schaffen.

sobald ich jedoch um den text ein <p> mache, ist der abstand automatisch um ein vielfaches größer ohne überhaupt einen abstand anzugeben. hier mal der quelltext

Code:

<html> 
<head><title>test</title></head> 

<style type="text/css">
#p1 { padding-bottom:0px; border:thin solid red; font-size:20px; }
</style>

<body style="background-image: url(verlauf-navi.png), url(bgnavi.png);
background-repeat: no-repeat, repeat-y;
background-position: 0% 0%, 0% 0%;">

<center>
<p id="p1"><a href="www.google.de">Home</a></p>
<p id="p1"><a href="www.google.de">Home2</a></p>
<p id="p1"><a href="www.google.de">Home3</a></p>
</center>
</body>
</html>

Mr. Snoot · 15. Januar 2011

<p> ist ein Absatz, also wird dort automatisch ein bestimmter Abstand gemacht.

Für Menüs benutzt man besser Listen, das funktioniert sowohl vertikal als auch horizontal. Kannst dich ja hier mal einlesen (3. Punkt: Menü als Liste von Links).

DaFreax · 15. Januar 2011

Versuch mal das hier

PHP:

<html> 
<head><title>test</title></head> 

<style type="text/css">
body {
    background-image: url(verlauf-navi.png), url(bgnavi.png);
    background-repeat: no-repeat, repeat-y;
    background-position: 0% 0%, 0% 0%;
    }
    
#navi {
    text-align: center;
    }
    
#navi p { 
    padding-bottom: 0px; 
    border: thin solid red;
    font-size: 20px;
    margin: 1px;
    }
</style>

<body>
    <div id="navi">
        <p><a href="www.google.de">Home</a></p>
        <p><a href="www.google.de">Home2</a></p>
        <p><a href="www.google.de">Home3</a></p>
    </div>
</body>
</html>

furryhamster · 15. Januar 2011

danke euch beiden

@Mr. Snoot: listen werde ich mir mal als alternative anschauen. mit den abständen war nur erste idee. erste mal dass ich eine navigationsleiste "schreibe"

@DaFreax: so klappt es

Mr. Snoot · 15. Januar 2011

Dann mach's von Beginn an richtig, und "vergewaltige" keine p-Tags

furryhamster · 15. Januar 2011

ok habs jetzt als liste umgesetzt wenns denn eleganter ist

danke für die ratschläge

Belee · 15. Januar 2011

Es ist nicht eleganter sondern syntaktisch richtig. <p> ist für fließtext da und für nix anderes.

Fleshgrinder · 17. Januar 2011

Semantisch korrekt wäre es, das <menu> Tag zu verwenden. Das gibt es schon seit Jahrzehnten, wird aber leider viel zu wenig eingesetzt.

Siehe auch SELFHTML.

Crizzo · 17. Januar 2011

Was aber auch nur eine Liste ist.

Fleshgrinder · 17. Januar 2011

Das ist ja das Schöne und deshalb ist es auch unverständlich weshalb die Leute nicht einfach umsteigen. Aus Sicht der Semantik macht es nämlich einen riesengroßen Unterschied ob nun <menu> oder <ul> zum Einsatz kommt. Wer hier den Unterschied nicht sofort erkennt, sollte sich ernsthaft mit dem Thema Semantik auseinandersetzen.

Madman1209 · 17. Januar 2011

Hi auch,

nur um mal SelfHTML zum Thema "Menü" zu zitieren:

Verzeichnis- und Menülisten werden in der Praxis kaum verwendet und sind auch mittlerweile als deprecated gekennzeichnet, sollen also künftig aus dem HTML-Standard entfallen. Sie werden von den heutigen Browsern entweder nicht mehr oder nicht anders dargestellt als gewöhnliche Aufzählungslisten.

VG,
Mad

Fleshgrinder · 17. Januar 2011

Weißt du wie alt SELFHTML ist? HTML5 implementiert <menu> noch genau so, wie die HTML-Version bei der es eingeführt wurde. Eben weil Semantik im Web immer mehr an Bedeutung gewinnt.

Madman1209 · 17. Januar 2011

Hi,

also ganz ehrlich, wenns in SelfHTML als deprecated gekennzeichnet ist sehe ich keinen Grund das "menu" der normalen Liste vor- oder nachzustellen.

Ich bin jetzt doch schon ein paar Tage Anwendungsentwickler, bisher hatte ich keine Verwendung für das "menu" und bin auch semantisch sehr gut anders gefahren.

VG,
Mad

Fleshgrinder · 17. Januar 2011

w3schools.com

The menu element is deprecated in HTML 4.01.

The menu element is redefined in HTML5.

Immer auf dem Laufenden bleiben.

PS: Also ich bin mit Semantik noch gar nie gefahren, weil ich hören und sehen kann. Hatte bisher erst einmal Kontakt mit einer blinden Person.

Madman1209 · 17. Januar 2011

Ja eben. Unsere Kunden hatten bisher keine Verwendung, da alles in HTML4 geschrieben war. Ausserdem

HTML5 ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. Sie soll die Nachfolge von HTML4 antreten. Die Sprache befindet sich zur Zeit noch in der Entwicklung, es liegen aber bereits recht ausgereifte Entwürfe zweier Entwicklerteams vor

So auf dem Laufenden muss ich nicht sein dass ich mir über ungelegte Eier sorgen mache.

VG,
Mad

Crizzo · 17. Januar 2011

Naja, in HTML5 kann du auch ein Element mit dem Namen: <pizzapreise> bauen...also solange HTML5 noch nicht richtig angekommen ist, nutze ich das nicht.

Fleshgrinder · 17. Januar 2011

Eigentlich sind wir bereits weit ab vom Thema, doch ich verwende ausschließlich nur noch HTML5. Warum, weshalb, wieso sei dahingestellt und ich bin keiner der Jemanden bekehren muss.

Für HTML 4.01 stimmt was du sagst.

Für HTML 5 stimmt was ich sage.

Madman1209 · 17. Januar 2011

Naja, in HTML5 kann du auch ein Element mit dem Namen: <pizzapreise> bauen...also solange HTML5 noch nicht richtig angekommen ist, nutze ich das nicht.

Sehe ich ähnlich. Aber darum gings hier auch nicht. Also lieber BTT

VG,
Mad

Fleshgrinder · 17. Januar 2011

Das kann ich in XHTML auch, brauche nur einen passenden DTD dazu.

CSS <p>? Probleme mit Abständen

Lt. Commander

Mr. Snoot

Gast

Ensign

Lt. Commander

Mr. Snoot

Gast

Lt. Commander

Lt. Commander

Lt. Junior Grade

Redakteur Pro

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Fleet Admiral

Redakteur Pro

Lt. Junior Grade

Fleet Admiral

Lt. Junior Grade

Ähnliche Themen