add box top page

fred921

Nuovo Utente
11 Mar 2020
6
0
1
vorrei aggiungere alla mia pagina html molto semplice un box al top come in questo link: https://www.miraclesalad.com/webtools/md5.php
che abbia un colore, e si adatti alla dimensione della mia pagina (variabile, ossia che si adatti a largh/altezza).
specifico che non ho un css a parte, ma lo style della pagina (poche righe) è nella pagina stessa.
cosa devo aggiungere x avere un box simile al top della mia pagina? x ora ho messo un box
h1 {
border-top: 30px solid #C1C3C3;
}
ma questo mi lascia spazi bianchi sui lati, mentre io lo vorrei in aderenza come nel link riportato sopra. grazie. saluti
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.203
313
83
Cosa vuoi farci con il box?
Solo per il testo o altro?
 

fred921

Nuovo Utente
11 Mar 2020
6
0
1
no, nessun testo. mi piacerebbe solo avere un box ad inizio pagina, con un colore. solo un fattore estetico.
un box come appunto nel link che ho citato sopra.
e solo codice, da inserire in una semplice pagina html senza css. grazie
 

fred921

Nuovo Utente
11 Mar 2020
6
0
1
però mi piacerebbe avere un box aderente, come nel link sopra. sino ad ora sono riuscito solo a mettere un <div> con un box ma si distanzia sempre un poco da alto e sui lati.... non è proprio aderente con questo:
<div style="height: 40px; background-color: #C1C3C3"></div>
 

fred921

Nuovo Utente
11 Mar 2020
6
0
1
no, non lo avevo messo il margin: 0 (come vedi da mio codice sopra)
grazie x il suggerimento, ma non serve. il risultato è sempre lo stesso, con margini. io credo che questo sia dovuto al fatto di aver applicato un valore <div>
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.203
313
83
Scusami ma io non ho ancora capito !

Vuoi un riquadro colorato attaccato al margine sinistro e al margine superiore della pagina e basta?
Se è così basta un semplice div di dimensioni a tuo piacere
 

fred921

Nuovo Utente
11 Mar 2020
6
0
1
guarda questo link https://www.neowin.net/news/cat/software
al top della pagina c'è un box blu, in aderenza ai margini (sx, top, e dx) della pagina.
io ho usato <div style="height: 40px; background-color: #C1C3C3"></div> nel codice html della mia pagina, ma questo mi lascia dei margini ai lati sinistro, alto e destra... non è aderente come invece vorrei....
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.203
313
83
Prova così:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<style>
#box {
    position:absolute;
    top: 0;
    lesf: 0;
    margin: 0;
    height: 40px;
    width: 40px;
    background-color: #C1C3C3;
}
</style>
</head>

<body>
<div id="box"></div>
</body>
</html>
ATTENZIONE!
Quando posti del codice sei tenuto ad usare il tag appropriato come ho fatto io
 

fred921

Nuovo Utente
11 Mar 2020
6
0
1
perfetto! grazie mille! risolto.
ho però apportato alcune modifiche, che scrivo qui x chi magari fosse interessato:
intanto ho corretto il tuo lesf: 0; con left: 0; (capisco possa essere sfuggito!)
poi il width: 40px; io lo volevo x esteso alla pagina, quindi ho messo un width esagerato che mi coprisse x intero anche una alta risoluzione dello schermo, non sapendo come esprmere il massimo, quindi ho scritto width: 4000px;
poi ho rivoluzionato il tutto mettendo tutto in un <div> così lo metto dove mi serve, quindi alla fine ho usato:
HTML:
<div style="position:absolute; top: 0; left: 0; right: 0; height: 50px; background-color: #C1C3C3">
       
                    </div>
in questo modo ho un box al top aderente ai margini, esteso alla pagina intera.
grazie molte x il tuo suggerimento! saluti
 
Ultima modifica: