Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag21.11.2009 um 19:51 (UTC)    
Titel: Navigation oben zentrieren

Hallo

Ich habe einen Code eingefügt der meine Navigation oben hinmacht.
Doch leider ist die ganze Navigation etwas nach links verschoben!
Wie kann ich nun das alles zentrieren???
Den die ganze Navigation möchte ich zentrieren die oben ist

Das ist mein CSS Code:

Code:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://i198.photobucket.com/albums/aa312/radon66/NaviButton2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 19px;
color: #000000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #000000;
background-image: url(http://i198.photobucket.com/albums/aa312/radon66/BUTTON/Button76.png);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 185px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Vorlagen</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://area4webmasters.de.tl/Normale-Buttons.htm">Normal Buttons</a></li>
<li><a href="http://area4webmasters.de.tl/Spezielle-Buttons.htm">Special Buttons</a></li>
<li><a href="http://area4webmasters.de.tl/Header.htm">Headers</a></li>
<li><a href="http://area4webmasters.de.tl/Banner.htm">Banners</a></li>
<li><a href="http://area4webmasters.de.tl/Balken.htm">Balken</a></li>
<li><a href="http://area4webmasters.de.tl/Trennlinien.htm">Trennlinien</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Grafiken</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://area4webmasters.de.tl/Welcome_Gifs.htm">Welcome-Grafiken</a></li>
<li><a href="http://area4webmasters.de.tl/New_Gifs.htm">New-Grafiken</a></li>
<li><a href="http://area4webmasters.de.tl/G.ae.stebuch_Gifs.htm">Guestbook-Gifs</a></li>
<li><a href="http://area4webmasters.de.tl/Bearbeitung_Gifs.htm">Construcion-Gifs</a></li>
<li><a href="http://area4webmasters.de.tl/Enter_Buttons.htm">Enter-Buttons</a></li>
<li><a href="">Hintergründe</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Codes</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://area4webmasters.de.tl/HTML_Codes.htm">HTML</a></li>
<li><a href="http://area4webmasters.de.tl/Marque_Codes.htm">Lauftexte</a></li>
<li><a href="http://area4webmasters.de.tl/Javascript.htm">Javascript</a></li>
<li><a href="http://area4webmasters.de.tl/HTML_Tools.htm">HTML-Tools</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Home</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://area4webmasters.de.tl/Startseite.htm">Startseite</a></li>
<li><a href="http://area4webmasters.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="http://area4webmasters.de.tl/Bestellung.htm">Bestellung</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Specials</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://area4webmasters.de.tl/Sport_Widgets.htm">Sport-Widgets</a></li>
<li><a href="http://area4webmasters.de.tl/Tutorials.htm">Tutorials</a></li>
</ul>
</li>
</div>




Über Hilfe würde ich mich freun:
ICH SUCHE EIN DESIGN!
HIER LIEST:

http://www.homepage-baukasten.de/forum/viewtopic.php?t=109505
______________
Bei mir gibts Vorlagen, Grafiken, Tutorials und Codes bis zum Ende Very Happy




Beitrag21.11.2009 um 23:00 (UTC)    
Titel:

Endere die ( left ) Werte.


Zitat:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://i198.photobucket.com/albums/aa312/radon66/NaviButton2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 19px;
color: #000000; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #000000;
background-image: url(http://i198.photobucket.com/albums/aa312/radon66/BUTTON/Button76.png);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 185px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Vorlagen</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://area4webmasters.de.tl/Normale-Buttons.htm">Normal Buttons</a></li>
<li><a href="http://area4webmasters.de.tl/Spezielle-Buttons.htm">Special Buttons</a></li>
<li><a href="http://area4webmasters.de.tl/Header.htm">Headers</a></li>
<li><a href="http://area4webmasters.de.tl/Banner.htm">Banners</a></li>
<li><a href="http://area4webmasters.de.tl/Balken.htm">Balken</a></li>
<li><a href="http://area4webmasters.de.tl/Trennlinien.htm">Trennlinien</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Grafiken</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://area4webmasters.de.tl/Welcome_Gifs.htm">Welcome-Grafiken</a></li>
<li><a href="http://area4webmasters.de.tl/New_Gifs.htm">New-Grafiken</a></li>
<li><a href="http://area4webmasters.de.tl/G.ae.stebuch_Gifs.htm">Guestbook-Gifs</a></li>
<li><a href="http://area4webmasters.de.tl/Bearbeitung_Gifs.htm">Construcion-Gifs</a></li>
<li><a href="http://area4webmasters.de.tl/Enter_Buttons.htm">Enter-Buttons</a></li>
<li><a href="">Hintergründe</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Codes</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://area4webmasters.de.tl/HTML_Codes.htm">HTML</a></li>
<li><a href="http://area4webmasters.de.tl/Marque_Codes.htm">Lauftexte</a></li>
<li><a href="http://area4webmasters.de.tl/Javascript.htm">Javascript</a></li>
<li><a href="http://area4webmasters.de.tl/HTML_Tools.htm">HTML-Tools</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Home</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://area4webmasters.de.tl/Startseite.htm">Startseite</a></li>
<li><a href="http://area4webmasters.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="http://area4webmasters.de.tl/Bestellung.htm">Bestellung</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Specials</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://area4webmasters.de.tl/Sport_Widgets.htm">Sport-Widgets</a></li>
<li><a href="http://area4webmasters.de.tl/Tutorials.htm">Tutorials</a></li>
</ul>
</li>
</div>
Beitrag22.11.2009 um 09:47 (UTC)    
Titel:

Ja vielen Dank.
Es funktioniert.
Ich weiss jetzt auch wie und wo ich die höhe bestimmen kann!

Aber ich weiss nicht wie ich das machen kann:
Wie kann ich die Schriftfarbe ändern der HAUPTMENÜS

Bei mir ist die Schrift Rot.
Aber die möchte ich auch gerne Schwarz haben auf den Hauptmenübuttons!
Leider ist sie rot wo kann ich sie ändern????

Wo kann ich die Buttons kleiner machen??? (von der Breite her)???

MFG
______________
Bei mir gibts Vorlagen, Grafiken, Tutorials und Codes bis zum Ende Very Happy




Beitrag22.11.2009 um 11:05 (UTC)    
Titel:

Zitat:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
z-index: 3;
top: 190px;
left: 100px;
width:850px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 160px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
color: #000000;
border: 0px solid #000000;
background-color: #000000;
background-image: url(http://i198.photobucket.com/albums/aa312/radon66/NaviButton2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 19px;
}

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #000000;
background-image: url(http://i198.photobucket.com/albums/aa312/radon66/BUTTON/Button76.png);
color: #000000; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 185px;
float: left; }

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a {
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #000000; }
//-->
</style>

<!-- Anfang des Scriptes -->
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Vorlagen</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://area4webmasters.de.tl/Normale-Buttons.htm">Normal Buttons</a></li>
<li><a href="http://area4webmasters.de.tl/Spezielle-Buttons.htm">Special Buttons</a></li>
<li><a href="http://area4webmasters.de.tl/Header.htm">Headers</a></li>
<li><a href="http://area4webmasters.de.tl/Banner.htm">Banners</a></li>
<li><a href="http://area4webmasters.de.tl/Balken.htm">Balken</a></li>
<li><a href="http://area4webmasters.de.tl/Trennlinien.htm">Trennlinien</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Grafiken</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="http://area4webmasters.de.tl/Welcome_Gifs.htm">Welcome-Grafiken</a></li>
<li><a href="http://area4webmasters.de.tl/New_Gifs.htm">New-Grafiken</a></li>
<li><a href="http://area4webmasters.de.tl/G.ae.stebuch_Gifs.htm">Guestbook-Gifs</a></li>
<li><a href="http://area4webmasters.de.tl/Bearbeitung_Gifs.htm">Construcion-Gifs</a></li>
<li><a href="http://area4webmasters.de.tl/Enter_Buttons.htm">Enter-Buttons</a></li>
<li><a href="">Hintergründe</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Codes</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="http://area4webmasters.de.tl/HTML_Codes.htm">HTML</a></li>
<li><a href="http://area4webmasters.de.tl/Marque_Codes.htm">Lauftexte</a></li>
<li><a href="http://area4webmasters.de.tl/Javascript.htm">Javascript</a></li>
<li><a href="http://area4webmasters.de.tl/HTML_Tools.htm">HTML-Tools</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Home</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="http://area4webmasters.de.tl/Startseite.htm">Startseite</a></li>
<li><a href="http://area4webmasters.de.tl/G.ae.stebuch.htm">Gästebuch</a></li>
<li><a href="http://area4webmasters.de.tl/Bestellung.htm">Bestellung</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Specials</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
<li><a href="http://area4webmasters.de.tl/Sport_Widgets.htm">Sport-Widgets</a></li>
<li><a href="http://area4webmasters.de.tl/Tutorials.htm">Tutorials</a></li>
</ul>
</li>
</div>


Das blaue kannst du endern, entweder grösser oder kleiner jenachdem wie du die Button Breite haben willst.


Das mit der Farbe verstehe ich nicht egt solle es schwarz sein, ich habe das Coolmenu mal bei meiner Test seite eingefügt und die schrift war schwarz.

color: #000000; Das ist schwarz und dass steht auch im Code.

Mach es mal so:

Arrow Kopier denn Code
Arrow Lösch denn Code beim Quelltext
Arrow Speichern
Arrow Wieder bearbeiten
Arrow Code wieder einfügen

Dann sollte es egt richtig sein.
Beiträge der letzten Zeit anzeigen:   


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