Div che si incrociano

29-05-2013, 22.01.18

Ciao a tutti, ho messo sulla stessa linea (almeno ci ho provato) due div, che vengono realizzati dinamicamente a seconda dei record nel db.
La pagina nel server è questa:

Codice PHP:


<!DOCTYPE html>

<?php

    if(!$_COOKIE['user']) {

        header("Location: index.html");

    }

    @require_once("/membri/edoardosavinientertainme/inc/config.inc.php");

    connect();

    session_start();

    

    $id = $_COOKIE['user'];

    $query_name = @mysql_query("SELECT * FROM utenti WHERE id = '$id'");

    $name_fetch = mysql_fetch_array($query_name);

    $firstname = $name_fetch['nome'];

?>

<html>

<head>

    <title>Polaroid</title>

    <link type="text/css" rel="stylesheet" media="all" href="/css/reset.css" />

    <link type="text/css" rel="stylesheet" media="all" href="/css/font.css" />

    <link type="text/css" rel="stylesheet" media="all" href="/css/screen_polaroid.css" />

    <meta charset="UTF-8">

    <style type="text/css">

        #blank400 { height: 400px; width: 100%; }

        #boxCreate { height: 25px; width: 237.5px; border: 1px solid #0066af; line-height: 25px; text-align: center; }

        #boxCreate { background: linear-gradient(#0096ff, #0066af); background: -webkit-linear-gradient(#0096ff, #0066af); background: -moz-linear-gradient(#0096ff, #0066af); background: -o-linear-gradient(#0096ff, #0066af); }

        #boxCreate:hover { background: linear-gradient(#57b9ff 0%, #0369b2 100%); background: -webkit-linear-gradient(#57b9ff 0%, #0369b2 100%); background: -moz-linear-gradient(#57b9ff 0%, #0369b2 100%); background: -o-linear-gradient(#57b9ff 0%, #0369b2 100%); }

        .linkByLink { color: #fff; font-family: wf_SegoeUI, Arial, Helvetica, sans-serif; }

        #album { margin: 0 auto; text-align: center; width: 660px; }

        #album_box { display: block; text-align: center; border: 1px solid #0066af; width: 125px; text-align: center; margin: 0 auto; }

        #album_box a { color: #0066af; font-family: wf_SegoeUI, Arial, Helvetica, sans-serif; }

        #album #album_box { clear: both; margin: 0 auto; text-align: center; display: inline; }

    </style>

</head>

<body>

    <div id="header">

        <div id="logoArea">

            <a href="/polaroid/index.html"><img src="/images/logo_polaroid.png" alt="Polaroid"/></a>

        </div>

        <div id="nav">

            <ul>

                <li><a href="myprofile.php" id="left">&nbsp;Home&nbsp;</a></li>

                <li><a href="login.php?a=logout" id="right">&nbsp;Esci&nbsp;</a></li>

            </ul>

        </div>

    </div>

    <div id="content">

        <h1>I tuoi album</h1>

        <div id="blank10"></div>

        <div id="boxCreate">

            <a href="createalbum.php" class="linkByLink">Crea un nuovo album</a>

        </div>

        <div id="blank40"></div>

        <div id="album">

<?php

    $id = $_COOKIE['user'];

    $query_album = mysql_query("SELECT * FROM album WHERE id_utente = '$id'");

    $count_album = mysql_num_rows($query_album);

    

    if($count_album == 0) {

        echo '<p><span class="noAlbum">Ci dispiace, ma non hai album.</span></p>';

    } else {

        $i = 0;

        while($row = mysql_fetch_array($query_album)) {

            $name = $row['nome'];

            $id_album = $row['id'];

            $icon = $row['icona'];

            

            echo '<div id="album_box">';

            echo '<img src="'.$icon.'" alt="" height="90" width="90" /><br />';

            echo '<a href="myphoto.php?id='.$id_album.'">'.$name.'</a>';

            echo '</div>';

            

            if($i++%4) {

                echo '<br />';

            }

        }

    }

?>    

        </div>

    </div>

    <div id="blank400"></div>

    <div id="footer">

        <div id="like">

            <div id="fb-root"></div>

            <script>(function(d, s, id) {

                var js, fjs = d.getElementsByTagName(s)[0];

                if (d.getElementById(id)) return;

                js = d.createElement(s); js.id = id;

                js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=249881301821284";

                fjs.parentNode.insertBefore(js, fjs);

                }(document, 'script', 'facebook-jssdk'));</script>

            <div class="fb-like" data-href="http://edoardosavinientertainme.altervista.org/polaroid/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="segoe ui"></div>

            <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'it'} </script>

            <div class="g-plusone" data-href="http://edoardosavinientertainme.altervista.org/"></div>

        </div>

        <div id="hr"></div>

        <p>Polaroid &egrave; un marchio di PLR IP Holdings, LLC. Copyright 2013 Edoardo Savini e PLR IP Holdings, LLC. Tutti i diritti riservati.</p>

        <div id="hr"></div>

    </div>

</body>

</html>

mentre nel client è questa

Codice HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Polaroid</title>
	<link type="text/css" rel="stylesheet" media="all" href="/css/reset.css" />
	<link type="text/css" rel="stylesheet" media="all" href="/css/font.css" />
	<link type="text/css" rel="stylesheet" media="all" href="/css/screen_polaroid.css" />
	<meta charset="UTF-8">
	<style type="text/css">
		#blank400 { height: 400px; width: 100%; }
		#boxCreate { height: 25px; width: 237.5px; border: 1px solid #0066af; line-height: 25px; text-align: center; }
		#boxCreate { background: linear-gradient(#0096ff, #0066af); background: -webkit-linear-gradient(#0096ff, #0066af); background: -moz-linear-gradient(#0096ff, #0066af); background: -o-linear-gradient(#0096ff, #0066af); }
		#boxCreate:hover { background: linear-gradient(#57b9ff 0%, #0369b2 100%); background: -webkit-linear-gradient(#57b9ff 0%, #0369b2 100%); background: -moz-linear-gradient(#57b9ff 0%, #0369b2 100%); background: -o-linear-gradient(#57b9ff 0%, #0369b2 100%); }
		.linkByLink { color: #fff; font-family: wf_SegoeUI, Arial, Helvetica, sans-serif; }
		#album { margin: 0 auto; text-align: center; width: 660px; }
		#album_box { display: block; text-align: center; border: 1px solid #0066af; width: 125px; text-align: center; margin: 0 auto; }
		#album_box a { color: #0066af; font-family: wf_SegoeUI, Arial, Helvetica, sans-serif; }
		#album #album_box { clear: both; margin: 0 auto; text-align: center; display: inline; }
	</style>
</head>
<body>
	<div id="header">
		<div id="logoArea">
			<a href="/polaroid/index.html"><img src="/images/logo_polaroid.png" alt="Polaroid"/></a>
		</div>
		<div id="nav">
			<ul>
				<li><a href="myprofile.php" id="left">&nbsp;Home&nbsp;</a></li>
				<li><a href="login.php?a=logout" id="right">&nbsp;Esci&nbsp;</a></li>
			</ul>
		</div>
	</div>
	<div id="content">
		<h1>I tuoi album</h1>
		<div id="blank10"></div>
		<div id="boxCreate">
			<a href="createalbum.php" class="linkByLink">Crea un nuovo album</a>
		</div>
		<div id="blank40"></div>
		<div id="album">
<div id="album_box"><img src="/upload/polaroid/savini.png" alt="" height="90" width="90" /><br /><a href="myphoto.php?id=0">provola :)</a></div><div id="album_box"><img src="/upload/polaroid/savini.png" alt="" height="90" width="90" /><br /><a href="myphoto.php?id=1">ciaoo</a></div><br />	
		</div>
	</div>
	<div id="blank400"></div>
	<div id="footer">
		<div id="like">
			<div id="fb-root"></div>
			<script>(function(d, s, id) {
				var js, fjs = d.getElementsByTagName(s)[0];
				if (d.getElementById(id)) return;
				js = d.createElement(s); js.id = id;
				js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1&appId=249881301821284";
				fjs.parentNode.insertBefore(js, fjs);
				}(document, 'script', 'facebook-jssdk'));</script>
			<div class="fb-like" data-href="http://edoardosavinientertainme.altervista.org/polaroid/" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="segoe ui"></div>
			<script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'it'} </script>
			<div class="g-plusone" data-href="http://edoardosavinientertainme.altervista.org/"></div>
		</div>
		<div id="hr"></div>
		<p>Polaroid &egrave; un marchio di PLR IP Holdings, LLC. Copyright 2013 Edoardo Savini e PLR IP Holdings, LLC. Tutti i diritti riservati.</p>
		<div id="hr"></div>
	</div>
</body>
</html>

il problema è che i due div si incrociano, vi mostro uno screen (la parte scarabocchiata è la mia faccia

)

come faccio???

grazie in anticipo

30-05-2013, 13.43.35

up

Discussione: Div che si incrociano

LinkBack

Strumenti discussione

Display

Div che si incrociano

Regole di scrittura