Problema altezza div automatica

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Salve a tutti!
Premetto che conosco l'html e il css in modo molto basilare in quanto tutto quello che so è frutto di ricerche su internet e passione.
Sto creando una nuova pagina per il sito della mia azienda e ho un problema: ho un div container all'interno del quale ci sono tutti i contenuti della mia pagina al quale ho impostato height: auto.. All'interno di questo ho un altro div anchesso impostato con height: auto.
Il problema è che il secondo div che dovrebbe essere all'interno del primo sconfina in basso, non capisco perchè il div container non si adatti all'altezza del div che è contenuto in esso (probabilmente non ho capito fino in fondo il funzionamento delle proprietà dei div nei css..
Questo è il css:
Codice:
@charset "utf-8";
/* CSS Document */
body {
	background-color:#D8F4D4;
}

#container {
	background-color:#BDECB6;
	height: auto;
	width: 950px;
	position: relative;
	top:0px;
	left: 50%;
	margin-left: -475px;
	border-radius: 10px;
	border-left: 1px solid rgba(0, 152, 116, 0.7);
	border-right: 1px solid rgba(0, 152, 116, 0.7);
}

#title {
	background-color:rgba(0, 152, 116, 0.7);
	border-radius: 10px;
	-moz-border-radius: 10px; /* firefox */
	-webkit-border-radius: 10px; /* safari, chrome */
	/*top: 10px;
	left: 10px;*/
	/*position: relative;*/
	height: 200px;
}

#logo {
	height: 150px;
	width: 363px;
	position: relative;
	top: 0px;
	left: 0px;
}
#menu1 {
	background-color:#000000;
	height: 30px;
	width: 840px;
	position: absolute;
	left: 50%;
	margin-left: -420px;
	top: 170px;
}

.menu { 
  border-radius: 10px; 
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
}

.menu  a{
	color: White;
	font-size: 25px;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
}

.menu a:hover {
	color: #BDECB6;
	font-weight: bold;
}

#titolo {
	height: 58px;
	width: auto;
	position: absolute;
	top: 230px;
	left: 50%;
	margin-left: -250px;
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
}

#testo {
	background:url(../Immagini/sfondo.png);
	padding: 5px 7px 5px 7px;
	height: auto;
	width: 700px;
	position: relative;
	top: 80px;
	left:50%;
	border: 1px;
	margin-left:-350px;
	text-align: justify;
	font-family: "Courier New", Courier, monospace;
	font-size: 15px;
}
#falegnami {
	background-image:url(../Immagini/falegnami.png);
	height: 29px;
	width: 388px;
	position: absolute;
	top: 90px;
	left: 515px;
}
#stampa {
	position: relative;
	top:75px;
	left: 22%;
	margin-left: -85px;
	width: 170px;
}

.stampa input{
	color: black;
	font-family: "Courier New", Courier, monospace;
}

div#stampa .pulsante{
	background-color:rgb(0, 152, 116);
	border:1px solid #999999;
	color:#FFFFFF;
	font-size:13px;
	padding:2px;
}
#news {
	background:url(../Immagini/sfondo.png);
	border: 1px solid #000000;
	padding: 5px 5px 5px 5px;
	position: relative;
	top: 50px;
	/*left: 720px;*/
	left: 88%;
	margin-left: -100px;
	width: 200px;
	height: 65px;
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
	text-align: center;
}
.news a{
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
}

.news a:hover{
	font-weight:bold;
	color: #FE0000;
}

e questo l'html:
Codice:
@charset "utf-8";
/* CSS Document */
body {
	background-color:#D8F4D4;
}

#container {
	background-color:#BDECB6;
	height: auto;
	width: 950px;
	position: relative;
	top:0px;
	left: 50%;
	margin-left: -475px;
	border-radius: 10px;
	border-left: 1px solid rgba(0, 152, 116, 0.7);
	border-right: 1px solid rgba(0, 152, 116, 0.7);
}

#title {
	background-color:rgba(0, 152, 116, 0.7);
	border-radius: 10px;
	-moz-border-radius: 10px; /* firefox */
	-webkit-border-radius: 10px; /* safari, chrome */
	/*top: 10px;
	left: 10px;*/
	/*position: relative;*/
	height: 200px;
}

#logo {
	height: 150px;
	width: 363px;
	position: relative;
	top: 0px;
	left: 0px;
}
#menu1 {
	background-color:#000000;
	height: 30px;
	width: 840px;
	position: absolute;
	left: 50%;
	margin-left: -420px;
	top: 170px;
}

.menu { 
  border-radius: 10px; 
  -moz-border-radius: 10px; /* firefox */
  -webkit-border-radius: 10px; /* safari, chrome */
}

.menu  a{
	color: White;
	font-size: 25px;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
}

.menu a:hover {
	color: #BDECB6;
	font-weight: bold;
}

#titolo {
	height: 58px;
	width: auto;
	position: absolute;
	top: 230px;
	left: 50%;
	margin-left: -250px;
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
}

#testo {
	background:url(../Immagini/sfondo.png);
	padding: 5px 7px 5px 7px;
	height: auto;
	width: 700px;
	position: relative;
	top: 80px;
	left:50%;
	border: 1px;
	margin-left:-350px;
	text-align: justify;
	font-family: "Courier New", Courier, monospace;
	font-size: 15px;
}
#falegnami {
	background-image:url(../Immagini/falegnami.png);
	height: 29px;
	width: 388px;
	position: absolute;
	top: 90px;
	left: 515px;
}
#stampa {
	position: relative;
	top:75px;
	left: 22%;
	margin-left: -85px;
	width: 170px;
}

.stampa input{
	color: black;
	font-family: "Courier New", Courier, monospace;
}

div#stampa .pulsante{
	background-color:rgb(0, 152, 116);
	border:1px solid #999999;
	color:#FFFFFF;
	font-size:13px;
	padding:2px;
}
#news {
	background:url(../Immagini/sfondo.png);
	border: 1px solid #000000;
	padding: 5px 5px 5px 5px;
	position: relative;
	top: 50px;
	/*left: 720px;*/
	left: 88%;
	margin-left: -100px;
	width: 200px;
	height: 65px;
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
	text-align: center;
}
.news a{
	color: black;
	font-size: 13px;
	font-family: "Courier New", Courier, monospace;
}

.news a:hover{
	font-weight:bold;
	color: #FE0000;
}
In questa immagini potete vedere il problema:
Problema.jpg

Grazie in anticipo a chi mi darà una mano!!!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, puoi provare sostituendo la proprietà height:auto del primo elemento con overflow:hidden
 

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Ho provato ma così mi taglia la pagina a un certo punto.. Devo impostare una altezza del body fissa?

EDIT
Niente anche mettendo l'altezza del body fissa rimane lo stesso problema mettendo overflow:hidden..
END EDIT
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
No, non devi mettere l'altezza fissa a nessun elemento
fai questa prova
HTML:
<style type="text/css">
    #container {
        width: 1000px;
        overflow: hidden;
        padding:10px 12px;
        background-color: black;
    }
    #contenuto {
        background-color: orange;
        padding:10px 12px;
    }
</style>
<div id="container">
    <div id="contenuto">
        <p>paragrafo</p>
        <p>paragrafo</p>
        <p>paragrafo</p>
        <p>paragrafo</p>
    </div>
</div>
Se provi ad aggiungere o togliere i paragrafi noterai che il div nero si adatta al contenuto del div arancione
 

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Copiando il tuo esempio in un file nuovo funziona alla perfezione.. mentre se toglo la proprietà height e la sostituisco con overflow mi taglia il contenuto.. ci sto uscendo pazzo..
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Il mio consiglio è di rifarlo.
Il codice css è davvero brutto con tutti quei position fissi.
Non vedrai mai lo stesso risultato su browser o dispositivi diversi.
La sintassi del codice html invece non è male, io mi concentrerei di più sullo studio dei css.
provalo cosi
HTML:
<html>
    <head>
        <title>Rinnovo Produzione</title>
        <style type="text/css" >
            htmml body {
                background-color:#D8F4D4;
                text-align: center;
            }
            #container {
                background-color:#BDECB6;                
                width: 950px;
                margin:auto;
                border-radius: 10px;
                border-left: 1px solid rgba(0, 152, 116, 0.7);
                border-right: 1px solid rgba(0, 152, 116, 0.7);
                padding-bottom: 22px;
                overflow:hidden;
            }
            #title {
                background-color:rgba(0, 152, 116, 0.7);
                border-radius: 10px;
                border-radius: 10px;
                height: 200px;
            }

            #logo {
                height: 150px;
                width: 363px;
                float: left;
                margin:7px;
            }
            #menu1 {
                background-color:#000000;
                height: 30px;
                width: 840px;
                margin:auto;
                clear: both;
            }
            .menu { 
                border-radius: 10px; 
            }
            .menu  a{
                color: White;
                font-size: 25px;
                text-decoration: none;
                font-family: "Courier New", Courier, monospace;
            }

            .menu a:hover {
                color: #BDECB6;
                font-weight: bold;
            }

            #titolo {
                height: 58px;
                line-height: 58px;
                text-align: center;
                font-family: "Courier New", Courier, monospace;
                font-size: 24px;
            }

            #testo {
                background:url(../Immagini/sfondo.png);
                padding: 5px 7px 5px 7px;
                width: 700px;
                border: 1px;
                text-align: justify;
                font-family: "Courier New", Courier, monospace;
                font-size: 15px;
                margin: auto;
                background-color: #E7F8E5;
            }
            #falegnami {
                background-image:url(../Immagini/falegnami.png);
                height: 29px;
                width: 388px;
                float:right;
                margin:20px 0 0 0;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="title">
                <div id="logo">
                    <img src="http://forum.mrwebmaster.it/Immagini/logo.png" width="363" height="150" alt="logo" />
                </div>
                <div id="falegnami"></div>
                <div id="menu1" class="menu">		
                    <a href="index.html">-Home</a>&nbsp
                    <a href="prodotti.html">-Prodotti</a>&nbsp
                    <a href="galleria.html">-Galleria</a>&nbsp
                    <a href="chi_siamo.html">-Chi Siamo</a>&nbsp
                    <a href="dove_siamo.html">-Dove Siamo</a>&nbsp
                    <a href="contatti.html">-Contatti</a>&nbsp	
                </div>
            </div>

            <div id="titolo"><b>Rinnovamento produzione e esposizione</b></div>

            <div id="testo">
                <p>Abbiamo ampliato la nostra gamma di prodotti per quanto riguarda finestre, portefinestre e portoncini.
                    Oltre al rinnovo del classico serramento di 68mm di spessore, con doppia guarnizione, doppio vetrocamera e gocciolatoio in alluminio ora abbiamo la possibilità 
                    di realizzare i seguenti tipi di finestre:
                <ul>
                    <li>Finestra 68mm di spessore con tripla guarnizione, doppio vetrocamera e gocciolatoio in alluminio</li>
                    <li>Finestra 80mm di spessore con tripla guarnizione, triplo vetrocamera e gocciolatoio in alluminio</li>
                </ul>
                I vetricamera delle finestre sono (a meno di vostre particolari esigenze) di tipo selettivo (uno speciale vetro basso emissivo che ha effetto sia nella stagione calda 
                che durante l'inverno, consentendo di risparmiare sia sul riscaldamento in inverno che sull'eventuale condizionatore in estate), con canalina disponibile in plastica o in TPS (è un tipo
                di canalina di ultima gerazione estrusa direttamente sul bordo del vetro) in modo da diminuire la formazione di condensa sul vetro e all'interno riempiti al 90% di Gas Argon, per migliorarne
                le prestazione termiche e acustiche.
                I gocciolatoi in alluminio sono presenti sia nelle finestre che nelle porte finestre. In queste ultime lo spessore a terra del gocciolatoio è di circa 2 cm, così da poter garantire un ottima tenuta
                senza costituire un intralcio al passaggio, anche di carrozzine per disabili. Inoltre sui gocciolatoi è applicata una guarnizione in gomma per migliorarne ulteriormente la tenuta.
                Tutte queste novità le potrete trovare nella nostra nuova esposizione, completamente rinnovata per essere ancora più di vostro gradimento.
                </p>
            </div>
        </div>
    </body>
</html>
 

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Grande, ora funziona alla perfezione, mi metterò a studiare le differenze tra la tua proposta e il mio vecchio codice così da capire dove sbagliavo..
Ancora un piccolo consiglio: visto che in un sito la struttura delle pagine è sempre cmq la medesima conviene avere un foglio di stile generale per tutte le pagine e poi un foglio di stile riguardante solo i contenuti oppure ripetere la struttura della pagina in ogni css?
Grazie mille x il tuo preziosissimo aiuto!!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
io di solito uso un foglio solo per la struttura e lo richiamo in tutte le pagine, se una pagina ha bisogno di uno stile particolare ne creo uno apposta e lo includo dopo quello generale.
 

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Perfetto.
Però metti caso che voglia spostare il div 'testo' un pò più in basso, posso inserire una proprietà top oppure cosa mi consigli?
 

Massimiliano Ragazzo

Nuovo Utente
30 Mag 2014
7
0
0
Perfetto.
Però metti caso che voglia spostare il div 'testo' un pò più in basso, cosa mi consigli di fare, inserire una proprietà top? Grazie ancora!!
 
Discussioni simili
Autore Titolo Forum Risposte Data
F problema altezza iframe jQuery 0
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 0
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1
T problema con select dinamica con jquery Javascript 0
A Problema checkout carrello php PHP 2
R Problema al server Domini 0
A Problema nel passare la variabile PHP 0
G Problema update di un database PHP 0
S Problema con spazi bianchi HTML e CSS 4
E Problema motore di ricerca FULL_TEXT PHP 0
Tommy03 Problema durata cookie PHP 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
I PROBLEMA CODICE INSERTION SORT C C/C++ 2

Discussioni simili