Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Errore layout

  1. #1
    Utente di HTML.it L'avatar di danlupo
    Registrato dal
    Jul 2009
    Messaggi
    314

    Errore layout

    Salve ho un problema con un layout..

    Ho un Header ed un Footer

    Ho una colonna a Sinistra con un menu ed uno slideshow.
    A Destra ho un Content e dovrei avere un logo.
    Il problema è che il logo mi si posiziona sopra il menu a sinistra con relativo shift verso l'alto del footer e "chiusura" dello spazio del Content

    Allego l'immagine del layout come appare ed i codici del CSS e dell'HTML

    Grazie Daniele


    CSS

    codice:
    body,html
    {
        margin:0;
        padding:0;
        font-size:101%;
        background-image: url("../images/website/sfondo.png");
    }
    div#container
    {
        
        margin:0 auto;
        padding:0;
        height:830px;
        width:1200px;
        background-image: url("../images/website/sfondo.png");
        overflow: hidden;
        
    }
    #header
    {
        margin:0;
        padding:0;
        width:1200px;
        height:100px;
        background:transparent url("../images/website/header.png") no-repeat;
        float:left;
        border: dashed;
    }
    div#titolo
    {
        margin:0 auto;
        width:150px;
        height:50px;
        padding:0;
        float:left;
    }
    div#header h1{padding:10px 0 0 10px; margin:0; font-family: algerian; font-weight:normal; font-size:72px; color:#f5f5f5; width:200px;}
    div#menuo
    {
        margin:75px 0 0 25px;
        padding:0;
        height:15px;
        width:400px;
        border-color:white;
        float:right;
    }
    div#menuo ul {margin:0 auto; padding:0; list-style:none; background-color: transparent;}
    div#menuo li {margin:0 0 10px 0; padding:0 10px 0 0; background-color:transparent; color: #f5f5f5; width:auto; display:inline;  text-align:right; font-size: 20px;}
    div#menuo li:hover {color: #d2b48c;}
    
    
    #navigation
    {
        margin:30px 0 0 0;
        padding:0;
        width:100px;
        height:260px;
        float:left;
        background-color:transparent;
    }
    div#menuv
    {
        margin: 10px 40px 10px 40px;
        width:280px;
        height:300px;
    border: double;
    }
    div#menuv ul {margin:0 auto; padding:0; list-style:none; background-color: transparent;}
    div#menuv li {margin:0 0 10px 0; padding:0; background-image: url('../images/website/menu.png'); color: #f5f5f5; height:50px; width:280px; text-align:center; font-size: 36px;}
    div#menuv li:hover {color: #d2b48c;}
    #content
    {
        margin:15px 0 0 0;
        float:right;
        padding:0;
        width:800px;
        height:510px;
        background-color:transparent;
        overflow: auto;
        font-size:80%;
    }
    div#gallery
    {
        margin:15px 0  15px 0;
        width:360px;
        height:300px;
        z-index:1;
        padding-left:0;
        float:left;
        border: double;
    }
    div#logo
    {
        margin:0;
        float:right;
        width:200px;
        height:150px;
        z-index:1;
    }
    #footer
    {
        clear:both;
        margin:0;
        padding:0;
        width:1200px;
        height:50px;
        background:transparent url("../images/website/footer.png") no-repeat;
        border: dotted;
    }
    li
    {
        cursor: pointer;
    }
    HTML


    codice:
    <html>
    <head>
    <title>Inserire i fogli di stile in un documento</title>
    <link rel="stylesheet" type="text/css" href="css/ch.css"/>
    <link rel="stylesheet" type="text/css" href="css/slider.css"/>
    <script type="text/javascript" src="scripts/js/jquery.js"></script>
    <script type="text/javascript" src="scripts/js/s3Slider.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#slider').s3Slider({
                timeOut: 3000
            });
        });
    </script>
    
    
    </head>
    <body>
    <div id="container">
    <div id="header">
                <div id="menuo">
            <ul>[*]Chi Siamo[*]Dove Siamo[*]Lo Staff[*]Contatti[/list]
        </div>
    <div id="titolo">
            <h1>COOKINGHOME</h1>
        </div>
    </div>
    <div id="navigation">
        <div id="menuv">
            <ul>[*]CookingHome[*]La Scuola[*]I Menu[*]Gallery[*]Partners[/list]
        </div>
        <div id="gallery">
            <div id="slider">
                <ul id="sliderContent">
                    <li class="sliderImage">
                    [img]images/410/1.jpg[/img]   
                    <span class="top">Title text 1
    Content text...</span>
                    
                    <li class="sliderImage">
                    [img]images/410/2.jpg[/img]
                    <span class="top">Title text 2
    Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
                                        <li class="sliderImage">
                    [img]images/410/3.jpg[/img]
                    <span class="bottom">Title text 2
    Content text...</span>
                    
                    <li class="sliderImage">
                    [img]images/410/4.jpg[/img]
                    <span class="bottom">Title text 2
    Content text...</span>
                       
                    <li class="sliderImage">
                    [img]images/410/5.jpg[/img]
                    <span class="top">Title text 2
    Content text...</span>
                    
                    <div class="clear sliderImage"></div>[/list]
            </div>
        </div>
    </div>
    <div id="content">
        Se gli archivi sumerici e babilonesi consentono di farci un quadro di massima dell'alimentazione delle popolazioni mesopotamiche, non molto sappiamo, invece, dei loro gusti e delle loro tecniche di cucina. È nota la loro avversione per la carne suina (condivisa dagli Egizi) e la loro predilezione per la carne ovina: l'una e l'altra saranno ereditate dagli Ebrei e dagli Arabi. Una varietà di pecora di cui, a detta di Erodoto, andavano particolarmente ghiotte era quella «dalla coda grassa», un'appendice, pregiatissima, che poteva toccare i cinque chilogrammi di peso.
    
    La lievitazione del pane fu scoperta in Egitto. Anche se si continuò a lungo a far uso di pane azimo, le caste superiori potevano scegliere fra un quarantina di tipi di pane lievitato e di dolci a base di uova, latte e miele. Erodoto ci informa che le medesime caste prediligevano i volatili (anatre, piccioni, quaglie, coturnici, gazze).
    
    Gli uccelli più piccoli, oltre che stufati, si gustavano crudi in salamoia. I canali e le paludi del Nilo erano ricchi di anguille, carpe, muggini e pesci persici, che si consumavano anche salati ed essiccati.
    
    La cucina greca è sufficientemente documentata. Le carni preferite erano quelle del maiale, della lepre e degli uccelli. La selvaggina da pelo veniva prima lessata, poi arrostita allo spiedo e infine accompagnata da salse «dolci e grasse». Erano molto apprezzati anche le frattaglie e i sanguinacci (ne era attribuita la creazione al cuoco Aftonita).
    
    </div>
    <div id="logo">
        [img]images/website/logox.png[/img]
    </div>
    <div id="footer"></div>
    
    </div>
    </body>
    </html>

  2. #2
    Utente di HTML.it L'avatar di danlupo
    Registrato dal
    Jul 2009
    Messaggi
    314
    In realtà mi sono accorto che non inserisce correttamente nessuno dei Div..

  3. #3
    Utente di HTML.it L'avatar di ispuk
    Registrato dal
    Jan 2009
    Messaggi
    1,026
    ho dato un 'occhiata veloce al codice html,mi sembra di vedere che il div header non è chiuso,ma addirittura al suo interno hai messo il divmenu

    controla che tutti i div siano scritti bene,chiusi,e che quelli interni siano nel div giusto

  4. #4
    C'era un pò di codice css ridondante. Inoltre ho pensato bene di aggiungere un div main che contenesse i div navigation e content, così è più ordinato. Ho testato il tutto con Firefox 3.5, Explorer 8 e Chrome. Occhio ai bordi tratteggiati dell'header: con Explorer 7/8 li vedrai un pò diversi. Per il resto dovrebbe andare.

    HTML
    codice:
    <body>
    <div id="container">
      <div id="header">
        <div id="menuo">
            	<ul>
                	[*]Chi Siamo
    	[*]Dove Siamo
        	[*]Lo Staff
            	[*]Contatti[/list]
        </div>
        	<h1>COOKINGHOME</h1>
        </div>
        <div id="main">
        	<div id="navigation">
                <div id="menuv">
                    <ul>[*]CookingHome[*]La Scuola[*]I Menu[*]Gallery[*]Partners[/list]
                </div>
                <div id="gallery">
                    <div id="slider">
                        <ul id="sliderContent">
                            <li class="sliderImage">
                            [img]images/410/1.jpg[/img]   
                            <span class="top">Title text 1
    Content text...</span>
                            
                            <li class="sliderImage">
                            [img]images/410/2.jpg[/img]
                            <span class="top">Title text 2
    Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
                                                <li class="sliderImage">
                            [img]images/410/3.jpg[/img]
                            <span class="bottom">Title text 2
    Content text...</span>
                            
                            <li class="sliderImage">
                            [img]images/410/4.jpg[/img]
                            <span class="bottom">Title text 2
    Content text...</span>
                               
                            <li class="sliderImage">
                            [img]images/410/5.jpg[/img]
                            <span class="top">Title text 2
    Content text...</span>
                            
                            <div class="clear sliderImage"></div>[/list]
                    </div>
                </div>
            </div>
            <div id="content">
        		Se gli archivi sumerici e babilonesi consentono di farci un quadro di massima dell'alimentazione delle popolazioni mesopotamiche, non molto sappiamo, invece, dei loro gusti e delle loro tecniche di cucina. È nota la loro avversione per la carne suina (condivisa dagli Egizi) e la loro predilezione per la carne ovina: l'una e l'altra saranno ereditate dagli Ebrei e dagli Arabi. Una varietà di pecora di cui, a detta di Erodoto, andavano particolarmente ghiotte era quella «dalla coda grassa», un'appendice, pregiatissima, che poteva toccare i cinque chilogrammi di peso.
    
                La lievitazione del pane fu scoperta in Egitto. Anche se si continuò a lungo a far uso di pane azimo, le caste superiori potevano scegliere fra un quarantina di tipi di pane lievitato e di dolci a base di uova, latte e miele. Erodoto ci informa che le medesime caste prediligevano i volatili (anatre, piccioni, quaglie, coturnici, gazze).
                
                Gli uccelli più piccoli, oltre che stufati, si gustavano crudi in salamoia. I canali e le paludi del Nilo erano ricchi di anguille, carpe, muggini e pesci persici, che si consumavano anche salati ed essiccati.
                
                La cucina greca è sufficientemente documentata. Le carni preferite erano quelle del maiale, della lepre e degli uccelli. La selvaggina da pelo veniva prima lessata, poi arrostita allo spiedo e infine accompagnata da salse «dolci e grasse». Erano molto apprezzati anche le frattaglie e i sanguinacci (ne era attribuita la creazione al cuoco Aftonita).
    		</div>
    	  	<div id="logo">
        		[img]images/website/logox.png[/img]
    	  	</div>
        </div>
        <div id="footer"></div>
    </div>
    </body>
    </html>

    CSS
    codice:
    html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li {
    	margin:0;
    	padding:0;
    	border:0;
    }
    
    table {
    	border-collapse:separate;
    	border-spacing:0;
    }
    
    a img {border:none;}
    
    body {
        background-image: url("../images/website/sfondo.png");
    	line-height:1.5;
    }
    
    div#container {
        margin:0 auto;
        width:1200px;
        background-image: url("../images/website/sfondo.png");  
    }
    
    #header {
        width:1200px;
        height:100px;
        background: url("../images/website/header.png") no-repeat;
    	border: dashed;
    }
    
    div#header h1 {
    	padding:10px 0 0 10px;
    	font-family: algerian; 
    	font-weight:normal; 
    	font-size:72px; 
    	color:#f5f5f5; 
    }
    
    div#menuo {
        margin:70px 0 0 25px;
        width:400px;
        border-color:white;
        float:right;
    }
    
    div#menuo ul {
    	list-style:none;
    }
    
    div#menuo li {
    	margin:0 0 10px 0; 
    	padding:0 10px 0 0; 
    	color: #f5f5f5; 
    	display:inline;  
    	text-align:right; 
    	font-size: 20px;
    }
    
    div#menuo li:hover {color: #d2b48c;}
    
    #main {
    	height: 700px;
    }
    
    #navigation {
        margin:30px 0 0 0;
        float:left;
        background-color:transparent;
    }
    
    div#menuv{
        margin: 10px 40px 10px 40px;
        width:280px;
    	border: double;
    }
    
    div#menuv ul {
    	margin:0 auto; 
    	list-style:none; 
    	background-color: transparent;
    }
    
    div#menuv li {
    	margin:0 0 10px 0;
    	background-image: url('../images/website/menu.png'); 
    	color: #f5f5f5; 
    	height:50px; 
    	width:280px; 
    	text-align:center; 
    	font-size: 36px;
    }
    
    div#menuv li:hover {color: #d2b48c;}
    
    #content {
        margin:15px 0 0 0;
        float:right;
        padding:0;
        width:800px;
        height:510px;
        overflow: auto;
        font-size:80%;
    }
    
    div#gallery {
        margin:15px 0 15px 0;
        width:360px;
        float:left;
        border: double;
    }
    
    div#logo {
        float:right;
        width:200px;
        height:150px;
    	border: 1px solid #000;
    }
    
    #footer {
        width:1200px;
        height:50px;
        background:transparent url("../images/website/footer.png") no-repeat;
        border: dotted;
    }
    
    li {
        cursor: pointer;
    }

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.