Suche im Forum:
Suchen


Autor Nachricht
Beitrag09.12.2009 um 11:24 (UTC)    
Titel: CSS: Navilinks formatieren

hallöle..
ich habe folgendes problem bzw. folgende frage:
ich benutze für die navi folgenden code:

Code:
/* Feld Navigation */
#nav_container {
position: absolute;
top:150px;
width: 150px;
margin-left:5px;
border:1px solid #000000;}

/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:5px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 150px;
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
padding-left:5px;
color:#C6BA8A;
background-color:;
background-image:url();
border: 1px solid #C6BA8A;}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color: #2D261C;
background-color:#C6BA8A;
background-image:url();
border: 1px solid #FFFFFF;}


nun ist es aber so, dass wie man hier sieht: KLICK MICH die lins an sich nen stück eingerückt stehen. Genau das soll aber so nicht sein.
hat jemand nen Plan woran es liegt?

danke im vorraus.
Beitrag09.12.2009 um 11:30 (UTC)    
Titel:

Eventuell könnte es an dem blau markierten liegen, der Innen abstand ist vielleicht zu groß zum Rand des Naviconatiners hin, ändre doch mal den px Wert und vielleicht klappt es dann.

Zitat:
/* Feld Navigation */
#nav_container {
position: absolute;
top:150px;
width: 150px;
margin-left:5px;
border:1px solid #000000;}

/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:5px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 150px;
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
padding-left:5px;
color:#C6BA8A;
background-color:;
background-image:url();
border: 1px solid #C6BA8A;}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color: #2D261C;
background-color:#C6BA8A;
background-image:url();
border: 1px solid #FFFFFF;}

______________



www.gidf.de

Ice Blue&CSS-Design
Beitrag09.12.2009 um 11:39 (UTC)    
Titel:

die idee hatte ich auch schon. da ändert sich nur der abstand von der schrift zu dem rahmen( also der "goldene" )
aber danke für die antwort Very Happy

ich glaube das eingerückte sind auch mehr als 5 px.
kann es vllt daranliegen, dass es ja eine art "liste" ist? wenn ich alles entferne sind ja da die schwarzen kreise vor jedem punkt. Question Exclamation
Beitrag09.12.2009 um 11:40 (UTC)    
Titel:

Aso am besten wäre es, wenn ich den kompletten code hätte, dann könnte ich ausprobieren.

Liebe Grüße.
______________



www.gidf.de

Ice Blue&CSS-Design
Beitrag09.12.2009 um 11:43 (UTC)    
Titel:

nullo problemo


Code:
-->
</style>
<table align="center" cellpadding=0 cellspacing=0 border=0><tr><td align="center">
<style type="text/css">
<!--

/* Felder die wir nicht benötigen */
h1#header {display:none;}
h2#title {display:none;}
#sidebar_heading{display:none;}
#counter{display:none;}
#nav_heading{display:none;}

/* Feld Navigation */
#nav_container {
position: absolute;
top:150px;
width: 150px;
margin-left:5px;
border:1px solid #000000;}

/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:5px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 150px;
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;

color:#C6BA8A;
background-color:;
background-image:url();
border: 1px solid #C6BA8A;}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color: #2D261C;
background-color:#C6BA8A;
background-image:url();
border: 1px solid #FFFFFF;}

#content {
margin-top: 150px;
margin-left:220px;
width: 550px;
padding-left: 10px;
padding-right: 10px;
height:auto;
color:#000000;
font-size:13px;
font-family:arial;
text-align:left;
background-color:;
background-image:url(http://i45.tinypic.com/2dbs7pk.jpg);
border: 1px solid #000000;}

/* Linkfarben im Textfeld content */
#content a{
color:#000080;}

#footer{
padding-left: 10px;
padding-right: 10px;
margin-left:220px;
width: 550px;
height:auto;
color:#FFFFFF;
font-size:13px;
font-family:arial;
text-align:left;
background-color:#000000;
background-image:url();
border: 1px solid #000000;}
 

#sidebar_container {
position: absolute;
top: 450px;
margin-left: 10px;
width: 200px;
height: 180px;
line-height:9px;
color: #C6BA8A;
font-size: 12px;
font-family: arial;
overflow: auto;
border: 1px solid #000000;}

#header{
position: absolute;
padding-left: 10px;
padding-right: 10px;
top: 150px;
margin-left:220px;
width: 550px;
height: 63px;
color: #000000;
font-size: 12px;
font-family: arial;
text-align: center;
border: 1px solid #000000;}

#box{
position: absolute;
top: 650px;
margin-left: 10px;
width: 200px;
height: 180px;
color: #C6BA8A;
font-size: 12px;
font-family: arial;
overflow: auto;
text-align:left;
border: 1px solid #000000;}


is ja im moment bei mir auch nur probieren xD will nen neues design erstellen -> meine hauptseite:
KLICK MICH
Beitrag09.12.2009 um 11:50 (UTC)    
Titel:

So, habe mal probiert, schau doch mal bitte auf

www.mytestdesign.de.tl

dort ist das Ergebnis zu sehen. Den code den ich dort verwendet habe, steht hier drunter:

Zitat:
-->
</style>
<table align="center" cellpadding=0 cellspacing=0 border=0><tr><td align="center">
<style type="text/css">
<!--

/* Felder die wir nicht benötigen */
h1#header {display:none;}
h2#title {display:none;}
#sidebar_heading{display:none;}
#counter{display:none;}
#nav_heading{display:none;}

/* Feld Navigation */
#nav_container {
position: absolute;
top:150px;
width: 150px;
margin-left:5px;
border:1px solid #000000;}

/* Hintergrund Navi-Buttons */
li.nav_element {
list-style-type: none;
position: relative;
margin-bottom:5px;}

/* Navi-Links */
li.nav_element a {
display: block;
width: 150px;
font-family:arial;
font-size:13px;
text-decoration: none;
text-align: left;
margin-left:-45px;

color:#C6BA8A;
background-color:;
background-image:url();
border: 1px solid #C6BA8A;}

/* Hover-Effekt Navi-Links */
li.nav_element a:hover{
color: #2D261C;
background-color:#C6BA8A;
background-image:url();
border: 1px solid #FFFFFF;}

#content {
margin-top: 150px;
margin-left:220px;
width: 550px;
padding-left: 10px;
padding-right: 10px;
height:auto;
color:#000000;
font-size:13px;
font-family:arial;
text-align:left;
background-color:;
background-image:url(http://i45.tinypic.com/2dbs7pk.jpg);
border: 1px solid #000000;}

/* Linkfarben im Textfeld content */
#content a{
color:#000080;}

#footer{
padding-left: 10px;
padding-right: 10px;
margin-left:220px;
width: 550px;
height:auto;
color:#FFFFFF;
font-size:13px;
font-family:arial;
text-align:left;
background-color:#000000;
background-image:url();
border: 1px solid #000000;}


#sidebar_container {
position: absolute;
top: 450px;
margin-left: 10px;
width: 200px;
height: 180px;
line-height:9px;
color: #C6BA8A;
font-size: 12px;
font-family: arial;
overflow: auto;
border: 1px solid #000000;}

#header{
position: absolute;
padding-left: 10px;
padding-right: 10px;
top: 150px;
margin-left:220px;
width: 550px;
height: 63px;
color: #000000;
font-size: 12px;
font-family: arial;
text-align: center;
border: 1px solid #000000;}

#box{
position: absolute;
top: 650px;
margin-left: 10px;
width: 200px;
height: 180px;
color: #C6BA8A;
font-size: 12px;
font-family: arial;
overflow: auto;
text-align:left;
border: 1px solid #000000;}


Liebe Grüße.
______________



www.gidf.de

Ice Blue&CSS-Design
Beitrag09.12.2009 um 11:53 (UTC)    
Titel:

danke danke Very Happy da hät ick zwar auch selber drauf kommen könne, aber naja xD
funzt auf jeden fall Very Happy top..

warum auch immer das sich verschiebt Very Happy
Beitrag09.12.2009 um 11:56 (UTC)    
Titel:

"margin" legt den Aussenabstand der Navigationsbutton fest.

margin-left
Für den Außenabstand nach links. Wird geschrieben: margin-left:Wert;.

Liebe Grüße.
______________



www.gidf.de

Ice Blue&CSS-Design
Beitrag09.12.2009 um 11:57 (UTC)    
Titel:

is mir klar Very Happy nur gab es die angabe ja nicht ..
hab ja quasie das jetz eingefügt Very Happy
Beitrag09.12.2009 um 11:58 (UTC)    
Titel:

Hauptsache es funktioniert jetzt wie gewünscht Very Happy

Liebe Grüße.
______________



www.gidf.de

Ice Blue&CSS-Design


Zuletzt bearbeitet von meinepersoenlicheseite am 09.12.2009, 12:58, insgesamt einmal bearbeitet
Beitrag09.12.2009 um 15:41 (UTC)    
Titel:

da hast du recht Very Happy danke auf jeden fall nochmal.Very Happy
______________
||__Pure-gfx__||
{"..Design your own world.."}
!!!! AUFTRÄGE/WÜNSCHE BITTE NICHT PER PM! Bitte Über das Kontaktformular!!!!
Support gebe ich per PM!



Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de