3
Wie so eine Navigation realisieren?
Hallo Leude,
ich bin gerade beim meinem ersten eigenen Webprojket auf PHP-Basis und habe folgende Frage:
Wie kann ich so eine Navigationsleiste realisieren, speziell was die runden Ecken (Ränder) und die Trennstriche betrifft?:
www.kaspersky.de
Der Div "Topnav" udn das Listenelement für die Navi bestehen schon.
Den farbverlaufenen Hintergund kann man ja mit einer Grafik und dem CSS "repeat" realisieren, aber wie bekomme ich die Ränder und die Trennstriche hin? Als Trennstrich kann man ja auch eine Grafik nehmen, aber wie integriere ich die ich in mein CSS oder Listenelement?
Ich hatte überlegt, eine Gesamtgrafik mit den runden Rändern zu erstellen, mit eienr fixen Pixelgrösse und diese als Hintergund zu definieren.
Ich hätte aber gerne, dass sich die Navigationsleiste automatisch anpasst und erweitert, wenn ich einen Link hinzufüge und verkleinert, wenn ich einen Link entferne.
Dazu müsste ich aber auch den "Main-Div", der "Topnav" und "Conent" umschlisst mit einer "100% width" im CSS anlegen oder?
Ich freue mich wenn mir jemand bei der Problematiik weiterhelfen kann.
Greetz
der Lehrling
ich bin gerade beim meinem ersten eigenen Webprojket auf PHP-Basis und habe folgende Frage:
Wie kann ich so eine Navigationsleiste realisieren, speziell was die runden Ecken (Ränder) und die Trennstriche betrifft?:
www.kaspersky.de
Der Div "Topnav" udn das Listenelement für die Navi bestehen schon.
Den farbverlaufenen Hintergund kann man ja mit einer Grafik und dem CSS "repeat" realisieren, aber wie bekomme ich die Ränder und die Trennstriche hin? Als Trennstrich kann man ja auch eine Grafik nehmen, aber wie integriere ich die ich in mein CSS oder Listenelement?
Ich hatte überlegt, eine Gesamtgrafik mit den runden Rändern zu erstellen, mit eienr fixen Pixelgrösse und diese als Hintergund zu definieren.
Ich hätte aber gerne, dass sich die Navigationsleiste automatisch anpasst und erweitert, wenn ich einen Link hinzufüge und verkleinert, wenn ich einen Link entferne.
Dazu müsste ich aber auch den "Main-Div", der "Topnav" und "Conent" umschlisst mit einer "100% width" im CSS anlegen oder?
Ich freue mich wenn mir jemand bei der Problematiik weiterhelfen kann.
Greetz
der Lehrling
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 206488
Url: https://administrator.de/contentid/206488
Printed on: April 24, 2024 at 18:04 o'clock
3 Comments
Latest comment
Hallo,
prinzipiell liegst du richtig, auch bei Kaspersky sind das nur Bilder. Schau dir mit einem entsprechenden Addon (FF Webdeveloper ovgl) mal den Code auf Kaspersky an. WObei eine ewig gestreckte Navigationsleiste auch nicht das gelbe vom Ei ist.
Gruß
prinzipiell liegst du richtig, auch bei Kaspersky sind das nur Bilder. Schau dir mit einem entsprechenden Addon (FF Webdeveloper ovgl) mal den Code auf Kaspersky an. WObei eine ewig gestreckte Navigationsleiste auch nicht das gelbe vom Ei ist.
Gruß
Moin,
mach's doch einfach genauso wie Kapersky - als Table.
Die Nvigation ist eine Tabelle, die erste Zelle hat links runde Ränder, die letzte hat rechts runde Ränder.
Und die Zellen dazwischen haben jeweils rechts einen hellen Rand (=border).
Das Layout der Zellen wird jeweils mit CSS Klassen festgelegt.
lg,
Slainte
mach's doch einfach genauso wie Kapersky - als Table.
Die Nvigation ist eine Tabelle, die erste Zelle hat links runde Ränder, die letzte hat rechts runde Ränder.
Und die Zellen dazwischen haben jeweils rechts einen hellen Rand (=border).
Das Layout der Zellen wird jeweils mit CSS Klassen festgelegt.
lg,
Slainte
Bitte mach das nicht als Table!
Dein Thema ist eigentlich im PHP Forum etwas fehlerhaft, aber egal, die SuFu wird's auch hier finden.
Das Zauberwort sind Listen.
Ums am Beispiel von Kaspersky zu demonstrieren:
[HTML]
<ul>
<li>Produkte & Services</li>
<li>Online-Shop</li>
<li>Ratgeber</li>
<li>Downloads</li>
<li>Support</li>
<li>Partner</li>
<li>Über Kaspersky Lab</li>
</ul>
[CSS]
ul
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
font-size:13px;
background: #F00;
}
li
{
display:block;
float:left;
margin:0;
pading:0;
}
li a
{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
li a:hover
{
background: #F0F;
}
Schau auf jeden Fall mal nach "CSS Horizontale Menüs" hier im Forum oder bei der Suchmaschine deines geringsten Misstrauens.
Dein Thema ist eigentlich im PHP Forum etwas fehlerhaft, aber egal, die SuFu wird's auch hier finden.
Das Zauberwort sind Listen.
Ums am Beispiel von Kaspersky zu demonstrieren:
[HTML]
<ul>
<li>Produkte & Services</li>
<li>Online-Shop</li>
<li>Ratgeber</li>
<li>Downloads</li>
<li>Support</li>
<li>Partner</li>
<li>Über Kaspersky Lab</li>
</ul>
[CSS]
ul
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:40px;
font-size:13px;
background: #F00;
}
li
{
display:block;
float:left;
margin:0;
pading:0;
}
li a
{
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
height:40px;
}
li a:hover
{
background: #F0F;
}
Schau auf jeden Fall mal nach "CSS Horizontale Menüs" hier im Forum oder bei der Suchmaschine deines geringsten Misstrauens.
