| Autor |
Nachricht |
Montis
Threadersteller
Dabei seit: 08.04.2008
Ort: Calw
Alter: 41
Geschlecht: 
|
Verfasst Do 11.02.2010 18:29
Titel Div statt Tabellen bei automatischen Größen |
  |
|
wie setze ich folgendes web-layout von tabellen in DIV um? die pfeile zeigen an, wo es sich automatisch erweitern soll, alles zwischen den schwarzen linien soll eine feste breite besitzen.
der graue hintergrund soll sich natürlich oben rechts und unten links ebenfalls erweitern, aber da man damit bei einfarbigem hintergrund kein problem hat, hab ich dort die pfeile mal weggelassen.
wichtig ist auch, dass unten die seite keinen grauen rand hat sondern auch bei kleinerem inhalt immer komplett bis an den rand grün/weiss/gelb ist.
würde mich über hilfe freuen, braucht auch nicht der komplette html/css code sein, sondern nur, was ich den einzelnen divs für eigenschaften zuweisen muss, damit das funktioniert.
|
|
| |
  |
 |
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
|
| |
|
|
|
Anzeige
|
|
|
Montis
Threadersteller
Dabei seit: 08.04.2008
Ort: Calw
Alter: 41
Geschlecht:
|
Verfasst Do 11.02.2010 18:54
Titel
|
|
|
|
grundsätzlich kenne ich divs und das boxmodell, aber mit meinen bisherigen ansätzen konnte ich das obige nicht ohne (meiner meinung nach) unsaubere workarounds lösen.
|
|
| |
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Do 11.02.2010 22:45
Titel
|
|
|
Hat das gelbe Div oben links bei dir einen Text-Inhalt, oder soll dort nur ein Hintergrundbild sein?
Gleiche Frage für das gelbe Div unten rechts.
Die Lösung für die Weiterführung von grün, weiß und gelb im fixen Bereich nach unten: Einem umschließenden Div eine Hintergrundgrafik zuweisen, die links grün, mittig weiß und rechts gelb ist. Umsetzungsbeispiel.
Sollte oben links nur eine Hintergrundgrafik rein: Hier ein Div absolut positionieren, mit einer Breite von 50% (damit liegst du auf der sicheren Seite), und per Z-Index hinter dem zentrierten fixen Bereich positionieren.
|
|
| |
|
|
Montis
Threadersteller
Dabei seit: 08.04.2008
Ort: Calw
Alter: 41
Geschlecht:
|
Verfasst Fr 12.02.2010 09:51
Titel
|
|
|
die gelben divs sollen einfach nur gelb sein, einfarbig ohne hintergrundbild. das mit den 50% und dem z-index klingt schonmal gar nicht verkehrt, werde ich mal testen. die frage ist nun nur, wie ich es schaffe, das untere div auf jedenfall bis zum unteren rand ausdehnen zu lassen, höhe in prozent hat gestern irgendwie nicht funktioniert.
danke auf jedenfall schonmal
Zuletzt bearbeitet von Montis am Fr 12.02.2010 09:51, insgesamt 1-mal bearbeitet
|
|
| |
|
|
tschuingum
Dabei seit: 17.06.2009
Ort: Karlsruhe
Alter: -
Geschlecht: -
|
Verfasst Fr 12.02.2010 12:36
Titel
|
|
|
Denk einfacher - wo kein Inhalt, da kein Markup. Heißt in diesem Fall reicht dir als body folgender Code:
| Code: |
<body>
<div id="wrapper">
</div>
</body>
|
Dann gehts ans Layout, also an CSS - als da wären:
1. ein Hintergrundbild für das html-Tag; 1px hoch, überbreit (z.B. 3000px), linke Seite grau, rechte Seite gelb
2. ein Hintergrundbild für das body-Tag; so hoch wie der gelbe Bereich links, überbreit, linke Seite grau, rechte Seite gelb
3. ein Hintergrundbild für den Wrapper; 1px hoch, so breit wie gewünscht, die farbigen Spalten rein (so wie es easteregg beschrieben hat)
Als Code ergibt sich dann daraus:
| Code: |
html, body {
height:100%;
}
html {
background: url('bg_html.jpg') center top;
}
body {
background: url('bg_body.jpg') no-repeat center top;
}
#wrapper {
margin: 0 auto;
width: 800px;
min-height: 100%;
background: url('bg_wrapper.jpg') repeat-y;
}
|
Fertig ist das Grundgerüst. Wobei man dem IE6 noch ein height statt min-height für den Wrapper verpassen müsste.
Zuletzt bearbeitet von tschuingum am Fr 12.02.2010 12:36, insgesamt 1-mal bearbeitet
|
|
| |
 |
|
Montis
Threadersteller
Dabei seit: 08.04.2008
Ort: Calw
Alter: 41
Geschlecht:
|
Verfasst Fr 12.02.2010 13:23
Titel
|
|
|
Danke, habs jetzt hinbekommen, mein problem war, dass ich html nicht auch auf 100% gesetzt hatte.
Auch wenn's wahrscheinlich nicht 100% perfekt ist, so funktionierts:
| Code: | <body>
<div id="leftback"></div>
<div id="rightback">
<div id="rightback_top"></div>
</div>
<div id="pagewrapper">
<div id="pagetop">
<div id="topleft"></div>
<div id="header"></div>
</div>
<div id="abstand"></div>
<div id="pagemain">
<div id="mainleft"></div>
<div id="maincenter"></div>
<div id="mainright"></div>
</div>
</div>
</body> |
| Code: | body, html{height:100%; width:100%; margin:0; padding:0;}
body {background-color:#c5c4c2;}
#leftback, #rightback {width:50%; position:absolute; background-color:#ffcb79; z-index:-1;}
#leftback {left:0; height:200px;}
#rightback {right:0; min-height:100%; height:auto !important; height:100%; margin:0 auto;}
#rightback_top{height: 230px; background-color:#c5c4c2; z-index:1;}
#pagewrapper {width:980px; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto; background-image:url(1px_hohes_bg_bild_mit_3_farben.gif); background-repeat:repeat-y; background-position:left;}
#pagetop {height:200px; background-color:#c5c4c2; z-index:10;}
#topleft {width:188px; height:200px; background-color:#019340; margin-right:60px; float:left;}
#header {width:570px; height:200px; float:left; background-color:#333333; z-index:10;}
#abstand {height:30px; width:100%; background-color:#c5c4c2;}
#pagemain {min-height:100px;}
#mainleft {height:100px; width:188px; float:left;}
#maincenter {height:100px; width:630px; float:left;}
#mainright {height:100px; width:162px; float:left;} |
|
|
| |
|
|
Montis
Threadersteller
Dabei seit: 08.04.2008
Ort: Calw
Alter: 41
Geschlecht:
|
Verfasst Fr 12.02.2010 16:06
Titel
|
|
|
okay, ist auch nicht so das wahre, sobald der content in #maincenter größer wird als das browserfenster bricht der hintergrund ab 
muss ich wohl doch ein übergroßes hintergrundbild benutzen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Illustrator-Script zur automatischen Einfärbung
Hilfe: Formmailer mit automatischen auszählen.....
CSS Frage automatischen Umbruch einrücken, möglich?
Tool zum automatischen Sortieren Hoch-/Querformat
[CSS] Div-Größen Problem
popup größen
|
|
Willkommen auf dem Portal für Mediengestalter
