|
|||
CSS: Boxen positionieren
Moin zusammen,
okay, ich bin mit meinem Latein völlig am Ende! Ich habe jetzt schon fast alle (fast, weil es sicherlich eine Möglichkeit gibt) Möglichkeiten probiert... hab mir float,position, etc. gearbeitet und nichts funktioniert RICHTIG! Entweder wird es ganz falsch dargestellt oder ganz anders als ich es will oder der IE 6 stellt es anders da als der FF. Was ich will ist einfach nur die beiden Boxen "main" und "left" mittig unter dr "top" Box zu positionieren mit einem Abstand zwischen ihnen von 5px. Das ganze soll variabel sein (also % Angaben) damit man es auch auf 1024*768 anschauen kann!! Bitte helft mir... ich packs einfach nicht! Seite: http://sylt.ndi-networx.de Gruß sanhco |
Sponsored Links |
|
||||
Ein Tip:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Tabletest</title> <meta http-equiv="content-type" content="text/html; iso-8859-1"> <style type="text/css" media="screen,projection"> * { margin: 0; padding: 0; } #inhalt { } #linkebox { float: left; width: 30%; background-color: green; } #inhalt p { margin-left: 32%; background-color: blue; } </style> </head> <body> <div id="inhalt"> <div id="linkebox">Links</div> Hier steht der Inhalt</p> </div> </body> </html>
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
|
|||
So, ich habe es jetzt gelöst indem ich eine zusätzliche Box definiert habe und die beiden darein gepackt habe! Komischerweise habe ich das auch schon tausend Variante probiert und nie hat es geklappt! Egal... jetzt funktioniert es!
Jetzt muss ich nur noch dieses blöde Logo so hinbasteln, dass es die Boxen überlappt! Btw. ist der Code soweit okay? CSS: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ language="vbscript"%> <html> <head> <link rel="stylesheet" type="text/css" href="css/home.css"> </head> <body style="margin:0px"> <div id="top"><p align="center">top</p></div> <div id="mainframe"> <div id="left">left</div> <div id="main">main</div> </div> </body> </html> Code:
#logo { float:left; margin-top:0px; } #top{ width:64%; height:100px; margin-top:0px; margin-left:auto; margin-right:auto; border:dashed 1px #000000; } #mainframe{ width:64%; height:680px; margin-top:5px; margin-left:auto; margin-right:auto; border:dashed 0px #000000; } #left{ float:left; width:15%; height:679.5px; border:dashed 1px #000000; } #main{ float:right; width:83.7%; height:679.5px; border:dashed 1px #000000; } a:link { color:#000000; text-decoration:none; } a:visited {color:#cccccc; text-decoration:none; } a:hover { color:#000000; text-decoration:none; } a:active { color:blue; } p { margin-top: 0 } sancho |
|
||||
Was bezweckst du eigentlich mit so einem krummen Wert wie height:679.5px; ?
Und wenn der Inhalt länger wird, dann wird er nicht mehr dargestellt - das weisst du auch, oder?
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
Ajo... die krummen Werte kommen durch die Prozentangaben!!
Ich werd das ganze Ding nochmal überarbeiten und dann Bildschirmgrößenunabhängig machen. Jetzt wo ich erstmal das Gerüst hab dürfte das ja kein Problem sein! Gruß sancho |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hitergrundbild(er) positionieren mit CSS | seemawn | CSS | 2 | 17.07.2015 14:18 |
Bild mit CSS positionieren | XER | CSS | 4 | 15.12.2011 14:47 |
CSS Boxen / Clear | LARA1000 | CSS | 1 | 09.02.2009 08:01 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
3-spalten-layout --> boxen nebeneinander positionieren | nevermind | CSS | 9 | 03.01.2006 13:08 |