#1 21. Juni 2011 Problem mit ausrichten Hallo zusammen, ich habe folgenden css-code: Code: /* ========================================================= Stylesheet für Übungsseiten "Little Boxes, Teil 1" Stand: Ende Kap. 08 - nach der Sortierung Datei: ebay.css Datum: 11. April 2011 Autor: David Asal Aufbau: 1. Kalibrierung und Restauration 2. Allgemeine Styles 3. Styles für Layoutbereiche 4. Sonstige Styles ========================================================== */ /* ======================================= 1. Kalibrierung und Restauration ======================================= */ * { padding: 0; margin: 0; } /* Abstände auf 0 setzen in jedem Browser */ /* html { height: 101%; } erzwingt Scrollbar im Firefox */ /* ======================================= 2. Allgemeine Styles 1. die Elemente html und body 2. Block-Elemente wie Überschriften, Absätze, Listen, Zitate etc. 3. Inline-Elemente: Hyperlinks, Bilder und Elemente wie strong und em 4. allgemeine Klassen und IDs wie .infobox oder img#logo ======================================= */ h1 , h3{ font-size: 170%; color: #9d373c; font-variant: small-caps; } h2 { font-size: 130%; color: #e52529; } .indent{ /* padding: 0 0 0 40px */ text-align: right; } h3{ font-size: 120%; } /* ======================================= 3. Styles für die Layoutbereiche Reihenfolge entspricht dabei der des Auftretens im HTML-Quelltext ======================================= */ a { text-decoration: none; outline: none; } a:link { color: blue; font-weight: bold; } a:visited { color: blue; font-weight: bold; } a:hover, a:focus { background-color: #d90000; color: white; font-weight: bold; } a:active { color: white; background-color: #d90000; } #logo{ margin: auto; width: 600px; } #wrapper{ background-color: #bebebe; border: 1px solid red; font-family: Times, Verdana, Helvetica, sans-serif; margin: 10px auto; -moz-border-radius: 8px; width: 600px; } #header{ border-bottom: 1px solid red; color: #ffffff; font-family: "Hobo Std", Times, Helvetica sans-serif; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; padding: 8px; } #einfuehrung{ background-color: white; border-bottom: 1px solid red; margin-bottom: 5px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; padding: 8px; } #einfuehrung p span{ color: blue; font-family: "Hobo Std", Times, Helvetica sans-serif; font-size: 80%; } #picture{ position: center; background-color: white; border-bottom: 1px solid red; border-right: 1px solid red; border-top: 1px solid red; float: left; height: 271px; margin-bottom: 5px; -moz-border-radius-bottomright: 7px; -moz-border-radius-topright: 7px; padding: 8px; width: 275px; } #product{ background-color: white; border-bottom: 1px solid red; border-left: 1px solid red; border-top: 1px solid red; float: right; -moz-border-radius-bottomleft: 7px; -moz-border-radius-topleft: 7px; padding: 8px; width: 282px; } #product p span, #lieferung p span{ color: blue; font-family: "Hobo Std", Times, Helvetica sans-serif; font-size: 80% } #lieferung{ background-color: white; border-bottom: 1px solid red; border-left: 1px solid red; border-top: 1px solid red; float: right; margin-bottom: 5px; margin-top: 5px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-topleft: 7px; padding: 8px; width: 282px; } #zahlung{ background-color: white; border-top: 1px solid red; border-bottom: 1px solid red; clear: left; margin-top: 5px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; padding: 8px; } #versand{ background-color: white; border-top: 1px solid red; border-bottom: 1px solid red; margin-top: 5px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; padding: 8px; } #weiteres{ background-color: white; border-top: 1px solid red; border-bottom: 1px solid red; margin-top: 5px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; padding: 8px; } #footer{ font-size: 160%; font-weight: bold; font-variant: small-caps; color: #9d373c; margin-top: 5px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomleft: 7px; -moz-border-radius-bottomright: 7px; padding: 8px; text-align: center; } /* ======================================= 4. Sonstige Styles ======================================= */ und folgenden html-code: Code: <link href="http://www.drinkinggames.de/ebay/ebay_blue.css" rel="stylesheet" type="text/css" media="screen"> <div id="logo"> <a href="http://www.drinkinggames.de" target="_blank"><img src="http://www.drinkinggames.de/pictures/Logo1.jpg" title="Beer Pong Stuff and more" height="79" width="130"></a> <div id="wrapper"> <div id="header"> <h1>Text Text Text</h1> <h2 class="indent">Text Text Text</h2> </div> <!-- Ende header --> <div id="einfuehrung"> <p>Text Text Text</p> <p>Text Text Text<span>Text Text Text</span> Text Text Text</p><br> <p>Text Text Text</p><br> <p>Text Text Text.</p> </div> <!-- Ende einfuehrung --> <div id="picture"> <h3>Produktbild</h3> <img src="http://www.drinkinggames.de/components/com_virtuemart/shop_image/product/Party_Cups__blau_4d0723757cab5.jpg" id="productPic" alt="Solo Red Cups" height="250" width="250"> </div> <!-- Ende picture --> <div id="product"> <h3>Produktinformationen</h3> <p>> Text Text Text</p> <p>> Text Text Text: <span>Text Text Text</span></p> <p>> Text Text Text: Text Text Text(474ml)</p> <p>> Text Text Textoben: Text Text Text</p> <p>> Text Text Textunten: 6Text Text Text5cm</p> <p>> Text Text Text: Text Text Text</p> <p>> Text Text Text: Text Text Text(PS)</p> <p>> Verpackungseinheit: 4 Stangen à 50 Becher</p> </div> <!-- Ende product --> <div id="lieferung"> <h3>Lieferumfang</h3> <p>> <span>Text Text Text</span></p> <p>> 1x Rechnung (mit ausgewiesener MwSt.)</p> </div> <!-- Ende lieferung --> <div id="zahlung"> <h3>Text Text Text</h3> <p>> Text Text Text</p> <p>> Text Text Text</p> </div><!-- Ende zahlung --> <div id="versand"> <h3>Versand</h3> <p>> Text Text Text</p> <p>> Text Text Text</p> <p>> Text Text Text</p> </div><!-- Ende versand --> <div id="weiteres"> <h3>Weitere Informationen</h3> <p>> Text Text Text</p> <p>> Text Text Text</p> <p>> Text Text Text</p> </div><!-- Ende weiteres --> <div id="footer"> <p>Text Text Text</p> </div><!-- Ende footer --> </div> <!-- Ende wrapper --> <a href="http://www.facebook.com/drinkinggamesde"><img src=http://www.drinkinggames.de/ebay/pictures/facebook.png title="Find us on Facebook" heigth="50" width="50"></a> </div> <!-- Ende logo --> jetzt das problem was ich einfach nicht hinbekomme: ich will das logo oben bündig rechts haben über der überschrift und das facbook-logo unten mittig unter dem letzten grauen kasten. kann mir da jemand helfen? ich bekomme es nicht hin :/ habe den code mal gemacht und mich seit da nicht mehr mit css beschäftigt...daher klappts jetzt auch nicht mehr + Multi-Zitat Zitieren
#2 21. Juni 2011 AW: Problem mit ausrichten http://data.thirty3.de/ so???????????????? + Multi-Zitat Zitieren
#3 22. Juni 2011 AW: Problem mit ausrichten JAAAA! genau so wie hast du das gemacht? WIe ist der CSS und HTML-Code also der abgeänderte? Ober geil!! 1000 dank! kann man das beim facebook logo noch so machen, dass der hover-link nicht rot unterlegt wird? + Multi-Zitat Zitieren
#4 22. Juni 2011 AW: Problem mit ausrichten rote hinterlegung ist weg ... sourcecode kannst du ja auf meinem link anschauehn --> rechtsklick --> seitenquelltext anzeigen ;-) edit: ich habe jetzt nicht auf ordentlichen code geachtet etc... du solltest das nochmals überarbeiten und bennenen wie du es brauchst/willst ... soll dir ja nur zeigen wie du dein problem löst/lösen kannst + Multi-Zitat Zitieren
#5 22. Juni 2011 AW: Problem mit ausrichten super, danke! echt geil! nur wie komme ich an den css-code? kannst du den hier posten? + Multi-Zitat Zitieren
#6 22. Juni 2011 AW: Problem mit ausrichten kannst auch im sourcecode sehen ... einfach ganz oben wo du die css datei einbindest auf style.css klicken ;-) + Multi-Zitat Zitieren