Bonjour,
Comme déjà dit dans ma présentation, je réalise un porte folio sur la demande d'un ami. Je ne débute pas tout a fait dans le CSS mais ça peut tout de même vite me dépasser car je n'ai pas l'habitude de faire un design a mes sites, voilà maintenant que j'y suis obligé ...
La page se compose de 3 parties basiques: header, #main et footer.
header (pas div id=header mais la nouvelle balise html5 bien sûr) est collé au sommet de la page, centré et d'une largeur relative à la définition de l'écran.
footer, de même, au bas de l'écran, d'une hauteur moins importante, etc ... schéma classique, vous voyez le topo ^^
#main est le conteneur principal, largeur égale à header, hauteur relative (100 % - header.height - footer.height - margin: 20px 20px).
Il contient:
- la première page #home, c'est la seule page fixe.
- le sous-conteneur #pages.
Le sous-conteneur #pages contient:
- un menu #tabs, pour chaque pages, celui là est toujours visible à la droite de la page.
- les pages qui seront capable de se déplacer: #about, #work, #links, #contact.
par défaut ces pages sont masquées (derrière un div color #000, pas display: none).
Lors d'un clic sur un onglet, l'onglet ainsi que sa page se déplacera vers le centre, masquant #home.
Lors d'un nouveau clic sur cet onglet ouvert la page se referme.
Lors d'un clic sur un onglet fermé alors qu'un autre est ouvert, fermeture du premier puis ouverture de l'autre.
Il y aura donc une animation Javascript (probablement à l'aide de jquery (.animate()), mais je n'en suis pas encore là. J'essaye premièrement de faire une structure HTML/CSS correcte et ce n'est pas encore le cas, voilà pourquoi je suis là
.
Voici un plan de la page lors de son chargement, aucune page annexe n'est ouverte:
Et un plan lorsqu'une page est ouverte:
J'ai fais de mon mieux pour les images, elles sont assez claires normalement.
Voici donc comment j'ai structuré ma page html:
Le style:
J'ai également mis cet essai en ligne sur le serveur web: HTML / CSS .
Vous remarquerez les quelques problèmes, notamment le footer (qui est position:fixed mais a cause de #pages en position:relative il se retrouve beaucoup trop bas), les pages qui débordent vers la droite de l'écran, comme solution temporaire je place un overflow:auto à body mais j'espère que c'est temporaire, qu'il y a une meilleur solution.
Ca serait vraiment sympa que vous testiez ce code pour m'expliquer mes soucis, ce que pourrait être optimisé, comment l'optimiser, etc ... Vous me seriez d'une très grande aide !!
Comme déjà dit dans ma présentation, je réalise un porte folio sur la demande d'un ami. Je ne débute pas tout a fait dans le CSS mais ça peut tout de même vite me dépasser car je n'ai pas l'habitude de faire un design a mes sites, voilà maintenant que j'y suis obligé ...
La page se compose de 3 parties basiques: header, #main et footer.
header (pas div id=header mais la nouvelle balise html5 bien sûr) est collé au sommet de la page, centré et d'une largeur relative à la définition de l'écran.
footer, de même, au bas de l'écran, d'une hauteur moins importante, etc ... schéma classique, vous voyez le topo ^^
#main est le conteneur principal, largeur égale à header, hauteur relative (100 % - header.height - footer.height - margin: 20px 20px).
Il contient:
- la première page #home, c'est la seule page fixe.
- le sous-conteneur #pages.
Le sous-conteneur #pages contient:
- un menu #tabs, pour chaque pages, celui là est toujours visible à la droite de la page.
- les pages qui seront capable de se déplacer: #about, #work, #links, #contact.
par défaut ces pages sont masquées (derrière un div color #000, pas display: none).
Lors d'un clic sur un onglet, l'onglet ainsi que sa page se déplacera vers le centre, masquant #home.
Lors d'un nouveau clic sur cet onglet ouvert la page se referme.
Lors d'un clic sur un onglet fermé alors qu'un autre est ouvert, fermeture du premier puis ouverture de l'autre.
Il y aura donc une animation Javascript (probablement à l'aide de jquery (.animate()), mais je n'en suis pas encore là. J'essaye premièrement de faire une structure HTML/CSS correcte et ce n'est pas encore le cas, voilà pourquoi je suis là
.Voici un plan de la page lors de son chargement, aucune page annexe n'est ouverte:
Et un plan lorsqu'une page est ouverte:
J'ai fais de mon mieux pour les images, elles sont assez claires normalement.
Voici donc comment j'ai structuré ma page html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Titre de la page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<header>
<img src="logo.png"/>
</header>
<div id="main">
<div class="page" id="home">
<div class="content">
<h2>HOME</h2>
<p></p>
</div>
</div>
<div id="pages">
<ul id="tabs">
<li id="about-tab"><img src="about.png"/></li>
<li id="work-tab"><img src="work.png"/></li>
<li id="links-tab"><img src="links.png"/></li>
<li id="contact-tab"><img src="contact.png"/></li>
</ul>
<div class="page" id="about">
<div class="content">
<h2>ABOUT</h2>
<p></p>
</div>
</div>
<div class="page" id="work">
<div class="content">
<h2>WORK</h2>
<p>.</p>
</div>
</div>
<div class="page" id="links">
<div class="content">
<h2>LINKS</h2>
<p></p>
</div>
</div>
<div class="page" id="contact">
<div class="content">
<h2>CONTACT</h2>
<p></p>
</div>
</div>
</div>
</div>
<footer>
<p>Exemple footer</p>
</footer>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var pages = new Array ('about', 'work', 'links', 'contact'),
nbr_pages = pages.length;
</script>
</body>
</html>
Le style:
html, body {
height: 100%;
overflow: hidden;
}
body {
padding-right: 10%;
padding-left: 10%;
background: #000;
color: #FFF;
overflow: auto;
}
header, footer {
text-align: center;
background: #abc;
}
header {
margin-bottom: 50px;
}
footer {
height: 50px;
width:100%;
position: fixed;
bottom: 0;
}
#main {
margin: 0;
}
.page {
height: 580px;
width: 80%;
background: #EEE;
color: #222;
}
.page .content {
margin: 20px;
overflow: auto;
font-size: 100%;
}
#pages {
position: relative;
top: -580px;
left: 95%;
padding: 0;
}
#pages .page {
position: absolute;
top: 0;
left: 40px;
}
#tabs {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
position: relative;
margin: 0;
}
#home {
background: #666;
position: relative;
z-index: 0;
margin-left: 80px;
}
#about {
background: #71d237;
z-index: 5;
}
#about-tab {
}
#work {
background: #f29600;
z-index: 4;
}
#work-tab {
}
#links {
background: #eb0039;
z-index: 3;
}
#links-tab {
}
#contact {
background: #3d97e1;
z-index: 2;
}
#contact-tab {
}
J'ai également mis cet essai en ligne sur le serveur web: HTML / CSS .
Vous remarquerez les quelques problèmes, notamment le footer (qui est position:fixed mais a cause de #pages en position:relative il se retrouve beaucoup trop bas), les pages qui débordent vers la droite de l'écran, comme solution temporaire je place un overflow:auto à body mais j'espère que c'est temporaire, qu'il y a une meilleur solution.
Ca serait vraiment sympa que vous testiez ce code pour m'expliquer mes soucis, ce que pourrait être optimisé, comment l'optimiser, etc ... Vous me seriez d'une très grande aide !!
