| Autor |
Nachricht |
-
designtests
|
 23.06.2008 um 13:38 (UTC)
Titel: [erledigt] Navigation: padding und Abstand |
|
|
Hallo.
Freut mich, dass das Forum wieder geht 
Nun zu der Frage: Ich habe bei meiner Navigation ein Übersichts-Bild eingefügt und darunter sind links. Den padding (also Abstand von Links) habe ich auf 0px gestellt, da das Bild so am besten neben dem rand hinpasst. Nun sind die Navi-Links alle auch ganz links, jedoch möchte ich, dass die Links einen Abstand von 6px von links haben. Der padding vom Bild (0px) soll jedoch so bleiben.
Zum Abstand: Zwischen den Links sollte kein Abstand vorhanden sein. Weil wenn ich z.B. mit der Maus über die Links gehe, sehe ich, dass da ein Abstand ist, weil diese "Hand" bei der Maus weg ist und sie sollen fast keinen Abstand voneinander haben die Links. Also so wie hier.
Hoffe ihr habt mich verstanden.
mfg
Zuletzt bearbeitet von designtests am 24.06.2008, 15:20, insgesamt einmal bearbeitet
|
|
|
↑
|
|
 |
-
websiteaward-test
|
23.06.2008 um 14:01 (UTC)
Titel: |
|
|
So müsste das gehen:
Code:
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#below_content {display: none;}
#header_container{display: none;}
#sidebar_container{display: none;}
#nav_container{display: none;}
#counter{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
a{
color:#4A9AF6;
text-decoration: none;
font-size:13px;}
a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:link {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:active {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
.testdesign {
margin: auto;
width: 800px; }
body {
background-color:#E5E5E5;}
*{ padding: 0; margin: 0; }
#header{
width: 798px;
height:100px;
background-image:url(http://tortoga.de/daten/1213533273_header.png);
background-repeat: no-repeat;
background-color: #000;
color:#FFFFFF;
font-size:13px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #000;}
#content {
float: left;
width: 625px;
padding:10px;
color: #666666;
font-size:13px;
font-family:Tahoma, sans-serif;
background-color:#fff;
background-image:url();
background-repeat: no-repeat;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #000;}
#navi_container{
width: 160px;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 0px solid #000;
border-bottom: 0px solid #000;
background-image:url(http://www.google.de/intl/de_de/images/logo.gif);
background;}
ul#navi{
position:fixed;
top:160px;
width: 160px;
padding: 0px;
margin: 0px;}
li.navi_element{
list-style-type: none;
position: relative;
width: 142px;
height: 12px
}
li.navi_element a{
margin-left:6px;
margin-top:1px;
display: block;
width: 142px;
font-family:Arial, Verdana;
text-decoration: none;
text-align: left;
font-size: 12px;
color:#F2F2F2;
background-image:url(http://tortoga.de/daten/1213527555_btn_normal.gif);}
li.navi_element a:hover{
color: #000;
background-image:url(http://tortoga.de/daten/1213527589_btn_hover.gif);}
#footer{
float: left;
height: 25px;
width: 798px;
background-image:url(http://tortoga.de/daten/1213534319_footer.gif);
background-repeat: repeat;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
text-align: center;}
P.s.Das sind Links du musst also unter li:a arbeiten.
P.p.s Padding ist nur Innenabstand nicht Aussenabstand.(Das ist Margin) ______________ »Meine Seiten:
http://www.onlydesign.eu/
http://www.homepage-grafiken.eu/ |
|
|
↑
|
|
|
-
designtests
|
23.06.2008 um 14:33 (UTC)
Titel: |
|
|
Hey Danke! Hast mir echt weitergeholfen!! 
Könntest du noch das mit den Links eventuell klären? Also dass sie keinen Abstand zwischen sich haben. Wär echt nett..
mfg |
|
|
↑
|
|
|
-
websiteaward-test
|
23.06.2008 um 14:49 (UTC)
Titel: |
|
|
Also,der Grafik Link zur Hintergrundgrafik der Navigationslinks
befindet sich ja in dieser Klasse:
Code: li.navi_element a{
margin-left:6px;
margin-top:1px;
display: block;
width: 142px;
font-family:Arial, Verdana;
text-decoration: none;
text-align: left;
font-size: 12px;
color:#000000;}
Also musst du den Abstand auch für Diese bestimmen,statt für die Box.
Wenn du den Innenabstand der Box ändern wolltest,hättest du padding-left nehmen müssen.
Dann wärst du aber nicht drumherrumgekommen das Bild über der Navigation mitzuverscheiben.
Da aber jeder Navigationslink so aussieht,
Code: <li class="nav_element" id="nav_17"><a href="/17.htm" class="menu"><span>17</span></a></li>
,diese aber eigentlich unsichtbar wären,da du das ja durch Links ersetzt hast(Menü),bleibt dir nichts andere übrig,also in deinem Design,sonst geht das schon,als li:a zu nehmen,was ja einen Link darstellt.Da das aber nicht in sich selbst liegt,musst du natürlich den Aussenabstand bestimmen... ______________ »Meine Seiten:
http://www.onlydesign.eu/
http://www.homepage-grafiken.eu/ |
|
|
↑
|
|
|
-
designtests
|
23.06.2008 um 15:35 (UTC)
Titel: |
|
|
websiteaward-test hat Folgendes geschrieben: Also,der Grafik Link zur Hintergrundgrafik der Navigationslinks
befindet sich ja in dieser Klasse:
Code: li.navi_element a{
margin-left:6px;
margin-top:1px;
display: block;
width: 142px;
font-family:Arial, Verdana;
text-decoration: none;
text-align: left;
font-size: 12px;
color:#000000;}
?? Er steht doch bei #navi_container drin:
Code: #navi_container{
width: 160px;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 0px solid #000;
border-bottom: 0px solid #000;
background-image:url(http://www.google.de/intl/de_de/images/logo.gif);
background;}
Ich versteht das irgendwie nicht mit den Links, schau mal in deine PN-Box rein. |
|
|
↑
|
|
|
-
websiteaward-test
|
23.06.2008 um 15:43 (UTC)
Titel: |
|
|
Nein,ich meine nicht den Hintergrunde der Box sondern der Links,also wo sonst die Buttons sind.
Nur das du diesmal keinen Hintergrund drin hast,sondern einfach nur Textlinks.
Du musst immer nur mit padding oder margin beim link,also li:a arbeiten.
Weil di anderen Elemente wirken ja nur von aussen ein.
Also musste immer probieren,wenn du das noch nicht auswendig kannst.
Felix ______________ »Meine Seiten:
http://www.onlydesign.eu/
http://www.homepage-grafiken.eu/
Zuletzt bearbeitet von websiteaward-test am 23.06.2008, 16:49, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
-
websiteaward-test
|
23.06.2008 um 17:44 (UTC)
Titel: |
|
|
Habe dein problem jetzt auch für den Internet Explorer gelöst:
Code: #extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
#below_content {display: none;}
#header_container{display: none;}
#sidebar_container{display: none;}
#nav_container{display: none;}
#counter{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
a{
color:#4A9AF6;
text-decoration: none;
font-size:13px;}
a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:link {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:active {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
a:visited {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}
.testdesign {
margin: auto;
width: 800px; }
body {
background-color:#E5E5E5;}
*{ padding: 0; margin: 0; }
#header{
width: 798px;
height:100px;
background-image:url(http://tortoga.de/daten/1213533273_header.png);
background-repeat: no-repeat;
background-color: #000;
color:#FFFFFF;
font-size:13px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #000;}
#content {
float: left;
width: 625px;
padding:10px;
color: #666666;
font-size:13px;
font-family:Tahoma, sans-serif;
background-color:#fff;
background-image:url();
background-repeat: no-repeat;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 0px solid #000;}
#navi_container{
width: 160px;
border-top: 0px solid #000;
border-left: 1px solid #000;
border-right: 0px solid #000;
border-bottom: 0px solid #000;
background-image:url(http://www.google.de/intl/de_de/images/logo.gif);
background;}
ul#navi{
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
position:fixed;
top:160px;
width: 160px;
padding: 0px;
}
li { display: inline; }
li.navi_element{
list-style-type: none;
position: relative;
width: 142px;
height: 12px
margin-bottom:0em;
}
li.navi_element a{
display:block;
margin-left:6px;
margin-top:0em;
margin-bottom:0em;
width: 142px;
font-family:Arial, Verdana;
text-decoration: none;
text-align: left;
font-size: 12px;
color:#F2F2F2;
background-image:url(http://tortoga.de/daten/1213527555_btn_normal.gif);}
li.navi_element a:hover{
color: #000;
background-image:url(http://tortoga.de/daten/1213527589_btn_hover.gif);}
#footer{
float: left;
height: 25px;
width: 798px;
background-image:url(http://tortoga.de/daten/1213534319_footer.gif);
background-repeat: repeat;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
color: #000;
text-align: center;}
War ganz einfach ich Schwachkopf hatte das vergessen:
Das mir sowas passiert
Ok,viel Glück mit deiner Homepage.[/code] ______________ »Meine Seiten:
http://www.onlydesign.eu/
http://www.homepage-grafiken.eu/ |
|
|
↑
|
|
|
-
designtests
|
24.06.2008 um 14:19 (UTC)
Titel: |
|
|
Vielen Dank! [erledigt] |
|
|
↑
|
|
|
|
