Vleugels aan zijkant van Joomla template

Hier precies in Photoshop wat ik wil:


Hoe ga ik dit het best aanpakken? Mijn contentpane is namelijk een wittebalk van ongeveer 20 pixels hoog en 960 breed die zich herhaalt, dus daar kan hij niet aan vast..

position:relative op je content area, en dan met position:absolute en top, left je vleugeltjes op de juiste plek zetten.

Jelmer rrrr op 15/12/2010 00:45:54

position:relative op je content area, en dan met position:absolute en top, left je vleugeltjes op de juiste plek zetten.

Het probleem is dus dat ik niet zo goed ben met CSS, zou je me verder kunnen helpen?
Dit is mijn contentpane volgens mij:

#maincontentwrapper {
    background-image:url(../images/filler.jpg);
    background-repeat:repeat-y;
    clear: both;
    float: left;
    width: 960px;
    margin-top: 0px;
}

als je position absolute gebruikt schuift
je afbeelding niet mee met de pagina als
je deze verkleint.

gebruik gewoon margin-left / right: ...px; doen.
want je maakt gebruik van ((float)) als
het gedeelte van je pagina een width heeft
gaat hij daar niet overeen met alleen
float: left; hij blijft namelijk binnen de
pagina marges.
ik hoop dat je hier wat mee kunt doen.

groeten, raymond

ps dit is een forum bedoeld voor php instructies
en vragen niet voor joomla/css.

Raymond reniers op 15/12/2010 10:36:21

als je position absolute gebruikt schuift
je afbeelding niet mee met de pagina als
je deze verkleint.

Z'n content heeft een vaste breedte, en het leuke van position:relative op de parent-node van die twee vleugeltjes is dat alle kinderen hun eigen posities tov die parent krijgen wanneer je position:absolute gebruikt, en niet meer tov de pagina zelf.

Raymond reniers op 15/12/2010 10:36:21

ps dit is een forum bedoeld voor php instructies
en vragen niet voor joomla/css.

Klopt, dus hou je maar snel stil want jouwn oplossing is waardeloos met de margin-left, dan kun je beter position:absolute gebruiken.


@TS
Waarom zo moeilijk met al die positions?

Hij kan ook gewoon de vleugels op de achtergrond plakken (dus op de zwart/blauwe achtergrond)... Weet je zeker dat het in elke browser goed werkt.

@ Oetzie, dat was inderdaad ook mijn plan, maar de achtergrond is een kleur met een envelope eroverheen:

body {
	padding: 0px;
	margin: 0 auto;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	background:url(../images/envelope_02.png);
	background-repeat:repeat-x;
	background-position: 50% 0;
}

Hoe ga ik hier dan de vleugels aanvast plakken?

door de afbeelding precies goed op maat te maken en te centreren.

Moet ik dan gewoon die envelope uitrekken tot 960? Want hij is nu ongeveer 30px breed en herhaald zich horizontaal

nee tot 1900 pixels, omdat hij door de vleugels niet meer kan herhalen heb je gewoon een afbeelding van 1900 pixels nodig zodat hij wel het hele scherm vult.