Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Wie so eine Navigation realisieren?

Frage Entwicklung PHP

Mitglied: lehrling24

lehrling24 (Level 1) - Jetzt verbinden

15.05.2013 um 10:42 Uhr, 1237 Aufrufe, 3 Kommentare

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
Mitglied: certifiedit.net
15.05.2013 um 10:45 Uhr
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ß
Bitte warten ..
Mitglied: SlainteMhath
15.05.2013 um 10:49 Uhr
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
Bitte warten ..
Mitglied: itsdows
18.05.2013 um 14:02 Uhr
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.
Bitte warten ..
Ähnliche Inhalte
Webentwicklung
Netzwerkmanagement und Helpdesk webbasiert realisieren

Frage von alemanne21 zum Thema Webentwicklung ...

Router & Routing
DNAT unter Windows 10 realisieren (8)

Frage von berndschroed zum Thema Router & Routing ...

Netzwerke
Getrennte Netze durch VLAn realisieren (15)

Frage von fritte87 zum Thema Netzwerke ...

LAN, WAN, Wireless
Remotestandort anbinden - wie am besten realisieren (8)

Frage von westberliner zum Thema LAN, WAN, Wireless ...

Neue Wissensbeiträge
Windows Tools

Zeit für Energiesparmodus, Bildschirmabschaltung etc. schnell anpassen

Anleitung von hannsgmaulwurf zum Thema Windows Tools ...

Linux Netzwerk

Ping und das einstellbare Bytepattern

(1)

Erfahrungsbericht von LordGurke zum Thema Linux Netzwerk ...

Windows Update

Microsoft Update KB4034664 verursacht Probleme mit Multimonitor-Systemen

(4)

Tipp von beidermachtvongreyscull zum Thema Windows Update ...

Heiß diskutierte Inhalte
Outlook & Mail
Dumme Sache - Userin hat Abwesenheitsnotz in Outlook vergessen (25)

Frage von 1410640014 zum Thema Outlook & Mail ...

Router & Routing
Grundkonfiguration Firewall und L3 Switch? (22)

Frage von Maik20 zum Thema Router & Routing ...

Firewall
Richtige Grundeinstellungen der Pfsense für mein Netzwerk (15)

Frage von Spitzbube zum Thema Firewall ...