Apres de nombreuses recherches, d'une demande d'aide sur le siteduzero, je désespère un peu, et je viens vers Alsa création qui ma déjà mainte fois aidé.
Le site : http://www.gamershield.com/sv0/gui/gamerlive/show_gui.html
J'ai deux blocs div, un pour les images a gauches et l'autre a droite,
Le truc, c'est que j'aimerais qu'il y'est celui des images qui a une taille fixe a gauche (315px) ce qui est actuellement le cas, et que l'autre prenne toute la place restante a droite.
malheureusement, c'est comme toujours, plus compliquer que prévue,
J'ai essayer les float, les positions absolute, etc etc...
Je peu tricher avec les %, mais au finale, sa ne prendras jamais toute la place restante sur les grande résolutions.
le css :
le xhtml :
Merci de votre aide[/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par Klyra (25 Jul 2009 - 00:05)
Le site : http://www.gamershield.com/sv0/gui/gamerlive/show_gui.html
J'ai deux blocs div, un pour les images a gauches et l'autre a droite,
Le truc, c'est que j'aimerais qu'il y'est celui des images qui a une taille fixe a gauche (315px) ce qui est actuellement le cas, et que l'autre prenne toute la place restante a droite.
malheureusement, c'est comme toujours, plus compliquer que prévue,
J'ai essayer les float, les positions absolute, etc etc...
Je peu tricher avec les %, mais au finale, sa ne prendras jamais toute la place restante sur les grande résolutions.
le css :
@charset "utf-8";
/* Page */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #303030;
}
#header {
background-image: url(../img/base/header_bg.jpg);
background-repeat: repeat-x;
height: 135px;
}
#firstnews {
padding-top: 10px;
width: 315px;
margin-left: 15px;
}
#firstnews img {
margin-top: 11px;
}
#menu {
background-image: url(../img/base/menu_bg.jpg);
background-repeat: repeat-x;
height: 56px;
padding-left: 10%;
}
#content {
background-color: #ececec;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 20px;
}
#txt_content {
width: 70%;
margin-left: 380px;
float: right;
border: 1px solid black;
}
#footer {
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 10px;
font-weight: bold;
color: #999;
margin-right: 2%;
margin-left: 2%;
background-color: #ECECEC;
margin-bottom: 30px;
}
#footer_img {
background-color: #ECECEC;
height: 11px;
}
#img_footer_corner_left {
float: left;
width: 11px;
}
#img_footer_corner_right {
float: right;
width: 11px;
}
#img_logo {
border-style: none;
margin-left: 4%;
}
#menu_gen, #menu_gen ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
}
#menu_gen /* Ensemble du menu */
{
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
#menu_gen a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
}
#menu_gen li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */*/
}
.link_menu_gen
{
color:#CCC; /* couleur du texte */
width: 133px; /* largeur */
background-image:url(../img/base/fr/menu_bg_mid.jpg);
background-repeat:repeat-y;
padding-left: 15px;
line-height : 20px; /* on définit une hauteur pour chaque élément */
}
.link_menu_gen:hover /* Lorsque la souris passe sur un des liens */
{
color:#2c88cf; /* On passe le texte en noir... */
}
.link_menu_gen_bg_top
{
color:#CCC; /* couleur du texte */
width: 133px; /* largeur */
background-image:url(../img/base/fr/menu_bg_top.jpg);
background-repeat:no-repeat;
padding-left: 15px;
padding-top: 5px;
line-height : 20px; /* on définit une hauteur pour chaque élément */
}
.link_menu_gen_bg_top:hover /* Lorsque la souris passe sur un des liens */
{
color:#2c88cf; /* On passe le texte en noir... */
}
#menu_gen li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 133px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu_gen li:hover ul ul, #menu_gen li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu_gen li:hover ul, #menu_gen li li:hover ul, #menu_gen li.sfhover ul, #menu_gen li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
.titre_01 {
font-family: Verdana, Geneva, sans-serif;
margin-left: 20px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: none;
border-top-color: #69C;
border-right-color: #69C;
border-bottom-color: #69C;
border-left-color: #69C;
padding-right: 5px;
padding-bottom: 2px;
}
le xhtml :
<!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" />
<title>GamerShield - GamerLive Show Gui</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<?php
echo "Hello World";
?>
<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("menu_gen").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover)
-->
</script>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('img/base/fr/accueil_on.jpg','img/base/fr/gamingarea_on.jpg','img/base/fr/hardware_on.jpg','img/base/fr/forums_on.jpg')">
<div id="header"><a href="http://www.gamershield.com"><img src="img/base/header_logo.jpg" alt="Logo" name="img_logo" width="414" height="135" id="img_logo" /></a></div>
<div id="menu">
<ul id="menu_gen">
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Accueil','','img/base/fr/accueil_on.jpg',1)"><img src="img/base/fr/accueil.jpg" alt="Accueil" name="Accueil" width="105" height="56" border="0" id="Accueil" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('GamingArea','','img/base/fr/gamingarea_on.jpg',1)"><img src="img/base/fr/gamingarea.jpg" alt="GamingArea" name="GamingArea" width="146" height="56" border="0" id="GamingArea" /></a>
<ul>
<li><a href="#" class="link_menu_gen_bg_top">Liste Globale</a></li>
<li><a href="#" class="link_menu_gen">Dossiers</a></li>
<li><a href="#" class="link_menu_gen">Forums</a></li>
<li><a href="#" class="link_menu_gen">Classements</a></li>
<li><img src="img/base/fr/menu_bg_bot.png" width="144" height="20" alt="bg_bot" /></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hardware','','img/base/fr/hardware_on.jpg',1)"><img src="img/base/fr/hardware.jpg" alt="Hardware" name="Hardware" width="133" height="56" border="0" id="Hardware" /></a>
<ul>
<li><a href="#" class="link_menu_gen_bg_top">Liste Globale</a></li>
<li><a href="#" class="link_menu_gen">Dossiers</a></li>
<li><a href="#" class="link_menu_gen">Forums</a></li>
<li><a href="#" class="link_menu_gen">Classements</a></li>
<li><img src="img/base/fr/menu_bg_bot.png" width="144" height="20" alt="bg_bot" /></li>
</ul>
</li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Forums','','img/base/fr/forums_on.jpg',1)"><img src="img/base/fr/forums.jpg" alt="Forums" name="Forums" width="103" height="56" border="0" id="Forums" /></a>
<ul>
<li><a href="#" class="link_menu_gen_bg_top">Generaux</a></li>
<li><a href="#" class="link_menu_gen">GamingArea</a></li>
<li><a href="#" class="link_menu_gen">Hardware</a></li>
<li><img src="img/base/fr/menu_bg_bot.png" width="144" height="20" alt="bg_bot" /></li>
</ul>
</li>
</ul>
</div>
<div id="content">
<div id="firstnews">
<p><span class="titre_01">
A la une</span></p>
<p><img src="img/ex/armaii.jpg" width="315" height="186" alt="ArmaII" longdesc="#" /></p>
<p><img src="img/ex/i7.jpg" width="315" height="186" alt="i7" longdesc="#" /></p>
<p><img src="img/ex/fallenearth.jpg" width="315" height="186" alt="Fallen Earth" /></p>
</div> <div id="txt_content">
<p>qsdqsdqs</p>
</div>
</div>
<div id="footer"> <a href="http://www.gearsnetwork.com"><img src="img/common/gamershield_logo.jpg" alt="Powered By GamerShield" name="img_footer_gnw" width="194" height="29" id="img_footer_gnw" /></a><br />
[ <a href="/mentionslegales" id="link_mentionslegales">Mentions Légales</a> ]
<div id="footer_img"><img src="img/base/footer_corner_left.jpg" alt="Coin Gauche" name="img_footer_corner_left" width="11" height="11" id="img_footer_corner_left" /><img src="img/base/footer_corner_right.jpg" alt="Coin Droite" name="img_footer_corner_right" width="11" height="11" id="img_footer_corner_right" /></div>
</div>
</body>
</html>Merci de votre aide[/i][/i][/i][/i][/i][/i][/i][/i]
Modifié par Klyra (25 Jul 2009 - 00:05)