Bonsoir,
Je suis en train de faire quelques tests html/css, pour cela je suis en train d’expérimenter un layout un peu "spécial" tel que suit:
Une en-tête:
D'une taille fixe de n-pixels en hauteur et d'une taille variable en largeur.
Un corps:
D'une taille variable en largeur et en hauteur avec une largeur de 100% et une hauteur de 100% moins les n-pixels de l’en-tête.
Un pied de page:
D'une taille variable en largeur et d'une hauteur fixe de n-pixels.
Pour l'instant j'ai réussi a faire le layout, le soucis, c'est que mon corps étant de 100% j'ai une barre de scrolling qui apparaît sur le coté.
Je me suis aperçue que cette différence en hauteur été exactement de la même valeur que la hauteur de mon en-tête.
Je soupçonne un souci de positionnement dans le flux, mais je ne sais pas trop ou exactement.
Pour finir voici le code:
HTML:
CSS-Header:
CSS-Body:
Le but de la manœuvre vous l'aurez compris, est ici d'avoir un site totalement dynamique en terme de taille.
Alors, bon, je pourrais me contenter de cet état, le scroll est pas des plus gênants, mais disons que c'est tout de même pas vraiment esthétique.
Je sais que le code n'est pas propre, pas valide etc, mais c'est pour du test, et je ferais le nécessaire pour l'accessibilité après.
Si tant est que ce style de layout soit facilement déployable en terme d'accessibilité.
Merci d'avance pour votre aide.
PS: Je part en déplacement d'ici demain matin, donc si je ne réponds pas tout de suite c'est normal
Modifié par DR I (08 Dec 2011 - 12:22)
Je suis en train de faire quelques tests html/css, pour cela je suis en train d’expérimenter un layout un peu "spécial" tel que suit:
Une en-tête:
D'une taille fixe de n-pixels en hauteur et d'une taille variable en largeur.
Un corps:
D'une taille variable en largeur et en hauteur avec une largeur de 100% et une hauteur de 100% moins les n-pixels de l’en-tête.
Un pied de page:
D'une taille variable en largeur et d'une hauteur fixe de n-pixels.
Pour l'instant j'ai réussi a faire le layout, le soucis, c'est que mon corps étant de 100% j'ai une barre de scrolling qui apparaît sur le coté.
Je me suis aperçue que cette différence en hauteur été exactement de la même valeur que la hauteur de mon en-tête.
Je soupçonne un souci de positionnement dans le flux, mais je ne sais pas trop ou exactement.
Pour finir voici le code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/header.css" type="text/css" media="screen">
<link rel="stylesheet" href="./css/body.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin' rel='stylesheet' type='text/css'>
<title>Unicore</title>
</head>
<body>
<!-- HEADER SECTION -->
<div id="header">
<div id="menu">
<ul>
<li class="menuparamsselected">Home</li>
<li class="menuparamsunselected">Technology</li>
<li class="menuparamsunselected">Community</li>
</ul>
</div>
</div>
<!-- BODY SECTION -->
<div id="body_news"></div>
<div id="body_legend"></div>
</body>
</html>
CSS-Header:
@charset "utf-8";
/* Chrome trick to disabling User Agent Stylesheet */
*{
padding:0px;
margin:0px;
}
/* CSS General Section (class&global) */
html, body {
background-color:#000000;
height:100%;
}
.menuparamsunselected {
float:left;
font-family:Arial;
color:#FFF;
list-style:none;
text-decoration:none;
margin-right:8px;
}
.menuparamsselected {
float:left;
font-family:Arial;
font-weight:bold;
font-size:16px;
color:#3582b8;
list-style:none;
text-decoration:none;
margin-right:8px;
}
/* CSS Header Section */
div#header {
height:48px;
width:auto;
min-width:720px;
background-color:#000;
border-bottom-color:#3582b8;
border-bottom-style:solid;
border-bottom-width:1px;
}
div#menu {
height:16px;
width:auto;
margin-top:16px;
margin-right:32px;
float:right;
}
CSS-Body:
/* CSS Document */
div#body_news{
width:100%;
min-height:100%;
min-width:720px;
background-image:url(../images/body/UNC_NEWS01.png);
background-repeat:no-repeat;
background-position: top center;
background-size: 100% 100%, cover;
}
div#body_legend{
height:180px;
width:100%;
min-width:720px;
background-image:url(../images/body/UNC_NEWS_LEGEND_BACKGROUND.png);
margin-top:-180px;
}
Le but de la manœuvre vous l'aurez compris, est ici d'avoir un site totalement dynamique en terme de taille.
Alors, bon, je pourrais me contenter de cet état, le scroll est pas des plus gênants, mais disons que c'est tout de même pas vraiment esthétique.
Je sais que le code n'est pas propre, pas valide etc, mais c'est pour du test, et je ferais le nécessaire pour l'accessibilité après.
Si tant est que ce style de layout soit facilement déployable en terme d'accessibilité.
Merci d'avance pour votre aide.
PS: Je part en déplacement d'ici demain matin, donc si je ne réponds pas tout de suite c'est normal
Modifié par DR I (08 Dec 2011 - 12:22)
