|
|||
Anfänger: Positionierung.
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> 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-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> 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 --> Vielen dank wenn sich jemand damit befassen würde. Liebe Grüße Xam |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
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 --> |
|
|||
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. |
Stichwörter |
elterobjekt, footer, positionieren |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Falsche Positionierung im IE(8) | japanworm | CSS | 42 | 20.07.2011 16:56 |
Positionierung z-index und IE | Blub | CSS | 4 | 09.12.2007 16:51 |
Absoluter Anfänger - Frage zum Div und Positionierung | eenux | (X)HTML | 7 | 22.01.2007 21:00 |
Anfänger erbittet ein paar Tips. | Dr.Crow | (X)HTML | 5 | 20.06.2006 12:47 |
absoluter anfaenger verzweifelt an positionierung | Jansen | CSS | 3 | 02.11.2005 17:13 |