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?

Frage Entwicklung Webentwicklung

Mitglied: ischbindebaetmaen

ischbindebaetmaen (Level 1) - Jetzt verbinden

29.08.2012 um 13:17 Uhr, 5096 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 ...

Microsoft Office
Word 2007 verschwindet in unregelmäßigen Abständen
Frage von diwaffmMicrosoft Office4 Kommentare

Hi Leute, wir haben hier einen PC unter Windows 7, der vom SBS mit Updates versorgt wird und auch ...

Neue Wissensbeiträge
Linux

Limux-Ende in München: Wie ein Linux Projekt unter Ausschluss der Öffentlichkeit zerstört wurde

Information von Frank vor 1 StundeLinux6 Kommentare

Mein persönlicher Kommentar zum Thema "Limux-Ende". Die SPD-Politikerin Anne Hübner hat die Richtung von München ganz klar definiert: "Wir ...

Batch & Shell

Open Object Rexx: Eine mittlerweile fast vergessene Skriptsprache aus dem Mainframebereich

Information von Penny.Cilin vor 1 TagBatch & Shell9 Kommentare

Ich kann mich noch sehr gut an diese Skriptsprache erinnern und nutze diese auch heute ab und an noch. ...

Humor (lol)

"gimme gimme gimme": Automatischer Test stolpert über Easter Egg im man-Tool

Information von Penny.Cilin vor 1 TagHumor (lol)6 Kommentare

Interessant, was man so alles als Easter Egg implementiert. Ist schon wieder Ostern? "gimme gimme gimme": Automatischer Test stolpert ...

MikroTik RouterOS

Mikrotik - Lets Encrypt Zertifikate mit MetaROUTER Instanz auf dem Router erzeugen

Anleitung von colinardo vor 1 TagMikroTik RouterOS8 Kommentare

Einleitung Folgende Anleitung ist aus der Lage heraus entstanden das ein Kunde auf seinem Mikrotik sein Hotspot Captive Portal ...

Heiß diskutierte Inhalte
Router & Routing
Zwei Netzwerke erstellen
Frage von bunteblumeRouter & Routing13 Kommentare

Hallo Zusammen, Ich möchte gerne ein backup von einem bestimmten Folder welcher auf dem Server regelmässig synchronisiert wird auf ...

Off Topic
Fachkräftemangel in Deutschland? - Talentschmiede schreibt alle 2 Tage die gleichen Stellen aus
Frage von Penny.CilinOff Topic12 Kommentare

Hallo, haben wir in Deutschland Fachkräftemangel? Die Talentschmiede schreibt gefühlt alle zwei Tage dieselben Stellen aus. Und das schon ...

Microsoft Office
Outlook Cache Mode Frage
Frage von GwaihirMicrosoft Office11 Kommentare

Hallo zusammen, bin gerade neu in der Firma und lerne hier einige neue Dinge kennen. Zum Beispiel, dass die ...

Windows Server
Windows Store Apps
gelöst Frage von PeterleBWindows Server11 Kommentare

Gibt es einen Weg, auf Windows Server 2016 Windows Store Apps wie zum Beispiel die HP Smart App zu ...