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?

Mitglied: lehrling24

lehrling24 (Level 1) - Jetzt verbinden

15.05.2013 um 10:42 Uhr, 1251 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
Google Android

Googles "Android Enterprise Recommended" für Unternehmen

Information von kgborn vor 10 StundenGoogle Android3 Kommentare

Hier eine Information, die für Administratoren und Verantwortliche in Unternehmen, die für die Beschaffung und das Rollout von Android-Geräten ...

Sicherheit

Intel gibt neue Spectre V2-Microcode-Updates frei (20.02.2018)

Information von kgborn vor 11 StundenSicherheit

Intel hat zum 20. Februar 2018 weitere Microcode-Updates für OEMs freigegeben, um Systeme mit neueren Prozessoren gegen die Spectre ...

Microsoft
ARD-Doku - Das Microsoft Dilemma
Tipp von Knorkator vor 14 StundenMicrosoft3 Kommentare

Hallo zusammen, vor einigen Tagen lief in der ARD u.a. Reportage. Das Youtube Video dazu dürfte länger verfügbar sein. ...

Windows 10

Neue Sicherheitslücke in Windows 10 (Version 1709) durch Google öffentlich geworden

Information von kgborn vor 1 TagWindows 10

Vor ein paar Tagen haben Googles Sicherheitsforscher vom Projekt Zero eine Sicherheitslücke im Edge-Browser publiziert. Jetzt wurde eine weitere ...

Heiß diskutierte Inhalte
Windows Server
AD DS findet Domäne nicht, behebbar?
Frage von schapitzWindows Server40 Kommentare

Guten Tag, ich habe bei einem Kunden ein Problem mit den AD DS. Umgebung ist folgende: Windows Server 2016 ...

Router & Routing
LANCOM VPN CLIENT einrichten
Frage von Finchen961988Router & Routing27 Kommentare

Hallo, ich habe ein Problem und hoffe ihr könnt mir helfen, wir haben einen Kunden der hat einen Speedport ...

Router & Routing
ISC DHCP 2 Subnetze
gelöst Frage von janosch12Router & Routing19 Kommentare

Hallo, ich betreibe bei mir im Netzwerk einen ISC DHCP Server auf Debian, der DHCP verwaltet aktuell ein /24 ...

Switche und Hubs
Cisco SG350X-48 AdminIP in anderes VLAN
Frage von lcer00Switche und Hubs14 Kommentare

Hallo zusammen, ich habe ein Problem mir einem Cisco SG350X-48 bei der Erstinstallation wurde eine IP 192.168.0.254 (Default VLAN ...