Vleugels aan zijkant van Joomla template
Ik zou graag aan de zijkanten van mijn template in Joomla twee vleugels willen hebben.
Hier een voorbeeld van de templateHier een voorbeeld van de template
De vleugels heb ik al, maar hoe pak ik dit aan? Met een divje lijkt me handig, maar hoe geef ik aan dat het rechts en links moet komen?
Hier mijn index.php:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#maincontentwrapper {
background-image:url(../images/filler.jpg);
background-repeat:repeat-y;
clear: both;
float: left;
width: 960px;
margin-top: 0px;
}
background-image:url(../images/filler.jpg);
background-repeat:repeat-y;
clear: both;
float: left;
width: 960px;
margin-top: 0px;
}
Code tags toegevoegd
[/modedit]
Gewijzigd op 14/12/2010 23:47:04 door Rover ---
Zou iemand mij verder kunnen helpen?
Wou alleen bereiken dat je tenminste code tags om je code plaatste.
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..
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:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#maincontentwrapper {
background-image:url(../images/filler.jpg);
background-repeat:repeat-y;
clear: both;
float: left;
width: 960px;
margin-top: 0px;
}
background-image:url(../images/filler.jpg);
background-repeat:repeat-y;
clear: both;
float: left;
width: 960px;
margin-top: 0px;
}
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.
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.
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.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
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;
}
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?