[CSS] Z-index - Softwareontwikkeling

zaterdag 15 mei 2010 14:44

Acties:

0 Henk 'm!

Topicstarter

Hoi allemaal,

Ben nu bezig met een pagina waar 2 foto's elkaar steeds moeten overlappen. Hiervoor heb ik het volgende stukje code:

PHP:

<?php
session_start();
require "inloggen.php";
require "dbconnect.php";
$categorieid = $_GET['cat'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Verwijderen van foto's</title>
<style type="text/css">
<!--
body
{
    font: Arial;
    background: #9e9e9e;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    color: #000000;
}

.verwijder
{
    position: relative;
    z-index: 3;
}

.link
{
    position:relative;
    top: 0px;
    right: 500px;
    z-index: 4;
}

.foto
{
    float:left;
}
-->
</style>
</head>
<body>
<?php
if (!isset($_GET['cat']))
{
    echo "<a href=\"verwijderen.php\">Kies eerst een categorie!</a>";
}
else
{
    $sql = mysql_query("SELECT * FROM `verwijzen` WHERE `CATEGORIE_ID` = '".$categorieid."' ORDER BY `volgorde` ASC");
    if(!$sql)
    {
        echo "Helaas chocopasta. Neem contact op met Marijn";
    }
    else
    {
        while($foto = mysql_fetch_assoc($sql))
        {
            echo "<div class=\"verwijder\"><img class=\"foto\" width=\"100\" height=\"100\" src=\"".$foto['locatie']."\" /></div><div class=\"link\"><a href=\"?cat=".$categorieid."&id=".$foto['AFBEELDING_ID']."\"><img class=\"verwijder\" src=\"rood.png\" /></a></div>\n";
        }
    }
}
?>
           
</body>
</html>

Helaas is dit het resultaat.
Ik heb werkelijk geen idee wat ik fout doe. De bedoeling is dat alle foto's gewoon naast elkaar staan, niet als een trappetje, en dat er dan bij iedere foto in de rechter-boven-hoek een rood kruisje staat. Ik heb al met de position en de top en right lopen kloten, maar dit heeft geen effect. Als ik van de positie absolute maak, dan staan alle foto's in één klap rechtsboven in de hoek onder elkaar, dus dan zie je maar één foto, en één kruisje. Met googlen kwam ik er ook niet uit. Wie heeft enig idee?

Alvast bedankt,
Marijn

And that's how one and one makes three.

zaterdag 15 mei 2010 14:48

Acties:

0 Henk 'm!

mathijs92

Verander dit ook even:
Regel 5:
[code=php]
$categorieid = $_GET['cat'];
[/code=php]
Naar:
[code=php]
$categorieid = mysql_real_escape_string($_GET['cat']);
[/code=php]
En lees dan maar wat over SQL injection en alles wat daarbij hoort

[ Voor 20% gewijzigd door mathijs92 op 15-05-2010 14:51 ]

zaterdag 15 mei 2010 14:49

Acties:

0 Henk 'm!

Aloys

Als je eerst eens [ code ] in [ code = php ] wilt veranderen (zonder spaties), dan leest het alweer een stuk makkelijker.

Ik vraag me af of er niet een veel simpelere manier is. Als ik het goed begrijp wil jij de foto's naast elkaar zien? Als dat zo is moet je eens kijken naar CSS:Float. Daarmee kan je zorgen dat je div's naast elkaar komen ipv. onder elkaar.

zaterdag 15 mei 2010 14:54

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Z-index heeft nikt te maken met het daadwerkelijk overlappen van elementen, dat zul je toch echt zelf moeten doen met floats, absolute positioning of zelfs exotischere dingen als negatieve margins. Het enige wat z-index doet is, als het zaakje dan over elkaar staat, bepalen welk item "boven" welk ander item geprint wordt.

Dus: float lossen je probleem op, niet z-index. By default wordt namelijk sowieso alles dat verderop in je HTML staat over "oudere" dingen heen gezet.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

zaterdag 15 mei 2010 14:54

Acties:

0 Henk 'm!

Herko_ter_Horst

Wat denk je dat position:relative i.c.m. met right:500px gaat doen?

Waarom de foto's floaten terwijl ze gewoon achter elkaar moeten komen?

Waarom met (block-level) divs werken, terwijl je gewoon inline content aan het neerzetten bent?

"Any sufficiently advanced technology is indistinguishable from magic."

zaterdag 15 mei 2010 15:00

Acties:

0 Henk 'm!

Savantas

Wat ook niet handig is is een div en een img beiden dezelfde class (verwijder) geven, terwijl je de info voor de class niet specifiek maakt per item. Waarom dan niet gewoon alleen het image deze class meegeven? Ook de aparte div met class link is in mijn ogen overbodig.

[ Voor 12% gewijzigd door Savantas op 15-05-2010 15:08 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

zaterdag 15 mei 2010 15:01

Acties:

0 Henk 'm!

BlueCola

Topicstarter

mathijs92 schreef op zaterdag 15 mei 2010 @ 14:48:
Verander dit ook even:
Regel 5:
[code=php]
$categorieid = $_GET['cat'];
[/code=php]
Naar:
[code=php]
$categorieid = mysql_real_escape_string($_GET['cat']);
[/code=php]
En lees dan maar wat over SQL injection en alles wat daarbij hoort

Dit zit in mijn adminpaneel, waar niemand zonder wachtwoord inkomt, en al kwamen ze erin, dan zou t me nog niks uitmaken =) Toch bedankt voor je oplettendheid

Aloys schreef op zaterdag 15 mei 2010 @ 14:49:
Als je eerst eens [ code ] in [ code = php ] wilt veranderen (zonder spaties), dan leest het alweer een stuk makkelijker.

Ik vraag me af of er niet een veel simpelere manier is. Als ik het goed begrijp wil jij de foto's naast elkaar zien? Als dat zo is moet je eens kijken naar CSS:Float. Daarmee kan je zorgen dat je div's naast elkaar komen ipv. onder elkaar.

Done, dank je wel voor de tip.
Ik heb al een float:left; voor de img. En wat ik precies wil, is dat de rode kruisjes aan de rechterhoek van de foto's komen. (En daarbij moeten de foto's dus netjes naast elkaar staan.

NMe schreef op zaterdag 15 mei 2010 @ 14:54:
Z-index heeft nikt te maken met het daadwerkelijk overlappen van elementen, dat zul je toch echt zelf moeten doen met floats, absolute positioning of zelfs exotischere dingen als negatieve margins. Het enige wat z-index doet is, als het zaakje dan over elkaar staat, bepalen welk item "boven" welk ander item geprint wordt.

Dus: float lossen je probleem op, niet z-index. By default wordt namelijk sowieso alles dat verderop in je HTML staat over "oudere" dingen heen gezet.

Hmmz, oke, in de tutorial die ik erbij had, stond alleen dat je een divje moest maken met een z-index en een positie. Ik ga het proberen =)

[ Voor 66% gewijzigd door BlueCola op 15-05-2010 15:06 ]

And that's how one and one makes three.

zaterdag 15 mei 2010 15:05

Acties:

0 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Blue-cola schreef op zaterdag 15 mei 2010 @ 15:01:
[...]

Dit zit in mijn adminpaneel, waar niemand zonder wachtwoord inkomt, en al kwamen ze erin, dan zou t me nog niks uitmaken =) Toch bedankt voor je oplettendheid

Maar ja, mochten anderen er onrechtmatig toegang er op hebben, dan is het alsnog erg handig.
Ik raad altijd aan om mysql_real_escape_string altijd en op elke vorm van aanpasbare input (GET, POST, COOKIE en SESSION) toe te passen op je query.

Ook lijkt het mij handiger als je die foto's in een list zet, en elke li-tag een float: left meegeeft.

[ Voor 9% gewijzigd door AW_Bos op 15-05-2010 15:07 ]

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

zaterdag 15 mei 2010 15:12

Acties:

0 Henk 'm!

Savantas

Hmm, als je foto's hebt van 100x100px en je plaatst de link-div met het img van het kruisje op relatief top:0 en right: 500px moet je niet verbaasd zijn als deze dus een stuk buiten de foto staat, toch? Ik zou dit eerder doen met een marge rechts en boven tov de foto en dan de a+img (die div is echt niet nodig) een negatieve marge geven (op top en rechts).
Verder met AW_Bos, je hebt een lijst met foto's, gebruik dan ook lijsten! (ook al moet je dan weer bullets verijderen en de marges herstellen)

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)

zaterdag 15 mei 2010 21:10

Acties:

0 Henk 'm!

BlueCola

Topicstarter

Solved.

And that's how one and one makes three.

zondag 16 mei 2010 00:51

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Blue-cola schreef op zaterdag 15 mei 2010 @ 21:10:
Solved.

Het zou leuk zijn als je zegt hoe zodat iemand anders ook nog eens iets aan je topic zou kunnen hebben. Op deze manier is het een beetje eenzijdig.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.