Sponsored Links |
|
||||
Ohne floaten geht das nur, wenn die mittlere im DOM nach den beiden anderen kommt Edit fiddle - JSFiddle ist m.E.n. aber nicht sehr schick...
|
Sponsored Links |
|
|||
Hallo,
ohne die volle Aufgabenstellung kann ich dir nur eine allgemeine Lösung anbieten: HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>3 Spalten</title> <meta name="description" content="3 Spalten nebeneinander"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> div{ height: 300px; } div.floatlinks{ width: 33%; background-color: yellow; float: left; } div.floatrechts{ width: 33%; background-color: green; float: right; } div.margin{ width: 34%; background-color: red; margin: 5% 33%; } </style> </head> <body> <main role="main"> <div class="floatlinks"> <p>floatlinks</p> </div> <div class="floatrechts"> <p>floatrechts</p> </div> <div class="margin"> <p>margin</p> </div> </main> </body> </html> Gruss MrMurphy Geändert von MrMurphy (23.12.2013 um 18:36 Uhr) |
|
||||
Na dann... HTML und CSS... es geht darum, div info (rechte Spalte) neben div inhalt (mittige) zu platzieren.
HTML-Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dreispaltiges Layout</title> <link rel="stylesheet" href="style.css" /> </head> <nav id="navigation"> <ul> <li><a href="#" >Produkte</a></li> <li><a href="#" >Service</a></li> <li><a href="#" >Kontakt</a></li> <li><a href="#" >Profil</a></li> <li><a href="#" >Home</a></li> </ul> </nav> <div id="inhalt"> <h2>Wilkommen auf unserer Website</h2> <h2>Hier präsentieren wir ein 3-spaltiges Layout</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> </div> <div id="info"> <div class="box"> <h2>Info-Box 1</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> <div class="box"> <h2>Info-Box 2</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> <div class="box"> <h2>Info-Box 3</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </div> </div> </html> Code:
body { font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; font-size: 12px; margin: 0 auto; margin-top: 20px; width: 900px; } /* Spalte Links, Navigation */ #navigation { float: left; border: 1px; border-style: solid; width: 170px; height: 200px; background-color: #666666; } /* Navigation reset */ #navigation ul, #navigation li, #navigation a { margin: 0; padding: 0; border: none; font-weight: bold; color: black; font-size: 13px; text-decoration: none; } #navigation ul { } #navigation li { list-style: none; padding: 2px; margin-bottom: 12px; background-color: #cccccc; text-align: left; } /* Spalte Mitte, Inhalt */ /* wenn inhalt keinen float hat, will #info nicht neben #inhalt stehen */ #inhalt { border: 1px; border-style: solid; width: 500px; height: 800px; margin-right: 190x; margin-left: 190px; padding: 3px; } /* Spalte rechts, Boxen gesamt */ #info { float: right; width: 170px; } /* Boxen einzeln*/ .box { border: 1px; border-style: solid; height: auto; } |
|
|||
Dir wurde doch schon gesagt und auch anhand von 2 Beispielen aufgezeigt wie es umzusetzen ist.
Im Html MUSS dein Div info vor dem Div inhalt kommen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
||||
Zuerst mal - warum hat dein HTML keinen body?
Und dann vielleicht nochmal die komplette Fragestellung. Weil, wie oben schon geschrieben, geht das nur, wenn der mittlere nach den beiden äußeren folgt, oder aber mit einem Hilfs-div. Aber dafür müsste man die genaue Fragestellung kennen. |
Sponsored Links |
|
||||
Ich hatte einen Mausproblem beim mehrfachen Kopieren, originell body ist da wo es sein sollte.
@explanator, okay, das mit Reihenfolge wusste ich nicht. Ich versuch jetzt was damit zu machen, danke. |
Sponsored Links |
Stichwörter |
float, margin, spalten |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 18:44 |
joomla template | wrock | CSS | 2 | 06.04.2012 20:24 |
CSS - CMS - lange Menus Balken/BG oben? | shinobi | CSS | 3 | 13.10.2011 22:12 |
Webseite für Smartphones Optimieren. | Cybertronic | CSS | 8 | 25.08.2011 12:44 |
CSS 3 Spalten Layout mit float --> Umbruch verhindern | der_die_das | CSS | 1 | 27.10.2009 06:57 |