Voilà mon problème est celui ci. Comme cité dans le titre j'ai un "Div" centrale dans mon site qui selon la redimension du navigateur bouge et reste à 35% de la droite et s'arrête juste avant d'empiéter sur mon menu principal par le biais d'un "min-width". Et j'aurais aimer que celui ci fasse l'entièreté de la hauteur de la fenêtre de navigation.
J'ai essayer de toutes les façons possibles à ma connaissance mais en vain ...
Je pourrais vous expliquer les différentes façon auxquelles j'ai procédé mais cela serait très très long.
Donc je vais vous livrer le code utiliser ainsi qu'un lien vers la page en question online.
Voici la CSS (seulement les éléments nécessaire à votre compréhension) :
Ensuite je vous livre mon code HTML (l'entièreté):
Et pour finir un bout de code javascript qui m'a servit en dernier recourt mais qui ne fonctionne pas sur IE et n'est pas parfait sur FF:
J'ai mis la page en ligne à cette adresse : http://donchofolio.be/site/test.html
Donc le bout de javascript sert en fait à ce que lorsque l'utilisateur redimensionne sa page le "Div" vide d'id "content_deux" ne rentre pas dans mon menu principal.
Je sais que mettre un "Div" uniquement pour une question d'esthétique dans le code n'est vraiment pas propre mais je n'ai trouvé aucune autre solution ...
Donc ce "Div" est la seule solution et qui est loin d'être concluante que j'ai trouvé. Je lui ai assigner une "position:absolute" pour qu'il puissent bénéficier du "height:100%" et de ce fait prendre l'entièreté de la hauteur. (le "body" est aussi en "height:100%").
J'espère avoir été clair.
Si quelqu'un a une solution qu'il se manifeste svp. Car je désespère ...
Merci par avance, bonne journée à tous.
Modifié par doncho (25 Sep 2009 - 13:22)
J'ai essayer de toutes les façons possibles à ma connaissance mais en vain ...
Je pourrais vous expliquer les différentes façon auxquelles j'ai procédé mais cela serait très très long.
Donc je vais vous livrer le code utiliser ainsi qu'un lien vers la page en question online.
Voici la CSS (seulement les éléments nécessaire à votre compréhension) :
body{
height:100%;
min-width:900px;
}
div#content_deux{
width:310px;
left:35%;
position:absolute;
height:100%;
background:url(images/bg_content.png) repeat-y 0 0;
}
div#content{
width:300px;
margin-left:35%;
background-color:#666666;
border-left:7px solid #A7B266;
border-right:3px solid #A7B266;
position:relative;
}
div#content ul#second_navigation li{
font-size:10px;
color:#A7B266;
float:left;
margin-left:10px;
}
div#content ul#second_navigation{
background-color:#424242;
padding:25px 0 6px;
list-style-type:none;
overflow:auto;
}
div#content ul#main_galerie{
list-style-type:none;
}
div#content ul#main_galerie li{
margin:0 20px;
height:200px;
border:1px solid black;
}
Ensuite je vous livre mon code HTML (l'entièreté):
<body>
<div id="content_deux">
</div>
<div id="global">
<p>
<img src="images/logo.png" alt="Logo, doncho webdesigner" id="logo"/>
</p>
<ul id="main_menu">
<li id="menu_profil"><a href="#" title="Voir la page concacré à mon profil"><img src="images/menu_profil.png" alt="L'image du lien vers Profil change de couleur pour marquer le survol"/></a></li>
<li id="menu_works"><a href="#" title="Voir la page concacré à mes travaux"><img src="images/menu_works.png" alt="L'image du lien vers Travaux change de couleur pour marquer le survol"/></a></li>
<li id="menu_skills"><a href="#" title="Voir la page concacré à mes connaissances"><img src="images/menu_skills.png" alt="L'image du lien vers Connaissances change de couleur pour marquer le survol"/></a></li>
<li id="menu_contact"><a href="#" title="Voir la page qui à pour but de vous permettre de me contacter"><img src="images/menu_contact.png" alt="L'image du lien vers contact change de couleur pour marquer le survol"/></a></li>
<li id="menu_links"><a href="#" title="Voir la page concacré aux différents liens intéressants que je propose"><img src="images/menu_links.png" alt="L'image du lien vers Liens change de couleur pour marquer le survol"/></a></li>
</ul>
<div id="content">
<ul id="second_navigation">
<li>Doncho</li>
<li>Profile</li>
</ul>
<ul id="main_galerie">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
Et pour finir un bout de code javascript qui m'a servit en dernier recourt mais qui ne fonctionne pas sur IE et n'est pas parfait sur FF:
<script language="javascript">
function bouger(){
var taille_ecran = window.innerWidth;
if(taille_ecran < 900){
document.getElementById("content_deux").style.left = '315px';
}else{
document.getElementById("content_deux").style.left = '35%';
}
}
window.onresize=bouger;
</script>
J'ai mis la page en ligne à cette adresse : http://donchofolio.be/site/test.html
Donc le bout de javascript sert en fait à ce que lorsque l'utilisateur redimensionne sa page le "Div" vide d'id "content_deux" ne rentre pas dans mon menu principal.
Je sais que mettre un "Div" uniquement pour une question d'esthétique dans le code n'est vraiment pas propre mais je n'ai trouvé aucune autre solution ...
Donc ce "Div" est la seule solution et qui est loin d'être concluante que j'ai trouvé. Je lui ai assigner une "position:absolute" pour qu'il puissent bénéficier du "height:100%" et de ce fait prendre l'entièreté de la hauteur. (le "body" est aussi en "height:100%").
J'espère avoir été clair.
Si quelqu'un a une solution qu'il se manifeste svp. Car je désespère ...
Merci par avance, bonne journée à tous.
Modifié par doncho (25 Sep 2009 - 13:22)
