Presentazione ad aree in pagina WEB

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Ciao Ragazzi,
premetto che sono nuovo nel campo dei CSS. Sto studiando ma non mi viene molto facile capire dove mettere gli oggetti, nel senso: ho allegato un'immagine di quello che vorrei fare.

Vorrei visualizzare una pagina suddivisa in aree, più precisamente una striscia sopra e una sotto con delle note, e la parte centrale dividerla in 4 aree con ognuna di esse contenente testo e/o immagini.

Come fare?

Presentazione merce.png
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, così al volo senza pensarci molto puoi porovare questo schema
HTML:
<html>
    <head>
        <style type="text/css">
            html body {
                text-align: center;
            }
            div#header, div#footer {
                width: 1024px;
                height: 90px;
                margin:auto;
                border:1px solid black;
            }
            div#content {
                width: 1024px;
                overflow: hidden;
                margin:auto;
                border:1px solid black;
            }
            div.box {
                width: 50%;
                height: 260px;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="header">

        </div>
        <div id="content">
            <div class="box">Codice</div>
            <div class="box">Immagine</div>
            <div class="box">Scheda</div>
            <div class="box">Descrizione</div>
        </div>
        <div id="footer"></div>
    </body>
</html>
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Grazie mille per la risposta alla mia domanda. Ho testato e funziona perfettamente circa come serviva a me.
Ma essendo ancora alle prime armi con i CSS, potreste gentilmente spiegarmi cosa succede in quel codice?

Inoltre, se volessi aggiungere le altri campi esempio la dicitura di intestazione e quella a pie di pagina, come fare?
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Inoltre ho riscontrato che non mi racchiude tutto in "celle".. nel senso, se al posto di una qualsiasi:
Codice:
 <div class="box">Descrizione</div>
sostituisco "Descrizione" con qualsiasi altra frase che sia molto lunga esempio come quella della descrizione di un prodotto che magari può essere lunga anche 500 caratteri, mi mischia tutto il testo insieme alle altri parti..
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non riscontro il problema che hai indicato. Ti ho messo il codice online guarda qui
Puoi scaricartelo con tasto destro -> visualizza sorgente pagina , se usi firefox
o tasto destro -> visualizza HTMl se usi internet explorer
La mia è solo una bozza veloce, per darti un idea
Per capire bene il funzionamento di ogni istruzione css ci ho messo mesi quindi ti rimando alla guida css
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Grazie mille per avermi realizzato la bozza dai cui sto già prendendo spunto. Grazie inoltre per il link, ne farò tesoro.

Appena avrò capito qualcosa e tirato fuori il mio, lo posto. Grazie ancora
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Ragazzi, mi faccio rivedere nella stessa discussione. Ma se io volessi mettere nell'area "codice" e/o "descrizione" e/o "scheda tecnica" dei dati che carico da database, in ogni campo del CSS devo richiamare le connessioni:
Codice:
mysql_connect()
e
Codice:
mysql_select_db()
Richiamandole in ogni area, ho già testato e funziona. Ma credo che non sia corretto in quanto su database grandi andrei ad impiegare molto tempo per chiamate alle stesse tabelle.

Come potrei fare?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
scusa ma non capisco bene, cosa intendi per ognoi campo di css?
comunque guarda che la connessione ne basta una per pagina.
a parte questo abbandona le vecchie istruzioni mysql (deprecate e tra poco non più funzionanti) e passa alle mysqli o alla classe pdo
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Grazie mille per il consiglio. Sapevo di HTML5 ma non ero a conoscenza del fatto che diventavano deprecate le precedenti. Ma scusa in definitiva devo solo modificare le connessioni al server e database, per il resto credo che rimanga simile a quanto presente attualmente.

Tornando alla tua domanda, mi riferisco al fatto che io mettevo in ogni:
HTML:
<div id="content">
            <div class="box">Codice</div>
            <div class="box">Immagine</div>
            <div class="box">Scheda</div>
            <div class="box">Descrizione</div>
        </div>
cioè in ogni (esempio:
HTML:
<div class="box">Codice</div>
) la chiamata al server e database.

Quindi per chiamare nella pagina una sola volta la connessione al server e database, in cima alla pagina dovrei mettere in alto:
PHP:
<?php 
	$connessione = mysql_connect("localhost","root","root") or die ("ATTENZIONE: Errore di connessione al server\n");	
	$selezione_db = mysql_select_db("nome_db",$connessione) or die ("ATTENZIONE: Errore nella selezione del database\n");
?>
e poi mettere dove mi serve le istruzioni utilizzando le variabili esempio:
PHP:
$connessione
e
PHP:
$selezione_db
?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
se non ho capito male (schematizzo)
PHP:
<div id="content">
            <div class="box">Codice<?php //dati di connessione ?></div>
            <div class="box">Immagine<?php //dati di connessione ?></div>
            <div class="box">Scheda<?php //dati di connessione ?></div>
            <div class="box">Descrizione<?php //dati di connessione ?></div>
        </div>
così?
se è così no
ti basta una solo connessione
PHP:
<?php //dati di connessione ?>
<!-- ecc....-->
<div id="content">
            <div class="box">Codice</div>
            <div class="box">Immagine</div>
            <div class="box">Scheda</div>
            <div class="box">Descrizione</div>
        </div>
cioè la connessione ti basta aprirla una volta per una pagina
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Grazie mille, se ho capito bene dovrò fare:

PHP:
<?php //dati di connessione ?> 
<!-- ecc....--> 
<div id="content"> 
            <div class="box">Codice</div> 
            <div class="box">Immagine</div> 
            <div class="box">Scheda</div> 
            <div class="box">Descrizione</div> 
        </div>
e nelle righe:
HTML:
<div class="box">Codice</div>
Sostituisco (ad esempio) "Codice" con:
PHP:
$query = "SELECT * FROM prodotto ORDER BY codice DESC ";
	
	$result = mysql_query($query, $connessione);
	
	$numrows = mysql_num_rows($result);
			
		//se il database è vuoto lo stampo a video
if ($numrows==0){
	echo "<span style=\"color:red\"><big> Errore nella lettura! </big></span><b>";
}
//Se invece trovo delle occorrenze...
else
{

$r = "SELECT descrizione FROM prodotto";

$query6 = mysql_query($r)or die(mysql_error());

echo "<b><br>";

}
	
  //Avvio un ciclo for che si ripete per il numero di occorrenze trovate
  for($x=0; $x<$numrows; $x++){
    //Recupero il contenuto di ogni record rovato
    $resrow = mysql_fetch_row($result); //mysql_fetch_row() recupera il contenuto dei record trovati. Più precisamente restituisce un array contenente i valori di ogni campo riscontrati nel recordset
    
    $descrizione = $resrow[1];
    

if($quantita != "0"){

    echo "<b>" . $descrizione . "</b><br/>";

}
}
Cioè prelevo dei dati dal database e stampo a video.

Spero che così sia corretto. Dimmi tu?
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
ho l'impressione che tu stia facendo un po' di caos.
dimmi una cosa dove srcrivi
div class="box">Codice</div> al posto di codice ci va il codice de''articolo?
<div class="box">Immagine</div> l'immagine dell'articolo?
<div class="box">Scheda</div> la scheda dell'articolo?
<div class="box">Descrizione</div>la descrizione dell'articolo?
 

pup3770

Utente Attivo
30 Mag 2012
122
0
16
Si "borgo italia"

PHP:
<div class="box"> Codice articolo che prelevo da DB </div>
<div class="box"> Immagine che nel server </div>
<div class="box"> Scheda articolo che prelevo da DB </div>
<div class="box"> Descrizione articolo che prelevo da DB </div>
è sbagliato così?