add box top page

fred921 · 11 Mar 2020

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 · 11 Mar 2020

Cosa vuoi farci con il box?
Solo per il testo o altro?

fred921 · 11 Mar 2020

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 · 11 Mar 2020

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>

Tommy03 · 11 Mar 2020

Prova ad aggiungere margin:0 se non lo hai già fatto

fred921 · 12 Mar 2020

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 · 12 Mar 2020

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 · 12 Mar 2020

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 · 12 Mar 2020

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 · 12 Mar 2020

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

Cerca

Cerca

add box top page

fred921

Nuovo Utente

Max 1

Super Moderatore

fred921

Nuovo Utente

fred921

Nuovo Utente

Tommy03

Utente Attivo

fred921

Nuovo Utente

Max 1

Super Moderatore

fred921

Nuovo Utente

Max 1

Super Moderatore

fred921

Nuovo Utente

Discussioni simili