Hoe gelijke hoogte instellen voor rij grijze vakken?

Status
Niet open voor verdere reacties.
Op deze pagina zijn de blokken even hoog omdat ervoor is gezorgd dat /of de foto /of de tekst de juiste hoogte heeft. Een kwestie van creatief met de ruimte omgaan die beschikbaar is. Bij deze pagina zijn ze ongelijk omdat her en der de tekst te lang is of de foto te klein is. Wil je lange teksten? Kleinere font-size is dan de oplossing.
 
Pagina http://www.welenhoeck.byethost14.com/?i=1 ziet er qua code redelijk uit dus die gebruik ik als voorbeeld.

Bij html gaat het om netjes werken :) Ik gebruik meestal Notepad++ om schone code te schrijven. Als je in deze editor elke <div> laat inspringen en bij </div> weer laat terugspringen dan zie je beter de structuur en is het makkelijker fout zoeken of dingen wijzigen. Op deze pagina kom ik dan foutjes tegen (heeft overigens niet met je vraag te maken). Het gaat om 8 keer een </a> die niet in de code thuis hoort, </a> weghalen dus.
<i class="fa fa-plus-square" style="color:#900;font-size:150%;position:absolute;bottom:-10px;right:-10px;z-index:20;"></i></a>

Als je 3 blokken op een rij wilt hebben dan moeten er 2 dingen in de html gebeuren (de css hoef je niets in te doen)
- in een class="w3-row" komen 3 blokken i.p.v. 4
- bij elk blok verander je de class m3 in m4 (want in een 12-grid is 3 blokken x m4 = 12)
Code:
<div class="w3-row w3-margin-bottom">
     --- hier komen 3 blokken (of minder) i.p.v. 4 ---
</div>

<div class="w3-col s6 [B]m4[/B] item-box-bg-grey">

screenshot-box1.jpg screenshot-box2.jpg

Suc6. Have fun.
 
Ik heb net even gekeken. Er zitten 2 foutjes in de hoofdstructuur.
De </a> moet weg achter <i class="fa fa-plus-square" .....>
De </div> moet weg die direct boven <div id="footer" .....> staat.

Het is te veel werk. Dat zou leiden tot een betaalde opdracht omdat het niet een 123 klusje is.
Je kan er wel een tutorial voor volgen. Er wordt gebruik gemaakt van W3.CSS (klik).
Misschien een andere helper die er tijd voor heeft?
 
Laatst bewerkt:
Je kan er wel een tutorial voor volgen. Er wordt gebruik gemaakt van W3.CSS (klik).
Misschien een andere helper die er tijd voor heeft?

Dank je wel bron voor deze info! Ik heb het dan toch in orde gekregen! Ik heb van mijn originele pagina de code weggelaten tot ik enkel de code had die nodig was voor die grijze vakken.
Dit heb ik dus ook gebruikt uit uw info:
<div id="left" class="w3-third w3-container">
<div id="right" class="w3-twothird w3-container">
Zie: http://www.welenhoeck.byethost14.com/tmp/index2.php# Zo wou ik het!
 
Ziet er goed uit :thumb:
In het bovenste stukje zitten een paar kleine dingetjes, hieronder staat de minimale html
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ruimte voor alternatieven | Welenhoeck</title>
<link rel="stylesheet" href="css/wh.css?12">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="js/wh.js"></script>
<script type="text/javascript">
 ...
</script>
</head>
<body style="margin:0;background-color:#ffffff;" onload="initActions()">
suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan