Visualizzazione dei risultati da 1 a 6 su 6
  1. #1

    Inserimento tag div in un altro div. PROBLEMA TESTO!

    Ciao ragazzi premetto di essere molto ignorante in materia, conosco il css da poco e sto cercando di studiarlo da un libro e da informazioni che leggo proprio su questo ed altri siti.
    Comunque il mio problema è sicuramente qualcosa di banalissimo per voi ma non riesco a risolverlo. Allora ho costruito un file css con alcuni tag div...Naturalmente un tag contenitore che contiene tutti gli altri tag (header, logo, nav, body e footer).
    Il mio problema è il posizionamento. Ho utilizzato la position relative e absolute tra il div header e il div logo e per quanto riguarda il loro posizionamento tutto ok (anche perché il testo dell'header è posizionato a destra). Il problema mi sorge quando il div body con la position relative deve contenere il div nav con position absolute! Mi spiego meglio: se apro il sito la grafica e la posizione dei div è giusta, il problema nasce per quanto riguarda il testo! Ho scritto delle frasi ma la parte iniziale della frase è coperta dal div nav che sta sopra al div body!
    Insomma si capisce che il div body è coperto per una parte dal div nav e così facendo anche il testo è coperto! Voi sapete dirmi come mettere il testo (o forse le misure dei div sono sbagliate, vorrei fare un sito con larghezza a 950px e centrato nella pagina del browser) in modo che si veda? che non sembri coperto? Questo è il mio file style.css:

    @charset "utf-8";
    /* CSS Document */

    #container {
    width:950px;
    margin:0 auto;
    }

    #header {
    position:relative;
    width:950px;
    height:175px;
    background-color: white;
    background-image:url("header.jpg")
    }

    p.header {
    text-align:right;
    color:blue;
    font-size:30pt;
    }

    p.header1 {
    text-align:right;
    color:red;
    font-size:30pt;
    }

    #logo {
    position:absolute;
    top:0%;
    left:0%;
    width:200px;
    height:175px;
    background-image:url(logo.gif);
    right: 350px;
    }

    #nav {
    position:absolute;
    top:0%;
    left:0%;
    width:200px;
    height:auto;
    background-color: orange;
    }

    #body {
    position:relative;
    right:0%;
    width:950px;
    height:auto;
    background-color: white;
    }

    #footer {
    weight:950px;
    height:60px;
    background-color: gray;
    }

    Mentre questo è il mio file index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="container">
    <div id="header">
    <p class="header">Entra in un nuovo mondo!</p>
    <p class="header1">Entra in Lopresoft!</p>
    <div id="logo">
    </div>
    </div>
    <div id="body">Lo svolgimento dell’attività imprenditoriale comporta l’assunzione da parte dell’imprenditore del rischio di impresa. Egli infatti subisce il rischio di non riuscire a ottenere dal processo produttivo ricavi che superino i costi di produzione.
    Giuridicamente l’imprenditore è colui che subisce il rischio, si fa riferimento al soggetto nel nome del quale l’impresa è esercitata e non a chi svolge l’attività d’impresa. Si parla di spendita del nome.
    L’imprenditore deve agire in nome proprio, spendere cioè il suo nome in modo che i terzi sappiano con chi contrattano. Imprenditore quindi è chi appare di fronte ai terzi.
    L’imprenditore occulto: si parla di imprenditore occulto quando un soggetto, non volendo apparire personalmente, o non potendo perché la legge gli vieta di svolgere l’attività d’impresa, esercita la propria attività servendosi nei confronti dei terzi di un altro soggetto, il prestanome.
    I rischi assunti dall’imprenditore riguardano anche i creditori per questo la legge impone che chi esercita un’attività d’impresa è dotato di capacità di agire.
    Chi è assolutamente incapace (minorenne o interdetto) non può in nessun modo iniziare l’esercizio di un’impresa, ma può continuarla nel caso, ad esempio, l’abbia ricevuta in eredità.
    Poiché però di tratta di soggetti completamente incapaci d’agire, l’attività sarà svolta dal loro legale rappresentante, i genitori per i minorenni e il tutore per gli interdetti.
    L’inabilitato può continuare un’impresa assistito dal curatore mentre l’emancipato autorizzato dal giudice, è equiparato a un soggetto capace d’agire nonostante essi siano due soggetti relativamente incapaci di agire.
    L’imprenditore commerciale è sottoposto per legge a un particolare statuto, cioè un insieme di obblighi che riguardano l’iscrizione nel registro delle imprese e la tenuta delle scritture contabili, e in caso di crisi, al fallimento e alle altre procedure concorsuali previste dalla legge.

    <div id="nav">Questo è il nav!
    </div>
    </div>
    <div id="footer">FOOTER!
    </div>
    </div>
    </body>
    </html>

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ciao, sono indispensabili i posizionamenti assoluti? Se puoi evitarli sarebbe meglio non usarli.
    Comunque, per non avere la sovrapposizione, essendo il div nav in alto a sinistra del div body (meglio sarebbe usare nomi non coincidenti coi tag però), il testo dovrebbe essere inserito in un paragrafo (o div) che abbia un margin-top o padding-top equivalente all'altezza di nav.
    Attenzione che hai un weight per width nel footer

  3. #3
    Guarda sinceramente ti ripeto sono molto ignorante e non so bene come funzionano le position.
    Io in teoria vorrei creare una pagina con un contenitore (container) dove sono presenti dentro in alto a sinistra il logo e accanto attaccato l'header, sotto il logo con la stessa larghezza un menù di navigazione e accanto ad esso, quindi sotto l'header con la stessa la larghezza un corpo della pagina. Infine, sotto al nav e al corpo della pagina un footer.
    Il tutto centrato nel browser e con una larghezza di 950 px.
    Con i CSS come è possibile unire questi elementi nel contenitore senza usare le position?
    E soprattutto se c'è un libro che conosci in cui sono esposti in modo chiaro tutte le caratteristiche del CSS 2 e perché no anche della terza versione. Grazie!

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Puoi affiancare più elementi anche senza usare i posizionamenti assoluti, ad esempio attraverso il float. Non che i posizionamenti assoluti siano sempre da evitare, talvolta tornano comodi e utili per risolvere determinati problemi, ma richiedono accortezza perché altrimenti, come nel tuo caso, si creano sovrapposizioni non volute.

    Per quanto riguarda libri cartacei sui css, non saprei cosa consigliarti: le edizioni viste in commercio non mi sono mai piaciute granché, mio parere personalissimo eh, a questo riguardo trovo il cartaceo limitato, laddove la consultazione di guide e articoli online, spesso corredati di esempi che permettono un copia e incolla senza ritrascrivere per provare, è più stimolante (e meno faticoso).

    Altri sapranno consigliarti delle edizioni ben fatte e complete, per intanto puoi cominciare a leggere la guida su questo sito, ma altro in inglese puoi trovare su google cercando "css guide" o "css reference" e al loro interno cercare proprio le sezioni che ti interessano. Con ricerche mirate puoi poi trovare trattazioni esaurienti su ogni singolo aspetto.

  5. #5
    Grazie all'utilizzo del float mi è venuto bene qualsiasi allineamento e posizione degli elementi, ora però ho un problema a livello grafico...vorrei che l'immagine di sfondo dell'header continuasse anche nell'elemento logo a fianco...come si fa ora che utilizzo i float?

  6. #6
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    nel tuo vecchi codice il div col logo era contenuto nel div con id header, se è ancora così puoi aggiungere lo sfondo su quel div. Se hai cambiato qualcosa e hai solo due div affiancati, racchiudili in un altro div e imposta su quello lo sfondo (considera che quando usi il float, per far sì che il loro contenitore si estenda a inglobarli, dovrai interrompere poi il float stesso, o impostando sul contenitore un'altezza precisa - se l'altezza è nota - e un overflow:hidden, oppure inserire prima della sua chiusura un elemento con un clear:both)

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.