css boxes in elkaar ?

Status
Niet open voor verdere reacties.
J

jezebel

Gebruiker
Lid geworden
26 nov 2006
Berichten
35
ik heb een soort van hoofd style sheet gecentreerd op men pagina
als ik nu met layers op de box foto's en tekst maak blijven die niet mooi op die box staan als ik men venster verklein wat ik begrijp
maar als ik een andere box aanmaak kom deze onder de hoofdbox te staan terwijl ik die erin wil

moet ik dan anders gewoon met percentages gaan werken voor mijn layers

hier het probleem
http://www.rawmaterialcrew.be/centreren2.htm
 
Je voorbeeld heb ik gezien,
evenwel in het mij totaal niet duidelijk wat of de bedoeling is.
Ik neem aan, gewoon het gele vlak,
en niet de plaatjes welke onderaan staan.

///////////////edit

dit is je code
PHP: 
<body bgcolor="#B9B9F4" >
		<div id="Layer1" style=" width:272px; height:169px; z-index:1">
			deze 
  tekst zit in een layer
		</div>
		<p class="container">
		hoofdbox
		</p>
		<p class="unnamed1">
		&nbsp;
		</p>
	</body>

wat is............., beter gezegd hoe moet het eruit gaan zien?
 
Laatst bewerkt:
Hier nog wat gefróbeld..............

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>
			jebel
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		
		<link href="sdfdf.css" rel="stylesheet" type="text/css">
		
<style type="text/css" media="screen">
 
body 
{ 
margin: 0; 
        padding: 0; 
        font-family: comic sans ms, verdana, arial, hevetica, sans-serif; 
        text-align: center; 
       color: #000;
	   background: #B9B9F4;
} 

.container{
	width:900px;
	height:1000px;
	text-align:center;
	border:2px outset #999999;
	margin-left:auto;
	margin-right:auto;
	color: #000;
	background: #ffffcc;
} 
.unnamed1 {
	border: 1px solid #000000;
	left: 10%;
	background-color: #FFFFFF;
	cursor: hand;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
	background-image: url(http://www.rawmaterialcrew.be/foto/fotobalk.gif);


}
</style>
		 
	</head>
	 
	<body bgcolor="#B9B9F4" >
		
		<!-- cont begin -->
		<div class="container" >
			hoofdbox
			<!-- layer begin -->
			<div id="Layer1" style=" width:272px; height:169px; z-index:1;border: 2px solid #ff0000;">
				deze 
				  tekst zit in een layer
			</div>
			<!-- layer eind -->
			    
		</div>
		<!-- cont eind -->
		
		<!-- unnamed begin -->
		<div class="unnamed1">
			&nbsp;
		</div>
		<!-- unnamed eind -->
		
	</body>
</html>

:cool:
 
lol is het normaal niet zo dat er oplossingen gegeven worden nadat men weet wat er gevraagd wordt:)

wat jij hebt hierboven hebt geschreven, die layer met tekst gaat nu mooi mee met de hoofdbox wanneer ik het venster verklein dat wilde ik hebben, heb je dat gedaan met die z-index aan te passen ofzo ?

ik zou nu ook die tweede box onderaan met die fotootjes in de hoofdbox willen krijgen ook mooi gecentreerd.
ik denk dat die op een manier in mekaar genest moeten worden ofzo maar ik weet niet hoe.

alvast bedankt
 
Zoals je kunt zien heb ik met divs gewerkt.
In een div kun je andere divs zetten, nesten.
PHP: 
  <!-- cont begin -->
        <div class="container" >
            hoofdbox
            <!-- layer begin -->
            <div id="Layer1" style=" width:272px; height:169px; z-index:1;border: 2px solid #ff0000;">
                deze
                  tekst zit in een layer
            </div>
            <!-- layer eind -->
                
        </div>
        <!-- cont eind -->
        
        <!-- unnamed begin -->
        <div class="unnamed1">
            &nbsp;
        </div>
        <!-- unnamed eind -->

Ter verduidelijking
zijn er comments gebruikt
<!-- unnamed begin -->
hierdoor is je code makkelijker te lezen.

Nu moet je gaan stoeien om het naar je zin te krijgen.
Googel even op
css layout design how-to
of
css layout hoe-doe-je

En inderdaad:
trek je venster kleiner en bekijk het in IE en FF
en zet er (als test) veel tekst in
als je aan het ontwerpen bent.

...... soms ben je dagen bezig voor het naar je zin is :(

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan