erstens Link - padding zweitens div mit x prozent und padding

[Andy]

Guten Tag,

es ist für die Profis sicherlich sehr einfach, aber leider nicht für mich

.unterstrichen
{ font-size:70%;
 color:#333;
 padding:4px 0 4px 4px; /* oben rechts unten links*/
 text-decoration: none;
}
a.unterstrichen:link  { padding-bottom: 1px; }
a.unterstrichen:visited { padding-bottom: 1px; }
a.unterstrichen:hover   { color: #fff; border-bottom: 1px dotted #fff; }
a.unterstrichen:aktive  { color: #fff;  border-bottom: 1px solid #fff;}

was muss ich machen, um nur den Text unterstreichen zu lassen, weil in meinem Fall werden immer die 4 pixel padding rechts mit unterstrichen.

Mein zweites Problem:
#kopf_la
{
width: 30%;
float: left;
background-color:#33cc00;
line-height:30px;
border-bottom: 1px solid #000;
}

Wenn ich hier padding:4px hinzufüge, wird die Box ja um die 4px (links rechts) größer, wie handhabt man dieses?
Mein erster Gedanke war width: 28%; und padding:1%, aber das sieht nicht gut aus.
Mein zweiter Gedanke war
#kopf_la_pad
{
padding:4px
}
<div id="kopf_la">
<div id="kopf_la_pad">
.......
kann man so was machen, ich meine von der "Sauberkeit " her?

danke
Andy

[suit]

was muss ich machen, um nur den Text unterstreichen zu lassen, weil in meinem Fall werden immer die 4 pixel padding rechts mit unterstrichen.

das soll auch so sein - wenn du das nicht willst, nimm einen aussenabstand (margin)

kann man so was machen, ich meine von der "Sauberkeit " her?

in dem man cascading style sheets dem namen entsprechend nutzt und kaskaden verwendet

jedem link eine klasse geben und uncool - gib dem gemeinsamen übergeordneten element eine klasse geben und selektiere damit

zudem ist .unterstrichen ein dämlicher klassenname

.menu oder .sidebare zb wären besser, dem zweck entsprechend

wenn deine links dort nicht mehr unterstrichen sondern blau überstrichen oder rot hinterlegt sein sollen, müsstest du alle .unterstrichen in .blauueberstrichen ändern ;)

[Andy]

Hallo,

danke für den Tipp.

jedem link eine klasse geben und uncool - gib dem gemeinsamen übergeordneten element eine klasse geben und selektiere damit

Kaskaden, das muss ich nachlesen was den Linkname betrifft, ok hast Du recht.
;)

Mir ist die Logik noch nicht so ganz klar.
Ich habe eine Navigation, die kommt nur an dieser einen Stelle und nur einmal vor.
Diese habe ich als #nav_links, #nav_links a:link usw. bezeichnet.
<div id="nav_links">
<a href="#">Link</a>
</div>
Sollte ich nun nun auf die Angaben a, aktive, visited, hover bei #nav_links verzichten und das mit class bestimmen?

<div id="nav_links">
<a href="#" class="meinelinkklasse">Link</a>
</div>

Danke
Andy

[suit]

Kaskaden, das muss ich nachlesen was den Linkname betrifft, ok hast Du recht.

zu deutsch etwa "verkettung" bzw "verschachtelung"

Mir ist die Logik noch nicht so ganz klar.

wenn dir die logik klar ist, wirst du sehr viel code sparen

Ich habe eine Navigation, die kommt nur an dieser einen Stelle und nur einmal vor.

siehe unten

Sollte ich nun nun auf die Angaben a, aktive, visited, hover bei #nav_links verzichten und das mit class bestimmen?

nav_links ist übrigens auch kein guter klassenname - ein verweis wurd durch das a-element bestimmt, von der seite ist das suffix _links redundant - wenn du in der navigation auch noch nicht-verlinkte menüpunkte hast (den aktiven menüpunkt soll man eigentlich nicht verlinken) ist die id sogar irreführend

angaben für die pseudoklassen visited, hover und active sind immer empfehlenswert - die pseudoklasse :link ist nicht erforderlich, die kann auch den normalzustand vererbt bekommen

  
<ul id="navigation">  
  <li><a href="#">Artikel</a></li>  
  <li><a href="#">News</a></li>  
  <li><a href="#">Sonstiges</a></li>  
</ul>

#navigation a {  
  color: red;  
}

damit sind alle a-elemente welche nachfahren von #navigation sind entsprechend formatiert

welche ersparnis diese schlaue selektion im vergleich zu folgendem, schlechten beispiel, bringt sollte klar sein:

  
<ul>  
  <li><a class="navigation" href="#">Artikel</a></li>  
  <li><a class="navigation" href="#">News</a></li>  
  <li><a class="navigation" href="#">Sonstiges</a></li>  
</ul>

a.navigation {  
  color: red;  
}

[Andy]

Hallo,

ich denke dann habe ich das richtig gemacht, diese Navigation als Id zu deklarieren.

<ul id="navigation">
  <li><a href="#">Artikel</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Sonstiges</a></li>
</ul>

>   
> ~~~css

#navigation a {  

>   color: red;  
> }

damit sind alle a-elemente welche nachfahren von #navigation sind entsprechend formatiert

Die Navigation ist dynamisch

  
<?php do {  
if($row_q1['id'] != $_GET['id']) {  
$link_ebene1 = "link_ebene1";  
} else {  
$link_ebene1 = "link_ebene1_aktiv";  
?>  

Dh. der aktive Link hat immer eine andere Farbe wie die übrigen.
<div id="<?php echo $link_ebene1; ?>">

Das der aktive Link nicht aufzurufen ist, muss ich wohl mit php lösen.

Danke

[suit]

ich denke dann habe ich das richtig gemacht, diese Navigation als Id zu deklarieren.

ja, aber der von mir vermutete html-code, den du verwendest (div-suppe) ist noch nicht optimal

Dh. der aktive Link hat immer eine andere Farbe wie die übrigen.
<div id="<?php echo $link_ebene1; ?>">

machs mit klassen und sorge dafür, dass der code als unsortiere liste ausgebeben wird - das herumschleudern mit divs macht dir nur die arbeit mit css schwerer ;)

Das der aktive Link nicht aufzurufen ist, muss ich wohl mit php lösen.

dein code sieht momentan dann etwa so aus

  
<div id="navigation">  
<div class="link_ebene1"><a href="#">Artikel</a></div>  
<div class="link_ebene1_aktiv"><a href="#">News</a></div>  
<div class="link_ebene1"><a href="#">Sonstiges</a></div>  
</div>

aber das ist auch nicht notwenig - das ganze sollte so aussehen

  
<ul id="navigation">  
  <li><a href="#">Artikel</a></li>  
  <li><a class="aktiv" href="#">News</a></li>  
  <li><a href="#">Sonstiges</a></li>  
</ul>

und noch besser so:

  
<ul id="navigation">  
  <li><a href="#">Artikel</a></li>  
  <li><span>News</span></li>  
  <li><a href="#">Sonstiges</a></li>  
</ul>

link_ebene1 usw ist redundant, da du jeden link in einer ordentlichen liste anhand seiner verschachtelungstiefe über css eindeutig selektieren kannst zb hier

  
<ul id="navigation">  
  <li><a href="#">Artikel</a></li>  
  <li><span>News</span>  
    <ul>  
      <li><a href="#">Archiv</a></li>  
      <li><a href="#">Übersicht</a></li>  
    </ul>  
  </li>  
  <li><a href="#">Sonstiges</a></li>  
</ul>

ein link ab der erste ebene (kindselektoren sind leider dank dem IE nicht zielführend einsetzbar [1]) ist zb mit ul#navigation a selektierbar, einer in der zweiten ebene zb mit ul#navigation ul a - der jeweils aktive menüpunkt mit ul#navigation span

die ganz schöne variante für einen link in der ersten ebene wäre ul#navigation > li > a - aber da ist eben die spassbremse von microsoft dagegen ;)

[Andy]

Hallo,

ja bei mir besteht der Qullcode aus lauter <div>
Ich würde das ganze in einer Liste aufrufen, nur weiß ich nicht wie ich das bewerkstelligen kann.

Die Navigation ist wie erwähnt dynamisch plus wenn eine bestimmte Bedingung erfüllt ist, neben dem Link ein Icon mit einem weiterem Link, das Icon ist rechtsbündig.
Also habe ich mir folgendes Construct geschaffen

  
<div id="<?php echo $navi; ?>">  
 <div id="navi_text">  
 <a href="<?php echo $_SERVER['SCRIPT_NAME']?>?id=<?php echo $row_qtest['id']; ?>" >  
 <?php echo $row_qtest['eingabe']; ?></a>  
 </div><!-- #navi_text-->  
    <div id="navi_icon">  
 <img src="map.gif" width="15" height="10" border="0">  
 </div><!-- #navi_icon-->  
 <div class="clear"> </div><!-- /#navi-->  
</div><!-- /#navi -->

ich habe den Quellcode in eine HTML Datei kopiert, hier kann mal es sehen
Ich habe leider erste in zwei Wochen Webspace mit php.

Wie bekomme ich dieses Layout in eine Liste.
Warum ist die Darstellung im IE6 bei 50% Browsergröße so abgehackt?

Ich bin eigentlich verwirrter als vorher.

Andy

[suit]

Hallo,

ja bei mir besteht der Qullcode aus lauter <div>

divs sind schön und gut, aber sie transportieren ausser "meine kindelemente gehören zusammen" keinen weiteren sinn

Ich würde das ganze in einer Liste aufrufen, nur weiß ich nicht wie ich das bewerkstelligen kann.

ein beispiel dafür hab ich dir geliefert

Die Navigation ist wie erwähnt dynamisch plus wenn eine bestimmte Bedingung erfüllt ist, neben dem Link ein Icon mit einem weiterem Link, das Icon ist rechtsbündig.
Also habe ich mir folgendes Construct geschaffen

<div id="<?php echo $navi; ?>">
<div id="navi_text">
<a href="<?php echo $_SERVER['SCRIPT_NAME']?>?id=<?php echo $row_qtest['id']; ?>" >
<?php echo $row_qtest['eingabe']; ?></a>
</div><!-- #navi_text-->
    <div id="navi_icon">
<img src="map.gif" width="15" height="10" border="0">
</div><!-- #navi_icon-->
<div class="clear"> </div><!-- /#navi-->
</div><!-- /#navi -->

  
guter rat: schmeiss den code weg, da blickt keiner durch  
  
die navigation holst du sicher aus einer datenbank - wenn nicht, dann bleibt dir noch ein mehrdimensionales array als datenmatierial - aus diesem erzeugst du dann das menu  
  

> [ich habe den Quellcode in eine HTML Datei kopiert, hier kann mal es sehen](http://www.tauchtechnik-thueringen.de/test.html)  
> Ich habe leider erste in zwei Wochen Webspace mit php.  

macht nix - php kommt ganz zu schluss - erst ist html dran, dann css  
  

> Wie bekomme ich dieses Layout in eine Liste.  
> Warum ist die Darstellung im IE6 bei 50% Browsergröße so abgehackt?  

das ie6-problem wirst du mit validem code vermutlich nicht mehr haben  
  

> Ich bin eigentlich verwirrter als vorher.  

egal, das entwirrt sich, dann machts klick und du bist schlauer als vorher ;)  
  
erstelle ein leeres html-dokument (ohne irgend einen hauch von css) und erstelle dort deine navigation (wie in meinem beispiel als unsortierte liste)  
  
diese liste [validierst](http://validator.w3.org) du und formatierst sie erst dann mit css  
  
wenn das geschafft ist, kannst du dich darum kümmern, wie du GENAU diesen code mit php generierst (ein script mit geschätzt etwa 20 zeilen, für eine unendliche tiefe mit unendlich vielen menüpunkten)  
  
wofür der zweite link mit dem icon gut ist, habe ich allerdings noch nicht ganz begriffen - musst du mir erklären  

[Andy]

Guten Morgen,

vielen Dank für die Mühe.

Eine kleine Zusammenfassung;)

Ich bekomme eine einfache Liste hin.
Auch eine Navigationsmenü mit CSS - Liste - statisch oder dynamisch.

Was ich eben nicht hin bekomme ist ein zweiter Punkt in der "Listenzeile"
Einmal als Icon für einen weiteren Link.
An einer anderen Stelle brauche ich das als Infobox.
Das war (ist) der Grund warum ich div nutze. (tabellen ählicher-was ja nicht Sinn und Zweck der Sache ist)

So soll es aussehen

Ist denn das mit einer Liste möglich?

Andy

[suit]

Das war (ist) der Grund warum ich div nutze. (tabellen ählicher-was ja nicht Sinn und Zweck der Sache ist)

nein, der grund ist, dass du noch nicht verstanden hast, dass es zwischen divs, tabellen und anderen elementen keinen unterschied gibt [1], bis auf die verwendeten css-eigenschaften

ob du da nun <div></div> oder <li></li> stehen hast ist wurst - formatieren kannst du mit css beides exakt gleich

So soll es aussehen

Ist denn das mit einer Liste möglich?

ja, mach den aufbau exakt so wie ich gesagt habe und füge ausserhalb des links ein passendes element ein, welches den tooltip erzeugt

<a href="#">Menupunkt</a><span>info blah blah blah das was du vorher gehabt hastt</span>

natürlich kannst du da jede beliebige tooltip-technik anwenden

ich würde aber eine variante bevorzugen, die ohne ein <a>-element auskommt, ein link sollte nur als link verwendet werden und nicht um irgendwelche visuellen eigenschaften zu erreichen - der tooltip wird dann zwar ohne workaround nicht im ie6 funktionieren, aber dafür gibts wie gesagt workarounds mit conditional comments, die dem ie6 dann doch ein <a>-element vorgaukeln

[1] mit ausnahme der inkompatiblität mancher eigenschaften in bestimmten browsern (table-cell, table-row usw) die aber hier nicht relevant sind

[Andy]

Hallo Suit,

ich habe eine Liste erstellt link:http://validator.w3.org@title=und mit http://validator.w3.org getestet ].
Mir wird gratuliert "This document was successfully checked as HTML 4.01 Strict!"

Hier

So weit so gut, ich sitze jetzt bestimmt schon mehrere Stunden und stelle fest ich bin zu blöd, ich bekomme außerhalb des <a href="#">Link1</a> positioniert.

aNDY

[suit]

Hier

der link (bzw der code) ist nicht valide - das css separat in den fließtext zu packen ist übrigens nicht notwendig

So weit so gut, ich sitze jetzt bestimmt schon mehrere Stunden und stelle fest ich bin zu blöd, ich bekomme außerhalb des <a href="#">Link1</a> positioniert.

den satz hab ich jetzt nicht verstanden - im firefox sieht das ganze (trotz der vielen fehler) so aus, wie ich das erwartet hätte

wenn du anregungen zum formatieren von liste benötigst:
http://css.maxdesign.com.au/listamatic/

[Andy]

Hi,

ich habe die Testseite durch beide validieren lassen:
 "Dieses Dokument wurde als CSS level 2.1 validiert! "

Ich brauche mal einen Tipp am besten ein Beispiel, wie ich mein Problem lösen kann.
die bekannte Seite

   <ul id="ebene2" >  
      <li><a href="#">Link1</a><span>test</span></li>  
      <li><a href="#">Link2</a><span><a href="#">test2</a></span></li>  
       </ul>

klappt nicht hinten und nicht vorne.:((((

Also, noch einmal vielen Dank.

[suit]

ich habe die Testseite durch beide validieren lassen:
"Dieses Dokument wurde als CSS level 2.1 validiert! "

vor allem der html-teil muss valide sein

Ich brauche mal einen Tipp am besten ein Beispiel, wie ich mein Problem lösen kann.
die bekannte Seite

immer noch nicht valide ;) bitte achte darauf, dass deine beispiele auch valide bleiben, wenn sie beispiele sind

<ul id="ebene2" >

<li><a href="#">Link1</a><span>test</span></li>
      <li><a href="#">Link2</a><span><a href="#">test2</a></span></li>
       </ul>

> klappt nicht hinten und nicht vorne.:((((  

du hast ja noch nichtmal versucht, das span-element irgendwie zu positionieren ;)  
  
~~~css
#ebene2 li { position: relative; }  
#ebene2 li span { position: absolute; right: .5em; top: 50%; margin-top: -.5em; }

getestet vorerst in firefox 2

[Andy]

die bekannte Seite
immer noch nicht valide ;) bitte achte darauf, dass deine beispiele auch valide bleiben, wenn sie beispiele sind.

das verstehe ich  nicht, wie meinst Du das.
Danke für den code.

Andy

[suit]

das verstehe ich  nicht, wie meinst Du das.

validiere mich

wenn du etwas testest oder ausprobierst und dafür ungültigen code verwendest, ist das nicht produktiv - wie schon erwähnt funktioniert css nur dann 100% zuverlässig, wenn das dokument valide ist - wenn du einen syntaxfehler im html-quelltext hast oder das dokument nicht wohlgeformt ist, korrigiert das die fehlerkorrektur des browsers (und das macht jeder browser anders) somit kannst du nicht mehr davon ausgehen, dass alles so funktioniert wie es soll

stichworte für deine weitere fortbildung diesbezüglich sind quirksmode und doctype-switch (das dürfte dich insbesondere in zusammenhang mit dem box-model-bug beim internet explorer 6 interessieren)

ob du deine seite nun mit divs, tabellen oder semantisch korrekt auszeichnest ist egal - sobald du etwas mit css formatierst, ist valider code unumgänglich

zur entwicklung verwende ich persönlich den firefox mit dem webdeveloper-toolbar (extension) - die standard-tastenkombination SHIFT+STRG+A sendet den aktuellen quelltext des browsers direkt an den validator - und diese tastenkombination solltest du oft verwenden ;)

[Andy]

zur entwicklung verwende ich persönlich den firefox mit dem webdeveloper-toolbar (extension) - die standard-tastenkombination SHIFT+STRG+A sendet den aktuellen quelltext des browsers direkt an den validator - und diese tastenkombination solltest du oft verwenden ;)

Danke, die FF extension ist klasse.

Mit der Liste bin weiter dran, noch nicht am aufgeben:(
Andy

[suit]

Danke, die FF extension ist klasse.

firebug dürfte dich wohl ebenfalls interessieren

Mit der Liste bin weiter dran, noch nicht am aufgeben:(

wie gesagt - zwischen divs und li-element besteht kein unterschied - lediglich die standardformatierung ist eine andere - divs haben quasi keine, li-elemente haben als display-eigenschaft: list-item (hier empfiehlt sich, das auf block zu sehen), ein aufzählungszeichen sowie ein bisschen padding und margin

den listamatic-link hab ich dir ja gegeben, hier kannst du dir anregungen holen

und bei konkreten probleme wird dir hier sicher geholfen - sofern du nachvollziehbare und valide beispiele lieferst ist das meistens schnell gelöst

[Andy]

Hallo Suit,

ich wollte mich bedanken.

Der Validator ist Klasse und die Extension auch, kannte ich beides nicht.

Ich habe jetzt die Navigation in einer statischen Liste
hier, sogar ohne Fehlermeldungen
So soll es sein.

Ich musste doch klassen vergeben und zwar span und p sonst hätte ich (mit meinem Wissen) keine unterschiedlichen Schriftarten-Größen etc hinbekommen.

Wenn das mal läuft soll sich beim anklicken ein GET Parameter übergeben werden und sich eine Subnavigation öffnen.
Das bekomme ich aber hin.

Jetzt ist mir auch klar warum ich so viele Warnings im Validator hatte, wenn ich eine id in einer do while habe, dann habe ich ja die eine id x-mal. die ist nicht mehr eindeutig.

Hättest Du einen Link, wo ich was über Infoboxen ohne a-element finde?
Danke und ein schönes Wochenende
Andy

[suit]

ich wollte mich bedanken.

gern geschehen - eins muss ich aber noch loswerden

"#linke_navi" ist eine ungünstig gewählte id - nenne das ding navigation, hauptnaviagtion oder sonstwas - aber eine information über das tatsächliche layout in ein klasse zu packen ist nicht klug

wenn du dein layout jetzt 2-spaltig machst - links die naviation und rechts den inhalt, dann hast du mit css quasi nur ein paar zeilen zu ändern, damit die navigation rechts steht und der inhalt links

somit wäre die von dir gewählte id irreführung weil die linke_navi plötzlich rechts steht

klassennamen oder grafiknamen betrifft das übrigens auch "kleiner_blauer_pfeil" als name für listenaufzählungszeichen ist das dämlichste was man sich vorstellen kann - wenn du das design änderst und bei den listenaufzählungszeichen gegen rote, mittelgroße dreiecke erstetzt, kannst du alle grafiken umbenennen und jedes vorkommen im css abändern, dass du nicht verwirrt bist - wenn du gleich einen ordentlichen namen wählst wie "icon_listenaufzaehlungszeichen.png" musst du nur die grafik austauschen und fertig

Ich musste doch klassen vergeben und zwar span und p sonst hätte ich (mit meinem Wissen) keine unterschiedlichen Schriftarten-Größen etc hinbekommen.

span != p, du kannst sie anhand ihres elementnamens unterscheiden

li span { color: green; }  
li p { color: red; }

Hättest Du einen Link, wo ich was über Infoboxen ohne a-element finde?
Danke und ein schönes Wochenende

grade nix zur hand

tooltips ohne a-elemente oder ohne sind im internet explorer 6 nicht möglich, da der die :hover-pseudo-klasse nicht versteht

zwei möglichkeiten: du nimmst für die sache ein javascript, welches den ie6 unterstützt (alle anderen browser brauchens nicht) oder du nimmst conditional comments die dem ie6 ein zusätzliches, eigentlich fehlerhaftes a-element unterjubeln

gunnar bittersmann wirf hier immer gleich mit einem link umsich, wenns um reine css-menus ohne javascript geht - den link weiss ich leider nicht

[Andy]

Hallo,

span != p, du kannst sie anhand ihres elementnamens unterscheiden

li span { color: green; }

li p { color: red; }

>   
  
Jetzt muss ich doch noch einmal nachfragen.  
  
~~~css
  
 li.hauptnavi span  
    {  
    display: block;  
  .........  
    }  
li.hauptnavi span a:link,  li.hauptnavi span span a:visited  
{  
 color: #333;  
    }  
li.hauptnavi p a:link  
{  
 color: #000;  
    }  

Ist das richtig?
Danke Andy.

[suit]

Ist das richtig?

pinzipiell ja - in deinem echten stylesheet hast du aber LI jeweis gross geschrieben, in xhtml sind elementnamen aber klein zu schreiben - da css case-sensitive ist, entspricht der selektor LI nicht dem selektor li - einige browser ignorieren das, andere wieder nicht - darum: alles klein schreiben zur sicherheit

[Kai345]

[latex]Mae  govannen![/latex]

zur entwicklung verwende ich persönlich den firefox mit dem webdeveloper-toolbar (extension) - die standard-tastenkombination SHIFT+STRG+A sendet den aktuellen quelltext des browsers direkt an den validator - und diese tastenkombination solltest du oft verwenden ;)

Und da das irgendwann lästig wird, macht man als fauler Mensch die „Vorprüfung“ mit einem weiteren Add-on

Cü,

Kai

[MudGuard]

Hi,

a.unterstrichen:hover   { color: #fff; border-bottom: 1px dotted #fff; }
was muss ich machen, um nur den Text unterstreichen zu lassen, weil in meinem Fall werden immer die 4 pixel padding rechts mit unterstrichen.

Den Text unterstreichen (text-decoration: underline) statt das Element mit unterem Rahmen zu versehen.

a.unterstrichen:aktive  { color: #fff;  border-bottom: 1px solid #fff;}

:aktive ist kein gültiger Selektor.

cu,
Andreas