|
|||
Probleme mit der Ausrichtung
Hallo, ich habe ein Problem mit der Ausrichtung meiner Inhalte.
Es handelt sich um die Contentspalte in der ich Quasi 3 Spalten generieren will die nebeneinander stehen. 1. Spalte Bild 2. Spalte Liste mit Text 3. Spalte Liste mit Text Bekomm es nicht hin das die Divs nebeneinander floaten und jeweils einen bestimmten Abstand zueinander haben. Diese Drei Spalten sollen in einem Content Div enthalten sein welches Späte immer dupliziert werden soll. Was Muss ich tun damit der float richtig funzt, und die Div´s nicht untereinander erscheinen. Gruss und Danke vorab. John |
Sponsored Links |
|
|||
Zeig doch mal deinen Code, siehe meine Sig.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
HTML-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> <link type="text/css" href="1.css" rel="stylesheet" media="screen" /> <title>youdonthavetocallitmusic/label</title> <link rel="shortcut icon" href="http://monorom.com/favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="container"> <div id="banner" ><img src="Bilder/headder_main.jpg" alt="" width="995" height="117" border="0" /></div> <div id="content"> <!--Start Track 1 --> <div class="trackbox"> <div id="box"><img src="Bilder/track_1.jpg" alt="" width="102" height="102" border="0" /> <ul id="speaker"> <li><img src="Bilder/speaker.jpg" alt="" width="13" height="13" border="0" /></li> <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li> <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li> <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li> <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li> <li><img src="Bilder/note.jpg" alt="" width="13" height="13" border="0" /></li> </ul> <ul id="description1"> <li>Test</li> <li> Mama Bär / Kommissar Hjuler 01</li> <li> Wiederaufnahmeverfa <li> LP, (SHMF) 100/YouD o1, ltd. num. 100td. num. 100</li> <li> Sold out <li> Mama Bär / Kommissar Hjuler 01</li> <li> Wiederaufnahmeverfa <li> LP, (SHMF) 100/YouD o1, ltd. num. 100td. num. 100</li> <li> Sold out </ul> <ul id="description2"> <li>Test</li> <li> Mama Bär / Kommissar Hjuler 01</li> <li> Wiederaufnahmeve</li> <li></li> <li>rfahren II / 06 </li> <li> LP, (SHMF)100/YouD o1, ltd. num. 100</li> <li> Sold out </ul> </div> </div> </div> <!--Ende Track 1 --> </div> <div id="left"> <img src="Bilder/menue_main.jpg" alt="" width="136" height="604" border="0" /></div> <div id="menu"> <ul style="position:absolute; top:102px; left:5px; margin-top:10px; margin-left:17px; " > <li><a href="#">Home</a></li><br /> <li><a href="#">Impressum</a></li><br /><p> <li ><a href="#">Label</a></li><br /> <li><a href="#">Sale</a></li><p> <li><a href="#">Wanted</a></li><br /> <li><a href="#">Collection</a></li><br /><p> <li><a href="#">Links</a></li><br /> </ul> </div> </div> <p> </p> </body> </html> Code:
body { background-color: #999fa5; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#0b1435; letter-spacing:0.1em; padding:0px; margin:0px; } a {color: #2c71ab;} a:visited {color:#2c71ab;} a:hover {color: #2c71ab;} a:active { color:#2c71ab;} h1 { font-size: 23px; text-transform:uppercase; background-color: #E0A3B7; border-top:1px solid #564b47; border-bottom:1px solid #564b47; padding:5px 15px; margin:0px } h2 { font-size:14px; font-weight: bold; padding: 5px 10px; margin:0px;} img.download {vertical-align:middle;} /* ----------container zentriert das layout-------------- */ #container { width: 1024px; margin-top:117px; } /* ----------banner for logo-------------- */ #banner { background:url(Bilder/headder_repeat.jpg) repeat-x; position:absolute; left:0px; top:0px; width:100%; height: 117px; background-color:#0F3; padding: 0px; margin: 0px; } #banner img {padding:0px 0px; position:absolute; left:0px; top:0px; width:995px; height:117px; } /* -----------------Inhalt--------------------- */ #content { background-color: #ffffff; padding: 0px; margin-left: 136px; margin-right: 0px; } div#content { min-height:600px; height:expression(this.scrollHeight > 600 ? "auto":"600px"); } /* --------------left navigavtion------------- */ #left { position:absolute; left:0px; top:0px; background:url(Bilder/menue_repeat.jpg) repeat-y; height:100%; padding: 0px; margin-top:117px; float: right; width: 136px; } /* --------------left menue ------------- */ #menu { /* position: absolute; height: 150px; left:26px; top:102px; */ } #menu ul { float: left; padding: 0; list-style: none; line-height: normal; } #menu li { display: inline; } #menu a { text-decoration: none; color: #ffffff; font-size: 13px; font-family:Verdana, Arial, SunSans-Regular, Sans-Serif; letter-spacing:normal; line-height:15px; } #menu a:hover { color:#dc2a07; } /* --------------records------------- */ #record { float:left; } .trackbox { width:889px; height: inherit; padding: 0 0 20px 0; background-color:#445854; background:url(Bilder/footer.jpg) no-repeat bottom; } /* --------------track------------- */ #box { width:880px; margin: 0 0 0 0; background-color:#3FF; } #box img{ width:102px; float:left; } #box:after{ content: "."; visibility:hidden; height:0; clear:both; display:block; } /* #description2:after{ content: "."; visibility:hidden; height:0; clear:both; display:block;; } */ .bildbox{ width:200px; height:120px; background-color:#3C6; } #description1{ list-style-type:none; background-color:#F03; display:block; width:370px; float:left; padding:0 0 0 0px; margin:0 0 0 24px; } #description2{ list-style-type:none; background-color:#0F6; display:block; width:353px; padding:0 0 0 0px; margin:0 0 0 500px; } #tracks { width:50px; height:20px; background-color:#FF0; float:left; display:block; } #tracks img{ width:13px; } #tracks li{ list-style-type:none; float:left; height:13px; margin:0; padding:0; } #speaker { clear:both; width:80px; height:13px; list-style-type:none; margin:0; background-color:#3C6; } #speaker img { width:13px; } #speaker ul { float:left; display:block; } /* --------------trackdescr------------- */ .textbox1 { width:370px; margin:0 0 0 0px; display:block; position:relative; left: 25%; } .textbox1 ul { } .textbox1 li { } Ich möchte erreichen das das id="speaker" unterhalb von dem Bild angezeigt wird und rechts vom Bild sollen die beiden Textboxen "description1" + "description2" nebeneinander gefloated werden. Wenn die Textboxen mehr inhalt haben, soll id="speaker" nicht von ihnen verdrängt werden sondern immer unter dem Bild stehbleiben. Vielen Dank |
|
|||
Hallo Johnzon,
ich habe mir deinen Code angesehen und finde ihn insgesamt sehr ungeeignet für deine Anforderungen. Beschäftige Dich mit der Reihenfolge von Elementen im Fließtext, mit Verschachtelung, und vor allem mit den Eigenschaften der Elemente im Zusammenhang mit floats. Sehr gute Grundlagen vermittelt Dir Peter Müllners Little Boxes Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS Wenn Du das durch hast, was bei schnellem Lesen und Verstehen einen Abend dauern dürfte, kannst Du Dich, immer wieder vergewissernd, an eine konkrete Umsetzung wagen. Eine Umarbeitung des Codes würde eine komplette Umbearbeitung des HTML und des CSS bedeuteten, sorry, die Zeit habe ich nicht
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
paar Probleme mit dem CSS Layout | SimonK. | CSS | 6 | 05.10.2008 15:57 |
Probleme mit der Ausrichtung | robbie | CSS | 2 | 21.03.2008 12:05 |
IE: Probleme mit ul-Menü | Ares | CSS | 4 | 18.10.2006 12:42 |
Probleme mit Ausrichtung bei verschiedenen Auflösungen | ollie75 | CSS | 4 | 22.02.2006 23:16 |
Ausrichtung, "Balken" . Probleme in Firefox und IE | Ben | CSS | 4 | 26.07.2005 21:52 |