ik krijg css selector niet onder controle

Door Rob Cnossen op 26-08-2013 11:34 gewijzigd op 26-08-2013 11:45

1.598 views

Hallo,
in mijn website wil ik album's en de naam van de album's netjes bij elkaar hebben maar dit wil maar niet lukken.
Dit is de pagina waar ik het over heb;http://www.robcnossen.nl/
De albumnaam Belgie staat waar ik het hebben wil maar Holland zweeft ergens daarboven en krijg ik niet goed.
Mijn code was;

<div id="albums">
            <h2>
             <?php
         echo'<a href="view_album.php?album_id=', $album['id'],'">',$album['name'], '</a>';                               
             ?>
            </h2>
      <?php 
         echo'<a href="view_album.php?album_id=', $album["id"],'"><img src="uploads/thumbs/', $album["id"], '/', $album["imagename"],'" title="" /></a>';
      }
   }
?>

Het gaat om het stukje binnen de <h2> tags, dat zorgt voor de tekst. Dit ziet er nu zo uit;

<div id="albums"><a href="view_album.php?album_id=<?php echo $album['id'];?>"><h2><?php echo $album['name'], '</a>';?></h2>

omdat ik dacht dat het eerste gedeelte van deze zin voor problemen zorgde maar er veranderd niets. Ik ben nu op een punt aangekomen dat ik er meer een zooitje van maak dan dat ik iets oplos. Ook position relative of absolute wil niet helpen, de tekst en foto's verschuiven maar niet hoe ik het hebben wil.
Ziet iemand waarom de tekst zo raar staat en mij kan helpen om dit weer goed gepositioneerd kan krijgen?

Kris Peeters

26-08-2013 11:51 gewijzigd op 26-08-2013 11:53

Dat staat in zo'n structuur:


<div id="albums">
  ... hier alles over Holland
  <div id="albums">
    ... hier alles over België
  </div>
</div>

Dat kan nooit de bedoeling zijn.
- Ten eerste: gebruik nooooit twee keer de zelfde id.
id moet uniek zijn.
Als je wil dat meerdere elementen een zelfde ding doen, gebruik dan class="albums".

- Die ene div hoort niet in de andere genest te worden.

Probeer eens opniew, met <div class="albums">. En niet genest, maar iets als


<div class="albums">
... hier alles over Holland
</div>
<div class="albums">
... hier alles over België
</div>

----
Hier is een mooie tutorial, in het Nederlands. Ik zet de pagina al op "positionering"
http://sceneone.nl/positionering/positie.php

Rob Cnossen

26-08-2013 14:40

Ik zie nu pas dat de structuur inderdaad verkeerd is. Ik heb wel maar een <div id="albums"> gebruikt.
Ik heb deze div nu weggehaald en een andere structuur gebruikt. Het is wat overzichtelijker geworden en volgens mij werkt dit beter, alleen krijg ik de albums's nu niet naast elkaar, ik dacht dit met display:block-inline te moeten doen maar dit werkt nu niet.
Weet jij hoe de albums weer naast elkaar in plaats van onder elkaar kan krijgen?
http://www.robcnossen.nl/
De css code is;


body
{
background-color:#000;
}

#wrap{
	min-height: 100%;
}
#imagebar{
	 position:fixed;
	 border:1px solid #333;
	 text-align:center;
	 top:60%;
	    width: 100%;
	    height: 200px;
	    background: #0F0F0F;
}
#imagebar img {
	margin:8px;
        display: inline-block;
		border:1px solid #666;		        
}
#imagebar img:hover{
	border:1px solid #CCC;
}
#imagebar h2 a{
	text-decoration:none;
	color:#666;
}

Bedankt voor je hulp en de tutorial...

Kris Peeters

26-08-2013 14:55

Het is zeker niet nodig, maar met een extra wrapper, lukt het wel gemakkelijk.

bv.


<!doctype html>
<html>
  <head>
    <style>
      body {
        background-color:#000;
      }
      #wrap {
        min-height: 100%;
      }
      #imagebar {
        position: fixed;
        border: 1px solid #333;
        text-align: center;
        top: 60%;
        width: 100%;
        height: 200px;
        background: #0F0F0F;
      }
      #albumwrapper {
        width: 220px;
        margin: auto;
        display: block;
      }
      .albums {
        float: left;
        width: 50%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="imagebar">
        <div id="albumwrapper">
          <div class="albums">
            <a href="view_album.php?album_id=8"><h2>Holland</h2></a>
            <a href="view_album.php?album_id=8"><img src="http://www.robcnossen.nl/uploads/thumbs/8/KONICA MINOLTA DIGITAL CAMERA_428.jpeg" title="" ></a>
          </div>
          <div class="albums">
            <a href="view_album.php?album_id=9"><h2>Belgie</h2></a>
            <a href="view_album.php?album_id=9"><img src="http://www.robcnossen.nl/uploads/thumbs/9/PICT0170.JPG" title=""></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Rob Cnossen

26-08-2013 20:46

Heel erg bedankt voor je antwoorden en hulp, dit gaat lukken...

Reageren

Inloggen om te reageren