Bonjour,
En me promenant sur le site du festival de Carcassonne j'ai trouvé l’adaptabilité et la fluidité de la page vraiment intéressante et j'essaye, en vain, de reproduire le style du menu et du contenu.
Ce que j'aime a propos du menu c'est le fait que tous les onglets conserve une taille identique et qui s'adapte quelle que soit la taille de la fenêtre et aussi le fait qu'une bordure blanche apparait lorsque les onglets s'empilent afin de créer une délimitation horizontal entre les éléments. L'un d'entre vous a-t-il une idée pour reproduire ces effets de mise en forme ?
D'autre part je bute aussi sur le contenu de la page situé sous l'image en bandeau. j'ai bien compris le principe d'utiliser les balises section, article et aside mais je ne parviens pas a reproduire la façon dont les éléments s'adapte quand on réduit la taille de la fenêtre. on voit que les éléments article et aside s'adapte entre eux dans leur largeur jusqu'à ce que aside passe en dessous de article qui augmente de nouveau en largeur. Une idée de la marche à suivre pour une telle adaptabilité ?
voici pour l'instant ce que j'ai réussi à faire ...
Le HTML :
Le CSS
Merci d'avance pour toutes vos réponses
Greg
Modifié par GregD_I (13 Feb 2014 - 13:07)
En me promenant sur le site du festival de Carcassonne j'ai trouvé l’adaptabilité et la fluidité de la page vraiment intéressante et j'essaye, en vain, de reproduire le style du menu et du contenu.
Ce que j'aime a propos du menu c'est le fait que tous les onglets conserve une taille identique et qui s'adapte quelle que soit la taille de la fenêtre et aussi le fait qu'une bordure blanche apparait lorsque les onglets s'empilent afin de créer une délimitation horizontal entre les éléments. L'un d'entre vous a-t-il une idée pour reproduire ces effets de mise en forme ?
D'autre part je bute aussi sur le contenu de la page situé sous l'image en bandeau. j'ai bien compris le principe d'utiliser les balises section, article et aside mais je ne parviens pas a reproduire la façon dont les éléments s'adapte quand on réduit la taille de la fenêtre. on voit que les éléments article et aside s'adapte entre eux dans leur largeur jusqu'à ce que aside passe en dessous de article qui augmente de nouveau en largeur. Une idée de la marche à suivre pour une telle adaptabilité ?
voici pour l'instant ce que j'ai réussi à faire ...
Le HTML :
<body>
<div id="head"> <a href="index.html" > <img src="images/logo.png" alt="Logo DSE"/> </a></div>
<div id="menu" >
<ul>
<li > <a href=""><h2>ACCUEUIL</h2> </a></li>
<li > <a href=""><h2>ONGLET ONGLET</h2> </a></li>
<li> <a href=""><h2>ONGLET ONGLET</h2> </a></li>
<li > <a href="surmesure.html"><h2>ONGLETONGLET ONGLET</h2></a></li>
<li> <a href=""><h2>ONGLET ONGLET</h2></a></li>
<li > <a href=""><h2>ONGLET</h2></a></li>
<l> <a href=""><h2>ONGLET</h2></a></li>
</ul>
</div>
<div class="imagetop"> <img src="images/img1.jpg" alt="Logo" />
<section>
<article>
<div>Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens,
quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis
certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens,
quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis
certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens,
quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis
certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.</div>
</article>
<aside>
<div>Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens,
quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis
certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens,
quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis
certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens,
quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis
certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.</div>
</aside>
</section>
</body>Le CSS
@font-face {
font-family: 'coolveticaregular';
src: url('police/coolvetica_rg-webfont.eot');
src: url('police/coolvetica_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('police/coolvetica_rg-webfont.woff') format('woff'),
url('police/coolvetica_rg-webfont.ttf') format('truetype'),
url('police/coolvetica_rg-webfont.svg#coolveticaregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
background-color:white;
background-image:url(images/fond2.png);
width:100%.}
body {
width:100%;
margin: 0;
padding: 0;
}
p {
margin: 8px;
}
h1 {
font-size:100%;
margin: 8px;
}
#head img {
margin: 20px;
width:25%;
min-width:260px;
}
/* menu*/
#menu {
width:100%;
margin: 0;
padding:0;
background: #ff9500;
}
#menu h2{
padding:0;
margin:0;
font-family:coolveticaregular;
font-size:1.5em;
}
#menu ul li {
display:inline-block;
line-height:40px;
margin-right:20px;
margin-bottom:0px;
}
#menu a {
text-decoration:none;
color:white;
}
/* image bandeau*/
.imagetop{
margin-top:-20px;
}
.imagetop img{
width:100%;
}
/* section*/
article{
float:left;
max-width:1000px;
width:100%;
margin: 0px 10px;
border-left:solid 1px silver;
border-bottom:solid 1px silver;
padding:15px 10px;
}
aside{
float:right;
max-width:500px;
width:100%;
padding-left:15px;
border-left:solid 1px silver;
border-bottom:solid 1px silver; }
Merci d'avance pour toutes vos réponses
Greg
Modifié par GregD_I (13 Feb 2014 - 13:07)
