Comment crée un bloc à une dimension précise
Ce que je veux
Je voudrais créer mon site internet ,car avec Wordpress je n'arrive pas à obtenir ce que je veux, bref enfaite ce que je veux est trés simple mais j'ai du mal a comprendre les div, je voudrais créer un espace avec une taille de 400px aprés mon menu e en full page ,un peux comme ce site http://99webpage.com/theme-review/landingpage/cobian/index.html ,pour metre un texte de bienvenue et une image de fond ou une couleur ,j'utilise le framework Materialize css, si quelqu'un peux m'aider et m'expliquer ça serait sympa ,merci.
Mon code
<!DOCTYPE html>
<html>
<head lang="fr">
<!-- META TAG -->
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=0, maximum-scale=1, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Pronostics Paris sportifs">
<meta name="author" content="https://www..fr">
<head>
<!-- STYLES & FONTS -->
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head><!-- Favicon -->
<link rel="shortcut icon" href="/images/favicon.ico"><!-- titre du site -->
<title>Mon site</title>
<body>
<!-- DEBUT DU MENU -->
<nav>
<div class="nav-wrapper green">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="team.html">Notre équipe</a></li>
<li><a href="pronos.html">Pronostics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="team.html">Notre équipe</a></li>
<li><a href="pronos.html">Pronostics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div></nav>
<!-- FIN DU MENU -->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body></html>
6 réponses
Merci quand même a vous ,vous pouvez passer le sujet en résolu
non je n'ai fait pas de css perso,j'ai peux être trouver la solution d'intégrer directement un carousel ou un slider ,je vous redis si j'ai réussi , petite question peux t-on utiliser materialise css et en même temps quelques parties de son css perso ?
Bien évidemment. Mais il faut bien intégrer le <link> de ton CSS perso APRES celui de MaterializeCSS ;)
j'ai trouvé la solution j'ai placer un slider
<!DOCTYPE html>
<html>
<head lang="fr">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, user-scalable=0, maximum-scale=1, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Pronostics Paris sportifs">
<meta name="author" content="https://www..fr">
<head>
<!-- STYLES & FONTS -->
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head><!-- Favicon -->
<link rel="shortcut icon" href="/images/favicon.ico"><!-- titre du site -->
<title>Mon site</title>
<body>
<!-- DEBUT DU MENU -->
<nav>
<div class="nav-wrapper green">
<a href="#!" class="brand-logo">Team-Jalym</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="team.html">Notre équipe</a></li>
<li><a href="pronos.html">Pronostics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="accueil.html">Accueil</a></li>
<li><a href="team.html">Notre équipe</a></li>
<li><a href="pronos.html">Pronostics</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div></nav>
<!-- FIN DU MENU -->
<!--DEBUT DU SLIDER --> <div class="slider">
<ul class="slides grey darken-4">
<li>
<img src=""> <!-- random image -->
<div class="caption center-align">
<h3>NOTRE OBJECTIF : VOUS FAIRE GAGNER DE L'ARGENT!</h3>
<h5 class="light grey-text text-lighten-3">Les pronostiqueurs de la Team-Jalym analyse pour vous des dizaines de matchs
pour dénicher les matchs à gros potentiel.
Nous mettons ainsi à votre disposition nos analyses, notre expérience,
et nos réseaux d'informations
en vous proposant des pronostics qui vous feront enfin gagner sur le long terme.
</h5>
</div>
</li>
<li>
<div class="caption center-align">
<h3>Des sports variées</h3>
<h5 class="light grey-text text-lighten-3">Retrouvez des pronostics pour différents sport.</h5>
</div>
</li>
<li>
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul></div>
<!--FIN DU SLIDER -->
<div class="row">
<div class="col s4">
<div class="center promo promo-example">
<i class="large material-icons">perm_identity</i>
<p class="flow-text">1:Incrivez-vous gratuitement</p>
<p class="light center">Inscrivez-vous gratuitement sur notre site internet pour suivre nos pronostiqueurs</p>
</div>
</div>
<div class="col s4">
<div class="center promo promo-example">
<i class="large material-icons">visibility</i>
<p class="flow-text">2:Suivez les pronostics</p>
<p class="light center">Suivez les pronostics de nos différents pronostiqueurs</p>
</div>
</div>
<div class="col s4">
<div class="center promo promo-example">
<i class="large material-icons">perm_identity</i>
<p class="flow-text">3: Pariez chez votre bookmaker préféré</p>
<p class="light center"> Pariez avec succès chez votre bookmaker préféré ou au bureau de tabac</p>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script> $(document).ready(function(){
$('.slider').slider({full_width: true});
});
</script>
</body></html>