Tag Nav (margin)

Question

xtof

27 Mar 2013 à 12:17

Bonjour à tous et toutes.

Aient commencer un projet basé sur Initializr, j'ai des problème avec mon tag nav qui créer des marges très dérangeante pour effectuer le placement!

voici mon code HTML


<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Titre</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/nivo-slider.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

		<!--- header de la page --->
        <div id="wrapper-head">
        	<header>
            
            <div id="logo"><img src="img/logo;phg" width="235" height="62" alt="Logo Fennec" /></div>
            
			<nav>
            	<ul>
                    <li><a class="mnu">Acceuil</a></li>
                    <li><a class="mnu">menu02</a></li>
                    <li><a class="mnu">menu03</a></li>
                    <li><a class="mnu">Contact</a></li>
                </ul>
			</nav>
            
          </header>
        </div>
        
        <!--- Slide show ou images --->
        <div id="banner">
        	<div class="slider-wrapper">

        	</div>
        </div>
        
        <!--- contenu de la page --->
		<div id="wrapper-cont">
        	<div id="content">
            </div>
        </div>
        
        <!--- Pied de page --->
        <div id="wrapper-foot">
        <div id="bass-line"></div>
        <footer>
        	<div id="copyright">© FENNEC PRODUCTIONS <span class="bl">2013</span></div>
            <div id="extraduo">design: <a href="http://www.extraduo.com">extraduo.com</a></div>
        </footer>
        </div>
        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>

        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <script>
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
    </body>
</html>

et mon css


/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
	background-color:#152e32;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
	border:0px;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Déclaration des polices */   
@font-face {
    font-family: 'gotham';
    src: url('../webfonts/gotham_medium-webfont.eot');
    src: url('../webfonts/gotham_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../webfonts/gotham_medium-webfont.woff') format('woff'),
         url('../webfonts/gotham_medium-webfont.ttf') format('truetype'),
         url('../webfonts/gotham_medium-webfont.svg#gotham_mediumregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#wrapper-head{
	background-color: #227479;
	border-bottom:solid #64c7c9 1px;
	width:100%;
}

header {
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	height:102px;
	background-image:url(../img/bg-header.png);
}

#logo{
	position: absolute;
	top: 20px;
	left: 40px;
	height: 62px;
	width: 235px;
	border: solid #000000 1px;
}

nav {
	position: absolute;
	border: solid #000000 1px;
	top: 72px;
	left: 350px;
	width: 250px;
	height: 32px;
	padding: 0px;
	margin: 0px;
}

ul {
	border: solid #ffffff 1px;
}

li{
	display:inline;
	border: solid #000 1px;
}

a.mnu{
	font-family: gotham;
	font-size: 10px;
	color: #165254;
	text-decoration: none;
	}
	
a.mnu:hover{
	font-family: gotham;
	font-size: 10px;
	color:#ffffff;
	text-decoration:underline;
	text-shadow: 0px 1px 1px #3e8f91;
    filter: dropshadow(color=#3e8f91, offx=0, offy=1);
	}

#banner {
	background-color: #000000;
	height:260px;
	border-bottom:solid #1d6469 1px;
	}

.slider-wrapper {
	position:relative; 
	width: 850px;
	height: 192px; 
	margin: auto;
	top: 32 px;
}

#wrapper-cont {
	background-color: #152e32;
	height:100%;
}

#content{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	}

aside{
	position:absolute;
	top: 30px;
	left: 40px;
	width: 275px;
}

.news{
	margin-top: 10px;
	border-bottom: solid 1px #0a5d61;
}

p{
	font-family:Verdana, Geneva, sans-serif;
	font-size: 11px;
	color:#aaa7a7;	
}

.t-news{
	color:#64c7c9;
	font-weight:bold;
	}

#wrapper-foot {
    position:absolute;
    bottom:0;
    width:100%;
    height:70px;

}

#bass-line {
	background-color:#227479;
	background-image:url(../img/ligne-footer.png);
	background-repeat:no-repeat;
	background-position:center;
	height: 6px;
}

footer{
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width: 930px; /* largeur obligatoire pour être centré */
	height:64px;
}

#copyright{
	position:absolute;
	font-family: gotham;
	font-size: 10px;
	color: #64c7c9;
	left: 40px;
	top: 24px;
}

.bl{
	color: #ffffff;
}

#extraduo{
	position:absolute;
	font-family: verdana;
	font-size: 9px;
	color: #868484;
	right: 40px;
	top: 24px;	
}






/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 35em) {

}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

voici un screenshot

Avez-voous une solution à proposer; merci d'avance.
Modifié par xtof (27 Mar 2013 - 12:26)

Hermann

27 Mar 2013 à 13:58

Bonjour,
ce sont les marges par défaut de l'UL qui se répercutent sur son parent nav (lire à ce sunet ce tuto : http://www.alsacreations.com/article/lire/629-fusion-des-marges.html Smiley cligne

> supprimer donc ces marges sur l'UL
Modifié par Hermann (28 Mar 2013 - 09:51)

xtof

27 Mar 2013 à 16:22

Merci beaucoup ça à l'air de fonctionner.

Merci merci merci

Sujet clos

CSS et mise en forme, CSS3

Tag Nav (margin)