28172 sujets

CSS et mise en forme, CSS3

Bonjour bonjour , j'espère que quelqu'un avec assez de patience pourra m'aider...
J'ai décider de créer ma propre page design sur myspace , en utilisant du CSS et html.
J'ai tout simplement recouvert la page déjà existante avec des div. Le problème que je rencontre , est une difficulté de "compréhensions" des codes de la part des différent browser.Ceux que j'ai tester sont google chrome, firefox et explorer ( le plus chiant ).

Pour l'instant mon problème est simplement la marge que j'ai défini pour mon div ( celui qui recouvre). Explorer et firefox définissent une marge différente pour le même code...Et aussi un menu ( li ) qui n'est pas bien compris par explorer...

Alors je vous montre une capture sur chaque browser pour mettre une image a mon problème :

- Page sur Firefox ( celle qui est normale et celle sur laquelle je travaille)
http://img27.imageshack.us/img27/7379/pagefirefox.jpg

- page sur explorer ( celle qui réagit mal )
http://img89.imageshack.us/img89/513/pageexplorer.jpg

Alors il m'aie aussi arriver ( dieu seul sait pourquoi) de consater que certain codes ne marchaient pas car un autre code etait mal ecrit , je ver donc joindre les codes.


<style>
.main {
position:absolute;
top:576px;
width:900px !important;
z-index:1;
margin-left:-404px;
}

body{ 
background-position:top center;
margin-top:402px;
background-color:ffffff;
background-image:url('http://img182.imageshack.us/img182/4981/backgroundimg.jpg');
background-attachment: fixed;
}

.mainpart {
position:absolute;
top:0px;
width:900px !important;
z-index:1;
margin-left:-188px;
}

a.text, table div font a, table div div {visibility:hidden;}
table td div {visibility:hidden;}
table table td div {visibility:visible;}
tr {background:transparent;}


div.topbanner {
top: 0;
left:;
margin-left:-220px;
width: 100%;
height: 150px;
position: absolute;
}

</style> 
<style>
.tablecontact {
position:absolute;
top:750px;
width:900px !important;
z-index:3;
margin-left:-407px;
}
ul.contactmenu {
background:url(''); 
background-position: center top;
margin:0px;
list-style-type:none;
height:100px;
}
ul.contactmenu li {
float:left;
margin:5px;
}
ul.contactmenu li a {
display:block;
padding:27px 15px 40px;
margin-left: 10px;
font-family: soda;
font-size: 20px !important;
text-decoration:none;
color:00c4ff;
letter-spacing: -0.1em;
}
.musicinfo {
position:absolute;
top: 850px;
margin-left:-407px;
z-index:2;
background-image:url('');
background-position: top left;
}
</style>

<style>
.aboutme{
position:absolute;
top: 950px;
margin-left:-360px;
z-index:3;
}
</style>

<div class="tablecontact">
     <ul class="contactmenu">
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9m
dXNlYWN0aW9uPW1haWwubWVzc2FnZVYzJmZyaWVuZElEPTQ3OTU4NDcwMCZNeVRva2VuPWE4MTVlMTFkLWM5MzQtNDNiZC04NDY3LTU3YWE3NjQwYTYzMQ==">Message</a></li>
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmR
JZD00Nzk1ODQ3MDA=">Friends</a></li>
       <li><a href=".. IsMySpaceIMInstalled();">Instant</a></li>
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNl
YWN0aW9uPWdyb3Vwcy5hZGR0b2dyb3VwJmZyaWVuZElEPTQ3OTU4NDcw
MA==">
Group</a></li>
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9md
XNlYWN0aW9uPW1haWwuZm9yd2FyZFYzJmY9Zm9yd2FyZHByb2ZpbGUmZn
JpZW5kSUQ9NDc5NTg0NzAw">Forward</a></li>
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZWVkaXQubXlzcGFjZS5jb20vaW5kZXguY2ZtP2Z1c
2VhY3Rpb249dXNlci5hZGRUb0Zhdm9yaXRlJmZyaWVuZElEPTQ3OTU4NDcwMCZwdW
JsaWM9MA==">Favs</a></li>
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja1VzZXImdXNlcklEPTQ3OTU4NDcwMA==">
Block</a></li>
       <li><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1SYXRlSW1hZ2UuVXNlclJhdGluZyZVc2VySUQ9NDc5NTg0Nz
Aw">Rank</a></li>
     </ul>
</div>

<div class="main">
<table style="width: 900px;
height: 4000px;
cellpadding: 0px;
cellspacing: 0px;
background-color:000000;">
<tr><td valign="top">
</td></tr></table></div>

<div class="musicinfo">
<table style="width: 900px;
height: 450px;
cellpadding: 0px;
cellspacing: 0px;
background-color:transparent;">
         <tr>
                <td valign="top"></td>
         </tr>
</table>
</div>

<div class="aboutme">
<table style="width: 350px;
cellpadding: 0px;
cellspacing: 0px;
background-color: transparent;">
         <tr>
                <td valign="top"><font size="4"><font face="designer block"><font color="ffffff">Soooo, yeah. Im 17 years old , i started to produce music in my unmble basement 1 year ago ( maybe more  [langue]) and i always tried to make better and better untill then. I like the trance style , i love when it goes "epic" xD. I also try to be original in each song , but its not that easy for meh to make a real trance without making it repetitive. BUT i practice alot [lol]. As you can see on this page , i also like to play with css/html codes , and i also like graphism ( i use Gimp 2.6 for that  [langue]).</font></td>
         </tr>
</table>
</div>

Voila , merci d'avance , si vous voulez des details n'hesitez pas , il se peut que ce soit chaotique vus que je suis a mes debuts , et dieu seul sait que myspace ne facilite pas la tache a cause de sa propre comprehension du CSS...il ne comprend pas tout mais je men sort bien Smiley ravi
Modifié par paranoxx (23 Sep 2009 - 02:02)
Bonjour et bienvenue parmi nous 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).

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 courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif