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

Abstand zwischen Navigationslinks-Buttons immer gleich, wie?

Frage Entwicklung Webentwicklung

Mitglied: ischbindebaetmaen

ischbindebaetmaen (Level 1) - Jetzt verbinden

29.08.2012 um 13:17 Uhr, 4765 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 ..
Neuester Wissensbeitrag
Humor (lol)

Linkliste für Adventskalender

(3)

Information von nikoatit zum Thema Humor (lol) ...

Ähnliche Inhalte
Humor (lol)
Der Unterschied zwischen USA und USB

Link von BirdyB zum Thema Humor (lol) ...

Windows Server
AD Replikation zwischen untergeordneten Domäne zwingend? (1)

Frage von Gien-app zum Thema Windows Server ...

Microsoft Office
Button für Wechseln zwischen den Tabellenblättern (6)

Frage von lupi1989 zum Thema Microsoft Office ...

Benchmarks
gelöst Unterschied zwischen +12V und 12V Netzteil für Festplatte (9)

Frage von FelixW zum Thema Benchmarks ...

Heiß diskutierte Inhalte
Windows Server
DHCP Server switchen (22)

Frage von M.Marz zum Thema Windows Server ...

Hardware
gelöst Negative Erfahrungen LAN-Karten (19)

Frage von MegaGiga zum Thema Hardware ...

SAN, NAS, DAS
gelöst HP-Proliant Microserver Betriebssystem (14)

Frage von Yannosch zum Thema SAN, NAS, DAS ...

Grafikkarten & Monitore
Win 10 Grafikkarte Crash von Software? (13)

Frage von Marabunta zum Thema Grafikkarten & Monitore ...