Klingt wahrscheinlich doof, aber ich kriege die Buttons iwie nicht nebeneinander ... nur untereinander und wild verstreut
auf die Seite
Was habe ich vor ?
Ich würde gerne die Navileiste etwas überschaubarer machen und da Seiten unter dem Menüpunkt "Jokes" rauschmeissen, dafür brauche ich aber neue Buttons auf der Seite "Jokes" damit man auf die Seiten noch zugreifen kann. Zudem sollen die Buttons einen schönen Hovereffekt bekommen, den ich bereits auch schon verwende per CSS (ist das glaube ich) .
Da es schwierig zu erklären ist habe ich mal ne kleine Zeichnung angefertigt
http://img.webme.com/pic/a/amusingwebsite/question.jpg
danke chris
@@@@
edit habe mal den Code über dem Design kopiert
damit ihr wisst was ich schon alles habe.
Neue kleine Buttons könnt ich schnell erstellen und in den Code einbauen aber
eben nur linksbündig und untereinander ^^
Code: <!--
.buttonko {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/kllo.png);
height: 45px;
width: 150px;
padding: 0px;
margin: 6px 0px 0px 250px;
line-height: 38px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px !important;
font-weight: bold;
color: #0080C0;
text-align: center;
text-decoration: none;
text-transform: none;
}
.button180:visited {
color: #0080C0;
}
.buttonko:hover {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/klloglow.png);
height: 45px;
width: 150px;
padding: 0px;
margin: 6px 0px 0px 250px;
line-height: 38px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px !important;
font-weight: bold;
color:#FF007F;
text-align: center;
text-decoration: none;
text-transform: none;
}
.newbutton {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/newbu125.png);
height: 125px;
width: 125px;
padding: 0px;
margin: 6px 0px 0px 175px;
line-height: 115px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px !important;
font-weight: bold;
color: #0080C0;
text-align: center;
text-decoration: none;
text-transform: none;
}
.newbutton:visited {
color: #0080C0;
}
.newbutton:hover {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/newbu125gl.png);
height: 125px;
width: 125px;
padding: 0px;
margin: 6px 0px 0px 175px;
line-height: 115px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px !important;
font-weight: bold;
color:#FF007F;
text-align: center;
text-decoration: none;
text-transform: none;
}
.buttonkllo {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/kllo.png);
height: 45px;
width: 150px;
padding: 0px;
margin: 6px 0px 0px 0px;
line-height: 38px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px !important;
font-weight: bold;
color: #0080C0;
text-align: center;
text-decoration: none;
text-transform: none;
}
.button180:visited {
color: #0080C0;
}
.buttonkllo:hover {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/klloglow.png);
height: 45px;
width: 150px;
padding: 0px;
margin: 6px 0px 0px 0px;
line-height: 38px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 13px !important;
font-weight: bold;
color:#FF007F;
text-align: center;
text-decoration: none;
text-transform: none;
}
.button180 {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/buttongreen.png);
height: 32px;
width: 100px;
padding: 0px;
margin: 6px 0px 0px 0px;
line-height: 25px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #0080C0;
text-align: center;
text-decoration: none;
text-transform: none;
}
.button180:visited {
color: #0080C0;
}
.button180:hover {
display: block;
background-image: url(http://img.webme.com/pic/a/amusingwebsite/buttonred.png);
height: 32px;
width: 100px;
padding: 0px;
margin: 6px 0px 0px 0px;
line-height: 25px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color:#FF007F;
text-align: center;
text-decoration: none;
text-transform: none;
/* hier könnte man den andersfarbigen Button einbinden */
}
#navibanner{
position:relative;
left:-11%;
width:111%;
height:28px;
color:transparent;
background-image:url(http://img.webme.com/pic/a/amusingwebsite/navibutton.png);
background-repeat:no-repeat;
}
-->
<!--
#navibanner2{
position:relative;
left:-11%;
width:111%;
height:28px;
color:transparent;
background-image:url(http://img.webme.com/pic/a/amusingwebsite/navibutton.png);
background-repeat:no-repeat;
}
-->
</style>
auf die Seite
auf
