Grundlegende Frage zum Seitenaufbau
- Ersteller Hase
- Erstellt am
So jetzt brauch ich nochmal euren Rat...
möchte in meiner Sidebar bei der liste eine untergeordnete liste haben, sozusagen, wenn man einen button anklickt, sollen die unterpunkte kommen...
jedoch versteh ich gerade nicht, warum die elemente in die 2. zeile rücken, also 2 zeilig sind, das sollte doch eigendlich nicht sein, gebe ich display:block; an, dann ist es in ordnung, will ich aber nicht, da dann das ganze element zum verweis wird
HMB Schweisstechnik - Schweissen
Bin um jeden tipp dankbar
MFG Hase
möchte in meiner Sidebar bei der liste eine untergeordnete liste haben, sozusagen, wenn man einen button anklickt, sollen die unterpunkte kommen...
jedoch versteh ich gerade nicht, warum die elemente in die 2. zeile rücken, also 2 zeilig sind, das sollte doch eigendlich nicht sein, gebe ich display:block; an, dann ist es in ordnung, will ich aber nicht, da dann das ganze element zum verweis wird
HMB Schweisstechnik - Schweissen
Bin um jeden tipp dankbar
MFG Hase
So mein Problem ist fast gelöst... Warum brauche ich im Style display:inline-block; bei sidebar-menue_under? Wenn ich dies nicht hinzufüge, passen die abstände nicht mehr
Bitte gebt mir einen tipp oder Erklärung. Aus den Html Seiten werde ich aus der Erklärung nicht schlau
HMB Schweisstechnik
MFG Hase
EDIT: Nochmal eine Frage dir mir gerade eingefallen ist. Wenn ich meinen Header 2 geteilt mache, und das logo links setzte und die schrift rechts, dann würde es doch (wenn ich die breite in % angebe) für jede auflösung und platzangebot passen, oder nicht?
MFG Hase
Bitte gebt mir einen tipp oder Erklärung. Aus den Html Seiten werde ich aus der Erklärung nicht schlau
HMB Schweisstechnik
MFG Hase
EDIT: Nochmal eine Frage dir mir gerade eingefallen ist. Wenn ich meinen Header 2 geteilt mache, und das logo links setzte und die schrift rechts, dann würde es doch (wenn ich die breite in % angebe) für jede auflösung und platzangebot passen, oder nicht?
MFG Hase
Zuletzt bearbeitet:
vast
Neues Mitglied
...du hast glaube ich die Möglichkeit übersehen, das Elternelement der Links zu stylen - das <li>- Element.
also versuch mal folgendes im css (nimm ruhig mal vorher das display:inline-block für die .sidebar-menue_under links raus):
ul#sidebar_under li {
display:block; /*stellt sicher das die Elemente untereinander sind und ausserdem kann so Höhe und Breite bestimmt werden, wenn man will*/
margin: 2px 0; /* jeweils 2px Abstand von oben und unten, auch das kann man machen wie man will */
}
...so kann man die Abstände etc ganz genau bestimmen und noch viel mehr.
viel spass
also versuch mal folgendes im css (nimm ruhig mal vorher das display:inline-block für die .sidebar-menue_under links raus):
ul#sidebar_under li {
display:block; /*stellt sicher das die Elemente untereinander sind und ausserdem kann so Höhe und Breite bestimmt werden, wenn man will*/
margin: 2px 0; /* jeweils 2px Abstand von oben und unten, auch das kann man machen wie man will */
}
...so kann man die Abstände etc ganz genau bestimmen und noch viel mehr.
viel spass
Danke, funktioniert!
aber diese schreibweiße ist mir neu. habe ein bisschen gegoogelt. Ich weiß nicht ob es erlaubt ist links zu anderen foren zu schreiben, aber da würde es erklärt werden:
verschiedene css-Schreibweisen - XHTMLforum
ist diese erklärung so richtig?
MFG Hase
aber diese schreibweiße ist mir neu. habe ein bisschen gegoogelt. Ich weiß nicht ob es erlaubt ist links zu anderen foren zu schreiben, aber da würde es erklärt werden:
verschiedene css-Schreibweisen - XHTMLforum
ist diese erklärung so richtig?
MFG Hase
vast
Neues Mitglied
ja das stimmt so, ich formuliere es trotzdem nochmal:
bei
ul#sidebar_under li { ... }
hätte ich das "ul" weglassen können.
Ob ul#ID oder nur #ID macht in diesem Falle keinen Unterschied.
Das darauf folgende "li" bedeutet dann, das ausschliesslich die <li>-Elemente innerhalb einer <ul> mit dieser ID gemeint sind.
Hätte man nun aber zB auf einer anderen Seite eine <ol> mit der gleichen ID, würde mein CSS aber zB nicht greifen, wenn ich ul#ID schreibe, wenn ich nur #ID angebe aber schon.
Oder aber bei CSS-Klassen - im Gegensatz zu IDs können diese ja mehreren Elementen zugewiesen werden - kann das folgendes bewirken:
.grey { color: #CCC; }
p.grey { text-transform: uppercase; }
span.grey { font-size: 12px; }
So kann man expliziter bestimmen, wie sich welches Element verhält. In diesem Fall bekäme jegliches Element mit class="grey" eine graue Schriftfarbe.
Wäre es ein Paragraph, so sind die Buchstaben alle uppercase UND grau.
Wäre es ein span, so sind die Buchstaben NICHT uppercase, aber grau und zusätzlich 12px gross.
Das ist eigentlich der Sinn der Sache, wenn man das Element vor der Klasse im CSS erwähnt.
Bei IDs meist nicht nötig, ich persönlich mach es aber trotzdem gern, "liest" sich besser... ;)
bei
ul#sidebar_under li { ... }
hätte ich das "ul" weglassen können.
Ob ul#ID oder nur #ID macht in diesem Falle keinen Unterschied.
Das darauf folgende "li" bedeutet dann, das ausschliesslich die <li>-Elemente innerhalb einer <ul> mit dieser ID gemeint sind.
Hätte man nun aber zB auf einer anderen Seite eine <ol> mit der gleichen ID, würde mein CSS aber zB nicht greifen, wenn ich ul#ID schreibe, wenn ich nur #ID angebe aber schon.
Oder aber bei CSS-Klassen - im Gegensatz zu IDs können diese ja mehreren Elementen zugewiesen werden - kann das folgendes bewirken:
.grey { color: #CCC; }
p.grey { text-transform: uppercase; }
span.grey { font-size: 12px; }
So kann man expliziter bestimmen, wie sich welches Element verhält. In diesem Fall bekäme jegliches Element mit class="grey" eine graue Schriftfarbe.
Wäre es ein Paragraph, so sind die Buchstaben alle uppercase UND grau.
Wäre es ein span, so sind die Buchstaben NICHT uppercase, aber grau und zusätzlich 12px gross.
Das ist eigentlich der Sinn der Sache, wenn man das Element vor der Klasse im CSS erwähnt.
Bei IDs meist nicht nötig, ich persönlich mach es aber trotzdem gern, "liest" sich besser... ;)
Danke für deine Erklärung, jetzt ist mir das auch klaar.
Dann währe es aber auch besser, wenn ich das mit meiner menue-sidebar auch mache, dass ich die listenpunkte formatiere und die zusätzlichen formatierungen auf den link gebe, oder nicht?
Hoffe man versteht, was ich meine :)
MFG Hase
Dann währe es aber auch besser, wenn ich das mit meiner menue-sidebar auch mache, dass ich die listenpunkte formatiere und die zusätzlichen formatierungen auf den link gebe, oder nicht?
Hoffe man versteht, was ich meine :)
MFG Hase
Zuletzt bearbeitet:
vast
Neues Mitglied
ich verstehe jetzt nicht genau, worauf du hinaus willst. Im Grunde ging es mir ja darum zu verdeutlichen, das es der bessere Weg ist, den Listenpunkten zu "sagen", wie sie sich anordnen sollen, statt den Links darin (display: inline-block für den Link versus display:block für das <li>), weil es so (auch in verschiedenen Browsern) zuverlässiger funktioniert.
zB:
#sidebar_under { /* das ul vorher kann man sich sparen*/
list-style-type: none;
}
#sidebar_under li { /* alle li´s in ul#sidebar_under*/
display:block;
text-align:center;
margin: 3px 0;
}
#sidebar_under li a { /* alle links in li´s in ul#sidebar_under*/
color: black;
text-decoration:none;
}
#sidebar_under li a:hover,
#sidebar_under li a:active,
#sidebar_under li a:focus { /* alle links in li´s in ul#sidebar_under bei hover und click*/
color: white;
text-decoration:none;
}
Man muss ein wenig unterscheiden, welchem Element man was zuweist.
Will man zB, das die Links zentriert sind, gibt man dem Elternelement (<li>) das text-align:center; - statt dem <a> etc.
Ich denke du bist auf dem richtigen Weg. Hilft das weiter, oder habe ich nicht verstanden, was du wissen willst?
zB:
#sidebar_under { /* das ul vorher kann man sich sparen*/
list-style-type: none;
}
#sidebar_under li { /* alle li´s in ul#sidebar_under*/
display:block;
text-align:center;
margin: 3px 0;
}
#sidebar_under li a { /* alle links in li´s in ul#sidebar_under*/
color: black;
text-decoration:none;
}
#sidebar_under li a:hover,
#sidebar_under li a:active,
#sidebar_under li a:focus { /* alle links in li´s in ul#sidebar_under bei hover und click*/
color: white;
text-decoration:none;
}
Man muss ein wenig unterscheiden, welchem Element man was zuweist.
Will man zB, das die Links zentriert sind, gibt man dem Elternelement (<li>) das text-align:center; - statt dem <a> etc.
Ich denke du bist auf dem richtigen Weg. Hilft das weiter, oder habe ich nicht verstanden, was du wissen willst?
Ja das hilft sehr weiter, jedoch wollte ich eigendlich was anderes wissen. hab jetzt selber viel herumprobiert, aber bin selber nicht drauf gekommen.
das in meinem untermenü ist jetzt vollkommen klar! aber mein "normales" menü wo auch die buttons drinnen sind, da habe ich ja alle formatierungen auf den link angewendet. das ist ja eigendlich nicht richtig, wie sollte ich das hier lösen? wenn ich es nach dem selben Schema mache: #sidebar li . bekomme ich ein totales durcheinander, weil ja die li's von der sidebar_under auch angesprochen werden. wie soll ich das am bessten lösen?
HMB Schweisstechnik
MFG Hase
das in meinem untermenü ist jetzt vollkommen klar! aber mein "normales" menü wo auch die buttons drinnen sind, da habe ich ja alle formatierungen auf den link angewendet. das ist ja eigendlich nicht richtig, wie sollte ich das hier lösen? wenn ich es nach dem selben Schema mache: #sidebar li . bekomme ich ein totales durcheinander, weil ja die li's von der sidebar_under auch angesprochen werden. wie soll ich das am bessten lösen?
HMB Schweisstechnik
MFG Hase
naja, du hast mir gesagt, dass ich überlegen will, was ich was zuweise:"Man muss ein wenig unterscheiden, welchem Element man was zuweist."
Da hab ich mir gedacht, dass es "korrekter" währe, dass ich die formatierungen nicht dem link (wie es jetzt ist) sondern dem li's zuweise, oder etwa nicht?
genauso wie es jetzt beim "untermenü" ist, so währe es doch "richtiger" wenns beim "übergeordneten" menü ist
Da hab ich mir gedacht, dass es "korrekter" währe, dass ich die formatierungen nicht dem link (wie es jetzt ist) sondern dem li's zuweise, oder etwa nicht?
genauso wie es jetzt beim "untermenü" ist, so währe es doch "richtiger" wenns beim "übergeordneten" menü ist
Wieso werden sie auch angesprochen?
#sidebar li ist etwas total anderes als #sidebar_under li
Oder habe ich jetzt deine Frage falsch verstanden?
Gruss
Elroy
vast
Neues Mitglied
solange das in verschiedenen browsern das gewünschte Ergebnis erzielt, ist da nichts falsches dran.
Ich wollte primär nur darauf hinweisen, dass wenn es so nicht ganz klappt, es noch die möglichkeit gibt, die Abstände etc über das elternelement abzuwickeln.
Wenn du dir Sorgen machst, dass beim stylen der oberen li´s die unteren diese Eigenschaften übernehmen, das kann man trennen, indem man die unteren explizit anspricht:
Ich wollte primär nur darauf hinweisen, dass wenn es so nicht ganz klappt, es noch die möglichkeit gibt, die Abstände etc über das elternelement abzuwickeln.
Wenn du dir Sorgen machst, dass beim stylen der oberen li´s die unteren diese Eigenschaften übernehmen, das kann man trennen, indem man die unteren explizit anspricht:
HTML:
#sidebar_under li { /*alle li´s in der ul#sidebar_under*/
display: block;
margin: 3px 0 3px 30px;
text-align: left;
}
#sidebar_under li ul li { /*nur die li´s im Untermenü, überschreibt ggf. vorige Zuweisungen*/
...
}@ elroy: ja das habe ich mir auch gedacht. eigendlich müsste es nichts ändern, wenn ich die formatierung genauso wie beim "Untermenü" mache. jedoch nach änderung war da ein totales durcheinander drinnen, das ich mir nicht erklären kann.
@vast: ja das habe ich verstanden, dass es anders auch ok währe, nur finde ich dass dass stylen des elternelements, also vom listenpunkt korrekter ist, da ich ja z.b. auf einen link kein hintergrundbild setzen kann, wo währe dann das bild? nur auf der schrift? Das klingt mir einfach nicht logisch...
als du dann den vorschlag gemacht hast, wie ich es lösen könnte, war ich sofort begeistert. nur ein problem habe ich damit, wie kann ich z.b. einen bestimmten listenpunkt ansprechen, um z.b. die farbe des textes (also des links) zu ändern, um zu signalisieren, dass ich gerade "hier" bin. kannst du mir da helfen wie ich das machen soll?
ich werde es einfach nochmal umschreiben, und es online stellen... dann könnt ihr es euch ansehen und mir vll sagen, was ich falsch gemacht habe :)
MFG Hase
@vast: ja das habe ich verstanden, dass es anders auch ok währe, nur finde ich dass dass stylen des elternelements, also vom listenpunkt korrekter ist, da ich ja z.b. auf einen link kein hintergrundbild setzen kann, wo währe dann das bild? nur auf der schrift? Das klingt mir einfach nicht logisch...
als du dann den vorschlag gemacht hast, wie ich es lösen könnte, war ich sofort begeistert. nur ein problem habe ich damit, wie kann ich z.b. einen bestimmten listenpunkt ansprechen, um z.b. die farbe des textes (also des links) zu ändern, um zu signalisieren, dass ich gerade "hier" bin. kannst du mir da helfen wie ich das machen soll?
ich werde es einfach nochmal umschreiben, und es online stellen... dann könnt ihr es euch ansehen und mir vll sagen, was ich falsch gemacht habe :)
MFG Hase
so jetzt habe ich es hochgeladen... komisch nur, heute vormittag hatte ich das totale chaos, jetzt aber nur ein paar kleinigkeiten. habe alles eins zu eins übernommen (oder etwa nicht?), jedoch werden z.b. die buttons nicht richtig angezeigt.
hoffe ihr könnt mir helfen, weil ich es mir einfach nicht erklären kann. wenn ich das neue auskommentiere und das alte wieder hinzufüge (das .sidebar-menue_active, .sidebar-menue, a.sidebar-menue:hover) gehts wieder und ich weiß nicht warum.
MFG Hase
hoffe ihr könnt mir helfen, weil ich es mir einfach nicht erklären kann. wenn ich das neue auskommentiere und das alte wieder hinzufüge (das .sidebar-menue_active, .sidebar-menue, a.sidebar-menue:hover) gehts wieder und ich weiß nicht warum.
MFG Hase
vast
Neues Mitglied
...das geht schon, der Link brauch dann aber display:block; und zumindest height-Angaben, ggf auch width.
...du hast lediglich vergessen, eine ausreichende Höhe dafür festzulegen, wenn das <a> display:block; hat, geht das auch.
HTML:
#sidebar li a {
color: #2C87DA;
display: block;
height: 20px;
padding: 5px; /*hintergrundbild ist 30px hoch: 20px + 2x 5px (padding) = 30px */
text-decoration: none;
}
#sidebar li a:hover, #sidebar li a:active, #sidebar li a:focus {
background-image: url("button_hover.png");
color: black;
}
/*Links im Untermenue näher zusammen, nehme ich an*/
#sidebar_under li a,
#sidebar li ul li a {
color: black;
height: 16px;
padding: 1px 0;
text-decoration: none;
}Das schon was komplizierter, für sowas kommt gern auch mal php oder javascript zum Einatz.
Mit CSS könnte man das lösen, indem du auf jeder page zB dem div#main (oder auch dem body, falls #main nicht auf jeder Seite vorhanden ist), eine Klasse verpasst, die aussagt auf welcher page man ist.
Ausserdem der <ul> des Untermenüs noch eine Klasse geben, so das man die auch besser ansprechen kann.
Wenn du auf den Unterseiten highlighten willst, wo man sich gerade befindet, würde ich den <li>-Elementen im Untermenü auch Klassen zuweisen, die deren Link beschreiben.
Dein Menü könnte dann zB für die Unterseite "Schweissen --> Elektrode" so aussehen:
HTML:
<div id="main" class="schweissen elektrode">
<!-- #main hat beide Klassen,schweissen und elektrode, die Klassen auf jeder Page so angeben. Für home ggf. home etc. -->
<!-- menü muss nicht für jede page geändert werden. -->
<ul id="sidebar">
<li class="home"><a class="sidebar-menue" href="index.html">Home</a></li>
<li class="schweissen"><a class="sidebar-menue" href="weld.html">Schweissen</a></li>
<li>
<ul id="sidebar_under" class="schweissen_menu">
<li class="elektrode"><a href="mma.html">Elektrode</a></li>
<li class="migmag"><a href="gmaw.html">MIG/MAG</a></li>
<li class="wig"><a href="tig.html">WIG</a></li>
<li class="weld"><a href="weld_other.html">Sonstiges</a></li>
<li class="acc"><a href="accessories.html">Zubehör</a></li>
</ul>
</li>
...
</div>
HTML:
#main.schweissen #sidebar li ul.schweissen_menu {
display:block;
}Da wir nun annehmen, wir sind auf der Unterpage "Elektrode", wollen wir das noch kenntlich machen, zB durch weisse Linkfarbe:
HTML:
#main.elektrode #sidebar li ul.schweissen_menu li.elektrode a {
color: white;
}
HTML:
#main.elektrode #sidebar li ul.schweissen_menu li.elektrode a,
#main.migmag #sidebar li ul.schweissen_menu li.migmag a,
#main.wig #sidebar li ul.schweissen_menu li.wig a,
#main.weld #sidebar li ul.schweissen_menu li.weld a,
#main.acc #sidebar li ul.schweissen_menu li.acc a
{
color: white;
}Vorteil der Sache ist aber, das das Menü so immer gleich bleiben kann vom Markup her, also theoretisch auch als file per php auf jeder Seite included werden könnte.
Somit müsste man bei Änderungen am Menü nicht jede Seite bearbeiten
Wenn du aber sowieso planst, das alles als statische html-Seite auszuliefern, könntest du theoretisch auch zB auf der Schweissen-Seite für das Untermenü style="display:block" reinschreiben, falls das zu kompliziert wird.
Ich hoffe, das ist verständlich ausgedrückt.
Zuletzt bearbeitet:
wow, danke für deinen aufwand mein problem zu lösen. vielen dank!
verstanden habe ich es, nur eins nicht, warum muss ich dem link das background-image geben, das sollte doch beim elternelement, dem li auch funktionieren? Aber es währe auch nicht falsch den link zu stylen?
wenn ich jetzt mal ausschließe, dass ich php verwenden werde, würde es auch reichen (von der richtigkeit, nicht nur das es funktioniert) das mit dem display:block zu machen? welche variante ist denn nun korrekter? meine ursprüngliche mit .sidebar-menue_active, .sidebar-menue, a.sidebar-menue:hover oder mit direkten ansprechen der elemente übers css?
MFG Hase
verstanden habe ich es, nur eins nicht, warum muss ich dem link das background-image geben, das sollte doch beim elternelement, dem li auch funktionieren? Aber es währe auch nicht falsch den link zu stylen?
wenn ich jetzt mal ausschließe, dass ich php verwenden werde, würde es auch reichen (von der richtigkeit, nicht nur das es funktioniert) das mit dem display:block zu machen? welche variante ist denn nun korrekter? meine ursprüngliche mit .sidebar-menue_active, .sidebar-menue, a.sidebar-menue:hover oder mit direkten ansprechen der elemente übers css?
MFG Hase
vast
Neues Mitglied
ja, sollte das sollte auch (fast) immer funktionieren.
Wenn jemand mit alten Browsern (zB IE6 und kleiner) unterwegs ist, dann gehts aber schief, weil die das :hover nur für <a>-Elemente verstehen.
li:hover geht dann also nicht...wenn man eine Möglichkeit hat das so zu umzusetzen, dass es überall klappt, warum nicht - hab ich mir gedacht.
Klar - ist nichts falsches dran. Mit php würdest du wahrscheinlich beim "erzeugen" der Navi die Seiten-Hierarchie durchgehen und die navi so ausgeben, dass das aktuell angewählte Link-Element die Klasse "active" bekommt, oder ähnlich.
Das ist zwar, je nachdem wie es gelöst wird, mit php etwas eleganter, aber die "pure" CSS-Variante ist deshalb nicht falsch.
Wie zuvor erwähnt, wäre es aber zB für dich eine Erleichterung, wenn die Navigation in eine Datei ausgelagert würde, die per php in die Seiten included wird.
Somit könntest du an dieser Datei die Navi für alle Seiten zentral bearbeiten, wenn sich was ändert.
Wenn dir die Geschichte mit dem display:block optisch zu unschön ist, kann man da auch noch ein wenig mit js/jQuery rangehen, um zB die Menüs "weich" auf / zugehen zu lassen etc.
Schwer zu sagen, habe momentan nicht so den Überblick, wie es vorher war. Wenns gut funktioniert hat, wäre alles ok, ich denke nur, das für das Kennzeichnen von aktiven Seiten / Menüs halt noch ein paar zusätzliche Klassen und CSS Regeln erforderlich wären.
Ohne ein paar mehr Unterscheidungsmöglichkeiten (Klassen,IDs), wird es halt schwierig, zB im dritten Untermenü den zweiten Link per CSS zu "treffen".
Wenn dein altes CSS funktioniert, kann das auch bleiben. Muss halt nur erweitert/verfeinert werden.
Vielleicht bastelst du noch ein wenig, dann kann man ja nochmal draufschauen, ob man hier oder da was kürzen oder schlauer machen kann.
cheers
Also habe es wieder auf meine "version" zurückgebaut. Habe auch das neue untermenü eingebaut, so wie ich es mir vorstelle. was meint ihr dazu? ist das so korrekt? warum muss ich bei meinem "navigator" dem "a" extra eine farbe geben, müsste der nicht die farbe vom elternelement <p> verwenden?
#navigator {
color:grey;
font-family:Veranda, sans-serif;
font-size:12px;
margin-bottom:5px;
}
#navigator a {
color:RGB(44,135,218);
text-decoration:none;
wenn ich das nicht mache, alles blau, wie standard...
www.hmb-schweisstechnik.de/arc200.html
MFG Hase
#navigator {
color:grey;
font-family:Veranda, sans-serif;
font-size:12px;
margin-bottom:5px;
}
#navigator a {
color:RGB(44,135,218);
text-decoration:none;
wenn ich das nicht mache, alles blau, wie standard...
www.hmb-schweisstechnik.de/arc200.html
MFG Hase
vast
Neues Mitglied
jegliche zuweisungen im CSS bzgl dem <a>-element überschreiben die Vererbung der <p>-Farbe.
Selbst wenn man noch gar keine Zuweisungen für Link-Farben festegelegt hat, so haben alle browser quasi voreinegestellte Farben für Links parat.
Das ist meist blau für Links, violett für a:visited, etc.
Man muss also die Link-Farben separat bestimmen, die übernehmen nicht die Farbe des <p>, was auch Sinn macht, denn Links sollten immer klar vom Fliesstext unterschieden werden können.
