|
|||
zentrierte seite skalieren
Hi!
Bin dabei eine zentrierte aber skalierbare seite zu bauen. Auf der rechten seite sollen 2 fixe spalten sein und der content breich soll je nach browserfenstergröße immer den ganzen rest kriegen. Leider krieg ich zweiteres nicht hin. Hab im Moment dem content 50% gegeben was für die min-width stimmt, aber bei vergrößern des fensters wird mir der abstand zu groß. Könnt ihr hier mal drauf schauen, einfach in den Browser kopieren, dann versteht ihr vielleicht auch eher was ich meine Meine natürlich in den editor... oder hierein http://www.mywebra.net/TP-Samples/codebox.html (danke an mywebra) 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" xml:lang="de" lang="de"> <head> <meta name="generator" content= "HTML Tidy for Windows (vers 1st September 2004), see www.w3.org" /> <title> Test </title> <style type="text/css"> /*<![CDATA[*/ <!-- html {height:100%;} body { text-align:center; font-family: Verdana, Arial, Sans-Serif; background-color:#ABC2E5; padding: 0px; margin: 0px; color:#000; font-size : 11px; width: 100%; height: 100%; } .clear { clear: both; visible: hidden; } .horline { float: none; clear: left; background-color: #fff; margin: 0px; padding: 0px; line-height: 3px; height: 3px; /* für explorer */ font-size:2px; } /* zentrierung der Seite + spacer.gif in table um min-width für ie zu erzeugen */ #minwidthhack { text-align:left; margin: -3px auto; width:80%; min-width:761px; background-color: white; border-left:3px solid white; border-right:3px solid white; } #minwidthhack img { display: block; margin: -2px 0; padding:0; border:0; } #minwidthhack td { margin:0px; padding:0; } /* mittlerer bereich mit content und rechten spalten */ #container { position:relative; display:block; background:#dff; border-right:0px solid #a8a; width: 100%; } /* #inner { display:block; margin-right:-382px; padding:0px; } */ #right { float:right; position:relative; width:188px; margin-right:0px; background-color: blue; } #right2 { float:right; position:relative; width:188px; right:0px; background-color: red; } #center { float: left; width:50%; margin-right:0px; position:relative; /* display:block; */ height:1%; background-color: green; } --> /*]]>*/ </style> </head> <body> <table id="minwidthhack"> <tr> <td class="minwidthhack"> <div class="horline clear"></div> <div id="container"> <div id="inner"> <div id="center"> CONTENT column bla bla bla bla bla bla </div> <div id="right"> LINKBOXright column bla bla bla bla bla bla </div> <div id="right2"> BILDER right column bla bla bla bla bla bla </div> <div class="clear"></div> </div> </div> </td> </tr> <tr> <td> [img]images/space.gif[/img] </td> </tr> </table> </body> </html> gruß loater76 |
Sponsored Links |
|
|||
probier mal:
Code:
#center { float: left; width: auto; margin-right:376px; position:relative; /* display:block; */ height:1%; background-color: green; } Einzige Ausnahme: wenn nicht genügend Content vorhanden ist, so wie bei deinem Test z.B. Falls du das ganze optisch von einander abheben willst, kannst du das mit einem hg-bild machen. Die Technik wird hier näher beschrieben: http://www.alistapart.com/articles/fauxcolumns/ lycka |
Sponsored Links |
|
|||
Hi Lycka,
danke schon mal für die antwort! Wenn ich allerdings mehr copytext reinschreibe in den centercontainer, bricht der zwar korrekt bei margin-right 376px um, aber die beiden randdivs rutschen in die nächste zeile... hmm... muss ich noch mal weiterexperimentieren Gruß Floater |
|
|||
Hi nochmal,
hab mir noch mal Stu Nichols "Three columns"-Layout angeschaut (http://www.stunicholls.myby.co.uk/layouts/threecol.html) und einfach die linke fixe spalte auch nach rechts gestellt. Das funktioniert auch prima mit unten stehendem Code. Was ich jetzt nicht gut finde, aber nicht umgestellt bekomme per float, ist das im HTML zuerst die Randspalte-divs stehen und dann erst sozusagen ganz unten das Content-Div. Ist für die Suchmaschinen nicht so toll... Hat jemand ne idee, wie ich das umstellen könnte?? Gruß Floater Hier noch mal der Code bisher: zum ansehen hier reinkopieren: http://www.mywebra.net/TP-Samples/codebox.html (danke an mywebra) 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" xml:lang="de" lang="de"> <head> <meta name="generator" content= "HTML Tidy for Windows (vers 1st September 2004), see www.w3.org" /> <title> Test </title> <style type="text/css"> /*<![CDATA[*/ <!-- html {height:100%;} body { text-align:center; font-family: Verdana, Arial, Sans-Serif; background-color:#ABC2E5; padding: 0px; margin: 0px; color:#000; font-size : 11px; width: 100%; height: 100%; } .clear { clear: both; visible: hidden; } .horline { float: none; clear: left; background-color: #fff; margin: 0px; padding: 0px; line-height: 3px; height: 3px; /* für explorer */ font-size:2px; } /* zentrierung der Seite + spacer.gif in table um min-width für ie zu erzeugen */ #minwidthhack { text-align:left; margin: -3px auto; width:80%; min-width:761px; background-color: white; border-left:3px solid white; border-right:3px solid white; } #minwidthhack img { display: block; margin: -2px 0; padding:0; border:0; } #minwidthhack td { margin:0px; padding:0; } /* mittlerer bereich mit content und rechten spalten */ #container { background:#fff; } #inner { margin:0px; padding:0px; } #linkspalte { float:right; width:200px; left:0px; background:#f00; } #bildspalte { float:right; width:200px; right:0px; background:#00f;} #content { /* float:left; */ margin-left:0px; margin-right:400px; width: auto; background:#090; } --> /*]]>*/ </style> </head> <body> <table id="minwidthhack"> <tr> <td class="minwidthhack"> <div class="horline clear"></div> <div id="container"> <div id="inner"> <div id="linkspalte">links links links links links </div> <div id="bildspalte">bilder bilder bilder bilder </div> <div id="content">Content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="clear"></div> </td> </tr> <tr> <td> [img]images/space.gif[/img] </td> </tr> </table> </body> </html> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wordpress Seite Passwort-Schützen? | sepp88 | Serveradministration und serverseitige Scripte | 5 | 01.11.2009 13:56 |
Seite wird auf anderem Computer falsch dargestellt | Patrick Egli | CSS | 3 | 01.11.2009 11:40 |
Bei zentrierter Seite Eltern-Div flexibel vergrössern | +[Hagi]+ | CSS | 7 | 14.10.2009 21:03 |
Shtml auf jeder Seite einbinden - counter | iVx | Serveradministration und serverseitige Scripte | 1 | 13.09.2007 18:31 |
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite | Chico_wau | CSS | 2 | 14.05.2007 19:08 |