Suche im Forum:
Suchen


Autor Nachricht
Beitrag06.02.2011 um 01:23 (UTC)    
Titel: Hover Effekt

Hallo Leute,
ich möchte das wenn man über die einzelnen Navigationsbilder Fährt sollen die entweder größer werden oder einfach nach oben verschieben.
Doch wenn ich das mit padding-top macht passiert nix.
Ich glaub das liegt an meinem Code, das er verhindert das die Buttons hoch gehen können.
Wenn ihr noch wisst wie man die Navigation nach oben verschieben kann, wäre das echt hilfreich.
Hier erstmal der Code vom Ganzen Design:
Code:
#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;}

/*
Credit: http://www.templatemo.com
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #8a8a79;
background: #212020;
}

/* body{font:75%/1.7 Helvetica, Arial,Verdana, sans-serif;color:#2a2a2c;} */

a:link, a:visited { color: #dcc451; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #CCFF00; text-decoration: underline; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.divider {
clear: both;
padding-bottom: 15px;
margin-bottom: 30px;
background: url(../images/templatemo_horizontal_divider.jpg) bottom repeat-x;
}

.fl { float: left; }
.fr { float: right; }

.m_right { margin-right: 30px; }

.button a {
display: block;
width: 120px;
height: 22px;
padding: 5px 0 0 15px;
background: url(http://www.loaditup.de/files/506211.png) no-repeat;
color: #faeba6;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}

.button a:hover {
color: #ffffff;
}

.bottom_01 {
background:url(../images/templatemo_button_01.jpg) no-repeat;
}

.bottom_02 {
background:url(../images/templatemo_button_02.jpg) no-repeat;
}

h1 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: bold;
}

h2 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: normal;
}

h3 {
margin: 0 0 10px 0;
padding: 0;
font-size: 14px;
font-weight: bold;
color: #8a8a79;
}

h4 {
margin: 0px;
padding: 0px;
font-size: 14px;
font-weight: bold;
}

.image_wrapper {
border: 1px solid #ffffff;
margin-top: 3px;
margin-bottom: 5px;
}

.fl_image {
float: left;
margin-right: 15px
}

.fr_image {
float: right;
margin-left: 15px
}

.list_01 {
margin: 0 0 20px 20px;
padding: 0 0 0 0px;
list-style: none;
}

.list_01 li {
margin: 0 0 15px 0;
padding: 0 0 0 30px;
background: url(http://www.loaditup.de/files/506212.jpg) top left no-repeat;
}

#templatemo_container {
width: 980px;
margin: 0 auto;
}

/* menu */

#templatemo_menu {
clear: both;
width: 980px;
height: 96px;
background: url(http://s5.directupload.net/images/110206/n6yxlpbk.jpg) center no-repeat;
}

#templatemo_menu ul {
width: 840px;
overflow: hidden;
padding: 0px 0 0 0;
margin: 0px auto;
list-style: none;
}

#templatemo_menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}

#templatemo_menu ul li a {
float: left;
display: block;
width: 140px;
height: 75px;
padding: 0px;
font-size: 18px;
text-align: center;
font-weight: normal;
text-decoration: none;
color: #ffffff;
outline: none;
}

#templatemo_menu li a:hover{
padding-top: 20px;
}

/* end of menu */

/* banner */

#templatemo_banner {
clear: both;
width: 980px;
height: 304px;
padding: 0 10px;
text-align: center;
background:url(http://s1.directupload.net/images/110206/vw6kax57.jpg) no-repeat;
}

#templatemo_banner #site_title {
width: 500px;
padding: 100px 0 0 0;
margin: 0 auto;
text-align: center;
}

#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 32px;
color: #cdcf19;
font-weight: normal;
text-decoration: none;
}

#site_title h1 a:hover {
font-weight: normal;
text-decoration: none;
}

#site_title h1 a span {
display: block;
margin-top: 5px;
font-size: 14px;
color: #cccccc;
}

#templatemo_banner p {
clear: both;
padding: 0 20px;
font-size:16px;
margin-top: 40px;
line-height: 30px;
color: #565546;
}
/* end of banner */

/* content */

#templatemo_content {
clear: both;
width: 920px;
padding: 30px;
margin: 0 auto;
background: url(../images/templatemo_content_bg.jpg) repeat-y;
}

#templatemo_content h2 {
color: #ffffff;
height: 28px;
padding: 0;
margin: 0 0 25px 0;
font-size: 24px;
}

#templatemo_content h2 span {
color: #aca7a7;
}

#side_column {
float: left;
width: 300px;
}

#side_column h2 {
display: block;
width: 280px;
height: 38px;
margin: 0px;
padding: 12px 0 0 20px;
background: url(http://www.loaditup.de/files/506216.jpg) no-repeat;
}

#main_column {

float: right;
width: 540px;
}

#main_column h2 {
background: url(../images/templatemo_header_bg.jpg) left bottom no-repeat;
}

#main_column p {
text-align: justify;
margin-bottom: 10px;
}

.side_column_box {
clear: both;
position: relative;
margin-bottom: 15px;
background:url(http://www.loaditup.de/files/506217.jpg) repeat-y;
}

.side_column_box .bottom {
position: absolute;
bottom: 0px;
left: 0px;
width: 300px;
height: 10px;
background:url(http://www.loaditup.de/files/506219.jpg) no-repeat;
}

.side_column_box .content {
padding: 20px;
}

.news_section {
clear: both;
margin-bottom: 25px;
}

.inputfield {
height: 16px;
width: 245px;
padding: 2px 5px;
margin: 0 0 10px 0;
font-size: 12px;
font-variant: normal;
line-height: normal;
}

.submitbutton {
float: right;
margin: 0px;
padding: 0 6px 3px 6px;
cursor: pointer;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
}

.section_w540 {
clear: both;
width: 540px;
}

.section_260 {
float: left;
width: 260px;
}

/* end of content */

/* footer */
#templatemo_footer {
clear: both;
width: 900px;
padding: 40px;
margin: 0 auto;
text-align: center;
color: #555555;
background: url(http://www.loaditup.de/files/506220.jpg) no-repeat;
border-top: 1px solid #22211e;
}

#templatemo_footer a {
font-weight: normal;
color: #777777;
}

#templatemo_footer a:hover {
color: #CCCCCC;
text-decoration: none;
}

#templatemo_footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}

.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #555555;
}

.footer_menu .last_menu {
border: none;
}

/* end of footer */

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


#content {
position: absolute;
left: 50%;
top:505px;
margin-left:-160px;
width: 620px;
padding:10px;
color: #FFFFFF;
font-size: 14px;
font-family: Arial;
background-color:#transparent;
background-image:url();
border: 1px solid #000000;
height: 2443px;
overflow: auto;
}

html{cursor:url('http://s5.directupload.net/images/110204/yz6yvlny.png'), auto;}
a:hover{cursor:url('http://s5.directupload.net/images/110204/yz6yvlny.png'), pointer;}


Also 2 Fragen:
1. Wie kann ich das beim Hover-Effekt nach oben kommen lassen.
2. Wie kann ich die ganz Navigation nach oben verschieben.
Beiträge der letzten Zeit anzeigen:   


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