Visualizzazione dei risultati da 1 a 5 su 5

Discussione: Priorità regole css

  1. #1

    Priorità regole css

    Salve a tutti, il mio intento è replicare questo pezzo di sito(immagine in allegato). Il problema è che quando voglio fare un div per la scritta home, sembra che venga sovrapposto dal div padre. Ho provato per testare a cambiare il colore del div home, ma rimane sempre grigio. Come posso fare? Grazie a tutti.
    codice:
    <html>    <head>
        <style>
            #testa{
                display:block;
                background-color:#FF9900;
                width:101%;
                height:12.5%;
                margin:-7px;
            }
            #barra{
                display:block;
                background-color:#666666;
                width:101%;
                height:4%;
                margin:-7px;
                margin-top:8px;
            }
            #home{
                display:block;
                width:7%;
                height:4%;
                background-color:black;
                z-index:0;
            }
            #home:hover{
                background-color:black;
            }
            #home.a:hover{
                text-decoration:underline;
            }
        </style>
        </head>
        <body>
            <div id = "main">
                <div id = "testa">
                </div>
                <div id = "corpo">
                    <div id = "barra">
                        <div id = "home">
                            <a href = "Home.html" style = "color:white; text-decoration:none; vertical-align:center;"> Home </a>
                        </div>
                    </div>
                </div>
            </div>
        </body>
    </html>
    Immagini allegate Immagini allegate

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, a primo acchito credo che il problema sia dovuto al fatto che stai dando delle altezze in percentuale. Per l'elemento #home stai dando height: 4%; che significa il 4% dell'altezza del suo contenitore. Ma già il suo contenitore ha un'altezza ridotta, che tra l'altro è anche lui il 4% del suo relativo contenitore (anch'esso con altezza in percentuale), col risultato che andando a restringere l'altezza della finestra del browser, tutti gli elementi si assottigliano di conseguenza.

    Se non hai un valido motivo di impostare delle altezze in quel modo, ti consiglierei di dare dei valori fissi (ad esempio in px) oppure lasciare l'impostazione di default, cioè un'altezza automatica. Chiaramente devi valutare tu come impostare il tutto in base a cosa vuoi ottenere di preciso e a tutte le varie eventualità annesse.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao, a primo acchito credo che il problema sia dovuto al fatto che stai dando delle altezze in percentuale. Per l'elemento #home stai dando height: 4%; che significa il 4% dell'altezza del suo contenitore. Ma già il suo contenitore ha un'altezza ridotta, che tra l'altro è anche lui il 4% del suo relativo contenitore (anch'esso con altezza in percentuale), col risultato che andando a restringere l'altezza della finestra del browser, tutti gli elementi si assottigliano di conseguenza.

    Se non hai un valido motivo di impostare delle altezze in quel modo, ti consiglierei di dare dei valori fissi (ad esempio in px) oppure lasciare l'impostazione di default, cioè un'altezza automatica. Chiaramente devi valutare tu come impostare il tutto in base a cosa vuoi ottenere di preciso e a tutte le varie eventualità annesse.
    Grazie mille! Adesso l'unico problema è che non riesco a centrare home verticalmente, neanche manualmente me lo fa fare.
    codice:
    <!DOCTYPE HTML><html>
    	<head>
    	<style>
    		#testa{
    			display:block;
    			background-color:#FF9900;
    			width:101%;
    			height:105px;
    			margin:-0.5%;
    		}
    		#barra{
    			display:block;
    			background-color:#666666;
    			width:101%;
    			height:34px;
    			margin:-0.5%;
    			margin-top:8px;
    		}
    		#home{
    			display:block;
    			width:50px;
    			height:34px;
    			background-color:#666666;
    			border-right: 1px solid white;
    			
    		}
    		#home:hover{
    			background-color:black;
    		}
    		#home > a{
    			color:white; 
    			text-decoration:none; 
    			font-size:0.75em;
    			padding: 9px 10px;
    		}
    		#home > a:hover{
    			text-decoration:underline;
    		}
    		#menu{
    			display:block;
    			width:20%;
    			margin-top:50px;
    			margin-left:-35px;
    		}
    	</style>
    	</head>
    	<body>
    		<div id = "main">
    			<div id = "testa">
    			</div>
    			<div id = "corpo">
    				<div id = "barra">
    					<div id = "home">
    						<a href = "Home.html"> Home </a>
    					</div>
    					<div id = "menu">
    						<h1 style="padding-left:35px"> Menu </h1>
    						<ul style="list-style-type : none">
    							<li> <a href=""> Modulistica <a> <hr>
    							<li> <a href=""> Richieste <a> <hr>
    							<li> <a href=""> Invia <a> <hr>
    						<ul>
    					</div>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Centrare verticalmente un elemento con CSS, in generale, non è così intuitivo o scontato. A seconda dei casi è possibile usare diversi metodi tra cui flexbox, table-cell, top:50% e margin-top negativo o transform:translateY(-50%), display:inline-block e vertical-align:middle, line-height uguale a height, e altri eventuali.

    Sarebbe dispendioso, oltre che fuori tema, descrivere qui tutti questi metodi; se ti interessa approfondire, ti invito a fare qualche ricerca online del tipo "css vertical align middle", dove sicuramente troverai molti esempi e tutorial.

    Nel tuo caso posso supporre che ti basti applicare line-height con un valore pari a height per l'elemento #home, ma lascio a te approfondire e decidere come meglio intervenire.

    Consiglio inoltre di verificare opportunamente il tuo codice, noto diversi tag chiusi male. In questo caso potrebbe esserti utile l'uso di un validatore come https://validator.w3.org/

    Se poi hai interesse ad approfondire lo studio dei fogli di stile in generale, posso consigliarti di dare uno sguardo anche ai link utili (tra le discussioni in evidenza).
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Centrare verticalmente un elemento con CSS, in generale, non è così intuitivo o scontato. A seconda dei casi è possibile usare diversi metodi tra cui flexbox, table-cell, top:50% e margin-top negativo o transform:translateY(-50%), display:inline-block e vertical-align:middle, line-height uguale a height, e altri eventuali.

    Sarebbe dispendioso, oltre che fuori tema, descrivere qui tutti questi metodi; se ti interessa approfondire, ti invito a fare qualche ricerca online del tipo "css vertical align middle", dove sicuramente troverai molti esempi e tutorial.

    Nel tuo caso posso supporre che ti basti applicare line-height con un valore pari a height per l'elemento #home, ma lascio a te approfondire e decidere come meglio intervenire.

    Consiglio inoltre di verificare opportunamente il tuo codice, noto diversi tag chiusi male. In questo caso potrebbe esserti utile l'uso di un validatore come https://validator.w3.org/

    Se poi hai interesse ad approfondire lo studio dei fogli di stile in generale, posso consigliarti di dare uno sguardo anche ai link utili (tra le discussioni in evidenza).
    Grazie mille, ho risolto con line-height pari a height.

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 © 2024 vBulletin Solutions, Inc. All rights reserved.