Problema Posizionamento Css

**taurus82** · 05-08-2010, 11:12

Ciao a tutti,

ho un problema con i css.

Mi servirebbe innanzittutto un consigloio sulla pagina matrice che sto realizzando ( premetto che sono un newbie su questo campo )

codice:

<!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=iso-8859-1" />
<title>INSERIMENTO NUOVO DDT</title>
<link rel="stylesheet" href="../css/style_add.css" media="screen" />

</head>

<body>




<div id="contenitore">
<div id="header">
<?php  require_once	('top_page.php');?>
</div>

<div id="body">
<div id="menu_left">


 </p>
<?php  require_once	('left_menu.php');?>
</div>

<div id="scheda_lavoro">
<div id="scheda_lavoro2">
 
</div>
</div>



</div>

</div>
<div id="footer">
</div>




</body>
</html>

La pagina top_page.php è strutturata così

codice:

<div id="logo"></div>
<div id="immagine"></div>
<div id="info_utente">
<table align="center">
<tr>
<td>Benvenuto 
<?php echo $row_LoggedUser['nome']; ?> <?php echo $row_LoggedUser['cognome']; ?></td>
</tr>
<tr>
<td>Logout</td>
</tr>
</table>
</div>

Da quello che si può capire ho pensato a questa gerarchia:

CONTENITORE PRINCIPALE
CONTENITORE HEADER (Questo a sua volta contiene altri 3 contenitori stile tabella con 3 colonne)
CONTENITORE BODY
MENU_LEFT
SCHEDA_LAVORO
SCHEDA_LAVORO2 ( Questa l ho aggiunta per dare alle tabelle un minimo margine )
CONTENITORE FOOTER

Secondi voi è giusta la logica? ( Sono convinto che ci sia qualcosa di sbagliato )

Il css è il seguente

codice:

body{
font-size:75%;
width:100%;
height:auto;
background:url(../img/Nuova/qwe2.png) repeat;
}

#contenitore{
width:100%;
height:100%;
font-family:Arial, Helvetica, sans-serif;
color:#999999;	
}

#header {
background:url(../img/Nuova/qwe2.png) repeat;
width:100%;
height:120px;
background-color:#ffffff;
}

#logo{
float:left;
background:url(../img/imgGest/tecnidata_logo.jpg) no-repeat;
width:15%;
height:120px;
}
#immagine{
display:inline;
float:left;
width:62%;
height:120px;
margin-left:3px;
background:url(../img/imgGest/header_image.jpg) no-repeat;
}
#info_utente{
clear:right;
float:left;
overflow:hidden;
width:22%;
height:120px;
}
#info_utente table{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
color:#006699;
}
#info_utente a{
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0099CC;
}
#info_utente a:hover{
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#FF0000;
}

#menu_left{
float:left;
width:15%;
height:auto;
margin-top:10px;
padding-bottom:10px;
}
#scheda_lavoro{
display:inline;
float:left;
width:84%;
height:100%;
background:url(../img/imgGest/homePageSeperator.gif) no-repeat;
}
#scheda_lavoro p{
margin:10px;
padding:15px;
}

#scheda_lavoro2{
margin-left:20px;
width:100%;
}
#footer{
display:inline;
float:left;
width:100%;
height:auto;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#006699;
}

Passo al secondo problema:

Quando ridimensiono il browser, i div che sono all'interno di top page si sovrappongono l'un l'altro (Le immagini che contengono questi due div si sovrappongono) e non riesco a dargli uno stile "fisso" tipo quello che spiega html.it nel tutorial dei layout a due e tre colonne.

A me serve uno stile che occupi tutta la pagina e che non faccia sovrapporre i div uno sopra l'altro.

Come posso fare?

Almeno un esempio sarebbe gradito per poter capire meglio, vi prego, non rimandatemi a delle guide.

Grazie a tutti.

**JVM** · 05-08-2010, 13:55

per il problema del ridimensionamento , intanto prova a dare delle dimensioni fisse ai div, non usare

codice:

width: 100%;

ma usa

codice:

width: 1000px;

ho scritto 1000 ma il numero può essere quello che vuoli , questo serve per dare una dimensione fissa ai div, perchè utilizzando la dimensione percentuale , quindi con 100%, il div avrà la dimensione della finestra del browser, di conseguenza se viene ridimensionata verrà ridimensionato anche i div. prova intanto a fare questo sostituisci le percentuali con le dimensioni in pixel che ti servono e vedi che risultato ottieni.

codice:

body{ font-size:75%; width:1000px; height:auto; background:url(../img/Nuova/qwe2.png) repeat; }

**taurus82** · 06-08-2010, 10:16

ciao,
certamente con un div fisso tutto funziona perfettamente, infatti quando ridimensiono la finestra del browser tutto va bene.

Domanda 1: Devo dare la dimensione fissa solamente al body?

Domanda 2: per i div interni, posso utilizzare dimensioni fisse miste a dimensioni in percentuale?

Domanda 3: Lo stile che ho dato alla pagina è eccessivo o posso migliorarlo utilizzando meno div?

Grazie tante.

**JVM** · 06-08-2010, 14:03

1 ) 2)
ti consiglierei di dare misure fisse per tutti i div , così da evitare ridimensionamenti imprevisti, così stai tranquillo che quello che hai progettato rimane tale e quale anche se diminuisci le
dimensioni della finestra del browser.

3)
per lo stile, non essendo un webdesigner, non posso darti un'opinione professionale ma mi pare che possa andare, magari aspetta e vedi se qualcuno più esperto in questo campo risponde

**taurus82** · 06-08-2010, 15:43

ok, ma è una cosa molto difficile rendere i div "adattabili" in base alla risoluzione che utilizza l'utente nel computer?

Se no, avresti qualche link utile da potermi proporre per poter approfondire?

Grazie

**JVM** · 06-08-2010, 18:11

tramite javascript puoi ottenere la risoluzione dell'utente che sta visualizzando la tua pagina con

codice:

screen.width

e

codice:

screen.height

e poi in base a quello indirizzare gli utenti su una pagina con un layout adatto per quella risoluzione , oppure includere direttamente il file css tramite javascript. Ma non userei nessuno di questi due metodi , semplicemente perchè se l'utente disabilita javascript, non riuscirà a visualizzare correttamente la pagina.
ecco un link utile http://javascript.html.it/articoli/l...uzione-giusta/ .
Personalmente come risoluzione di riferimento uso la 1024x768, visto che ora gli lcd che utilizzano risoluzioni più basse di questa sono solo una piccola percentuale.

Discussione: Problema Posizionamento Css

Strumenti discussione

Ricerca discussione

Visualizza

Problema Posizionamento Css

Permessi di invio