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

Trennlinie in horizontale Hauptnavi, wie?

Frage Entwicklung Webentwicklung

Mitglied: wescraven07

wescraven07 (Level 2) - Jetzt verbinden

04.12.2012 um 09:26 Uhr, 2210 Aufrufe, 7 Kommentare

Moin Leude,

habe da eine Frage zum Thema Webentwicklung.

ich habe eine Trennlinie, mit dem Stil "eingedrückt" als jpg, die für die obere Hauptnavigation gedacht ist. Meine Frage, wie bindet man diese Trennlinie in die Navigation ein, bzw. wie muss das im CSS dargestellt sein.

Freu mich auf Eure Tips
Mitglied: d4shoerncheN
04.12.2012, aktualisiert um 09:50 Uhr
Hallo,

poste am besten mal ein paar Links. Zu deiner Seite und von der Trennlinie, dann kann man sich besser was drunter vorstellen.

Generell <div-Container> mit dem Namen "navigation" oder so erstellen. Dort deine Navigation mit <ul> und <li> erstellen. Im CSS könnte das Ganze dann so aussehen:

01.
.navigation { 
02.
width: 500px; 
03.
height: 30px; 
04.
05.
 
06.
.navigation ul{ 
07.
    display: inline; 
08.
    list-style-type: none; 
09.
    margin: 0; 
10.
    padding: 0; 
11.
12.
 
13.
.navigation li { 
14.
background-image: url(./trennlinie.jpg); 
15.
color: #FFF; 
16.
width: 100px; 
17.
height: 30px; 
18.
19.
 
Gruß
Bitte warten ..
Mitglied: wescraven07
04.12.2012 um 10:30 Uhr
ok, ich versuchs das mal. Ist denn durch den Befehl "background-image: url(./trennlinie.jpg);" gewährleistet, dass der Trennstrich immer rechts neben dem Navilink erscheint. Muss man da nicht noch den Abstand von Trennstrich zu Link definieren?
Bitte warten ..
Mitglied: d4shoerncheN
04.12.2012 um 10:49 Uhr
Hallo,

nein das wäre damit nicht gewährleistet. Dazu müsste ich deine Trennlinie sehen. Das mit dem "background-image: url(./trennlinie.jpg);" würde passen, wenn du ein komplettes Hintergrundsbild pro Menüpunkt hast, wo die Trennlinie rechts mit drauf ist.

Du könntest z.B. auch folgendes machen
01.
list-style-image: url(trennlinie.jpg);
Gruß
Bitte warten ..
Mitglied: wescraven07
04.12.2012 um 11:58 Uhr
Hätte ich ein komplettes Hintergundbild müsste ich doch das Bild auf "repeat" stellen, und dann hätte ich ja in dem Navibutton die Trennlien mehrmals oder ich müsste dem Hintergundbild eine fixte Breite geben, dann würde aber doch das nicht mehr passen, da die Textlinks unterschiedlich lang sind....

Ich versuch das auch mal mit dem list-style
Bitte warten ..
Mitglied: d4shoerncheN
04.12.2012, aktualisiert um 14:09 Uhr
Hallo,

Hätte ich ein komplettes Hintergundbild müsste ich doch das Bild auf "repeat" stellen
mein Code oben ist für jedes <li-Element>. Sprich für jeden einzelnen Menüpunkt. Jedem Menüpunkt habe ich eine Breite von 100px gegeben.

Das was du meinst, wäre wenn man dem <div-Container>/ oder <ul-Container> Navigation ein Hintergrund zuweist.

Gruß
Bitte warten ..
Mitglied: d4shoerncheN
04.12.2012, aktualisiert um 14:24 Uhr
Wenn es nicht unbedingt eine Grafik sein muss, kannst du es auch so machen:

HTML
01.
<div id="navigation"> 
02.
    <ul id="navigation"> 
03.
    	<li class="first"><a href="#">Eins</a></li> 
04.
        <li><a href="#">Zwei</a></li> 
05.
        <li><a href="#">Hier kommt eine Zahl</a></li> 
06.
        <li><a href="#">Vier</a></li> 
07.
        <li class="last"><a href="#">Fünf</a></li> 
08.
    </ul> 
09.
</div>
CSS
01.
#navigation li { 
02.
background: #525D69; 
03.
border-left: 1px solid #707F90; 
04.
border-right: 1px solid #3C444D; 
05.
float: left; 
06.
list-style:none; 
07.
08.
 
09.
#navigation li a { 
10.
color: #DFE1E2; 
11.
float: left; 
12.
padding: 10px 20px; 
13.
14.
 
15.
#navigation li a:hover { 
16.
background: #C03; 
17.
color: #fff; 
18.
19.
 
20.
#navigation li a.active { 
21.
background: #C03; 
22.
color: #fff; 
23.
text-decoration: underline; 
24.
25.
 
26.
#navigation li.first { 
27.
border-left: 0; 
28.
29.
 
30.
#navigation li.last { 
31.
border-right: 0; 
32.
}
Resultat:
http://img1.bildupload.com/af5bc08237ed4b819dab5c1d813aeb2d.jpg
Leider kann man keine externen URL-Bilder einbinden.
Gruß
Bitte warten ..
Mitglied: wescraven07
05.12.2012 um 11:14 Uhr
na das sieht doch schon ganz gut aus. Ich versuch das mal und meld mich wieder. Danke Dir soweit.
Bitte warten ..
Ähnliche Inhalte
Microsoft Office
Fehlende Trennlinie bei beantworten einer Email - Outlook 2010
Frage von TjelvarMicrosoft Office4 Kommentare

Hallo zusammen, seit heute Früh hat eine Kollegin das Problem, dass Ihr die blau/graue Trennlinie im Outlook fehlt. Die ...

VB for Applications
Excel VBA: Horizontal Labels mit automatischer Breite
gelöst Frage von JuweeeVB for Applications5 Kommentare

Hallo, da mir das Thema mit den Überschriften in der Listbox so garnicht gefällt, möchte ich für jeden Spaltenüberschrift ...

HTML
Inhalt eines div-Tags in horizontal in der Mitte eines Browserfensters zentrieren
Frage von trallerHTML1 Kommentar

Hallo, ich setze einen allumschließenden div-Tag ein und möchte, dass dieser im Broweserfenster horizontal immer in der Mitte angezeigt ...

Microsoft Office
Outlook 2016 Horizontale Linie wird nicht angezeigt bei einer Strichstärke kleiner 1,5pt
gelöst Frage von Niggo55Microsoft Office4 Kommentare

Hallo zusammen, ich habe hier ein kurioses Problem: Wenn ich in Outlook 2016 eine horizontale Linie mit einer stärke ...

Neue Wissensbeiträge
Mac OS X

MacOS wo ist die Tilde ?

Tipp von Alchimedes vor 4 StundenMac OS X1 Kommentar

Hallo, ich hab eine MacOS qwertz Keyboard auf US Layout umgestellt da die Sonderzeichen besser erreichbar sind. Leider fehlt ...

Datenschutz

Weitere Informationen zum Sicherheitsproblem BeA

Information von Penny.Cilin vor 11 StundenDatenschutz

Im folgenden ein weiterer Bericht über die Sicherheitsprobleme von Bea. Fataler Konstruktionsfehler im besonderen elektronischen Anwaltspostfach Gruss Penny

Windows 10

Systemdienste behalten nach Win10 inplace-Upgrade nicht die ggf. modifizierte Startart bei

Tipp von DerWoWusste vor 13 StundenWindows 103 Kommentare

Stellt Euch vor, Ihr habt ein Win10 System und modifiziert dort die Startart von Systemdiensten. Zum Beispiel wollt Ihr ...

Microsoft Office

Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei

Anleitung von SarekHL vor 16 StundenMicrosoft Office17 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...

Heiß diskutierte Inhalte
Netzwerke
NTFS-Berechtigung
Frage von Daoudi1973Netzwerke23 Kommentare

Hallo zusammen und frohes neues Jahr (Sorry, ich bin spät dran) Meine Frage: 1- Ich habe einen Ordner im ...

Batch & Shell
AD-Abfrage in Batchdatei und Ergebnis als Variable verarbeiten
gelöst Frage von Winfried-HHBatch & Shell19 Kommentare

Hallo in die Runde! Ich habe eine Ergänzungsfrage zu einem alten Thread von mir. Ausgangslage ist die Batchdatei, die ...

Microsoft Office
Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei
Anleitung von SarekHLMicrosoft Office17 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...

Windows 10
Netbook erkennt Soundkarte nicht - keinerlei Info zum Hersteller und Modell vom Netbook und Hardware bekannt
Frage von fyrb38Windows 1017 Kommentare

Guten Tag, meine Schwester reist in einigen Wochen für ein paar Monate ins Ausland und hat sich dafür ein ...