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, 1223 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 ..
Neuester Wissensbeitrag
Microsoft

Lizenzwiederverkauf und seine Tücken

(5)

Erfahrungsbericht von DerWoWusste zum Thema Microsoft ...

Ähnliche Inhalte
Netzwerke
Getrennte Netze durch VLAn realisieren (15)

Frage von fritte87 zum Thema Netzwerke ...

Entwicklung
Webcrawler für Portal realisieren (1)

Frage von rababar2014 zum Thema Entwicklung ...

Virtualisierung
gelöst 4 Server auf einen Server realisieren (11)

Frage von Usogul zum Thema Virtualisierung ...

Heiß diskutierte Inhalte
Windows Netzwerk
Windows 10 RDP geht nicht (16)

Frage von Fiasko zum Thema Windows Netzwerk ...

Windows Server
Outlook Verbindungsversuch mit Exchange (15)

Frage von xbast1x zum Thema Windows Server ...

Microsoft Office
Keine Updates für Office 2016 (13)

Frage von Motte990 zum Thema Microsoft Office ...