bg probleem

  • Onderwerp starter Onderwerp starter fom
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
F

fom

Gebruiker
Lid geworden
21 apr 2011
Berichten
10
Hallo, ik ben nieuw hier dus ik hoop dat dit bericht hier goed staat. Ik heb een achtergrond en hier zit een diamond gardient in. Nou wil ik graag dat als er meer content op de site komt dat de bg groter wordt. Maar als ik dit gwn laat repeaten wordt dit natuurlijk heel lelijk. Dus ik dacht ik neem de bovenste helft van de bg, dan het midden voor repeat en dan het onder stuk. Kan dit, en zo ja hoe? De content moet wel helemaal boven aan de bg staan en moet over de hele bg vallen. niet dat hij een deel weg duwt.

Mvg

Tom
 
Laatst bewerkt:
Hoi Tom,
Met css kan (bijna) alles! :)
Dit ook, tenminste als het img zich ervoor leent.

Het principe is: er komen 3 <div>'s: met de bovenkant, het repeatende middendeel, en de onderkant. Het herhaal-middendeel is de algemene achtergrond van het hele content-blok. Daarbinnen zit een nieuwe <div>, waarin het bovenstuk zit plus de tekst. En daaronder zit de laatste div met het onderstuk; dat wordt met css naar boven gehesen, zodat de onderkant ervan gelijk komt te vallen met de onderkant van het tekstblok.
Als je begrijpt wat ik bedoel! ;)

En toepassing staat hier: www.tresmode.nl
Toelichting:
  • Op de startpagina staat weinig tekst. Het bovenstuk van de patroon-achtergrond eindigt vlak onder het vakje van het fotocarrousel (met de pijltjes). Het onderstuk begint vlak boven het bovenste puntje van de centimeter. Ze sluiten naadloos op elkaar aan.
  • Maar het geheim zit in de 1mm onder het vakje en boven het centimeter-hoekje: daar zit de knip!
  • Op die hoogte zit namelijk, horizontaal gezien, een strookje van (hier) 1mm waarin alle verticale lijnen kunnen doorlopen.
  • Dat strookje is de achtergrond-figuur die het verlengstuk tussen de twee delen vormt: het kan met een repeat-y zo hoog worden als nodig is.
  • Dat kan je bv. zien op de vervolgpagina's "Gevorderden" (daar zit er al wat meer speling tussen het carrousel en de centimeter) en "Vergevorderden" (daar staat het koffiekopje duidelijk een heel stuk naar onderen).
Door deze constructie van het zichzelf-verlengende middenstuk is het nu ook mogelijk dat de bezoek kiest voor een ander letterformaat. De tekst wordt dan hoger of juist minder hoog, en het middenstuk ook.
  • Een beschrijving van hoe het zover is gekomen (zweetdruppeltjes! :d) staat in een topic "Layout slicen zonder tabel" op het forum, vanaf ongeveer hier; de fase-nummers zijn aanklikbaar!
Maar hoe ziet jouw diamond-gradiënt er precies uit?

Met vriendelijke groet,
CSShunter
 
oke, ik ga er even naar kijken. Dit is de background. Ik dacht, op het punt waar de gradient het breedst is, dat repeaten.
 

Bijlagen

  • bg.jpg
    bg.jpg
    21,1 KB · Weergaven: 29
het is gelukt, maar er is alleen een nadeel. Als ik een height instel dan werkt de repeat niet. Maar als ik niks instel dan wordt de BG zo groot als de content. Maar ik wil wel dat hij minimaal een bepaalde grote heeft. Als ik min-height doet dan is de onderste bg altijd zo groot en komt daar dus geen content op te staan. Hoe los ik dit op? En waar dient de <div id="wrap-bottom"> voor in het voorbeeld in de andere topic?
 
Laatst bewerkt:
Ja, die <div id="wrap-bottom"> kwam ik gisteren tot m'n verbazing ook tegen. Die dient nergens voor, en is waarschijnlijk een restant van een eerdere testpagina. Gelukkig doet ie ook geen kwaad.

Het midden lijkt me prima voor je afbeelding: dat moet te doen zijn.
Je probleem met het geschetste nadeel: zou kunnen zitten in het ophangen van de min-height aan een verkeerde div. *) Maar dat kan ik uit m'n blote hoofd vanuit hier niet overzien.
Heb je een testpagina online, zodat we de concrete codes kunnen bekijken?

Met vriendelijke groet,
CSShunter
_______
*) In het tres-voorbeeld zit ie niet aan de #wrapper maar aan de #main (met de content) vast:
www.developerscorner.nl/csshunter/tresnw/tresnw-min-height.htm
 
de code die ik gebruik is:

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<div id="wrap">
    
    
        <div id="top_wrap">
        	
        	
        
                <div id="content">
            
                    <p> </p>
            
                </div>
                
      		
      		 
       		<div id="bottom_wrap"></div>
     	</div>
     
    
    </div>
    

</body>
</html>

en CSS:

Code: 
@charset "utf-8";
/* CSS Document */

*{
	margin:0px;
	padding:0px;
	border:0px;
}

html {
	height: 100%;
	background-color:#000;
	}
body
{
	width: 1000px;
	margin: 0 auto;
}

#top
{
	height:140px;
	width:1000px;
	background-color:#000;	
}

#wrap
{
	background:url(images/bgmid.jpg) repeat-y 100% 0;
	outline: 1px dotted green;
	position: relative
}

#top_wrap
{
	background:url(images/top.jpg) no-repeat 0 0;
	outline: 1px dotted red;
}



#bottom_wrap
{
	background:url(images/bottom.jpg) no-repeat left bottom;
	height:391px;
	clear:left;
	outline: 1px dotted yellow; 
}

#content
{
	width:950px;
}

#content P
{
	padding:20px 0px 20px 20px;
	margin-bottom:-391px;
}

.clearBoth {
	clear: both;
	height: 1px;
	margin-bottom: -1px;
	}

en bijgevoegd een screenshot hoe het eruit ziet met tekst.
 

Bijlagen

  • bg.jpg
    bg.jpg
    98,5 KB · Weergaven: 32
Juistem!
Je hebt de #bottom_wrap binnen de #top_wrap gezet.
Maar hij moet er echt als evenwaardige div na / onder komen in de html-structuur, en dan via een negatieve margin-top (ter waarde van zijn hoogte) weer omhoog getrokken worden over de (achtergrond van de) #top_wrap heen.

Afhankelijk van de minimum-hoogte of echte hoogte van de content blijft de #bottom_wrap er eigenlijk altijd onder hangen, maar door het opkrikken met de negatieve margin-top zit ie dus steeds op de bodem van de #top_wrap.
Met vriendelijke groet,
CSShunter
 
bedankt het werkt nu :D

Echter nog wel een klein vraagje. Ik wil een footer met een regeltje tekst helemaal onder aan de bg. Alleen als de content leeg is en de background gewoon zijn min-height heeft, komt de footer naar boven. Hoe hou ik deze beneden?

De footer staat trouwens gewoon in de top_wrap, hier moet alle content komen toch?
 
Nop, de #footer hoort niet onderaan de gewone content, maar onderaan het totaal.

Het makkelijkst is om de #footer div weer onder de #bottom_wrap te zetten.
Vervolgens weer een negatieve margin-top, nu niet met een aantal px, maar met een aantal em's, zodat bij vergroting van het letterformaat de starthoogte ook wat hoger ligt.
Ter compensatie wordt de padding-bottom van de content ook in em's gezet: die groeit dan verhoudingsgewijs gewoon mee.
Groetjes,
CSShunter
 
Oke bedankt. het is gelukt :D

Heel erg bedankt voor al je hulp!

Mvg

Michel
 
Ik had nog even een snel vraagje :) Kan dit ook met een bg die ronde hoeken heeft? Want de repeat gaat achter de hele bg zitten, dus dan vallen die hoeken weg.
 
Even een snel antwoordje. ;)
Ja, dat kan.
  1. Als je een site-background hebt die 1 kleur heeft, dan kan je gewoon het top-plaatje en het bottom-plaatje in het stukje naast de ronde hoeken in de kleur van de site-background tekenen: deze worden eroverheen geplakt, dus het middenstuk is daar dan niet meer te zien.
  2. Mocht je een site-background hebben met een verloop er in, of met een figuur, dan moeten de buitenkanten van de hoekjes transparant zijn, en kan het niet op die manier. Dan kan het wel, als je boven de eerste div een nieuw div'je maakt ter hoogte van die hoekjes, en daar over de breedte een img in zet met transparante hoekjes. Hetzelfde doe je dan in een nieuwe div onder het brouwsel, met daarin als background-img de onderste transparante hoekjes. Zo blijven ze buiten het gebied van het middenstuk, en zijn ze toch flexibel als de inhoud groter of kleiner wordt: dan bewegen ze gewoon mee, en het geheel blijft naadloos in orde.
Dus!
:)
 
Laatst bewerkt:
als ik dat doe, dan wordt het hele midden stuk een andere kleur :s het helpt wel bij het onder stuk :)
 
O, die snap ik niet. Heb je een testpagina waarop dit te bewonderen valt?
 
Dat is dus optie 1 van reactie #12: de hoekjes kunnen eenvoudig zwart geschilderd worden in plaats van transparant te zijn:
Met vriendelijke groet,
CSShunter
 
oke :P bedankt! ik begreep het niet helemaal goed dan :)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan