Suche im Forum:
Suchen


Autor Nachricht
Beitrag10.10.2009 um 10:24 (UTC)    
Titel: CSS deisgn - Frage Navi

joa hallo erstmals.. ich habe eine kleine Frage.
Wie kann man das Navigationssystem oben haben?? Also wie das Homepage-baukasten.de navi ??

also mein code ist:
(der nicht obe, sondern unten links ist.)

#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;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} a{ color:#000000; text-decoration: none; font-size:18px;} a:hover { color: #000000; font-size: 16px; text-decoration: none;} a:link { color: #000000; font-size: 16px; text-decoration: none;} a:active { color: #000000; font-size: 16px; text-decoration: none;} a:visited { color: #000000; font-size: 16px; text-decoration: none;} img{ border:none;} body { background-color:#2b2b2b;} td[height="102"] { position:absolute; left:50%; margin-left:-384px; } *{ padding: 0; margin: 0; } #wowdesign{ margin: 0 auto; width: 1000px; height: 1000px; background-image:url(http://img.webme.com/pic/p/prison-industrie/jhjhj.jpg );} #content { position: absolute; left: 50%; top: 410px; margin-left:-240px; width: 455px; height: 635px; padding:10px; color: #000000; font-size:14px; background-color:#Transparent; background-image:url(); border: 0px solid #Trasparent; overflow:auto;} #sidebar_container{ position: absolute; left: 50%; top:455px; margin-left: 290px; width: 182px; height: 625px; background-color:#Transparent; background-image:url; border:0px solid #FFFFFF; color:#000000; overflow:auto;} #nav_container{ position: absolute; left: 50%; top:450px; margin-left: -460px; width: 175px; height:620px; border: 0px solid #000000; overflow:auto;} ul#nav{ width: 150px; padding: 0px; margin: 0px;} li.nav_element{ list-style-type: none; position: relative; padding:0px; width: 115px;} li.nav_element a{ display: block; width: 115px; padding:4px; font-weight: arial; text-decoration: none; text-align: left; color:#000000; background-color:#Transparent; border: 0px solid #000000;} li.nav_element a:hover{ color: #5a5a5a; #counter { position: absolute; left: 50%; top: 30px; margin-left: 300px; width: 150px; height: 20px; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;} #counter { position: absolute; left: 50%; top: 980px; margin-left: 320px; width: 150px; height:20px; color:#000000; font-size:13px; border: 0px solid #FFFFFF;}
Beitrag10.10.2009 um 11:04 (UTC)    
Titel:

Ich habe dir den Code mal ein wenig umgeschrieben Wink
Zitat:
#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;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} a{ color:#000000; text-decoration: none; font-size:18px;} a:hover { color: #000000; font-size: 16px; text-decoration: none;} a:link { color: #000000; font-size: 16px; text-decoration: none;} a:active { color: #000000; font-size: 16px; text-decoration: none;} a:visited { color: #000000; font-size: 16px; text-decoration: none;} img{ border:none;} body { background-color:#2b2b2b;} td[height="102"] { position:absolute; left:50%; margin-left:-384px; } *{ padding: 0; margin: 0; } #wowdesign{ margin: 0 auto; width: 1000px; height: 1000px; background-image:url(http://img.webme.com/pic/p/prison-industrie/jhjhj.jpg );} #content { position: absolute; left: 50%; top: 410px; margin-left:-240px; width: 455px; height: 635px; padding:10px; color: #000000; font-size:14px; background-color:#Transparent; background-image:url(); border: 0px solid #Trasparent; overflow:auto;} #sidebar_container{ position: absolute; left: 50%; top:455px; margin-left: 290px; width: 182px; height: 625px; background-color:#Transparent; background-image:url; border:0px solid #FFFFFF; color:#000000; overflow:auto;} #nav_container{ position: absolute; left: 50%; top:450px; margin-left: -460px; width: 175px; height:620px; border: 0px solid #000000; overflow:auto;} ul#nav{ width: 150px; padding: 0px; margin: 0px;} li.nav_element{display: inline; list-style-type: none; position: relative; padding:0px; width: 115px;} li.nav_element a{ width: 115px; padding:4px; font-weight: arial; text-decoration: none; text-align: left; color:#000000; background-color:#Transparent; border: 0px solid #000000;} li.nav_element a:hover{ color: #5a5a5a; #counter { position: absolute; left: 50%; top: 30px; margin-left: 300px; width: 150px; height: 20px; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;} #counter { position: absolute; left: 50%; top: 980px; margin-left: 320px; width: 150px; height:20px; color:#000000; font-size:13px; border: 0px solid #FFFFFF;}
Beim roten kannst du dann die ganze Navigation positionieren,
dazu einfach die Werte (Zahlen) ändern Wink

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag10.10.2009 um 11:21 (UTC)    
Titel:

Versuche es mal so:

#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;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

a{
color:#000000;
text-decoration: none;
font-size:18px;}

a:hover {
color: #000000;
font-size: 16px;
text-decoration: none;}

a:link {
color: #000000;
font-size: 16px;
text-decoration: none;}

a:active {
color: #000000;
font-size: 16px;
text-decoration: none;}
a:visited {
color: #000000;
font-size: 16px;
text-decoration: none;}

img{ border:none;}

body {
background-color:#2b2b2b;}

td[height="102"] {
position:absolute;
left:50%;
margin-left:-384px; }

*{ padding: 0; margin: 0; }

#wowdesign{
margin: 0 auto;
width: 1000px;
height: 1000px;
background-image:url(http://img.webme.com/pic/p/prison-industrie/jhjhj.jpg );}

#content {
position: absolute;
left: 50%; top: 410px;
margin-left:-240px;
width: 455px;
height: 635px;
padding:10px;
color: #000000;
font-size:14px;
background-color:#Transparent;
background-image:url();
border: 0px solid #Trasparent;
overflow:auto;}

#sidebar_container{
position: absolute;
left: 50%;
top:455px;
margin-left: 290px;
width: 182px;
height: 625px;
background-color:#Transparent;
background-image:url;
border:0px solid #FFFFFF;
color:#000000;
overflow:auto;}

#nav_container{
position: absolute;
left: 50%;
top:450px;
margin-left: -460px;
width: 175px;
height:620px;
border: 0px solid #000000;
overflow:auto;
display: inline; }

ul#nav{
width: 150px;
padding: 0px;
margin: 0px;
display: inline; }

li.nav_element{
list-style-type: none;
position: relative;
padding:0px;
width: 115px;
display: inline;
display: inline; }

li.nav_element a{
display: block;
width: 115px;
padding:4px;
font-weight: arial;
text-decoration: none;
text-align: left;
color:#000000;
background-color:#Transparent;
border: 0px solid #000000;
display: inline; }

li.nav_element a:hover{
color: #5a5a5a;
display: inline; }

#counter {
position: absolute;
left: 50%;
top: 30px;
margin-left: 300px;
width: 150px;
height: 20px;
color:#FFFFFF;
font-size:13px;
border: 1px solid #FFFFFF;}

Rot = Macht das es die Links wagrecht stehen.

Blau = Musst du endern zB. ( width:175px; ) in ( width800px; ) da die Navigation ja wagrecht soll sein.

Grün = Musst du endern zB. ( width:620px; ) in ( width:40px; ) da ja die Navigation nicht mehr nach unten geht muss es auch nicht mer so lang sein.

lG. Patrick
Beiträge der letzten Zeit anzeigen:   


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