Partage
  • Partager sur Facebook
  • Partager sur Twitter

Mettre des float côte à côte

Sujet résolu
PaulineBonnet31
  • HTML / CSS
    13 janvier 2018 à 10:14:26

    Bonjour,

    Étudiante débutante, je souhaite réaliser un site pour mon CV en ligne

    J'ai un problème avec mes floats j'arrive pas a mettre cote a cote mes deux "bloc" :

    J'aimerais mettre face a face l'avatar et "Pauline Bonnet"

    <!DOCTYPE html>
<html>
	<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Ressources pour Web Designers</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,700" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Roboto:300,100" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">

	</head>
    <body id=contenu>
    	
    	
       	<nav>
    	<a class="nav-open" href="#contenu" title="afficher le menu">o</a>
    	<a class="nav-close" href="#" title="masquer le menu">f</a>
    	</nav>

		<header>
			<h1><img src="images/minilogo.png" alt="logo Pauline Bonnet"></h1>
			<ul>
					<li><a class="scroll" href="#accueil">Accueil</a></li>
					<li><a class="scroll" href="#webdesign">CV</a></li>
					<li><a class="scroll" href="#ressources">Portfolio</a></li>
					<li><a class="scroll" href="#ressources">Blog</a></li>
					<li><a class="scroll" href="#contact">Contact</a></li>
			</ul>
			<ul>
				<li><a href="facebook.com" title="facebook"><img src="images/facebook.png" alt="lien vers Facebook"/></a></li>
				<li><a href="twitter.com" title="twitter"><img src="images/twitter.png" alt="lien vers Twitter"/></a></li>
			</ul>
		</header>
			
		<section id="accueil">
			<img src="images/avatar.png" alt="Avatar Pauline Bonnet">
			<div id="texteaccueil">
				<h1>Pauline Bonnet </h1>
				<h2>Community Manager & Rédactrice web</h2>
				<p>ICI je me présente</p>
				<p><a href="#" title="ressources">MON CV</a></p>
			</div>
		</section>

		<section id="webdesign">
		<h1>Webdesign</h1>
		<ul class="controls">
			<li class="btn filter" data-filter=".web">Web</li>
			<li class="btn filter" data-filter=".print">Print</li>
			<li class="btn filter" data-filter=".media">Media</li>
			<li class="btn filter" data-filter=".photo">Photo</li>
			<li class="btn filter" data-filter=".mix">Tous</li>
		</ul>
	<div>
		ETC ETC 

	</body>
</html>

    MON CSS :

    *{
	box-sizing: border-box;
}

body{
	font-family: "Arial";
	font-size: 0.8em;
	line-height: 1em;
	padding: 0;
	margin: 0;
	
}

header{
	background-color white;
	margin-top : 15px;
	padding-bottom: 10px;
	padding-right: 30px;
	padding-left: 30px;
	height: 5em;
	display: flex;
	align-items: center;

}


header ul{
	display: flex;

}

header ul:nth-of-type(1) {

	justify-content: center;
	display: flex;
	flex:6;
	text-align: center;
	align-items: center;
	padding: 0;
	margin: 0;
	font-family: "Roboto";

}

header ul:nth-of-type(1) li{
	
	margin-right: 15px;
	list-style-type: none;
	
}


header ul:nth-of-type(1) a{

	text-decoration : none;
	color: black;
	text-transform: uppercase;
	font-size:1.3em;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right:10px;
	padding-left:10px;
	border-right: 1px solid rgba(255,255,255,0.2);
	line-height: 4em;

}

header ul:nth-child(2) li:last-child a{
	border:none;
}


header ul:nth-of-type(2) {
	
	display: flex;
	padding-left: 0;
	justify-content: flex-end;
	flex:1;


}

header ul:nth-of-type(2) li{
	margin-right: 15px;
	align-items: center;
	list-style-type: none;
	
}

section{
	min-height: 100vh;
	text-align: center;
}



 #accueil {
 	width: 100%;
 	background-color: #4EC9C6;
 	background-attachment: fixed;
 	background-position: center bottom;
 	background-size:cover;
 	background-repeat: no-repeat;
	
 }
 
 #accueil img {
	 
	float : left;
	width: 552px;
	border: 1px solid black;
	clear: both;
 }

 #texteaccueil {
	 float: right;
	 margin-left: 200px;
	 border : 1px solid grey;
	 clear: both;
 }

 #accueil h1{
	float :right;
	color:white;
 	text-transform: uppercase;
 	font-family: "Roboto";
 	font-size: 6em;
	
 }

 #accueil h2{
 	font-family: 'lobster two';
 	font-weight: normal;
 	font-size: 3em;
 	letter-spacing: 1px;
 	color:white;
 }

#accueil p{
	font-size:2em;
	color:white;
	font-family: 'Josefin Sans';
}


#accueil p:nth-of-type(2) a{
	text-decoration: none;
	color: white;
	background-color: #2981B3;
	border-radius: 10px;
	box-shadow: 0px 5px 0px #043555;
	font-family: 'Josefin Sans';

}

#accueil p:nth-of-type(2) a:hover{
	background-color: #043555;	
	transition-duration: 0.5s;
	box-shadow: 0px 5px 0px #2981B3;
	}




#webdesign {
	background-color: #3498db;
	padding-top: 2em;

}

#webdesign h1{
	font-size: 6em;
	font-weight:700;
	font-family: 'roboto';
	color:#ecf0f1;
	text-transform: uppercase;
	text-align: center;

}

#webdesign div{
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}
	
#webdesign figure {
	width:240px;
	height: 150px;
	border: solid 3px #ecf0f1;
	box-shadow: 0px 0px 4px rgba(0,0,0,0.4);
	overflow: hidden;
	
}

#webdesign figure:hover figcaption{
	transform: translateY(-70px);
	background-color: rgba(0,0,0,0.6);
	color: white;
	text-align: center;
	transition-duration: 0.5s;
}

#webdesign figure:hover img{
	transform: scale(1.5);
	
}

#wedesign audio {
	width:240px;
	height: 150px;
}

#webdesign video{
	width:240px;
	height: 150px;
}

section#webdesign div .mix{display:none;}

.controls {
	border : 6px solid #ecf0f1;
	display: flex;
	background-color: #ecf0f1;
	color: #3499db;
	text-transform: uppercase;
	font-size : 1.5em;
	font-family: "Roboto";
	list-style-type: none;
	justify-content: center;
}

.controls li{
	width: 10vw;
}

.controls li:hover{
	color: #043555;
}


.suite {
	background-image: url("../images/fleche.png");
	background-position: center;
	left: 48vw;
	border-radius:50%;
	width: 3vw;
	height: 3vw;
	border:1px solid white; 
	position: absolute;
	bottom: 0.5vw;
	animation-duration: 4s;
	animation-name: monanim;
	animation-iteration-count: infinite;
	}

@keyframes monanim{
			40% {
		transform : translateY(-30px);
		}

		50% {
		transform: translateY(0);

		}

		60% {
			transform: translateY(-15px);

		}
		80%{
			transform: translateY(0);

		}



}












etc etc

    MERCI de bien vouloir me renseigner ....

    • Partager sur Facebook
    • Partager sur Twitter

    Mettre des float côte à côte

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown