[Design] problème très gênant sur le forum Création de sites web - 27-08-2006 15:07:38

naok

Niveau 10

27 août 2006 à 15:07:38

Bonjour

je travaille sur un new webdesign fait en Css/Xhtml et en javascript, mais j´ai un très très gros problème

Je vous explique:

J´ai coder mon site comme d´ab en <div></div> ...

Je l´ai tester via le visionneur de notpad++, tout va bien, mais ya 10 minute quand je l´ai uploadé sur mon ftp, malheur le design ressemble pas du tout à se que j´ai vue lors du codage, pourtant je l´ai visionner avec FF.

Mais, quand je le regarde avec IE (sur mon ftp) c´est le zolie ( ) design que j´ai fait.

Voila se que sa donne sur FF quand je le visionne (quand il n´est pas sur le ftp) :

http://naok.keo.in/host/upload/mincedesign.gif

voila le lien quand il est sur le Ftp (à voir avec FF et IE pour voir le problème ...)

http://naok.keo.in/newkit/InformKit/

code source:

Xhtml >>
http://simmstein.be/wall-eTwVyl17-xhtml.htm
Css >>>
http://simmstein.be/wall-2Wkufycj-css.htm

Si vous pouvez m´aider sa serait sympa, et d´avance.

Amicalement, naok

Pseudo supprimé 27 août 2006 à 15:12:14

T´as pas fait beaucoup de fautes, c´est agréable à voir

Bon je vais chercher le problème.

naok

Niveau 10

27 août 2006 à 15:13:47

merci

xhtml >>>
http://simmstein.be/wall-nvEfuQB6-xhtml.htm

Pseudo supprimé 27 août 2006 à 15:15:02

<tr>

</tr>

<tr style="background-color: #000000; text-align: center; height: 20px;">
<td style="border-width: 0px; background-color: #000000;">
<div align="center">
<a target="_blank"
href="
http://00keoconcept.keogratuit.com/joomla/co
mponent/option,com_simplefaq/task,display/Itemid,3
4/catid,6/page,1/#FAQ1"><font color="#ffffff" size="2">Comment faire disparaitre cette publicité ?< /a></font>
</td>
<td style="text-align: center; border-width: 0px; background-color: #000000;"><font color="#ffffff" size="2">Hébergé GRATUITEMENT par <a target="_blank" href="
http://www.keohosting.net"><font
color="#ffffff">
http://www.keohosting.net</font></
a></font>
</td>
</tr>

</table>
</div>
<br />
<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Stric
t//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd
">
<html>
<head>
<title>Test design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="style.css"/>
<style type="text/css">

pscroller1{

width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

pscroller2{

width: 350px;
height: 20px;
border: 1px solid black;
padding: 3px;
}

pscroller2 a{

text-decoration: none;
}

.someclass{ //class to apply to your scroller(s) i
f desired
}

</style>

var pausecontent2=new Array()
pausecontent2[0]=´<a href="
http://www.news.com">News.com: Technology and business reports</a>´
pausecontent2[1]=´<a href="
http://www.cnn.com">CNN: Headline and breaking news 24/7</a>´
pausecontent2[2]=´<a href="
http://news.bbc.co.uk">BBC News: UK and international news</a>´

</script>

setTimeout(function(){scrollerinstance.initialize(
)}, 500)
}

//
--------------------------------------------------
-----------------
// initialize()- Initialize scroller method.
// -Get div objects, set initial positions, start
up down animation
//
--------------------------------------------------
-----------------

pausescroller.prototype.initialize=function(){

this.tickerdiv=document.getElementById(this.ticker
id)

this.visiblediv=document.getElementById(this.ticke
rid+"1")

this.hiddendiv=document.getElementById(this.ticker
id+"2")

this.visibledivtop=parseInt(pausescroller.getCSSpa
dding(this.tickerdiv))
//set width of inner DIVs to outer DIV´s width min
us padding (padding assumed to be top padding x 2)

this.visiblediv.style.width=this.hiddendiv.style.w
idth=this.tickerdiv.offsetWidth-(this.visibledivto
p*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this

document.getElementById(this.tickerid).onmouseover
=function(){scrollerinstance.mouseoverBol=1}

document.getElementById(this.tickerid).onmouseout=
function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose reference
s in IE
window.attachEvent("onunload",
function(){scrollerinstance.tickerdiv.onmouseover=
scrollerinstance.tickerdiv.onmouseout=null})

setTimeout(function(){scrollerinstance.animateup()
}, this.delay)
}

//
--------------------------------------------------
-----------------
// animateup()- Move the two inner divs of the scr
oller up and in sync
//
--------------------------------------------------
-----------------

pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if
(parseInt(this.hiddendiv.style.top)>(this.visibled
ivtop+5)){

this.visiblediv.style.top=parseInt(this.visiblediv
.style.top)-5+"px"

this.hiddendiv.style.top=parseInt(this.hiddendiv.s
tyle.top)-5+"px"

setTimeout(function(){scrollerinstance.animateup()
}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()

setTimeout(function(){scrollerinstance.setmessage(
)}, this.delay)
}
}

//
--------------------------------------------------
-----------------
// swapdivs()- Swap between which is the visible a
nd which is the hidden div
//
--------------------------------------------------
-----------------

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, d
iv2){
div1.style.top=this.visibledivtop+"px"

div2.style.top=Math.max(div1.parentNode.offsetHeig
ht, div1.offsetHeight)+"px"
}

//
--------------------------------------------------
-----------------
// setmessage()- Populate the hidden div with the
next message before it´s visible
//
--------------------------------------------------
-----------------

pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently
over scoller, do nothing (pause it)

setTimeout(function(){scrollerinstance.setmessage(
)}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1

this.hiddendiv.innerHTML=this.content[this.hiddend
ivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){ /
/get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getP
ropertyValue("padding-top")
else
return 0
}

</script>
</head>
<body>
<center><div id="header">
petit texte de merde pour un super design<br />
(c) 2006 by naok <br />
Welcome in My New Design off Css/ Html
<br /><br />
<div id="slantedmenu">
<ul>
<li><a href="#">index</a></li>
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li><a href="#">lien 4</a></li>
<li><a href="#">lien 5</a></li>
<li><a href="#">lien 6</a></li>
<li><a href="#">lien 7</a></li>
<li><a href="#">lien 8</a></li>
<li><a href="#">lien 9</a></li>
<li><a href="#">lien 10</a></li>
<li><a href="#">lien 12</a></li>
</ul>
</div>
</center>
<div id="menu">
<ul class="glossymenu">
<li><a href="#">index</a></li>
<li><a href="#">lien 1</a></li>
<li><a href="#">lien 2</a></li>
<li><a href="#">lien 3</a></li>
<li><a href="#">lien 4</a></li>
<li><a href="#">lien 5</a></li>
<li><a href="#">lien 6</a></li>
<li><a href="#">lien 7</a></li>
<li><a href="#">lien 8</a></li>
<li><a href="#">lien 9</a></li>
<li><a href="#">lien 10</a></li>
<li><a href="#">lien 12</a></li>
</ul>
<br /><br />
</div>
<div id="corps">
<b>Some title</b> <br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. Some text here.<br />
Some text here.Some text here. <br />
<center><script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID,
CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)/*
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)*/

</script></center>
</div>
</body>
</html>

==> Essaie avec ceci et dis moi ce que ça donne.

naok

Niveau 10

27 août 2006 à 15:17:06

sa fait toujour idem, actualise la page

c´est un probleme trs chian ce truc

Pseudo supprimé 27 août 2006 à 15:25:24

Ben déja, vire moi tout ce JS et met le doctype. On verras après.

naok

Niveau 10

27 août 2006 à 15:26:54

js virer ... mais toujour le probleme :s

BlueFoxRed

Niveau 3

27 août 2006 à 15:32:22

je JS d´en haut est obliguatoire par l´hébergeur. Soie c´est un truck en haut, soie on met [keo_pub_468] Après moi je sais pas comment dsl l´Homme Sans Nom ( ).

naok

Niveau 10

27 août 2006 à 15:33:29

ouai, le tag de ******
ps: stop avec l´homme sans nom merci

Pseudo supprimé 27 août 2006 à 15:34:08

Bon maintenant que le JS est viré et que le doctype est mis (enfin j´éspère), je vais plonger dans le code, parce que ton JS il alourdit enormément la page !

naok

Niveau 10

27 août 2006 à 15:38:48

yoshi >>> voila le code coloré:

http://simmstein.be/wall-tvGLzIrj-xhtml.htm

Pseudo supprimé 27 août 2006 à 15:39:59

C´est bon, remplace ton CSS par :

body
{
width:990px;
height:760px;
background-color:#808080;
}

header

{
width:100%;
background-color:#808080;
border:1px solid black;
}

/* barre dans le header */

slantedmenu{

font-weight: bold;
font-size:15px;
}

slantedmenu:after{

content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

slantedmenu ul{

text-indent: 10px;
padding: 3px 0;
margin: 0;
background-color: #e0e0e0;
border: 1px solid #bebebe;
text-align: left;
}

slantedmenu ul li{

display: inline;
}

slantedmenu ul li a{

color: #494949;
padding: 3px 0;
padding-right: 25px;
margin: 0;
text-decoration: none;
background: transparent url(img/slantdivider.gif) top right no-repeat;
}

slantedmenu ul li a:visited{

color: #808080;
}

slantedmenu ul li a:hover{

color: black;
}
/* fin des barres */

/* les effets dans le menu */
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 150px;
border-bottom-width: 0;
}

.glossymenu li a{
background: white url(img/img1menu.png) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}

html .glossymenu li a{

width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(img/img1menu2.png);
color:#0000FF;
}
/*fin des effets */

menu

{
text-align: center;
border:1px solid black;
float:left;
width:150px;
height:100%;
}

corps

{
width:700px;
float:left;
text-align:center;
margin-left:20px;
margin-top:20px;
background-color:#808080;
}

pscroller1{

width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;
}

!! Attention !!

Le codes est assez sale, pas indenté mais ce qui choque le plus c´est certaines balises mal imbriquées.

naok

Niveau 10

27 août 2006 à 15:48:30

sa marche

le probleme vener d´où ?

comment ca mal imbriquées ?

Pseudo supprimé 27 août 2006 à 15:54:29

Ca venait de ton CSS a la propriété header, t´avais mis un height or on utilise rarement cette propriété étant donné qu´elle prévoit à l´avance la hauteur du machin. Il suffisait donc de l´enlever.

Dans le html, tu as par exemple : <center><div></center></div>

Sinon, je te conseille de changer d´hebergeur car il rajoute un code html a tes pages avant le doctype ce qui rend forcément tes pages invalides.

naok

Niveau 10

27 août 2006 à 15:58:01

ok merci

pour l´hébérgeur si tu en na un gratuit et sans pub ... je suis prenant

Pseudo supprimé 27 août 2006 à 16:01:34

Fout de moi ?

regarde vers le milieu de la page des topics.