Visualizzazione dei risultati da 1 a 8 su 8
  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    16

    Problema con float: left

    in questa pagina

    codice:
    <html>
    	<head>	
    		<style>
    		body {
    		padding: 0;
    		margin: 0;
    		font-size: 76%;
    		color: silver;
    		}
    
    		div#container {
    		min-height: 100%;
    		height: 100%;
    		width: 60em;
    		background-color: blue;
    		margin: 0 auto;
    		padding: 0;
    		border: 2px solid green;
    		border-top: 0px;
    		border-bottom: 0px;
    		}
    
    		div#header {
    		width: 100%;
    		margin:0;
    		background-color: red;
    		height: 70px;
    		}
    
    		div#header h1{
    		padding: 20 0 0 10
    		}
    
    		div#nav {
    		width: 100%;
    		margin: 0;
                    background-color: pink;
    		}
    
    		div#nav ul {
    		margin: 0;
    		list-style-type: none;
    		font-weight: bold;
    		text-decoration: none;
    		color: white;
    		}
    
    		div#nav ul li{
    		border: 1 px solid yellow;
    		border-left: 0px;
    		background-color: green;
    		padding: 4px;
    		font-size: medium;
    		float: left;
    		}
    
    		div#nav ul li:first-child {
    		border: 1px solid yellow
    		}
    		</style>
    	</head>
    	
    	<body>
    		<div id="container">
    			<div id="header">
    				<h1>Prova Layout CSS in pagine HTML</h1>
    			</div>
    			<div id="nav">
    				<ul>
    					[*]Home
    					[*]Link
    					[*]News
    					[*]Pagine
    					[*]Guida
    				[/list]	
    			</div>
    			<div id="">
    			</div>
    			<div id="">
    			</div>
    		</div>
    	</body>
    </html>
    non riesco a mettere lo sfondo del div con id nav credo che il problema sia il float: left ma come risolvo? poi come faccio a togliere quello spazio all'inizio prima del primo elemento della lista?

  2. #2
    Utente di HTML.it L'avatar di marty89
    Registrato dal
    Apr 2011
    Messaggi
    107
    Ciao, per prima cosa per poter vedere il backgroud che hai impostato al div, basta che a "div#nav" attribuisci una height; poi per togliere lo spazio all'inizio della lista, aggiungi padding:0 a "div#nav ul".

  3. #3
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    16
    cavolo credevo di aver provato in quel modo comunque va ^^ grazie

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    16
    *scusate il doppio post
    senti mi sto esercitando sul layout a 3 colonne ed ho modificato il codice così:

    codice:
    <html>
    	<head>	
    		<style>
    		body {
    		padding: 0;
    		margin: 0;
    		font-size: 76%;
    		color: silver;
    		text-align: center
    		}
    
    		div#container {
    		min-height: 100%;
    		width: 760px;
    		margin: 0 auto;
    		padding: 0;
    		border: 2px solid green;
    		border-top: 0px;
    		border-bottom: 0px;
    		position: relative; 
    		background: url(immagine.png) repeat-y top left pink;
    		}
    		
    		div#container2 {
    		background: url(immagine.png) repeat-y top right;
    		min-height: 100%;
    		}
    
    		div#header {
    		width: 100%;
    		margin:0;
    		background-color: red;
    		height: 70px;
    		}
    
    		div#header h1{
    		padding-top: 20px;
    		}
    
    		div#nav {
    		width: 130px;
    		float: left;
    		position: absolute;
    		top: 70px;
    		left: 0;
    		}
    
    		div#nav ul {
    		list-style-type: none;
    		font-weight: bold;
    		text-decoration: none;
    		color: green;
    		}
    
    		div#nav ul li{
    		padding: 7px;
    		font-size: medium;
    		}
    		
    		div#extra {
    		width: 130px;
    		float: right;
    		position: absolute;
    		top: 70px;
    		right: 0;
    		}
    
    		div#extra ul {
    		list-style-type: none;
    		font-weight: bold;
    		text-decoration: none;
    		color: red;
    		}
    
    		div#extra ul li{
    		padding: 7px;
    		margin-right: 20;
    		font-size: medium;
    		}
    		
    		div#content {
    		color: black;
    		padding: 20px;
    		margin: 0 130;
    		border: 1px dotted black;
    		border-top: 0;
    		border-bottom: 0;
    		}
    		
    		div#footer {
    		left: 0;
    		bottom:0;
    		background-color: orange;
    		position: absolute;
    		clear: both;
    		}
    		
    		</style>
    	</head>
    	
    	<body>
    		<div id="container">
    			<div id="container2">
    				<div id="header">
    					<h1>Prova Layout CSS in pagine HTML</h1>
    				</div>
    				<div id="nav">
    					<ul>	
    						[*]Home
    						[*]Link
    						[*]News
    						[*]Pagine
    						[*]Guida
    					[/list]	
    				</div>
    				<div id="content">
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum 	lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem ipsum lorem ipsum
    
    
    
    
    				</div>
    				<div id="extra">
    					<ul>
    						[*]Home
    						[*]Link
    						[*]News
    						[*]Pagine
    						[*]Guida
    					[/list]	
    			    </div>
    				<div id="footer">
    				lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
    				lorem 
    			    </div>
    			</div>
    		</div>
    	</body>
    </html>
    ma è normale che quando il testo della colonna principale supera la sua altezza massima si prende quella del foot(infatti parte del testo sta sotto il foot)?

  5. #5
    Utente di HTML.it
    Registrato dal
    Dec 2011
    Messaggi
    12
    si è normale...dovresti fare la colonna un po piu alta... tipo se tu hai 3 colonne con sotto un footer e supponiamo che sopra alle colonne tu abbia un titolo beh allora ad esempio imposterai la height delle 3 colonne circa all'80% o giu di li...e le altre magari non so il foot al 7% e il titolo al 13%...poi ovviamente modifichi anche la larghezza =)
    poi ci aggiungi un po' di padding e sei a posto

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    16
    ma il problema non persiste se il testo va oltre le dimensioni della colonna centrale?

  7. #7
    Utente di HTML.it
    Registrato dal
    Dec 2011
    Messaggi
    12
    ovvio l'altezza e la larghezza le metti in base al contenuto...però puoi anche non metterle...te le dovrebbe dare da sole...senza che il testo esca(se non le imposti tu)

  8. #8
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    16
    quindi la soluzione migliore è specificare le dimensioni
    grazie
    vi farò sapere per altri problemi sul css XD sempre su questo post

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.