I'm trying to create a visual only (no text, except for captions) style webpage.
To give this page the best look, I want each clickable box to be a different size.
Here's what i want.
__________________________
| | 2 |
| 1 |_______|
| | 3 |
|_________________|_______|
|_4_|_5_| 8 |
|_6_|_7_|_________________|
So far, i've got boxes 1,2 and 3. The problem I'm having is with 4,5,6 and 7. Because they are smaller than box 8, instead of what I want, I get them displaying like below, which breaks flow, leaves blank spaces, and extends the page further than one screen.
|_4_|_5_|_6_|_7_|
| 8 |
|_________________|
How do I format the code so the layout is as I want it?
My code is below, all foundation framework is standard.
<body class="blackbackground">
<div class="fixed" id="includeHeader"></div>
<div class="fullwidth row collapse">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Contact</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">r3gamers.com</h2>
</div>
</a>
</div>
</div>
<div class="fullwidth row collapse">
<div class="large-8 medium-12 relative columns">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Portfolio</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">Contact</h2>
</div>
</a>
</div>
<div class="large-4 medium-12 relative columns border">
<div class="fullwidth row collapse large-4">
<div class="fullwidth row collapse large-4">
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
</div>
<div class="fullwidth row collapse large-4">
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
<div class="large-6 medium-6 relative columns border">
<a href="#" class="darken"><img src="img/r3gamersHome.png"/>
<div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
<h2 class="brighten">About Me</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
Aucun commentaire:
Enregistrer un commentaire