Visualizzazione dei risultati da 1 a 9 su 9

Discussione: position maledetta

  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86

    position maledetta

    Ciao a tutti, vorrei porvi un quesito, inserendovi per intero il css che sto scrivendo all'interno della mia pagina html, praticamente non riesco a dare ai div la lunghezza e/o la larghezza intera della pagina

    codice:
    <style>
    div
    	}
    	.header{
    		background-color:#fff;
    		width:100%;
    		height:100px;
    	}
    	.logo{
    		height:100px;
    		width:10%;
    		position: Absolute;
        	top: 10px;
        	left: 5px;
    	}	
    	.menu{
    		height:100px;
    		width: 80%;
    		position: Absolute;
        	top: 70px;
        	left: 217px;
    	}	
    	
    	/* menu */
    	ul {
        list-style-type: none;
        margin-top: 1px;
    	margin-left: 192px;
        padding: 0;
        overflow: hidden;
        background-color: #2e9bac;
    	height: 25px;
    	}
    	li {
        float: right;
    }
    
    
    li a {
        display: block;
        color: white;
        text-align: right;
        padding: 3px 5px;
        text-decoration: none;
    }
    
    
    li a:hover {
        background-color: #1f6383;
    }
    li a:active {
        background-color: #7e9faa;
    }
    li {
        border-right: 1px solid #fff;
    	border-left: 1px solid #fff;
    }
    li:last-child {
        border-right: ;
    }	
    	.menu_lat_sx
    {
        position: relative;
        top: 8px;
        left: -210px;
        background-color: #2e9bac;
        width: 200px;
        height: 500px;
    }
    	.desktop{
    		position: absolute;
    		top: 50px;
        	left: -10px;
    		background-color:#E8E4E4;
    		min-width: 100%;
    		min-height: 100%;
    	}
    </style>
    </head>
    
    
    <body>
    	<div class="header">
    	<div class="logo">
    	  <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="413" height="99" alt=""/>
    </div>
    	<div class="menu">
    	<ul>
    	<div>
      <li><a href="#home">Contatti</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Noi</a></li>
      <li><a href="#about">Home</a></li>
    		</div>
    		</ul>
    		<div class="menu_lat_sx">
    		<a href="#home">Noi</a>
    		<a href="#home">News</a>
    		<a href="#home">Contatti</a>
    		</div>	
    		<div> 
    		<div class="desktop">
    		<a href="#home">desktop</a>	 
    		</div>
    </body>
    </html>
    ci sto sbattendo la testa ma proprio non riesco a capire.
    potreste darmi una dritta? grazie
    Ultima modifica di merovese; 16-09-2021 a 14:07

  2. #2
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Ciao, il tuo codice è abbastanza confuso, inoltre sono segnalati due errori sul css :

    1) div }
    2) border-right: ;

    Oltre a ciò, secondo me sbagli proprio ad utilizzare il position absolute per la creazione del tuo layout, dovresti invece provare con flexbox o grid.
    Poi ti sconsiglio il tuo approccio nella riga :

    codice:
    <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="413" height="99" alt=""/>
    è preferibile gestire gli attributi come larghezza ed altezza sempre dal file css, inoltre è preferibile specificare la stringa all'interno dell'attributo "alt".

    Un mockup di base aiuterebbe a capire meglio cosa vorresti realizzare.

    ps. Ti consiglio vscode o atom come editor gratuiti.

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    Ciao, il tuo codice è abbastanza confuso, inoltre sono segnalati due errori sul css :

    1) div }
    2) border-right: ;

    Oltre a ciò, secondo me sbagli proprio ad utilizzare il position absolute per la creazione del tuo layout, dovresti invece provare con flexbox o grid.
    Poi ti sconsiglio il tuo approccio nella riga :

    codice:
    <img src="immagini/loghi/Futura_logo-xsmall.jpg" width="413" height="99" alt=""/>
    è preferibile gestire gli attributi come larghezza ed altezza sempre dal file css, inoltre è preferibile specificare la stringa all'interno dell'attributo "alt".

    Un mockup di base aiuterebbe a capire meglio cosa vorresti realizzare.

    ps. Ti consiglio vscode o atom come editor gratuiti.


    in effetti non sono ferratissimo, questi editor a cosa mi servono? Io scrivo con dreamweaver

  4. #4
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Dreamweaver fa parte della famiglia di editor visuali (WYSIWYG), dunquè sono pratici anche per chi non ha molta dimestichezza a scrivere codice, se vogliamo ricordano vagamente il modo di lavorare di Wordpress.
    Comunque, raramente troverai sviluppatori che utilizzano Dreamweaver per progetti "seri", mentre al contrario troverai moltissimi sviluppatori che utilizzano visual studio code (aka vscode) praticamente per tutto, stessa cosa per atom che è molto simile, poi la cosa diventa soggettiva.

  5. #5
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    Dreamweaver fa parte della famiglia di editor visuali (WYSIWYG), dunquè sono pratici anche per chi non ha molta dimestichezza a scrivere codice, se vogliamo ricordano vagamente il modo di lavorare di Wordpress.
    Comunque, raramente troverai sviluppatori che utilizzano Dreamweaver per progetti "seri", mentre al contrario troverai moltissimi sviluppatori che utilizzano visual studio code (aka vscode) praticamente per tutto, stessa cosa per atom che è molto simile, poi la cosa diventa soggettiva.
    Magari poi gli daró un occhio. Ascolta non riesci a farmi capire dove sbaglio con la POSITION?

  6. #6
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Non so se è quello che volevi ottenere, prova a vedere.
    codice:
    <!DOCTYPE html>
    <html lang="it-IT">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            :root {
                --white: #fff;
                --menu-bc: #2e9bac;
                --link-hover: #1f6383;
                --link-active: #7e9faa;
                --desktop-bc: #E8E4E4;
            }
    
            * {
                padding: 0;
                margin: 0;
            }
    
            #header {
                background-color: var(--white);
                width: 100%;
                height: 100px;
                display: flex;
            }
    
            #container {
                display: flex;
            }
    
            #logo {
                background-color: var(--menu-bc);
            }
    
            #logo img {
                height: 100px;
                width: 220px;
            }
    
            #menu {
                display: flex;
                align-items: flex-end;
                width: 100%;
                background-color: var(--menu-bc);
            }
    
            #menu_lat_sx {
                background-color: var(--menu-bc);
                min-width: 200px;
                height: calc(100vh - 120px);
                padding: 10px;
            }
    
            #desktop {
                background-color: var(--desktop-bc);
                width: 100%;
                min-height: 100%;
                padding: 10px;
            }
    
            /* menu */
            ul {
                display: flex;
                justify-content: end;
                width: 100%;
                height: 25px;
                list-style-type: none;
                background-color: var(--menu-bc);
            }
    
            li a {
                display: block;
                color: var(--white);
                text-align: right;
                padding: 3px 5px;
                text-decoration: none;
            }
    
            li a:hover {
                background-color: var(--link-hover);
            }
    
            li a:active {
                background-color: var(--link-active);
            }
    
            li {
                border-right: 1px solid var(--white);
                border-left: 1px solid var(--white);
            }
    
            li:last-child {
                border-right: 0;
            }
        </style>
    </head>
    
    
    <body>
        <div id="header">
            <div id="logo">
                <img src="images/01.jpg" alt="logo">
            </div>
            <div id="menu">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#about">Noi</a></li>
                    <li><a href="#contact">Contatti</a></li>
                </ul>
            </div>
        </div>
        <div id="container">
            <div id="menu_lat_sx">
                <a href="#Noi">Noi</a>
                <a href="#News">News</a>
                <a href="#Contatti">Contatti</a>
            </div>
            <div id="desktop">
                <a href="#desktop">desktop</a>
            </div>
        </div>
    </body>
    
    </html>

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    Quote Originariamente inviata da ninja72 Visualizza il messaggio
    Non so se è quello che volevi ottenere, prova a vedere.
    codice:
    <!DOCTYPE html>
    <html lang="it-IT">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            :root {
                --white: #fff;
                --menu-bc: #2e9bac;
                --link-hover: #1f6383;
                --link-active: #7e9faa;
                --desktop-bc: #E8E4E4;
            }
    
            * {
                padding: 0;
                margin: 0;
            }
    
            #header {
                background-color: var(--white);
                width: 100%;
                height: 100px;
                display: flex;
            }
    
            #container {
                display: flex;
            }
    
            #logo {
                background-color: var(--menu-bc);
            }
    
            #logo img {
                height: 100px;
                width: 220px;
            }
    
            #menu {
                display: flex;
                align-items: flex-end;
                width: 100%;
                background-color: var(--menu-bc);
            }
    
            #menu_lat_sx {
                background-color: var(--menu-bc);
                min-width: 200px;
                height: calc(100vh - 120px);
                padding: 10px;
            }
    
            #desktop {
                background-color: var(--desktop-bc);
                width: 100%;
                min-height: 100%;
                padding: 10px;
            }
    
            /* menu */
            ul {
                display: flex;
                justify-content: end;
                width: 100%;
                height: 25px;
                list-style-type: none;
                background-color: var(--menu-bc);
            }
    
            li a {
                display: block;
                color: var(--white);
                text-align: right;
                padding: 3px 5px;
                text-decoration: none;
            }
    
            li a:hover {
                background-color: var(--link-hover);
            }
    
            li a:active {
                background-color: var(--link-active);
            }
    
            li {
                border-right: 1px solid var(--white);
                border-left: 1px solid var(--white);
            }
    
            li:last-child {
                border-right: 0;
            }
        </style>
    </head>
    
    
    <body>
        <div id="header">
            <div id="logo">
                <img src="images/01.jpg" alt="logo">
            </div>
            <div id="menu">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#about">Noi</a></li>
                    <li><a href="#contact">Contatti</a></li>
                </ul>
            </div>
        </div>
        <div id="container">
            <div id="menu_lat_sx">
                <a href="#Noi">Noi</a>
                <a href="#News">News</a>
                <a href="#Contatti">Contatti</a>
            </div>
            <div id="desktop">
                <a href="#desktop">desktop</a>
            </div>
        </div>
    </body>
    
    </html>

    diciamo di si, nel senso che prima come menu avevo una riga di colore "blu" con sfondo bianco, alla quale avrei aggiunto altre righe di altri colori, invece ora ho uno sfondo "blu"ovunque
    e poi il menu su Chrome si vede a destra e magicamente su safari si sposta a sinistra

  8. #8
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Non ho ben capito il discorso del colore blu ovunque, cioè se lo vedi su dreamweaver o sulla preview da browser.
    Per il discorso dell'allineamento del menu potresti:

    1) Verificare che il browser sia aggiornato.
    2) Provare ad utilizzare i webkit per autmentare la compatibilità con browser vecchi, tipo:
    codice:
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: end;
    justify-content: end;
    ps. che versione ha dreamweaver ?

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2016
    Messaggi
    86
    ho risolto, grazie mille

Tag per questa discussione

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.