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

Abstand zwischen Navigationslinks-Buttons immer gleich, wie?

Mitglied: ischbindebaetmaen

ischbindebaetmaen (Level 1) - Jetzt verbinden

29.08.2012 um 13:17 Uhr, 5178 Aufrufe, 10 Kommentare

Moin Leude,

folgendes Problem:

Habe ne Ebene im Frontpage, in der eine Navigatiosn eingebaut seinsoll. Allerdings nichts aufweniges sondern nur Textlinks.

Die Ebene ist 800px breit, es sind 6 Navigationslinks, die einzelnen Links sind mit einer Trennlinie getrennt. Natürlich ist der Text unterschiedlich lang. Wie bekomm ich das hin, dass der Abstand zwischen den einzelnen Navilinks immer gelich und symetrisch ist, nichts überlappt?



Freu mich auf Eure Tips

Greetz
De Bätmän
Mitglied: d4shoerncheN
29.08.2012 um 13:29 Uhr
Hallo,

lad es mal bitte hoch und poste den Link. Generell kannst du das alles über CSS steuern, je nachdem wie fit du in den Bereichen bist.

Gruß
Bitte warten ..
Mitglied: Arano
29.08.2012, aktualisiert um 13:32 Uhr
Hallo ischbindebaetmaen,

Ich habe keine Ahnung von Frontpage, aber von HTML/CSS.
Mit CSS4you - margin kannst du den __äußeren__ Abstand bestimmen, den ein Element zu einem anderem einhalten soll.

Für ALLE Links könnte das etwa so funktionieren:
01.
a { 
02.
    margin:0 50px; 
03.
}
Damit bleibt auf der linken UND rechten Seite des Links immer eine "freie Lücke" von 50px breite.


~Arano
Bitte warten ..
Mitglied: ischbindebaetmaen
29.08.2012 um 13:53 Uhr
Also hier habt ihr mal den Quell Code, hoffe Ihr koöönt so was damit anfangen:

<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Testseite</title>
</head>

<body>

<div style="position: absolute; width: 800; height: 100px; z-index: 1; left: 440; " id="navi">
<div style="position: absolute; width: auto; height: 11px; z-index: 1; top: 57px; left: -1px" id="link1">
<p align="center"><font face="Franklin Gothic Book">link1link1link1link1link</font></div>
<div style="position: absolute; width: 57px; height: 11px; z-index: 1; top: 57px; left: 587px" id="link6">
<p align="center"><font face="Franklin Gothic Book">link6</font></div>
<div style="position: absolute; width: 16.36; height: 39; z-index: 4; left: 161px; top: 39px" id="trennlinie">
&nbsp;</div>
<div style="position: absolute; width: 31px; height: 11px; z-index: 1; top: 57px; left: 555px" id="link5">
<p align="center">
<font face="Franklin Gothic Book">5</font></div>
<div style="position: absolute; width: 129.16; height: 11px; z-index: 1; top: 57px; left: 425px" id="link4">
<p align="center"><font face="Franklin Gothic Book">link4</font></div>
<div style="position: absolute; width: 129.16; height: 11px; z-index: 1; top: 57px; left: 297px" id="link3">
<p align="center"><font face="Franklin Gothic Book">link3link3</font></div>
<div style="position: absolute; width: 129.16; height: 11px; z-index: 1; top: 57px; left: 167px" id="link2">
<p align="center"><font face="Franklin Gothic Book">link2link2link2</font></div>
<p><br>
&nbsp;</div>

</body>

</html>
Bitte warten ..
Mitglied: d4shoerncheN
29.08.2012, aktualisiert um 14:54 Uhr
Hallo,

habe deinen Quelltext mal ein wenig aufgeräumt. Ich würde dir empfehlen, eine separate CSS-Datei zu erstellen. Eingebunden ist diese schon, müsstest nur <!-- und --> rausnehmen und den gesamten <style>-Bereich. Den Inhalt dieses Bereiches dann in die separate CSS-Datei. Alle weiteren Formatierungen bitte dann in der CSS-Datei speichern.

01.
<html> 
02.
    <head> 
03.
        <meta http-equiv="Content-Language" content="de" /> 
04.
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> 
05.
        <!--   CSS am besten in externe Datei auslagern 
06.
        <link href="style.css" type="text/css" rel="stylesheet" /> 
07.
        --> 
08.
        <title>Testseite</title> 
09.
        <style type="text/css"> 
10.
            #navi { 
11.
               width: 800px; 
12.
               height: 50px; 
13.
               background-color: #000; 
14.
15.
           .links a{ 
16.
               color: #FFF; 
17.
               margin: 10px 50px; 
18.
               float: left; 
19.
20.
        </style> 
21.
    </head> 
22.
    <body> 
23.
        <div id="navi"> 
24.
            <div class="links"><a href="#">Link 1</a></div> 
25.
            <div class="links"><a href="#">Link 2</a></div> 
26.
            <div class="links"><a href="#">Link 3</a></div> 
27.
            <div class="links"><a href="#">Link 4</a></div> 
28.
            <div class="links"><a href="#">Link 5</a></div> 
29.
        </div> 
30.
    </body> 
31.
</html>
Bitte warten ..
Mitglied: Arano
29.08.2012, aktualisiert um 14:41 Uhr
Hi !

Das ist das Ergebnis von Frontpage ? oO

Hand geschrieben ist das einiges weniger (kann weniger sein), allerdings weiss ich nicht ob Frontpage das überhaupt einlesen und weiterverarbeiten kann...:
01.
<html> 
02.
  <head> 
03.
    <title>Ich mag Frontpage nicht :-P</title> 
04.
    <style type="text/css"> 
05.
      <!-- 
06.
        a { display:inline-block; 
07.
            margin:60px   /* abstand noch oben (innerhalb des DIVs = oberkannte DIV) */ 
08.
                   36px   /* abstand nach links*/ 
09.
                   0      /* abstand nach unten */ 
10.
                   36px;  /* abstand nach rechts */ 
11.
                          /* das sind MINDESTabstände !! */ 
12.
            /** 
13.
             *  Der Abstand links UND rechts müssen syncron bleiben, 
14.
             *  sonst verschiebt sich die Mitte... 
15.
             *  ( Das "|" zwischen den Links rutscht in eine der beiden Richtungen) 
16.
             */ 
17.
18.
      --> 
19.
    </style> 
20.
  </head> 
21.
  <body> 
22.
   
23.
   
24.
  <div style="position: absolute; width: 800; height: 100px; z-index: 1; left: 440; border:1px solid #000000;" id="navi"> 
25.
    <a href="">link 1</a> | 
26.
    <a href="">link 2</a> | 
27.
    <a href="">link 3</a> | 
28.
    <a href="">link 4</a> | 
29.
    <a href="">link 5</a> | 
30.
    <a href="">link 6</a> 
31.
  </div> 
32.
   
33.
   
34.
  </body> 
35.
</html>

~Arano

Edit:
Na wie du siehst haben d4shoerncheN und ich das recht ähnlich gelöst ;)

@d4shoerncheN
Tzä ! Schon wieder bis du schneller gewesen...

Edit 2:
UPS, da fällt mir etwas wichtiges im Quelltext von d4shoerncheN auf !
Eine ID ist ein eindeutiger Identifizierer, er darf also nur ein einziges mal vorkommen - und nicht sechs mal ! (id="link")
Bitte warten ..
Mitglied: d4shoerncheN
29.08.2012, aktualisiert um 14:58 Uhr
Zitat von Arano:
@d4shoerncheN
Tzä ! Schon wieder bis du schneller gewesen...
Lach Also wenn Frontpage das da oben zusammengeschustert hat, sollte man Frontpage den Alkohol verbieten ^^ das ist ja grausig :P

Edit
@Arano bzgl. dem <div id="links"> hast du natürlich Recht. Es sollte eigentlich auch <div class="links"> werden und ist oben auch editiert. Danke für den Hinweis, sollte mir meinen Quelltext vorher noch mal angucken

Gruß
Bitte warten ..
Mitglied: d4shoerncheN
29.08.2012 um 14:51 Uhr
Hallo, @ischbindebaetmaen.

Habe hier nun noch einmal beide Varianten zusammengeworfen von Arano und mir. So könntest du es lösen.

index.html
01.
<html> 
02.
    <head> 
03.
        <title>Ich mag Frontpage nicht :-P</title> 
04.
        <link href="style.css" type="text/css" rel="stylesheet" /> 
05.
    </head> 
06.
    <body> 
07.
        <div id="navi"> 
08.
            <a href="#">link 1</a> | 
09.
            <a href="#">link 2</a> | 
10.
            <a href="#">link 3</a> | 
11.
            <a href="#">link 4</a> | 
12.
            <a href="#">link 5</a> | 
13.
            <a href="#">link 6</a> 
14.
        </div> 
15.
    </body> 
16.
</html>
style.css
01.
#navi { 
02.
    position: absolute; 
03.
    width: 800px; 
04.
    height: 100px; 
05.
    z-index: 1; 
06.
    left: 440px; 
07.
    border:1px solid #000000; 
08.
09.
a { display:inline-block; 
10.
            margin:60px   /* abstand noch oben (innerhalb des DIVs = oberkannte DIV) */ 
11.
                   36px   /* abstand nach links*/ 
12.
                   0      /* abstand nach unten */ 
13.
                   36px;  /* abstand nach rechts */ 
14.
                          /* das sind MINDESTabstände !! */ 
15.
            /** 
16.
             *  Der Abstand links UND rechts müssen syncron bleiben, 
17.
             *  sonst verschiebt sich die Mitte... 
18.
             *  ( Das "|" zwischen den Links rutscht in eine der beiden Richtungen) 
19.
             */ 
20.
        }
Gruß
@d4shoerncheN
Bitte warten ..
Mitglied: ischbindebaetmaen
29.08.2012 um 16:48 Uhr
das scheint so ganz gut so funktionieren. Wenn ich jetzt statt diesem normalen Strich eine Trennlinie aus Photoshop einfügen will, wie muss ich dass img in diesen Code einbinden?
Bitte warten ..
Mitglied: Arano
29.08.2012, aktualisiert um 17:42 Uhr
Hallöchen,

anstelle von "|" schreibst du dann "<img src="pfad/zur/grafik.jpg">"
selfHTML - <img>-Tag


~Aramo
Bitte warten ..
Mitglied: d4shoerncheN
29.08.2012, aktualisiert um 21:34 Uhr
Hallo

Oder aber du setzt hinter jedem Link ein Hintergrundsbild.

z.B. in der CSS mit background-image: url(./images/trennlinie.png);

Hat einfach den Vorteil, dass dein Quelltext von der Hauptseite übersichtlich bleibt und die Formatierungen (wie es gewünscht ist) weiterhin in der CSS-Datei hinterlegt werden. Und du musst bei einer Änderung der Trennlinie nicht fünf Stellen, sondern nur noch eine Stelle editieren.

Könnte ungefähr so aussehen:

index.html
01.
<!DOCTYPE HTML> 
02.
<html> 
03.
<head> 
04.
<meta charset="utf-8"> 
05.
<title>Frontpage ist immer noch doof.</title> 
06.
<link href="style.css" rel="stylesheet" type="text/css"> 
07.
</head> 
08.
 
09.
<body> 
10.
	<div id="content"> 
11.
    	<div id="navi"> 
12.
        <div class="menuepunkt"><a href="#">Link 1</a></div> 
13.
        <div class="menuepunkt"><a href="#">Link 2</a></div> 
14.
        <div class="menuepunkt"><a href="#">Link 3</a></div> 
15.
        <div class="menuepunkt"><a href="#">Link 4</a></div> 
16.
        </div> 
17.
    </div> 
18.
</body> 
19.
</html>
style.css
01.
@charset "utf-8"; 
02.
body { 
03.
	background-color: #339; 
04.
05.
 
06.
#content { 
07.
	float: left; 
08.
	position: relative; 
09.
	width: 800px; 
10.
	height: 500px; 
11.
	text-align: center; 
12.
13.
 
14.
#navi { 
15.
	float: left; 
16.
	position: relative; 
17.
    width: 800px; 
18.
    height: 30px; 
19.
20.
.menuepunkt a { 
21.
	background-image: url(trennlinie.png); 
22.
	float: left; 
23.
	position: relative; 
24.
	display: block-inline; 
25.
	color: #000; 
26.
	width: 100px; 
27.
	height: 20px; 
28.
	top: 5px; 
29.
	text-decoration: none; 
30.
	color: #FFF; 
31.
	 
32.
}
Gruß
Bitte warten ..
Ähnliche Inhalte
Hardware
Abstand Server - USV
gelöst Frage von RG2525Hardware2 Kommentare

Hallo, In einem Serverschrank liegen ganz unten 2 Stück USV und gleich darüber ein Server mit 9x 2,5 HDs. ...

Netzwerkmanagement

Verliere Netzlaufwerke in unregelmäßigen abständen

Frage von malkieNetzwerkmanagement11 Kommentare

Hallo, wir haben seit einigen Woche folgendes Problem beim Kunden. Folgende Infrastruktur 1 Server 2012 Synology 4 Windows 7 ...

Windows 7

Standby-Energiespar Button und Herunterfahren Button

Frage von hgshgsWindows 73 Kommentare

Hallo ihr Administratoren, ich bin neu hier und sage einfach mal hallo. :-) Folgendes Problem: Ich würde gerne unter ...

Windows 10

Abstand Windows Festplattenanzeige

gelöst Frage von WaishonWindows 106 Kommentare

Moin zusammen, ich habe heute Windows 10 frisch installiert. Es läuft auch soweit alles. Jetzt habe ich allerdings ein ...

Neue Wissensbeiträge
Internet

Datendealing im WWW Tracking Methoden immer brutaler

Information von sabines vor 2 StundenInternet

Interessanter Artikel zum Thema Tracking im WWW und die immer "besseren" Methoden des Trackings. Professor Arvind Narayanan (Princeton-Universität) betreibt ...

Erkennung und -Abwehr

Ups: Einfaches Nullzeichen hebelte den Anti-Malware-Schutzt in Windows 10 aus

Information von kgborn vor 14 StundenErkennung und -Abwehr

Windows 10 ist das sicherste Windows aller Zeiten, wie Microsoft betont. Insidern ist aber klar, das es da Lücken, ...

Windows 10

Windows 10 on ARM: von Microsoft entfernte Info - Klartext, was nicht geht

Information von kgborn vor 16 StundenWindows 10

Windows 10 on ARM ist ja eine neue Variante, die Microsoft im Verbund mit Geräteherstellern am Markt etablieren will. ...

Microsoft
TV-Tipp: Das Microsoft-Dilemma
Information von kgborn vor 17 StundenMicrosoft10 Kommentare

Aktuell gibt es in Behörden und in Firmen eine fatale Abhängigkeit von Microsoft und dessen Produkten. Planlos agieren die ...

Heiß diskutierte Inhalte
Windows 10
Windows 10 (1709) Tastur und Maus wieder einschalten?
Frage von LochkartenstanzerWindows 1026 Kommentare

Moin, Ich habe von einem Kunden einen Win10-Rechner bekommen, bei dem weder Tastatur noch Maus geht. Die Hardware funktioniert ...

Server
Route-Befehl Unterstützung (unter CMD)
gelöst Frage von FKRR56Server17 Kommentare

Guten Tag , i.M. habe ich Probleme über den CMD-Route-Befehl ein Routing auf einen entfernten Server zuzulassen. Der Server ...

Firewall
RB2011 Firewall Rule eine bestimmte Mac oder IP Adresse nicht zu blockieren
Frage von lightmanFirewall15 Kommentare

Hallo liebes Forum mit ihren Spezialisten. Ich habe meine Firewall so konfiguriert das kein Endgerät ohne meine Speziellen Erlaubnis ...

Humor (lol)
Was könnte man mit einem Server machen? Idee gesucht
Frage von 2SeitenHumor (lol)15 Kommentare

Hey Zusammen Ich habe einen alten HP G2 Rackserver zu Hause rumliegen. 28GB Ram, 1xAMD Prozi mit etwa 2GHz. ...