Layoutnöt att knäcka

2008-12-12 13:34

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!

Visa signatur

Rapportera Redigera

Citera flera Citera

2008-12-12 15:48

Permalänk

You

Medlem

Plats: Göteborg
Registrerad: Jan 2007

●

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

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Rapportera Redigera

Citera flera Citera

2008-12-13 02:42

Permalänk

Xack

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.

Rapportera Redigera

Citera flera Citera

2008-12-13 13:24

Permalänk

lokem

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

Rapportera Redigera

Citera flera Citera

2008-12-18 13:31

Permalänk

save

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;
}

Senast redigerat 2008-12-18 15:38

Visa signatur

Rapportera Redigera

Citera flera Citera

2008-12-18 15:33

Permalänk

Peo_Bond

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.

Rapportera Redigera

Citera flera Citera

2008-12-18 16:15

Permalänk

save

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.

Visa signatur

Rapportera Redigera

Citera flera Citera

2009-05-27 19:12

Permalänk

Grunther

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

Rapportera Redigera

Citera flera Citera

Layoutnöt att knäcka

Layoutnöt att knäcka

Externa nyheter

Spelnyheter från FZ