Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag08.06.2012 um 11:57 (UTC)    
Titel: Css-Buttons nebeneinander ?

Klingt wahrscheinlich doof, aber ich kriege die Buttons iwie nicht nebeneinander ... nur untereinander und wild verstreut Shocked 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>
[/code]


Zuletzt bearbeitet von amusingwebsite am 08.06.2012, 13:31, insgesamt einmal bearbeitet
Beitrag08.06.2012 um 13:43 (UTC)    
Titel: nochmal ich

Ich habe dann nochmal nen bissle gebastelt aber wie bekomme ich jetzt die Schrift auf den Hintergrund? Sollen ja verlinkte und beschriftete Buttons sein ...
Code:

<a title="JOKES" href="http://amusingwebsite.de.tl/-Ae-rzte.htm" target="_blank">
TEST
<img width="150" height="45" border="0" alt="" src="http://img.webme.com/pic/a/amusingwebsite/kllo.png" onmouseover="this.src='http://img.webme.com/pic/a/amusingwebsite/klloglow.png'" onmouseout="this.src='http://img.webme.com/pic/a/amusingwebsite/kllo.png'" />
TEST
</a>
<br />
Beitrag08.06.2012 um 14:36 (UTC)    
Titel: ich packs net

noch mehr rumgebastelt aber ich packs nicht ....

Code:
<style type="text/css">
<!--


.jokebuton {
    display:block;
    height:45px;
    width:150px;
   background-image: url('http://img.webme.com/pic/a/amusingwebsite/kllo.png');
  }

 .jokebuton:hover {
    display:block;
    height:45px;
    width:150px;
   background-image: url('http://img.webme.com/pic/a/amusingwebsite/klloglow.png');
  }






.buttonko {
   display: block;
   background-image: url(http://img.webme.com/pic/a/amusingwebsite/kllo.png);
   height: 45px;
o
o
o
o
o
o
background-image:url(http://img.webme.com/pic/a/amusingwebsite/navibutton.png);
background-repeat:no-repeat;
}
-->
</style>


Habe den ersten Code (jokebuton) mal eingebaut aber iwie funzt das nicht
Crying or Very sad
Könnt ja hier
http://amusingwebsite.de.tl/Testseite-.htm
mal schauen


Ich steck für heute dann mal den Kopf in den Sand .....vielleicht geht mir ja noch nen Idea auf


Zuletzt bearbeitet von amusingwebsite am 08.06.2012, 15:47, insgesamt 2-mal bearbeitet
Beitrag08.06.2012 um 14:47 (UTC)    
Titel:

Hallo,

wie wäre es so:
Zitat:
<div class="deinbutton">
<a class="deinbuttonlink" href="http://amusingwebsite.de.tl/-Ae-rzte.htm" title="JOKES" target="_blank">TEST</a></div>

Die Linkadresse
Der dazugehörige Stylecode ist folgender:
Zitat:
<style type="text/css"> <!--
div.deinbutton {
display:inline-block;
height:45px;
width:150px;
background-image:url(http://img.webme.com/pic/a/amusingwebsite/kllo.png);
padding:2px; }

div.deinbutton:hover {
background-image:url(http://img.webme.com/pic/a/amusingwebsite/klloglow.png); }

div.deinbutton a {
height:100%;
width:100%;
text-align:center; }

//--> </style>

Normale Hintergrundgrafik
Grafik beim Überfahren mit der Maus
Gegebenenfalls Höhe und Breite anpassen.
Dies hier ist der Außenabstand. Falls nicht gewünscht, auf 0 setzen.

Gruß,

TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag08.06.2012 um 14:52 (UTC)    
Titel: Super ^^

Schönen Dank so habe ich mir das vorgestellt...
Es sieht ja immer so einfach aus ^^
Jetzt kann ich doch noch weitermachen
Beitrag08.06.2012 um 15:00 (UTC)    
Titel:

Vielen Dank für die Rückmeldung und vielen Dank an den Helfer!

-CLOSED-, da erledigt

mfg philipp
______________
Forenregeln, FAQ, Suchfunktion
Beiträge der letzten Zeit anzeigen:   


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