Top-Themen

Aktuelle Themen (A bis Z)

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, 1244 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
Google Android
Aus Navigation drawer Activity in andere activity wechseln
Frage von bahnhofGoogle Android1 Kommentar

Hallo, ich habe eine App mit Navigation drawer erstellt. In einer meine Activity's, die ich dem Navigation drawer zugeordnet ...

Webbrowser
Schnelle Navigation mit Firefox
Frage von CodehunterWebbrowser

Hallo! Ich bin ein langjähriger Opera-Nutzer. Nur leider sind ja sämtliche neuen Versionen nach V12.17 reif für die Tonne. ...

CMS
Magento Navigation differenziert organisieren
Frage von ischbindebaetmaenCMS2 Kommentare

Hallo Admins, ich stehe gerade vor einer kleinen Herausforderung: Ich möchte neben den Shop Kategorien in einer Vertikalen Navigation ...

Google Android
Navigations-Zieldaten per WLAN an Tablet senden und Navigation starten?
Frage von mabue88Google Android1 Kommentar

Hallo, gibt es eine Möglichkeit/App, mit der man ein Navigationsziel per WLAN an ein Tablet senden kann und dieses ...

Neue Wissensbeiträge
Internet

Was nützt HTTPS, wenn es auch von Phishing Web-Seiten genutzt wird

Information von Penny.Cilin vor 2 TagenInternet17 Kommentare

HTTPS richtig einschätzen Ob man eine Webseite via HTTPS aufruft, zeigt ein Schloss neben der Adresse im Webbrowser an. ...

Webbrowser

Bugfix für Firefox Quantum released - Installation erfolgt teilweise nicht automatisch!

Erfahrungsbericht von Volchy vor 3 TagenWebbrowser7 Kommentare

Hallo zusammen, gem. dem Artike von heise online wurde mit VersionFirefox 57.0.1 sicherheitsrelevante Bugs behoben. Entgegen der aktuellen Veröffentlichung ...

Sicherheit

Teamviewer Sessions können gekapert werden - Update tw. verfügbar

Information von sabines vor 3 TagenSicherheit6 Kommentare

In bestimmten Konstellationen können Teamviewer Sessions gekapert werden, wahrscheinlich aber ein recht unwahrscheinliches Szenario. Da der Teamviewer gerne für ...

Digitiales Fernsehen

Apple TV: Amazon Prime App ist verfügbar

Information von Frank vor 4 TagenDigitiales Fernsehen4 Kommentare

Die Amazon Prime Video App kann ab sofort auf einem Apple TV ab der 3 Generation installiert werden. Einfach ...

Heiß diskutierte Inhalte
Vmware
Installation Windows 10 VMware
Frage von Ghost108Vmware17 Kommentare

Hallo zusammen, versuche gerade mit Hilfe des vshpere clients eine virtuelle Windows 10 maschine aufzusetzen. 1. virtuelle Maschine erstellt ...

Exchange Server
SBS 2011 E-Mails können gesendet werden, aber nicht von extern empfangen
Frage von andreas1234Exchange Server14 Kommentare

Hallo Community, ich habe das Problem, dass seit knapp zwei Wochen die E-Mails von meinem SBS 2011 einwandfrei gesendet ...

Voice over IP
Telefonstörung - Ortsrufnummern kein Verbindungsaufbau
Frage von Windows10GegnerVoice over IP10 Kommentare

Hallo, sowohl bei uns als auch beim Opa ist es über VoIP nicht möglich Ortsrufnummern anzurufen. Es kommt nach ...

Windows Server
Server 2012 über Eingabeaufforderung devmgmt.msc geht nicht
gelöst Frage von achim222Windows Server9 Kommentare

Hallo, ich habe hier einen Server 2012 der im Reparaturmodus startet. Es liegt an einem falschen VirtIO Treiber für ...