Archief - Vraag background-image div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
f

faxxR

Legacy Member
Hallo,

ik heb een vraagje i.v.m. de background-image van een div.

dit is wat ik nu heb: (krijg ik te zien in browser)
http://www.afbeeldingenuploaden.nl/uploads/428296watikheb.png

De breedte is 1024px.
Ik heb voor ieder blokje een background-image die ik heb uitgeknipt in photoshop. Ieder blokje heeft een vaste hoogte en breedte (de breedte en hoogte van de background-image)

dit is wat ik zou willen:
http://www.afbeeldingenuploaden.nl/uploads/985922watikwil.png

Dat het linkse blokje bv. 70% van het scherm inneemt en het rechtse 30%, dus geen vaste breedte meer maar afhankelijk van het scherm. En dat dan ook de hoogte zich automatisch aanpast. Hoe doe ik dit dat mijn afbeelding mee vergroot?

Hieronder mijn HTML en CSS code:

HTML: 
<!DOCTYPE HTML>

<head>
<meta charset="utf-8" />
<title>Jommeke - Kwistig Kwissen</title>

<!-- VOOR ALLE INTERNET EXPLORER VERSIES ONDER VERSIE 9 -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- CSS RESET -->
<link type="text/css" href="_css/reset.css" rel="stylesheet" media="all" />

<!-- MY OWN CSS FILE -->
<link type="text/css" href="_css/main.css" rel="stylesheet" media="all" />

<!-- JAVASCRIPT FILES -->
<script type="text/javascript" src="_scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="_scripts/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="_scripts/global.js"></script>

<!-- FAVICON -->
<link rel="icon" href="_assets/favicon.ico">

</head>

<!--------------------------------------------------------------------------------->

<body>

<!--<div id="nav-dock"> 
	<a href="#top" class="scrolltoanchor"><img src="_assets/pijl.png" alt="naarboven"/></a> 
</div>-->

<header id="top">


<div class="headerleft">
    
    <nav>
    <a href="flashapp.html" ><img src="_assets/btn1.png" /></a>
    <a href="#verhaal" class="scrolltoanchor"><img src="_assets/btn2.png" /></a>
    <a href="#overons" class="scrolltoanchor"><img src="_assets/btn4.png" /></a>
    <a href="#personages" class="scrolltoanchor"><img src="_assets/btn3.png" /></a>

    </nav>
    
    </div>
    
    <div class="headerright">
    </div>
    
    

</header>

<!--------------------------------------------------------------------------------->

<section id="verhaal">

	<article class="section2left">
    <div id="nav2">
    <a href="#top" class="scrolltoanchor"><img src="_assets/btn1_1.png" /></a>
    <a href="#verhaal" class="scrolltoanchor"><img src="_assets/btn2_2.png" /></a>
    <a href="#overons" class="scrolltoanchor"><img src="_assets/btn3_3.png" /></a>
    <a href="#personages" class="scrolltoanchor"><img src="_assets/btn4_4.png" /></a>
    </div>
   
    </article>
    
    <asside class="section2right">
    </asside>


</section>

<!--------------------------------------------------------------------------------->

<section id="overons">

	
	<article class="section3left">
    <div id="nav3">
    <a href="#top" class="scrolltoanchor"><img src="_assets/btn1_1.png" /></a>
    <a href="#verhaal" class="scrolltoanchor"><img src="_assets/btn2_2.png" /></a>
    <a href="#overons" class="scrolltoanchor"><img src="_assets/btn3_3.png" /></a>
    <a href="#personages" class="scrolltoanchor"><img src="_assets/btn4_4.png" /></a>
    </div>
    </article>
    
    <asside class="section3right">
    </asside>
    
    
</section>

<!--------------------------------------------------------------------------------->

<section id="personages">

	<asside class="section4left">
    </asside>
    
    <article class="section4right">
    </article>

</section>
    
    

<p class="number">19</p>

<footer>
Hier komt de footer
</footer>

</body>
</html>

HTML: 
/******************** CSS FILE ********************/

body {
	/*background:#fff;*/
	background:#fcf4ec;
	width: 1024px;
	/*margin: 40px auto 100px;*/
	margin: 0px auto;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#000;
}

a {
	color: #66F;
	text-decoration: none;
	outline: none;
}

/************** LAY-OUT ************/

header{
	height: 332px;
	margin: 0px 0;
	padding: 5px 40px;
	/*background: #fff;*/
	background:#fcf4ec;
}

section{
	height: 331px;
	margin: 0px 0;
	padding: 5px 40px;
	/*background: #fff;*/
	background:#fcf4ec;
}


.headerleft{
	background-image:url(../_assets/eerste.png);
	width: 621px;
	height: 322px;
	float:left;
	}

.headerright{
	background-image:url(../_assets/tweede.png);
	width:315px;
	height:322px;
	float:right;
}

/*.centerpage{
	/*position:absolute;
	top:223px;*/
	/*margin-top:223px;
/*}*/

nav{
	width:270px;
	margin-left:330px;
	margin-top:60px;
}



.section2left{
	background-image:url(../_assets/derde.png);
	width: 607px;
	height: 321px;
	float:left;	
	}
	
#verhaal article p{
	padding-top:85px;
	padding-left:20px;
	padding-right:20px;	
}

#nav2{
	
	float:right;
	padding-top:10px;
	padding-right:30px;
}

#nav2 a{
	padding-left:5px;
}

#nav3{	
	float:right;
	padding-top:250px;
	padding-right:5px
}

#nav3 a{
	padding-left:5px;

}


.section2right{
	background-image:url(../_assets/vierde.png);
	width:335px;
	height:321px;
	float:right;

}

.section3left{
	background-image:url(../_assets/vijfde.png);
	width: 505px;
	height: 320px;
	
	float:left;
	
	
	}

.section3right{
	background-image:url(../_assets/zesde.png);
	width:425px;
	height:320px;
	float:right;

}

.section4left{
	background-image:url(../_assets/zevende.png);
	width: 363px;
	height: 320px;
	
	float:left;
	
	
	}

.section4right{
	background-image:url(../_assets/achtste.png);
	width:568px;
	height:320px;
	float:right;

}

.number{
	/*padding: 0 40px;*/
	text-align:right;
	padding-right:40px;
	color:#000;
}

footer{
	padding-left:40px;
}

Alvast bedankt en laat iets weten indien het niet duidelijk is!
-

-BVR-

Legacy Member
Ten eerste: als je wilt dat je afbeelding even breed zijn als je met procenten werkt, moet je ook zien dat de échte afbeelding dezelfde width hebben, anders kom je met procenten maar een enkele keer hetzelfde uit hé.

Ten tweede: uit je code maak ik op dat je precies maar een beginner bent. Wat jij probeert te doen lijkt me een stap te ver voor wat je kan. HTML5 is leuk, maar je gebruikt het op een vreemde manier. Header-tags? Ik zou opteren voor section. Je wilt zoiets maken denk ik: Coming soon - Netlash-bSeen Maar daar ben je volgens mij nog niet klaar voor.
f

faxxR

Legacy Member
Neen, en ik weet tags kloppen nog niet. En ik wil dat de bovenste linkse afbeelding 80% van het scherm inneemt, en die afbeelding links eronder 70% van het scherm. Als dit gaat met de bovenste afbeelding, waarom lukt dit dan niet met de onderste?
-

-BVR-

Legacy Member
...

div#section2left{width: 70%;}
img#background2{width: 100%;}
f

faxxR

Legacy Member
Zou ik daar beste allemaal secties van maken? En daarin dan articles?
f

faxxR

Legacy Member
Ik wil dus blokjes met daarin tekst, nu is mijn vraag. Ieder blokje een section en daarin articles of ....?
-

-BVR-

Legacy Member
faxxR zei:
Ik wil dus blokjes met daarin tekst, nu is mijn vraag. Ieder blokje een section en daarin articles of ....?
Klik om te vergroten...

Ik bedoel heel uw website. Wat gaat het worden. Altijd één frame van de strip en dan next? (Zoals het Netlash Bseen voorbeeld) Of niet zo. En, lees gewoon het artikel en beslis dan wat jij het beste vindt. In feite is het gewoon een semantisch hulpmiddel hé. Ge kunt even goed gewoon divs gebruiken als blockelement.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan