Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14

Discussione: Problema div

  1. #1

    Problema div

    Buongiorno a tutti!

    Sto creando il mio primo sito in Html/CSS (per il momento, sto facendo pratica con questi 2 per poi andare su JavaScript ecc e concludere il sito) ma mi sono bloccato abbastanza velocemente


    In pratica ho creato un logo fisso in alto a sinistra, in alto a destra il nome dell'azienda (dentro un <div>) e poi subito sotto il menù orizzontale in nav.

    Il mio problema è che va tutto perfettamente tranne che quando diminuisco la larghezza orizzontale del browser (e quindi della pagina) menù e logo restano fissi mentre il div scorre verso il centro della pagina. Non capisco come tutto sia bloccato (come lo vorrei) mentre quel div scorre man mano che diminuisce la larghezza della pagina del browser.

    Il codice del div HTML è questo:
    codice:
    <div id="Rino_Edilizia">R i n o  &#8364 d i l i z i a</div>
    Mentre questo è il CSS:
    codice:
    #Rino_Edilizia {	font-familY: eb garamond;
    	font-style: italic;
    	color: red;	
    	margin:0 auto;
            padding:0;
    	float:right;

    Non riesco a capacitarmi del fatto che il div nella "progettazione" di DreamWeaver occupa tutta la riga e di conseguenza il testo scorre dentro il div a seconda della larghezza del browser per l'appunto. Ho impostato i margini nella pagina e il logo resta attaccato al margine sinistro, quale indicazione devo dare al <div< per farlo stare attaccato al margine destro della pagina?

    Scusate se non mi sono spiegato bene ma come ho detto sono all'inizio nel caso in cui vi servissero altre info sono a disposizione Grazie in anticipo!

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    prova a togliere il margin auto
    No

  3. #3
    Purtroppo è il contrario, nel senso che ho tentato aggiungendo il margin auto a vedere se cambiava qualcosa nel problema ma non ha smosso nulla. Cmq l'ho tolto

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    si può vedere una demo online o il codice con tutti i genitori del div e i loro stili?
    No

  5. #5
    Certo, magari mi sono perso qualcosa per sbadataggine, grazie per l'interesse posto subito.

    Codice HTML
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    
    
    <head>
    	<link rel="stylesheet" type="text/css" href="Script.css"/>
    	<title>MastroRi!</title>
    	<Meta name= "Description"; content= "Azienda di Parma offre servizi ..., una sezione dedicata al Fai Da Te e tantissime altre curiosità!"/>
    	<Meta name= "Keywords"; content= "Artigiano; Lavori muratura; Parma e Provincia; Fai da Te; Servizi; Ristrutturazione case;"/>
    
    
    </head>
    
    
    <body leftmargin="300" rightmargin="300">
    
    
    <a href="index"><img src="Logo_T.R.a..png" alt="Logo T.R.@." title="Home" style="float:left";> </a><div id="Rino_Edilizia" align="right" leftmargin="400">R i n o  &#8364 d i l i z i a
    </div>
    
    
    <nav id="menu-pr">
    	<ul id="menu">
    		<li class="current"><a href="#">Home</a></li>
    		<li><a href="#">Servizi Offerti</a>
    			<ul>
    				<li><a href="#">Ristrutturazione</a>
    					<ul>
    						<li><a href="#">Interni</a></li>
    						<li><a href="#">Esterni</a></li>
    					</ul>
    				</li>
    				<li><a href="#">Carpenteria</a></li>
    				<li><a href="#">Pavimentazione</a>
    					<ul>
    						<li><a href="#">Interni</a></li>
    						<li><a href="#">Esterni</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    		<li><a href="#">FotoGallery</a>
    			<ul>
    				<li><a href="#">Ambienti Interni</a></li>
    				<li><a href="#">Ambienti Esterni</a></li>
    			</ul>
    		</li> 
    		<li><a href="#">Sezione FaidaTe!</a></li>
    		<li><a href="#">Realizzazioni</a></li>
    		<li><a href="#">Contatti</a></li>
    		<li><a href="#">Richiedi <br/> Preventivo!</a></li>
    	</ul>
    </nav>

    Codice CSS:
    codice:
    #Rino_Edilizia {	font-familY: eb garamond;
    	font-style: italic;
    	color: red;	
        padding:0;
    	right:0;
    }
    
    
    
    
    #menu-pr {
        margin:0 auto;
        padding:0;
        width:75em;
        margin-right:6.25em;
    	
    }
    
    
    
    
    ul#menu {
        margin:0px 0 0;
        padding:0;
        list-style:none;
        float:left;
        width:56.25em;
        background-color:#332b20;
        font-size:50%;
    }
    
    
    
    
    ul#menu li {
        margin:0;
        padding:0;
        float:left;
        display:block;
        border-right:1px solid #222;
        position:relative;
    }
    
    
    
    
    
    
    ul#menu li a {
        float:left;
        padding:0.75em 1.5625em;
        color:#4D3131; 
        text-transform:uppercase;
        text-decoration:none;
     
    }
    
    
    
    
    
    
    ul#menu li a:hover {
        background:#645d56;
        color:#fff;
    }
    
    
    
    
    ul#menu ul{
        margin:0px 0 0;
        padding:0;
        display:inline-block;
        list-style:none;
        opacity:0;
        visibility:hidden;
        position:absolute;
        top:2.375em;
        left:0;
        z-index:9999;
        background:#332b20;
    }
    
    
    
    
    ul#menu li:hover > ul {
        opacity:1;
        visibility:visible;
    }
    
    
    
    
    ul#menu ul li {
        float:none;
        display:block;
        border:0;
    }
    
    
    
    
    ul#menu ul a {
        padding:0.625em;
        width:8.125;
        display:block;
        white-space:nowrap;
        float:none;
        text-transform:none;
    }
    
    
    
    
    ul#menu ul a:hover {
        background-color:red;
        color:#fff;
    }
    
    
    
    
    ul#menu ul ul {
        top:0;
        left:6.25em;
        margin:0;
    }

    Se vedi anche qualche altro errore fammelo sapere che ho assorbito troppo velocemente le informazioni e quindi probabilmente mi sarà scappato qualcos'altro o cmq è incasinato e potrebbe magari essere più ordinato! Grazie

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2014
    residenza
    Voltati
    Messaggi
    913
    Aggiungi allo stile del div
    text-align: rigth;
    Questo perché il div è di tipo display:block e quindi occupa tutto lo spazio a disposizione. Il testo è allineato sulla sinistra di questo div (cioè a 400px dal bordo sinistro della pagina)

    Altri errori:
    1) Stai usando il DOCTYPE xhtml strict e il tag "nav" che è invece dell'html5. (Personalmente ti consiglio l html5, che ha per doctype solo <!DOCTYPE html>)
    2) Gli stili (ad esempio align o leftmargin) applicali tramite css.
    3) Qui:
    codice HTML:
     <Meta name= "Description"; content= "Azienda di Parma offre servizi ..., una sezione dedicata al Fai Da Te e tantissime altre curiosità!"/>
    c'è un ; di troppo (anche nell'altro meta)
    Ultima modifica di tampertools; 09-05-2014 a 18:06
    No

  7. #7
    Allora in alto a sinistra c'è l'immagine col link e sulla stessa riga sulla destra c'è il div id #Rino_Edilizia. Ho aggiungo ora il text-align: right; ma ugualmente il div scorre verso sinistra man mano che la pagina si rimpicciolisce.

    Il menù nav non scorre ma resta fisso, mentre invece il div sopra al nav continua imperterrito a muoversi eheheheh.
    I margini della pagina sono da entrambi i lati 300px impostati dal body. Ma è come se il div id=Rino_Edilizia quando restringo la pagina mantenesse il bordo-pagina di 300px sulle dimensioni modificate della pagina del browser e quindi si spostasse verso sinistra per mantenerne le distanze.

    Ora ho anche aggiunto sotto al nav menù una riga con < hr/> e anche quella scorre come il div! A sto punto mi sorge un dubbio, non è che con DreamWeaver nelle impostazioni iniziali quando apri un nuovo file ti chieda qualcosa del tipo se vuoi il testo "scorrevole" o "fisso" e io senza accorgermene abbia scelto la prima opzione? però a quel punto anche il nav dovrebbe muoversi no...?

    Bohh ci sto impazzendo su sto scorrimento eheheheheh

    Per il resto è vero, avevo iniziato con l'xhtml ma poi "in corsa" ho cambiato idea e mi son scordato di modificare il Doctype grazie della segnalazione provvedo subito! Per gli stili provvederò a spostare tutto anche perché è molto più comodo giusto. A parte questo tutto okay? Pensavo ci fosse più casino dai non è andata male allora

    EDIT: Tolti anche i 2 ; di troppo grazie!
    Ultima modifica di fabio.99999; 09-05-2014 a 18:49

  8. #8
    Ho fatto altri tentativi ma nulla, il testo continua a scorrere verso sinistra quando rimpicciolisco la pagina.. Non c'è un comando che dica "resta fermo"?

  9. #9
    Ho creato sotto al menù uno slideshow per far scorrere le immagini con dei pulsantini sotto da cliccare per cambiarle, e anche questi pulsantini quando stringo la pagina scorrono verso sinistra. la stessa slideshow scorreva, ma con quella sono riuscito a risolvere in quanto essendo un unico oggetto l'ho bloccato con il margine sinistro in modo che non scorra ulteriormente.

    Qualcuno ha qualche suggerimento per caso?

  10. #10
    Ho caricato la pagina su altervista così da far capire al meglio il problema: http://rinoedilizia.altervista.org/Index.html

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.