28112 sujets

CSS et mise en forme, CSS3

Probleme de ScrollBar Horizontale

Bonjour,

Alors petit probleme dans notre boulot (on bosse en équipe)
Donc on a un petit souci de scrollbar horizontale qui nous prend bien la tête alors qu'on a du boulot à fournir à coté.
Donc on vient vous demander un petit coup de main si le coeur vous en dit:
Explication rapide: c'est une appli avec de l'asp / java / html qui va charger une table sous forme de tableau au milieu de la page.
Je vais vous passez le site par default et un exemple de page.
On voudrait que le scroll horizontale soit du même type que celui verticale (c-a-d que les menus et la banniere ne bouge pas.)
Merci d'avance.

<html>
<head>
<script language="javascript">
function f_changeCountry()
{
var obj = document.getElementById("cmb_country");
//alert(obj.options(obj.selectedIndex).value);
document.location.href = "default.asp?ctry=" + obj.options(obj.selectedIndex).value;
}

function f_changeFiles()
{
var obj = document.getElementById("cmb_country");
var obj2 = document.getElementById("cmb_files");
document.location.href = "default.asp?ctry=" + obj.options(obj.selectedIndex).value + "&file=" + obj2.options(obj2.selectedIndex).value;
}

function f_over(lnk)
{
if (lnk == 'countrieslnk')
{
var obj = document.getElementById("countrieslnk");
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/countries_y.png")';
}

if (lnk == 'fileslnk')
{
var obj = document.getElementById("fileslnk");
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/files_y.png")';
}
}

function f_out(lnk)
{
if (lnk == 'countrieslnk')
{
var obj = document.getElementById("countrieslnk");
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/countries_n.png")';
}

if (lnk == 'fileslnk')
{
var obj = document.getElementById("fileslnk");
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/files_n.png")';
}
}
</script>
<style>
#contenu
{
position:absolute;
overflow:auto;
clip:auto;
height:100%;
background-image:url('images/fond.png');
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center;
}

select
{
font-family:Verdana;
font-size:14px;
margin:auto;
}

#countrieslnk
{
width:198px;
height:26px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/countries_n.png');
}

</style>
</head>
<!--#INCLUDE File = "connstring.asp"-->
<body style="overflow:no;">
<script language="javascript">
alert(document.body.scrollWidth);
</script>
<%
Dim conn, rsCountries, rsFiles, rsDisplayFile
Set conn = Server.CreateObject("ADODB.Connection")
Set rsCountries = Server.CreateObject("ADODB.Recordset")
Set rsFiles = Server.CreateObject("ADODB.Recordset")
Set rsDisplayFile = Server.CreateObject("ADODB.Recordset")

conn.Open strconn

rsCountries.Open "SELECT * FROM T_COUNTRY ORDER BY COUNTRY_NAME", conn
%>
<div id="main" name="main" style="position:absolute;top:0px;left:0px;right:0px;">
<table border="0" width="100%" style="height:100%;" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><img width="1200" height="200" src="./Images/banniere.png"></td>
</tr>
<tr><td colspan="2" style="background-color:b5b5b5;background-repeat:repeat-x;"></td></tr>
<tr>
<td height="100%" style="font-family:Verdana;font-size:12;">

<table id="menu" cellspacing="0" cellpadding="0" style="position:absolute;top:201px;width:246px;">
<tr>
<td><div style="width:246px;height:40px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/header.png')"></div></td>
</tr>
<tr>
<td style="background-image:url(Images/bande.png);background-repeat:repeat-y;text-align:center;">
<center><div id="countrieslnk" onmouseover="f_over(this.id);" onmouseout="f_out(this.id);"></div></center>
</td>
</tr>
<tr><td style="background-image:url(Images/bande.png);background-repeat:repeat-y;">&nbsp;</td></tr>
<tr>
<td style="background-image:url(Images/bande.png);background-repeat:repeat-y;text-align:center;"><center><select id="cmb_country" name="cmb_country" size="0" onChange="f_changeCountry();">
<option value="0"></option>
<%
While Not rsCountries.EOF
%>
<option value = "<%=rsCountries.Fields(0)%>" <%If Request.Querystring("ctry") = CStr(rsCountries.Fields(0)) then%> selected <%end if%>><%=rsCountries.Fields(2)%></option>
<%
rsCountries.Movenext
Wend
rsCountries.Close
Set rsCountries = Nothing
%>
</select></center></td>
</tr>
<tr><td style="background-image:url(Images/bande.png);background-repeat:repeat-y;text-align:center;">&nbsp;</td></tr>
<%If (Request.Querystring("ctry") <> "") and (Request.Querystring("ctry") <> "0") then%>
<tr><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/separation2.png')"></td></tr>
<tr><td style="background-image:url(Images/bande.png);background-repeat:repeat-y;text-align:center;">&nbsp;</td></tr>
<tr>
<td style="background-image:url(Images/bande.png);background-repeat:repeat-y;text-align:center;">
<div id="fileslnk" onmouseover="f_over(this.id);" onmouseout="f_out(this.id);" style="width:231px;height:53px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/files_n.png')"></div>
</td>
</tr>
<tr><td style="background-image:url(Images/bande.png);background-repeat:repeat-y;">&nbsp;</td></tr>
<tr>
<td style="background-image:url(Images/bande.png);background-repeat:repeat-y;text-align:center;"><center><select id="cmb_files" name="cmb_files" size="0" onChange="f_changeFiles();">
<option value="0"></option>
<%rsFiles.Open "SELECT ID, FILENAME FROM T_SETUP_FILES ORDER BY FILENAME", conn
While Not rsFiles.EOF%>
<option value= "<%=rsFiles("ID")%>" <%if Request.Querystring("file") = CStr(rsFiles("ID")) then%> selected <% end if %>><%=rsFiles("FILENAME")%></option>
<%rsFiles.Movenext
Wend
rsFiles.Close
%>
</select></center></td>
</tr>
<%end if%>
<tr><td><div style="width:278px;height:139px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/btm.png')"></div></td></tr>
</table>


</td>
<td>

<div id="contenu">
<%
if (Request.Querystring("item") <> "") then
Server.Execute("delete_items.asp")
else
if (Request.Querystring("file") <> "") and (Request.Querystring("file") <> "0") then
rsDisplayFile.Open "SELECT * FROM T_SETUP_FILES WHERE ID = " & Request.Querystring("file"), conn
if not rsDisplayFile.EOF then
On Error Resume Next
Server.Execute(CStr(rsDisplayFile("FILE_URL")))
If Err.Number <> 0 then
Response.Write "Error Code : " & Err.Number & "<br>"
Response.Write "Source : " & Err.Source & "<br>"
Response.Write "Description : " & Err.Description & "<br>"
End If
end if
end if
end if
%>
</div>

</td>
</tr>
</table>
</div>
<script language="javascript">
function f_init(){
//alert("toto");
//alert(document.body.clientWidth * 0.2);
//alert(((document.body.clientWidth * 0.2) - 246));

var obj = document.getElementById("main");
obj.style.height = document.body.clientHeight;
//document.getElementById("menu").style.left = ((document.body.clientWidth * 0.2) - 246) / 2;
document.getElementById("contenu").style.width = (document.body.clientWidth - 246);
document.getElementById("contenu").style.left = 246;
}
f_init();
</script>
</body>

</html>


et maintenant la page d'un des fichiers:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<script language="javascript">
function f_valid()
{
var obj = document.getElementById("bt_valid");
var obj2 = document.getElementById("spinner");
obj2.style.visibility = "visible";
obj.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="")';
document.f1.submit();
}
</script>
<!--#INCLUDE File = "connstring.asp"-->
<body>
<a name="header"></a>
<form id="f1" name="f1" method="post" action="save_test.asp">
<div>
<table id="t1" style="position:relative;top:50px;left:0px;right:0px;background-color:transparent;text-align:center;" height="200" border="0">
<tr>
<td>
<%
Dim cnSiebel, rstTLI, sql, line, rstService, rstAsset, rstSLA

Set cnSiebel = Server.CreateObject("ADODB.Connection")
Set rstTLI = Server.CreateObject("ADODB.Recordset")
Set rstService = Server.CreateObject("ADODB.Recordset")
Set rstAsset = Server.CreateObject("ADODB.Recordset")
Set rstSLA = Server.CreateObject("ADODB.Recordset")

cnSiebel.Open strconn

'Response.Write cnSiebel.state

sql = "SELECT FK_ID_ASSET, TLI_NB FROM T_TLI_ASSET WHERE FK_ID_COUNTRY = " & Request.QueryString("ctry")
rstTLI.Open sql, cnSiebel

%>
<table border="1" bordercolor="#000000" cellpadding="4" cellspacing="4">
<tr bgcolor="#4B4B4B"><td class="header">TLI</td><td class="header">Asset</td><td class="header">Service</td><td class="header">SLA</td></tr>
<%
line = 1
While Not rstTLI.EOF
rstService.Open "SELECT TOP 4 ID, LIB_SERVICE FROM T_SERVICES", cnSiebel
rstSLA.Open "SELECT * FROM T_SLA", cnSiebel
if (line mod 2) <> 0 then
%>
<tr bgcolor="#C0C0C0"><td class="recordsrow"><%=rstTLI("TLI_NB")%></td>
<% rstAsset.Open "SELECT * FROM T_ASSETS WHERE ID = "  & rstTLI("FK_ID_ASSET"), cnSiebel%>
<td class="recordsrow"><%=rstAsset("ASSET_NAME")%></td>
<td>
<%While Not rstService.EOF%>
<input type="radio" id="<%="service" & rstTLI("FK_ID_ASSET")%>" name="<%="service" & rstTLI("FK_ID_ASSET")%>" <%if rstService("ID") = 1 then %> checked <%end if%> value="<%=rstService("ID")%>"><%=rstService("LIB_SERVICE")%>
<%rstService.Movenext
Wend%>
</td>
<td>
<%While Not rstSLA.EOF
if rstSLA("SLA")<> "" then
%>
<input type="radio" id="<%="sla" & rstTLI("FK_ID_ASSET")%>" name="<%="sla" & rstTLI("FK_ID_ASSET")%>" <%if rstSLA("ID") = 7 then %> checked <%end if%> value="<%=rstSLA("ID")%>"><%=rstSLA("SLA")%>
<%end if
rstSLA.Movenext
Wend%>
</td>
</tr>
<input type="hidden" id="<%=rstAsset("ID")%>" name="<%=rstAsset("ID")%>" value="<%=rstAsset("ASSET_NAME")%>">
<%rstAsset.close%>
<%else%>
<% rstAsset.Open "SELECT * FROM T_ASSETS WHERE ID = "  & rstTLI("FK_ID_ASSET"), cnSiebel%>
<input type="hidden" id="<%=rstAsset("ID")%>" name="<%=rstAsset("ID")%>" value="<%=rstAsset("ASSET_NAME")%>">
<tr bgcolor="#DDDDDD"><td class="recordsrow"><%=rstTLI("TLI_NB")%></td>
<td class="recordsrow"><%=rstAsset("ASSET_NAME")%></td>
<td>
<%rstAsset.close%>
<%While Not rstService.EOF%>
<input type="radio" id="<%="service" & rstTLI("FK_ID_ASSET")%>" name="<%="service" & rstTLI("FK_ID_ASSET")%>" <%if rstService("ID") = 1 then %> checked <%end if%> value="<%=rstService("ID")%>"><%=rstService("LIB_SERVICE")%>
<%rstService.Movenext
Wend%>
</td>
<td>
<%While Not rstSLA.EOF
if rstSLA("SLA")<> "" then
%>
<input type="radio" id="<%="sla" & rstTLI("FK_ID_ASSET")%>" name="<%="sla" & rstTLI("FK_ID_ASSET")%>" <%if rstSLA("ID") = 7 then %> checked <%end if%> value="<%=rstSLA("ID")%>"><%=rstSLA("SLA")%>
<%end if
rstSLA.Movenext
Wend%>
</td>
</tr>

<%end if
line = line + 1

rstTLI.Movenext
rstService.close
rstSLA.close
Wend%>
</table>
<%
rstTLI.Close
Set rstTLI = Nothing
%>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<div id="bt_valid" onClick="javascript:f_valid();">
<img id="spinner" style="visibility:hidden;" src="./Images/ajax-loader.gif" width="100" height="100">
</div>
</td>
</tr>
<tr>
<td>
<a href="#header" id="link_head"><div id="logo_haut"><div></a>
</td>
</tr>
<tr>
<td>
<a href="#header" id="link_head">Back to the top</a>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>


et le css des fichiers:


#bt_valid{
position:relative;
width:118px;
height:119px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/submit3.png');
cursor:hand;
z-index:2;
}
#logo_haut{
width:61px;
height:60px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./Images/up2.png');
cursor:hand;
}
#link_head{
font-family:Verdana;
font-size:12px;
color:#000066;
text-decoration:none;
}
#link_head:hover{
color:#CC0000;
text-decoration:underline;
}

#spinner{
position:absolute;
top:0px;
left:0px;
z-index:1;
}

.recordsrow{
font-family:Verdana;
font-size:14px;
}
.header
{
font-family:Verdana;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
}

Modifié par MMX (12 Aug 2008 - 09:24)
Hello MMX et bienvenue Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
C'est vrai d'en l'excitation j'ai zappé le code et .... la courtoisie par la même occasion Smiley langue
My apologizes !!!!
Sujet clos
Aller à