28112 sujets

CSS et mise en forme, CSS3

Site perso soucis de header

j'ai un petit soucis de header. Je suis novice et je ne comprend pas pourquoi je n'arrive pas bien mettre en page mon header.

voici mon soucis :

Qd il s'agit de mettre en place son propre site la on se dis que ça devient compliqué.

Je n'arrive a rien du tout je ne dois m'y prendre correctement. Le CSS et le HTML sont un peu loin :

voila ce que devrai être mon header :

http://www.cefii-developpements.fr/marilys466/Capture%20d%E2%80%99%C3%A9cran%202015-07-27%20%C3%A0%2011.02.24.png

et voila mon code pour l'instant :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ByMe : Studio de Création</title>
<link href="reset.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link href="style_typo.css" rel="stylesheet" />
</head>
<body>
    <div id="conteneur">
        <header>
            <h1>ByMe</h1>
            <h5>Webdesign/Infographie/Multimédia</h5>
            <nav id="menuReso">
                <ul>
                    <li><img src="images/logo_rs_pt/Logo_Facebook.png" href="#"></li>
                    <li><img src="images/logo_rs_pt/Logo_Twitter.png" href="#"></li>
                    <li><img src="images/logo_rs_pt/Logo_GooglePlus.png" href="#"></li>
                    <li><img src="images/logo_rs_pt/Logo_Vimeo.png" href="#"></li>
                    <li><img src="images/logo_rs_pt/Logo_Linked.png" href="#"></li>
                </ul>
            </nav>
            <nav id="menuTop">
                <ul>
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Infographie</a></li>
                    <li><a href="#">Multimédia</a></li>
                    <li><a href="#">CV</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

        </header>

    <footer>
            <nav id="menuFooter">
                
            </nav>
        </footer>
    </div>
</body>
</html>


header{
    margin: 0;
    padding-top: ;
    background-color: #c28f73;
    border-color: 1px solid #fff;
}


h1{
    font-family: 'gooddogregular';
    font-size: 42px;
    font-weight: normal;
    color: #fff;
}

h5{
    font-family: 'Daniel';
    font-size: 8px;
    color: #fff;
}

#menuTop li{
    display: inline;
    list-style-type: none;
    color: #fff;
    text-decoration: none;
}

#menuReso li{
    display: inline;
    text-align: center;
    color: #fff;
    list-style-type: none;
}

#menuReso li img{
    float: right;
    
}




Et voila ce que ça me donne.

http://www.cefii-developpements.fr/marilys466/Capture%20d%E2%80%99%C3%A9cran%202015-07-27%20%C3%A0%2011.08.58.png

J'ai un:

- pb de marge

- pb de positionnement pour le logo

- pb pour le menu réseaux sociaux et en plus les image ne sont pas dans le bon sens

- pb pour le menu top qui n'est pas centrer et je ne sais plus ou mettre la typo



Je n'ai pas du utiliser ce qu'il faut pour la mise en page.

A vrai dire j'ai un peu de mal à me concentrer avec mon gnome à coté qui m'embête toute les 30 secondes.
Je viens de regarder la largeur en pixel du bandeau #c28f73 il doit faire 90px mais les info ne retre pas dedans.
J'ai améliorer un peu mon code le voici

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>ByMe : Studio de Création</title>
<link href="reset.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link href="style_typo.css" rel="stylesheet" />
</head>
<body>
	<div id="conteneur">
		<header>
<body>
	<div id="conteneur">
		<header>			
			<div id='logoTitre'>
				<h1>ByMe</h1>
				<h5>Webdesign/Infographie/Multimédia</h5>
			</div>			
			<div id="menuReso">
				<ul>
					<li><img src="images/logo_rs_pt/Logo_Facebook.png" href="#"></li>
					<li><img src="images/logo_rs_pt/Logo_Twitter.png" href="#"></li>
					<li><img src="images/logo_rs_pt/Logo_GooglePlus.png" href="#"></li>
					<li><img src="images/logo_rs_pt/Logo_Vimeo.png" href="#"></li>
					<li><img src="images/logo_rs_pt/Logo_Linked.png" href="#"></li>
				</ul>
			</div>

			<nav id="menuTop">
				<ul>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Infographie</a></li>
					<li><a href="#">Multimédia</a></li>
					<li><a href="#">CV</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>

		</header>

	<footer>
			<nav id="menuFooter">
				
			</nav>
		</footer>
	</div>
</body>
</html>


body{
	margin: 0;
	background: #ddd7c2;
}

header{
	background: #c28f73;
	height: 90px;
	border: 1px solid #fff;
}

header h1{
	font-family: 'gooddog';
	font-size: 42px;
	color: #fff;
	font-weight: normal;
}

header h5{
	font-family: 'Daniel';
	font-size: 8px;
	color: #fff;
	font-weight: normal;
}



/*=======Partie LOGO Titre=========*/
#logoTitre h1{
	margin: 0 auto;
	margin-right: 50px;
}

#logoTitre {
	float: left;

}

/*=======Partie NAVIGATION=========*/

#menuTop {
	margin-top: 58px;
}

nav#menuTop ul{
	text-align: center;

}

nav#menuTop ul li{
	display: inline;
	list-style-type: none;

}

nav#menuTop ul li a{
	color: #fff;
	text-decoration: none;
	font-family: 'amatic_scregular';
	font-weight: lighter;
	font-size: 30px;
	padding-right: 60px;
}


/*=======Partie RESAUX SOCIAUX=========*/
#menuReso{
	float: right;
	padding-right: 30px;
}

#menuReso li{
	display: inline-block;
	list-style-type: none;
}
Sujet clos
Aller à