Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2005

Layoutnöt att knäcka

Jag håller på att försöka göra en guide för en webblayout som kan anpassa sig dynamiskt till innehållet. Sidan består av tre div:ar i höjd där den 1:a är huvudinnehållet, 2:a dynamiskt anpassande och 3:e är foten. Nu till problemet, huvudinnehållet kan inte förändras i höjdled på grund av dess grafiska design, denna ska vara fast. I div 1 så ska ändå texter och bilder placeras (huvudinnehållet), sedan ska div 2 anpassa höjd och sist så placeras sidfoten där div 2 slutar.

För att få div 2 att anpassa sig i höjd så måste jag placera huvudinnehållet i en div innanför, sedan sätta den som position relative och placement top: -356 för att den ska se ut att ligga i "huvudinnehållet" rent designmässigt.
Detta gör att div 2 anpassar sig i höjd, men även att div 2 skjuter ifrån så fort innehållsboxen utökas (som alltså ligger innanför denna div), vilket gör att jag får ett alldeles för stort glapp från innehållsboxen till sidfoten.

Hängde ni med? Jag ska försöka illustrera detta i bild lite bättre.

HTML-koden:

<!-- Wrap the page --> <div class="wrapper" id="wrapper"> <div class="wall-main" id="wall-main"> </div> <!-- Maincontent and copyheight --> <div class="wall-copyheight" id="wall-copyheight"> <div class="content" id="content"> Text och bild här. </div> </div> <div class="wall-foot" id="wall-foot"> </div> <!-- End wrap --> </div>

Stilmallen:

body { margin: 0px; background-color: #000000; } #wrapper { height: auto; width: 950px; margin-right: auto; margin-left: auto; } #wall-main { background-image: url(../img/wall-main.jpg); background-repeat: no-repeat; width: 950px; height: 507px; } #wall-copyheight { background-image: url(../img/wall-copyheight.jpg); background-repeat: repeat-y; width: 950px; } #wall-foot { height: 88px; width: 950px; background-image: url(../img/wall-foot.jpg); } #content { width: 390px; left: 270px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; top: -356px; position: relative; }

God jul!

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jan 2007

margin-bottom: -356px; på #content lär hjälpa.

Trädvy Permalänk
Medlem
Plats
Göteborg/Mölndal
Registrerad
Apr 2004

Ingen lösning på ditt problem, men måste säga att designen ser fin ut!
Skicka gärna en länk i pm när den är uppe, om du kommer ihåg och vill.

Trädvy Permalänk
Medlem
Registrerad
Mar 2006

Rätta mig om jag har fel
Teori:

div2 blir precis så lång som innehållet är. Skulle content vara 50px långt så märks inte den här "missen" i din kod, men den märks när sidan börjar scrolla å jävlas.

För att undvika det här kan du bygga om sidan lite..

html,body { margin:0; padding:0; height:100%; } #wrapper { position:relative; margin:0 auto; width: 950px; height:auto !important; height:100%; min-height:100%; background:url(../img/wall-copyheight.jpg); } #head { background-image: url(../bilden högst upp); background-repeat: no-repeat; width: 950px; } #content { width: 390px; left: 270px; background-image: url(../en annan bild); background-repeat: no-repeat; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; color: #FFFFFF; } #foot { position:absolute; bottom:0; height: 88px; width: 950px; background-image: url(../img/wall-foot.jpg); } <!-- Wrap the page --> <div class="wrapper" id="wrapper"> <div id="head">head</div> <div id="content"> Text och bild här. </div> <div id="foot">fot</div> <!-- End wrap --> </div>

För att det här ska funka tror jag(?) att du behöver skära om bilderna lite.
Bilden i din div1 (wall-main.jpg) får du dela i två, å lägga vardera i #head och #content. Och sätt en lämplig height i #head.

Hoppas det löser sig

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2005

Tack för bra svar hörni! Tyvärr så fungerar inte margin-bottom på minus, för då flyttas hela copyheight-boxen upp och den reagerar fortfarande på samma sätt (blir för hög). Ska skicka upp en guide på hur man gör en sån här sida sen och hur man kan tänka med layout och så, så det dyker upp sen Xack!

EDIT: Om problemet nedan, om jag ställer in height på min wrapper så fungerar bakgrunden och repeteras, dock inte när jag sätter denna till auto (eller inget), hur göra?

Men nu har jag testat att strukturera om upplägget en aning. Jag har delat in sidan på det här viset:

Detta har gjort att höjden och placeringen blir rätt på allt innehåll som kommer efter huvudinnehållet, men jag har stött på ett märkligt problem. Hur jag än försöker fylla min wrapper (med repeterande bakgrundsbild eller fyllningsfärg) så visas inte denna i hålen som blir (där det står tomt på bilden). Vad kan det bero på?

Vill man kika in där jag håller på att bygga så ligger den här för tillfället: http://x02.guc.se/~lejak/artistsinn-v2/news.html

HTML:

<div id="wrapper"> <div id="wall-left"> </div> <!-- Main Content --> <div id="wall-center"> <br /><br /><br /><br /><br /><br /><br /><br /> Lorem ipsum.. </div> <div id="wall-right"> </div> <!-- End Wrap --> </div> <div id="wall-footer"> </div>

CSS:

body { margin: 0px; background-color: #000000; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 16px; color: #FFFFFF; } #wrapper { width: 951px; margin-right: auto; margin-left: auto; background-image: url(../img/wall-copyheight.jpg); background-repeat: repeat-y; position: relative; } #wall-left { background-image: url(../img/wall-main-left.jpg); height: 507px; width: 256px; position: relative; float: left; } #wall-footer { background-image: url(../img/wall-footer.jpg); position: relative; height: 88px; width: 950px; margin-right: auto; margin-left: auto; clear: both; } #wall-center { background-image: url(../img/wall-main-center.jpg); width: 386px; position: relative; float: left; background-repeat: no-repeat; background-color: #000000; } #wall-right { background-image: url(../img/wall-main-right.jpg); height: 507px; width: 309px; position: relative; float: right; }

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Trädvy Permalänk
Medlem
Plats
Malmö
Registrerad
Jul 2008

Problemet du har är att dina objekt inte räknas in i wrappers höjd. För att lösa det så kan du helt enkelt lägga in:

<div style="clear:both" />

innan slutet på wrapern.

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Feb 2005
Citat:

Ursprungligen inskrivet av Peo_Bond
Problemet du har är att dina objekt inte räknas in i wrappers höjd. För att lösa det så kan du helt enkelt lägga in:

<div style="clear:both" />

innan slutet på wrapern.

Perfekt, tack så mycket! Något som jag inte haft en tanke på tidigare. Då är det bara försöka få till så att upprepningen blir någorlunda snygg.

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Trädvy Permalänk
Medlem
Plats
öhh..
Registrerad
Maj 2004

Trodde jag äntligen hade hittat lösningen på mitt problem, men så upptäcker jag att sidan ser asfuckad ut i alla andra upplösningar än den du använder. Fan