hallo,
ich habe bei meiner seite buttons nur über css realisiert (mit runden ecken). naja und wenn ich über einen taxt gehe soll dieser fett werden. nur das problem ist das ich die button breite mit max und min width festgelegt habe (funzt anscheinend in ie nich, genau wie auto). aber nun werden die button wenn ich auf sie draufgehe breiter und schieben sich wenn ich auf einen anderen gehe wieder zusammen.
hat da einer ne idee. hatte schon mit paddings und so probiert aber da schreibt der nicht rein sondern schiebt es genauso.
hier der code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css" media="screen">
<!--
@import url("css/rounded_2.css");
-->
</style>
</head>
<body>
<!-- Zentrierter Container -->
<div class="middle">
<!-- Oben -->
<div class="logo"></div>
<div class="nav_01" align="center">
<!-- Buttons Nav Ebene 1 -->
<div id="nav_01_button_off">
<a href="vorteil.html" target="_self">VORTEIL</a></div>
<div class="spacer"></div>
<div class="button_1">
<b class="navi_rtop"><b class="navi_r1"></b><b class="navi_r2"></b><b class="navi_r3"></b><b class="navi_r4"></b></b>
<div id="nav_01_button">
<a href="wechsel.html" target="_self">WECHSEL</a></div>
</div>
<div class="spacer"></div>
<div id="nav_01_button_off"><a href="sc_turbine.html" target="_self">
SC TURBINE </a></div>
<div class="spacer"></div>
<div id="nav_01_button_off">
<a href="fragen.html" target="_self">FRAGEN?</a></div>
<div class="spacer"></div>
<div id="nav_01_button_off"><a href="service.html" target="_self">
SERVICE</a></div>
<div class="spacer"></div>
<div id="nav_01_button_off">
<a href="vereine.html" target="_self">VEREINE</a></div>
<!-- ENDE Buttons Nav Ebene 1 -->
</div>
<div class="nav_02">
<b class="navi_rtop"><b class="navi_r1"></b><b class="navi_r2"></b></b>
<div id="nav_02_height">
<div class="arrow"></div>
<!-- Buttons Nav Ebene 2 -->
<div class="button_2">
<b class="button2_rtop"><b class="button2_r1"></b><b class="button2_r2"></b><b class="button2_r3"></b><b class="button2_r4"></b></b>
<div id="nav_02_button"><a href="sc_turbine_tarif.html" target="_self">MEIN SC TURBINE-TARIF </a></div>
</div>
<div class="spacer_02"></div>
<div id="nav_02_button_off"><a href="agb.html" target="_self">AGB</a></div>
<div class="spacer_02"></div>
<div id="nav_02_button_off"><a href="kontakt.html" target="_self">KONTAKT</a></div>
<!-- ENDE Buttons Nav Ebene 2 -->
</div>
<b class="navi_rbottom"><b class="navi_r2"></b><b class="navi_r1"></b></b> </div>
<!-- ENDE Oben -->
<!-- Linke Seite -->
<div class="left">
<div class="navi_left_top"></div>
<div class="navi_left">
<b class="navi_rtop"><b class="navi_r1"></b><b class="navi_r2"></b></b>
<div id="left"></div>
<b class="navi_rbottom"><b class="navi_r2"></b><b class="navi_r1"></b></b> </div>
<div class="navi_left_bottom"></div>
</div>
<!-- ENDE Linke Seite -->
<!-- Content Container -->
<div id="content-rounded">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div id="content"></div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
<!-- ENDE Content Container -->
<!-- Rechts -->
<div class="aktion"></div>
<!-- ENDE Rechts -->
</div>
<!-- ENDE Zentrierter Container -->
</body>
</html>
und css
Code:
/* CSS Document */
body {
margin:0px;
background-image:url(../images/070523_sc-turbine_bg.jpg.png);
}
a {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
color:#FFFFFF;
}
a:hover, a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bolder;
text-decoration:none
}
.middle {
background:#7DBA00;
text-align: left;
margin: 0px auto;
width: 950px;
}
.logo {
background-image:url(../images/070523_sc-turbine_vorlag-03.jpg);
width:771px;
height:215px;
position:relative;
left:11px;
top:20px;
}
.aktion {
background-image:url(../images/070523_sc-turbine_vorlag-06.jpg);
width:151px;
height:190px;
position:relative;
left:792px;
top:-652px;
}
.left {
background:inherit;
width:170px;
height:442px;
position:relative;
top:40px;
}
p {padding-left:5px;}
/* Content Layer */
#content-rounded{
margin: 0;
background: #FFF;
width:609px;
position:relative;
left:172px;
margin-top:-401px;
}
#content{
height:430px;
}
b.rtop, b.rbottom {
display:block;
background: #7EBA00;
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #FFF;
}
b.r1 {
margin: 0 5px;
}
b.r2 {
margin: 0 3px;
}
b.r3 {
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;height: 2px;
}
/*Navigation links */
#left{
height:260px;
}
.navi_left_top {
margin: 0 11px;
width:150px;
height:24px;
background-image:url(../images/070523_sc-turbine_vorlag-13.jpg)
}
.navi_left {
margin: 0 11px;
width:150px;
background: #8e004d;
color: #fff;
}
b.navi_rtop, b.navi_rbottom {
display:block;
background: #7EBA00;
}
b.navi_rtop b, b.navi_rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #8e004d;
}
b.navi_r1 {
margin: 0 2px;
}
b.navi_r2 {
margin: 0 1px;
}
.navi_left_bottom {
clear:left;
margin-top:87px;
margin-left: 11px;
margin-right:11px;
width:150px;
height:66px;
background-image:url(../images/070523_sc-turbine_vorlag-21.jpg)
}
/* Navigation Ebene 1 */
.nav_01 {
background-image:url(../images/070523_sc-turbine_vorlag-08.jpg);
background-repeat:no-repeat;
width:673px;
height:28px;
position:relative;
left:11px;
top:20px;
padding: 0 98px;
}
.spacer {
background-image:url(../images/spacer.gif);
background-repeat:no-repeat;
vertical-align:middle;
height:21px;
width:10px;
margin-top:2px;
float:left;
}
/* Navigation Ebene 2 */
/*wenn sie aktiv ist */
.nav_02 {
width:725px;
background: #8e004d;
position:relative;
left:34px;
top:20px;
clear:both;
}
.spacer_02 {
background-image:url(../images/spacer.gif);
background-repeat:no-repeat;
vertical-align:middle;
height:21px;
width:10px;
margin-top:7px;
float:left;
}
#nav_02_height{
height:32px;
}
.arrow {
background-image:url(../images/arrow.jpg);
background-repeat:no-repeat;
width:22px;
height:22px;
margin: 9px 7px 0 7px;
float:left;
}
/*wenn sie NICHT aktiv ist */
.nav_02_off {
width:725px;
background: #71B200;
position:relative;
left:34px;
top:20px;
clear:both;
}
#nav_02_height{
height:32px;
}
.arrow_off {
background-image:url(../images/arrow_off.jpg);
background-repeat:no-repeat;
width:22px;
height:22px;
margin: 9px 7px 0 7px;
float:left;
}
b.nav02_off_rtop, b.nav02_off_rbottom {
display:block;
background: #7EBA00;
}
b.nav02_off_rtop b, b.nav02_off_rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #71B200;
}
b.nav02_off_r1 {
margin: 0 2px;
}
b.nav02_off_r2 {
margin: 0 1px;
}
/* Button 1. Ebene*/
.button_1 {
width:84px;
background: #8e004d;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
position:inherit;
float:left;
}
#nav_01_button{
height:18px;
width:84px;
text-align:center;
color:#fff;
position:inherit;
float:left;
}
#nav_01_button_off{
height:18px;
width:84px;
text-align:center;
color:#fff;
position:inherit;
float:left;
margin-top:4px;
}
/* Button 2. Ebene*/
.button_2 {
min-width:84px;
max-width:300px;
height:24px;
background: #8e004d;
position:relative;
top:4px;
float:left;
}
#nav_02_button{
height:25px;
background-color:#CC6699;
text-align:center;
color:#fff;
}
#nav_02_button_off{
height:22px;
min-width:84px;
max-width:300px;
text-align:center;
color:#fff;
position:inherit;
float:left;
margin-top:9px;
}
b.button2_rtop, b.button2_rbottom {
display:block;
background: ##8e004d;
}
b.button2_rtop b, b.button2_rbottom b {
display:block;
height: 1px;
overflow: hidden;
background: #cc6699;
}
b.button2_r1 {
margin: 0 4px;
}
b.button2_r2 {
margin: 0 3px;
}
b.button2_r3 {
margin: 0 2px;
}
b.button2_rtop b.button2_r4, b.button2_rbottom b.button2_r4 {
margin: 0 1px;height: 2px;
}
03.06.2007, 14:21
verschiebungen in den Button (max width min width)
Ähnliche Themen
Linear-Darstellung
