Suche im Forum:
Suchen


Autor Nachricht
Beitrag11.05.2009 um 17:08 (UTC)    
Titel: Buttons einfügen in normale CSS-Navi - Code gesucht

Edit:

Ich habe jetzt noch einmal eine Frage. Undzwar eine andere. Wie kann ich in meine Navi normale Buttons (Hover-Effekt) etc. in CSS einfügen ?

Beim Inhalt der ersten Extra-Box habe ich folgendes stehen:

<div id="sidebar_container"></div>

<div id="side"></div>

<div id="sidebar_links">
<div align="left"><br />
<font face="Arial"><strong><font size="2"><br /></font></strong></font><br />
</div>
</div>

</div>
<div id="sidebar_links"><div align="left">
<div align="center"><strong><br /><a href="http://tierpension-witting.de.tl/Willkommen.htm"><div align="center"><strong><font size="2"><font color="#000000">Willkommen</font></font></strong></div></a></strong></div>

<strong><a href="http://arabras-schulhilfswerk.de.tl/Brasilien.htm">BRASILIEN:</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Musik.htm">- Musik</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Geographische-Lage.htm">- Geographische Lage</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Verein.htm">Verein</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/-Ue-ber-uns.htm"> Über uns</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Engagement.htm">ENGAGEMENT:</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Menno-Simons.htm">-Escola Menno Simons</strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Cidade-Leer.htm">-Escola Cidade Leer</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Comunidade-Loga.htm">-Escola Comunidade Loga</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Municipal-Arabras.htm">-Escola Municipal Arabras</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Municipal-Agricola.htm">-Escola Municipal Agricola</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/-Voluntarios-_-freiwillige-Helfer.htm">-Voluntarios </a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Agroecologia-Pequizeiro.htm">-Escola Agroecologia Pequizeiro</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Lesestoff.htm">Lesestoff</a></strong><br /><br />
<strong><a href=""></a></strong></div></div>
<div id="designby"><font size="1"><a href=""></a></font></div>

Bei Text unter dem Design habe ich dies stehen:

<style type="text/css" media="screen">
<!--
body
{
font-family: Arial, sans-serif;
font-size: 12px;
overflow: auto;
padding: 0px;
margin: 0px;
text-align: center;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}


li a
{
padding-right: 0px;padding-top: 13px;
}




div.menu
{
position: absolute;
z-index: 3;
top: 219px;
left: 60%;
margin-left:-406px;
width:980px;
}

.menu li
{
width: 122px;
float: left;
}

.menu a
{
border: 0px solid #32077C;
background-color:#5BA000;
background-image: url(http://www.loaditup.de/files/374249.gif);
text-decoration: underline;
text-align: center;
font-weight: normal;
cursor: default;
margin: - 12px;
display: block;
height: 39px;
color: #000000;
}

.menu a:hover
{
background-image: url(http://www.loaditup.de/files/374249.gif);
background-color: #;
}

#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 13px;
display: none;
width: 9px;
float: center;
}

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

<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>

<div class="menu">
<ul>
<li><a href="http://arabras-schulhilfswerk.de.tl/Willkommen.htm"><font size="2"><strong> Willkommen</strong></font></a>
</li>

<li><a href="http://arabras-schulhilfswerk.de.tl/Kontakt.htm"><font size="2"><strong> Kontakt</strong></font></a>
</li>

<li><a href="http://arabras-schulhilfswerk.de.tl/G.ae.stebuch.htm"><font size="2"><strong> Gästebuch</strong></font></a>
</li>

<li><a href="http://arabras-schulhilfswerk.de.tl/Spenden.htm"><font size="2"><strong> Spenden</strong></font></a>
</li>

<li><a href="http://arabras-schulhilfswerk.de.tl/Mitglied-werden.htm"><font size="2"><strong> Mitglied werden</strong></font></a>
</li>

<li><a href="http://arabras-schulhilfswerk.de.tl/Impressum.htm"><font size="2"><strong> Impressum</strong></font></a>
</li>

</div>
<script language="JavaScript">
var ver = navigator.appName;
if (ver == "Microsoft Internet Explorer") {
document.write('<bgsound src="" loop=infinite>');
}else{

}


</td></tr></table>

Und bei CSS-Code ohne Style Tags dies:

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

a{
color:#000000;
text-decoration: none;
font-family: Arial;
font-size:13px;}

a:hover {
color: #ffffff!important;
font-size: 13px;
font-family: Arial;
text-decoration: none;}

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

a:active {
color: #000000;
font-size: 13px;
font-family: Arial;
text-decoration: none;}

a:visited {
color: #000000;
font-size: 13px;
font-family: Arial;
text-decoration: none;}

body {
background-color:#ffffff;
;}
background-image:url();
*{ padding: 0; margin: 0; }

#Mein_Bild {
margin: 0 auto;
width: 1024px;
height:900px;
background-image:url);}

#header_container {
position: absolute;
left: 50%;
margin-left:-450px;
top: 100px;
width: 901px;
height:119px;
background-color:#;
background-image:url(http://www.loaditup.de/files/374296.jpg);
color:#0090ff;
font-size:13px;
border: 0px solid #5F5F5F;}

#content {
position: absolute;
left: 50%;
top:258px;
margin-left:-281px;
width: 710px;
padding:10px;
color: #000000;
font-size:14px;
font-family: Arial;
background-color:#;
background-image:url(http://img.webme.com/pic/6/6p-bilder/arabody.png);
border: 1px solid #5F5F5F;
overflow:auto;
}

#side{
position: absolute;
left: 50%;
top:195px;
margin-left: -475px;
width: 960px;
height: 40px;
background-color:#;
background-image:url();
border:0px solid #489600;
color:#000000;
overflow:auto;}



#sidebar_links{
position: absolute;
left: 50%;
top:219px;
margin-left: -450px;
width: 168px;
height: 511px;
background-color:#;
background-image:url(http://www.loaditup.de/files/374307.jpg);
border:1px solid #447E0D;
color:#000000;
overflow:auto;}



#designby{
position: absolute;
left: 50%;
top:10px;
margin-left: 345px;
width: 140px;
height: 20px;
background-color:#;
background-image:url();
border:0px solid #000000;
color:#000000;
overflow:auto;}


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

Wäre super wenn wir jemand helfen könnte, ich möchte doch einfach nur Buttons in die Navi haben.
Jens


Zuletzt bearbeitet von jens-sonntag am 23.07.2009, 18:40, insgesamt 5-mal bearbeitet
Beitrag11.05.2009 um 17:13 (UTC)    
Titel:

hi,

entweder du nimmst die Standard Baukasten Navigation und passt diese an deine Wünsche an oder du realisierst das mit Javascript.
Ich würde Weg 1 nehmen - ist einfacher und Besucher mit deaktiviertem Javascript können das auch verwenden.

Gruß,
Max
______________
http://blog.mamuehi.de
Beitrag11.05.2009 um 17:20 (UTC)    
Titel:

ok, danke, klingt simpel, aber kann ich denn bei irgendeinem Design, zum Beispiel ICEBLUE einfach die Navigation in mein CSS Menü einfügen ? das müsste doch eigentlich gehen, wenn ich einfach unter "Seitenquelltext" gehe und mir dann die Navi mopse Very Happy
Beitrag11.05.2009 um 17:26 (UTC)    
Titel:

jens-sonntag hat Folgendes geschrieben:
ok, danke, klingt simpel, aber kann ich denn bei irgendeinem Design, zum Beispiel ICEBLUE einfach die Navigation in mein CSS Menü einfügen ? das müsste doch eigentlich gehen, wenn ich einfach unter "Seitenquelltext" gehe und mir dann die Navi mopse Very Happy

Mit deinem derzeit verwendeten Design ist das schwierig. Du könntest aber, die zweigeteilte Navigation zu einer machen und dann die Klasse #nav verwenden und einstellen. Zu beachten sei, dass du deine Navigaion durch #nav_container positionierst.

Mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beitrag17.07.2009 um 15:42 (UTC)    
Titel:

Edit:

Ich habe weitere Probleme, aber andere. Ich habe meinen Beitrag oben editiert und hoffe, dass mir jemand helfen kann. Die bereits geposteten Antworten haben nichts mit meinem jetzigen Problem zu tun.
Vielen Dank ! Laughing
Beitrag23.07.2009 um 16:55 (UTC)    
Titel:

das würde ich auch gerne wissen, wie das geht.

Hatte auch mal ein CSS Design aber nur so standard text links in der navi

wie fügt man da denn jetzt buttons ein ?
Beitrag23.07.2009 um 16:59 (UTC)    
Titel:

Bitteschön:

Code:
#nav li {
background-image: url(BILDURL);
display: block;
width: 150px;
height: 15px;
padding: 5px;
}

#nav li:hover {
background-image: url(BILDHOVER);
}


So gehts:
Bei background-image müssen immer die Bilder rein. display: block; macht aus dem Text mit Hintergrund einen Button, die anderen Werte dienen der Größe. padding stellt den Abstand ein Wink

Achtung:
padding und Höhe müssen addiert werden, genau so wie die Breite mit padding. Padding wird dabei *2 genommen.

mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING


Zuletzt bearbeitet von ig444 am 23.07.2009, 18:03, insgesamt einmal bearbeitet
Beitrag23.07.2009 um 17:25 (UTC)    
Titel:

das ist gut !


Zuletzt bearbeitet von website-helfer am 23.07.2009, 18:25, insgesamt einmal bearbeitet
Beitrag23.07.2009 um 17:27 (UTC)    
Titel:

Hallo.
Hier nochmal der hoffnungslose Fall.
Wenn ich dies hier in meiner ersten rechten Box stehen habe, muss ich dann noch etwas ändern bei dem Code, den du mir gegeben hast ? Oder hier ?
Muss das fettgedruckte geändert werden? Wenn ja wie, es erscheinen nämlich keine Buttons wenn ich deinen Code so einfüge...

<div id="sidebar_container"></div>

<div id="side"></div>

<div id="sidebar_links">
<div align="left"><br />
<font face="Arial"><strong><font size="2"><br /></font></strong></font><br />
</div>
</div>

</div>
<div id="sidebar_links"><div align="left">
<div align="center"><strong><br /><a href="http://tierpension-witting.de.tl/Willkommen.htm"><div align="center"><strong><font size="2"><font color="#000000">Willkommen</font></font></strong></div></a></strong></div>

<strong><a href="http://arabras-schulhilfswerk.de.tl/Brasilien.htm">BRASILIEN:</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Musik.htm">- Musik</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Geographische-Lage.htm">- Geographische Lage</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Verein.htm">Verein</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/-Ue-ber-uns.htm"> Über uns</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Engagement.htm">ENGAGEMENT:</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Menno-Simons.htm">-Escola Menno Simons</strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Cidade-Leer.htm">-Escola Cidade Leer</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Comunidade-Loga.htm">-Escola Comunidade Loga</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Municipal-Arabras.htm">-Escola Municipal Arabras</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Municipal-Agricola.htm">-Escola Municipal Agricola</a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/-Voluntarios-_-freiwillige-Helfer.htm">-Voluntarios </a></strong><br />

<strong><a href="http://arabras-schulhilfswerk.de.tl/Escola-Agroecologia-Pequizeiro.htm">-Escola Agroecologia Pequizeiro</a></strong><br />
<strong><a href="http://arabras-schulhilfswerk.de.tl/Lesestoff.htm">Lesestoff</a></strong><br /><br />
<strong><a href=""></a></strong></div></div>
<div id="designby"><font size="1"><a href=""></a></font></div>
Beitrag23.07.2009 um 18:11 (UTC)    
Titel:

Ich habe jetzt nur für die Standartnavi. Aber probiere mal das:
Code:

#sidebar_links a {
background-image: url(BILDURL);
display: block;
width: 150px;
height: 15px;
padding: 5px;
}

#sidebar_links a:hover {
background-image: url(BILDHOVER);
}


Erklärung wie oben Wink

mfg
______________
THE JOY OF NOT BEING SOLD ANYTHING
Beiträge der letzten Zeit anzeigen:   


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