XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Anfänger: Positionierung. (http://xhtmlforum.de/showthread.php?t=67527)

xam 19.05.2012 12:56

Anfänger: Positionierung.
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo leute ich habe erst vor kurzem an gefangen meine Websiten ohne Table nur mit CSS zu Formatiren. Ich habe das Problem, das sich mein div Objekt in Version 1 nicht nach dem Eltern objekt richtet und in Version 2 das der Footer nicht unten mittig angezeit wird. hab schon viel rumprobiert, aber ich glaub ich was grundlegendes nicht ganz Verstanden.

HTML der Version 1
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Preise -  Fitnesswelt Burgwedel</title>

<!--Lieghtbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- end-->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
        <div id="non_footer">
                <div id="header" >
                          <div id="logo">
                         
                        <h1>
                                        <a  href = "index.html">
                        <img src="images/logo.png" />       
                        <span style="color:red; font-size:xxx-large ">Fitnesswelt</span>
                        <span style="color:#33CCFF; font-size:40px">Burgwedel</span>
                                </a>
                                </h1>
                                </div>
                        </div>
                        <div id="menu">
                                <ul>
                                        <li class="current_page_item"><a href="index.html">Home</a></li>
                                        <li><a href="angebote.html">Angebote</a></li>
                                  <li><a href="preise.html">Preise</a></li>
                                        <li><a href="anfahrt.html">Anfahrt</a></li>
                                <li><a href="kontakt.html">Kontakt</a></li>
                                </ul>
                        </div>
                        <!-- end #header -->
                        <center>
                        <div id="banner"><img src="images/banner.jpg" width="100%" height="100%" alt="" /></div>
                        </center>
                       
                        <div id="main">
                               
                            <div id="main-top" >
                                       
                                        <div id ="Raumplan" >
                                                <div id = "Raumplan_top_left">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                        <img src="images/Raumplan_top_left.gif" />
                                                        </a>
                                                </div>
                                               
                                                <div id = "Raumplan_top_right">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                                <img src="images/Raumplan_top_right.gif" />
                                                        </a>
                                                </div>
                                               
                                               
                                                <div id = "Raumplan_bottom_left">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                                <img src="images/Raumplan_bottom_left.gif" />
                                                        </a>
                                                </div>
                                               
                                                <div id = "Raumplan_bottom_right">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                                <img src="images/Raumplan_bottom_right.gif" />
                                                        </a>
                                                </div>                       
                                        </div>                     
                        </div>
                </div>
        </div>
</div>
<div id="footer">
 <center><a href="impressum.html">Impressum | </a><a href="kontakt.html">Kontakt</a></center>
        <p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.electrictowelrail.org.uk">Electric Towel Rails</a>.</p>

<!-- end #footer -->
</body>
</html>

style.css der Version 1
Code:

body {
        margin: 0;
        padding: 0;
        background: #000;
        font-family: Trebuchet MS,Helvetica,sans-serif;
        font-size: 12px;
        color: #333333;
        }

h1, h2, h3 {
        margin: 0;
        padding: 0;
       
}

h1 {
        color:fd090e
        font-weight:300;
        font-style: normal;
        font-weight:bolder;
       
}

h2 {
        margin: 0px;
        padding: 0;
        letter-spacing: -2px;
        font-size: 2.8em;
        font-style: italic;
        background: #000;;
        color:#FFF;
       
}

h3 {
        font-size: 1.6em;
}

p, ul, ol {
        margin-top: 0;
        line-height: 200%;
}

p, ol {
}

ul, ol {
}

a {
        color: #CA0B03;
}

a:hover {
}

#wrapper {
        background: fff;
}

.container {
        width: 1000px;
        margin: 0px auto;
}


#header {
        width: 800px;
        height: 100px;
        margin: 0 auto;
        padding: 0px;
        background-color:#000;
}



#logo {
        margin: 0;
        padding: 0;
}

#logo h1, #logo p {
}

#logo h1 {
        padding: 19px 0px 0px 0px;
        letter-spacing: -2px;
        text-align: center;
        text-transform: uppercase;
        font-size: 4em;
}

#logo h1 a {
        color: #990000;
        font-family: "Arial Black", Gadget, sans-serif;
}

#logo p {
        margin: 0;
        padding: 0px 0 0 0px;
        letter-spacing: -1px;
        font: normal 18px Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        color: #8E8E8E;
}

#logo p a {
        color: #8E8E8E;
}

#logo a {
        border: none;
        background: none;
        text-decoration: none;
        color: #000000;
}

#banner {
        width: 753px;
        height: 250px;
        margin: 0px auto;
}

#menu {
        width: 800px;
        height: 50px;
        margin: 0 auto;
        padding: 0px;
        background: #222;
}

#menu ul {
        margin: 0;
        padding: 0px 0px 0px 0px;
        list-style: none;
        line-height: normal;
        text-align: center;
}

#menu li {
        display: inline-block;
        padding: 15px 30px 0px 30px;
}

#menu a {
        display: block;
        height: 20px;
        margin: 0px;
        padding: 0px;
        letter-spacing: -1px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        border: none;
}

#menu a:hover, #menu .current_page_item a {
        text-decoration: none;
}

#menu .current_page_item a {
}

#main {
        overflow: hidden;
        width: 780px;
        margin: 0px auto;
        padding: 10px 10px 20px 10px;
        background: #000

}

#main-top {
        margin: 10px 10px 20px 10px;
        padding:0;
        font-size:14px;
        color:#CCC


}

#Raumplan{
        width: 782px;
        height:534px;
       
        margin: 0px auto 40px auto;
       
}
#Raumplan_top_left{
width:  406px;
height: 336px;
position: absolute;
top: 0;
left: 0;
}


#Raumplan_top_right{
width: 374px;
height:262px;
position: absolute;
top: 0;
left: 406px;
}       

#Raumplan_bottom_left{
width: 406px;
height: 198px;
position: absolute;
top:336px;
left:0px;
}       

#Raumplan_bottom_right{
width: 374px;
height:262px;
position: absolute;
top:262px;
left: 406px;
}       


#main-bottom{
        width: 780px;
        margin: 0px auto;
}

#content {
        float: right;
        width: 530px;
}

#sidebar {
        float: left;
        width: 270px;
}




#footer {
        overflow: hidden;
        width: 800px;
        height: 50px;
        background: #222;
        margin: 0px auto 40px auto;
        }

#footer p {
        margin: 0px;
        padding: 15px 0px 0px 0px;
        text-align: center;
        text-transform: uppercase;
        font-size: 10px;
        color: #aaa;
}

#footer a {
        color: #aaa;
        text-decoration: none;
}
#lightbox{        position: absolute;        left: 0; width: 100%; z-index: 90; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 20%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:100; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
 #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%        ; }

#imageData{        padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }       
#imageData #caption{ font-weight: bold;        }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;        }                       
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}               

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

<!-- end -->

HTML der version 2
HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Preise -  Fitnesswelt Burgwedel</title>

<!--Lieghtbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- end-->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
        <div id="non_footer">
                <div id="header" >
                          <div id="logo">
                         
                        <h1>
                                        <a  href = "index.html">
                        <img src="images/logo.png" />       
                        <span style="color:red; font-size:xxx-large ">Fitnesswelt</span>
                        <span style="color:#33CCFF; font-size:40px">Burgwedel</span>
                                </a>
                                </h1>
                                </div>
                        </div>
                        <div id="menu">
                                <ul>
                                        <li class="current_page_item"><a href="index.html">Home</a></li>
                                        <li><a href="angebote.html">Angebote</a></li>
                                  <li><a href="preise.html">Preise</a></li>
                                        <li><a href="anfahrt.html">Anfahrt</a></li>
                                <li><a href="kontakt.html">Kontakt</a></li>
                                </ul>
                        </div>
                        <!-- end #header -->
                        <center>
                        <div id="banner"><img src="images/banner.jpg" width="100%" height="100%" alt="" /></div>
                        </center>
                       
                        <div id="main">
                               
                            <div id="main-top" >
                                       
                                        <div id ="Raumplan" >
                                                <div id = "Raumplan_top_left">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                        <img src="images/Raumplan_top_left.gif" />
                                                        </a>
                                                </div>
                                               
                                                <div id = "Raumplan_top_right">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                                <img src="images/Raumplan_top_right.gif" />
                                                        </a>
                                                </div>
                                               
                                               
                                                <div id = "Raumplan_bottom_left">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                                <img src="images/Raumplan_bottom_left.gif" />
                                                        </a>
                                                </div>
                                               
                                                <div id = "Raumplan_bottom_right">
                                                        <a href="images/image-1.jpg" rel="lightbox" title="my caption">
                                                                <img src="images/Raumplan_bottom_right.gif" />
                                                        </a>
                                                </div>                       
                                        </div>                     
                        </div>
                </div>
        </div>
</div>
<div id="footer">
 <center><a href="impressum.html">Impressum | </a><a href="kontakt.html">Kontakt</a></center>
        <p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.electrictowelrail.org.uk">Electric Towel Rails</a>.</p>

<!-- end #footer -->
</body>
</html>

Style.css der Version 2
Code:

body {
        margin: 0;
        padding: 0;
        background: #000;
        font-family: Trebuchet MS,Helvetica,sans-serif;
        font-size: 12px;
        color: #333333;
        }

h1, h2, h3 {
        margin: 0;
        padding: 0;
       
}

h1 {
        color:fd090e
        font-weight:300;
        font-style: normal;
        font-weight:bolder;
       
}

h2 {
        margin: 0px;
        padding: 0;
        letter-spacing: -2px;
        font-size: 2.8em;
        font-style: italic;
        background: #000;;
        color:#FFF;
       
}

h3 {
        font-size: 1.6em;
}

p, ul, ol {
        margin-top: 0;
        line-height: 200%;
}

p, ol {
}

ul, ol {
}

a {
        color: #CA0B03;
}

a:hover {
}

#wrapper {
        background: fff;
}

.container {
        width: 1000px;
        margin: 0px auto;
}


#header {
        width: 800px;
        height: 100px;
        margin: 0 auto;
        padding: 0px;
        background-color:#000;
}



#logo {
        margin: 0;
        padding: 0;
}

#logo h1, #logo p {
}

#logo h1 {
        padding: 19px 0px 0px 0px;
        letter-spacing: -2px;
        text-align: center;
        text-transform: uppercase;
        font-size: 4em;
}

#logo h1 a {
        color: #990000;
        font-family: "Arial Black", Gadget, sans-serif;
}

#logo p {
        margin: 0;
        padding: 0px 0 0 0px;
        letter-spacing: -1px;
        font: normal 18px Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        color: #8E8E8E;
}

#logo p a {
        color: #8E8E8E;
}

#logo a {
        border: none;
        background: none;
        text-decoration: none;
        color: #000000;
}

#banner {
        width: 753px;
        height: 250px;
        margin: 0px auto;
}

#menu {
        width: 800px;
        height: 50px;
        margin: 0 auto;
        padding: 0px;
        background: #222;
}

#menu ul {
        margin: 0;
        padding: 0px 0px 0px 0px;
        list-style: none;
        line-height: normal;
        text-align: center;
}

#menu li {
        display: inline-block;
        padding: 15px 30px 0px 30px;
}

#menu a {
        display: block;
        height: 20px;
        margin: 0px;
        padding: 0px;
        letter-spacing: -1px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        border: none;
}

#menu a:hover, #menu .current_page_item a {
        text-decoration: none;
}

#menu .current_page_item a {
}

#main {
        overflow: hidden;
        width: 780px;
        margin: 0px auto;
        padding: 10px 10px 20px 10px;
        background: #000

}

#main-top {
        margin: 10px 10px 20px 10px;
        padding:0;
        font-size:14px;
        color:#CCC


}

#Raumplan{
        width: 782px;
        height:534px;       
        position: absolute;
        margin: 0px auto 40px auto;
       
}
#Raumplan_top_left{
width:  406px;
height: 336px;
position: absolute;
top: 0;
left: 0;
}


#Raumplan_top_right{
width: 374px;
height:262px;
position: absolute;
top: 0;
left: 406px;
}       

#Raumplan_bottom_left{
width: 406px;
height: 198px;
position: absolute;
top:336px;
left:0px;
}       

#Raumplan_bottom_right{
width: 374px;
height:262px;
position: absolute;
top:262px;
left: 406px;
}       


#main-bottom{
        width: 780px;
        margin: 0px auto;
}

#content {
        float: right;
        width: 530px;
}

#sidebar {
        float: left;
        width: 270px;
}




#footer {
        overflow: hidden;
        width: 800px;
        height: 50px;
        background: #222;
        margin: 0px auto 40px auto;
        }

#footer p {
        margin: 0px;
        padding: 15px 0px 0px 0px;
        text-align: center;
        text-transform: uppercase;
        font-size: 10px;
        color: #aaa;
}

#footer a {
        color: #aaa;
        text-decoration: none;
}
#lightbox{        position: absolute;        left: 0; width: 100%; z-index: 90; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 20%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:100; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
 #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%        ; }

#imageData{        padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }       
#imageData #caption{ font-weight: bold;        }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;        }                       
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}               

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

<!-- end -->

Hab auch och mal das Ganze als archiv mit Bildern und js-funktionen hoch geladen.
Vielen dank wenn sich jemand damit befassen würde. Liebe Grüße Xam

dazzle89 19.05.2012 13:07

Moin,

hier mal Feedback zur Version 2:

Dass der Footer soweit oben sitzt, liegt daran, dass du die ganzen Raumpläne absolut positioniert hast. Wenn du Elemente absolut positionierst, werden sie aus dem Elementenfluss herausgenommen, sie existieren quasi gar nicht und dadurch wird der Footer nach oben geschoben. Ist das soweit verständlich?

Es macht auch keinen Sinn die Pläne absolut zu positionieren. Nimm das bitte raus und lass sie stattdessen floaten.

xam 19.05.2012 14:23

Danke hat schon viel gebracht, hab jetzt aber n anderes Problem. das objekt "bottom_right" lässt sich nicht ausrichten. egal was für werte ich einsetzte die postion bleibt gleicht.

So sieht der aktuelle code des style.css aus.
Code:

body {
        margin: 0;
        padding: 0;
        background: #000;
        font-family: Trebuchet MS,Helvetica,sans-serif;
        font-size: 12px;
        color: #333333;
        }

h1, h2, h3 {
        margin: 0;
        padding: 0;
       
}

h1 {
        color:fd090e
        font-weight:300;
        font-style: normal;
        font-weight:bolder;
       
}

h2 {
        margin: 0px;
        padding: 0;
        letter-spacing: -2px;
        font-size: 2.8em;
        font-style: italic;
        background: #000;;
        color:#FFF;
       
}

h3 {
        font-size: 1.6em;
}

p, ul, ol {
        margin-top: 0;
        line-height: 200%;
}

p, ol {
}

ul, ol {
}

a {
        color: #CA0B03;
}

a:hover {
}

#wrapper {
        background: fff;
}

.container {
        width: 1000px;
        margin: 0px auto;
}


#header {
        width: 800px;
        height: 100px;
        margin: 0 auto;
        padding: 0px;
        background-color:#000;
}



#logo {
        margin: 0;
        padding: 0;
}

#logo h1, #logo p {
}

#logo h1 {
        padding: 19px 0px 0px 0px;
        letter-spacing: -2px;
        text-align: center;
        text-transform: uppercase;
        font-size: 4em;
}

#logo h1 a {
        color: #990000;
        font-family: "Arial Black", Gadget, sans-serif;
}

#logo p {
        margin: 0;
        padding: 0px 0 0 0px;
        letter-spacing: -1px;
        font: normal 18px Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        color: #8E8E8E;
}

#logo p a {
        color: #8E8E8E;
}

#logo a {
        border: none;
        background: none;
        text-decoration: none;
        color: #000000;
}

#banner {
        width: 753px;
        height: 250px;
        margin: 0px auto;
}

#menu {
        width: 800px;
        height: 50px;
        margin: 0 auto;
        padding: 0px;
        background: #222;
}

#menu ul {
        margin: 0;
        padding: 0px 0px 0px 0px;
        list-style: none;
        line-height: normal;
        text-align: center;
}

#menu li {
        display: inline-block;
        padding: 15px 30px 0px 30px;
}

#menu a {
        display: block;
        height: 20px;
        margin: 0px;
        padding: 0px;
        letter-spacing: -1px;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        color: #FFFFFF;
        border: none;
}

#menu a:hover, #menu .current_page_item a {
        text-decoration: none;
}

#menu .current_page_item a {
}

#main {
        overflow: hidden;
        width: 780px;
        margin: 0px auto;
        padding: 10px 10px 20px 10px;
        background: #000

}

#main-top {
        margin: 10px 10px 20px 10px;
        padding:0;
        font-size:14px;
        color:#CCC


}

#Raumplan{
        width: 782px;
        height:534px;       
        margin: 0px auto;
       
}
#Raumplan_top_left{
width:  406px;
height: 336px;
float:left;
top: 0;
left: 0;
}


#Raumplan_top_right{
width: 374px;
height:262px;
float:left;
top: 0;
left: 406px;
}       

#Raumplan_bottom_left{
width:406px;
height:336px;
float:left;
top:336px;
left:0px;
}       

#Raumplan_bottom_right{
width:374px;
height:262px;
float:left;
top: 374px;
left: 406px;
}


#main-bottom{
        width: 780px;
        margin: 0px auto;
}

#content {
        float: right;
        width: 530px;
}

#sidebar {
        float: left;
        width: 270px;
}




#footer {
        overflow: hidden;
        width: 800px;
        height: 50px;
        background: #222;
        margin: 0px auto 40px auto;
        }

#footer p {
        margin: 0px;
        padding: 15px 0px 0px 0px;
        text-align: center;
        text-transform: uppercase;
        font-size: 10px;
        color: #aaa;
}

#footer a {
        color: #aaa;
        text-decoration: none;
}
#lightbox{        position: absolute;        left: 0; width: 100%; z-index: 90; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 20%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:100; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
 #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%        ; }

#imageData{        padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }       
#imageData #caption{ font-weight: bold;        }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;        }                       
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}               

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

<!-- end -->

und so die seite Preise - Fitnesswelt Burgwedel

dazzle89 19.05.2012 15:18

Die Eigenschaften top, right, usw. wirken nur, wenn das Element eine Positionierung wie z.B. absolute oder relative erhalten hat. Da es aber nicht mehr absolut positioniert ist, bringen dir diese Eigenschaften nichts.

Du wirst stattdessen mit margin arbeiten müssen, also margin-right, margin-top, usw.


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:04 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023