Lien, ji arrive pas

Sujet résolu

15 juin 2006 à 18:48:04

Salut tout le monde alors voila je fait mon design pour mon site et je doit faire un menu en haut. Mais voila j'arrive pas a metre le lien sur les ecriture enfin regarder par vous meme :

http://teddy.alban.free.fr/street_ghetto/test/

Les lien son boucoup plus haut que ce qu'il devrai etre et aussi ne faut pas tout la parti du mot le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Ricain</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/>

<meta name="Identifier-URL" content="http://gcyrillus.free.fr"/>
<meta name="Revisit-after" content="15 days"/>
<meta name="Publisher" content="Gcyrillus"/>
<meta name="Generator" content="editeur-fmr"/>
<meta name="Category" content="street ghetto"/>
<meta name="Robots" content="index, follow"/>
<meta name="Distribution" content="Global"/>
<style type="text/css">
@import url("style.css");
</style>

</head>
<body>
<div id="conteneur">

<div id="ban" >

<form action="cible.php" method="post">
<p>
<input name="pseudo" type="text" size="16" value="Pseudo"/>
<input name="motdepass" type="password" size="16" value="pass"/>
<input type="submit" value=" " id="cat" />
</p>
</form>

<ul>
<li><a href="#" ><span>accueil</span></a></li>
<li><a href="#" class="screen"><span>screenshot</span></a></li>
<li><a href="#" class="forum" ><span>Forum</span></a></li>
<li><a href="#" class="contact" ><span>contact</span></a></li>
<li><a href="#" class="telechargement" ><span>telechargement</span></a></li>
</ul>
</div>


<div id="texte">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eget nibh. Curabitur varius purus ut felis. In id turpis sed velit sollicitudin pellentesque. Suspendisse placerat rutrum magna. Duis a dui. Integer sapien. Phasellus ultrices purus vel augue. Aliquam nulla erat, faucibus ac, sagittis vel, feugiat ac, enim. Etiam vulputate, neque eget malesuada fringilla, nulla mauris sollicitudin eros, ac rhoncus lorem ipsum eget leo. Mauris c</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eget nibh. Curabitur varius purus ut felis. In id turpis sed velit sollicitudin pellentesque. Suspendisse placerat rutrum magna. Duis a dui. Integer sapien. Phasellus ultrices purus vel augue. Aliquam nulla erat, faucibus ac, sagittis vel, feugiat ac, enim. Etiam vulputate, neque eget malesuada fringilla, nulla mauris sollicitudin eros, ac rhoncus lorem ipsum eget leo. Mauris c</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse eget nibh. Curabitur varius purus ut felis. In id turpis sed velit sollicitudin pellentesque. Suspendisse placerat rutrum magna. Duis a dui. Integer sapien. Phasellus ultrices purus vel augue. Aliquam nulla erat, faucibus ac, sagittis vel, feugiat ac, enim. Etiam vulputate, neque eget malesuada fringilla, nulla mauris sollicitudin eros, ac rhoncus lorem ipsum eget leo. Mauris c</p>

</div>


<div id="margepied"></div><div id="pied"></div>
</div>

</body></html>

strucky

15 juin 2006 à 18:54:49

Utilise des bordures sur tes balises a, tu verras que ton problème est flagrant.

Ricain

15 juin 2006 à 18:56:08

Comment sa ? je suis un peut a novice donc explqiue moi stp lol merci

strucky

15 juin 2006 à 18:58:47

ul li a{ border: 1px solid yellow }

Ricain

15 juin 2006 à 19:00:34

Oups si je met le code CSS sa serai mieu aussi lol regarde

/* conserver une copie et ajouter vots regles css apres celle ci ou dans un autre fichier */
/* valeur par defaut , pour harmoniser l'affichage d'un navigateur a l'autre */

* {
padding:0;
margin:0;

}
/* dimension des parents et fond en images */
html, body {
height:100%;
background:#000 url('images/fond.jpg') center center repeat-y;
}
#conteneur, #conteneur2 {
width:620px;
margin:auto;
background:url('images/fondc.jpg') center center repeat-y;
font-family: Tahoma; font-size: 10pt;
min-height:100%;
_height:100%;
position:relative;/* pour placer le pied effectivement en bas du conteneur et pas la fenetre */
}
#conteneur2 {
background:url('images/fondc2.jpg') center center repeat-y;
}
#cat {
background-image:url(images/login.jpg);
width:48px;
height:14px;
border:1px solid #000;
vertical-align:middle;
}

#ban {
position:relative;/* pour positionner le menu correctement */
height:276px;
background-image:url('images/ban.jpg');
background-position:top center;
background-repeat:no-repeat;
}
#ban2 {
position:relative;/* pour positionner le menu correctement */
height:247px;
background-image:url('images/ban2.jpg');
background-position:bottom center;
background-repeat:no-repeat;
background-color:#CCCBB9;
}
#ban ul {
position:absolute;/* position du menu */
width:;
height:;
left:128px;
bottom:100px;
}
#ban2 ul {
position:absolute;/* position du menu */
left:128px;
bottom:71px;
}
#ban ul li, #ban2 ul li{
float:left;
}
/* on dimùensionne et marge chaque balises */
#ban ul li a, #ban2 ul li a {
display:block;
width:57px;
margin-right:30px;
height:18px;

}
#ban ul li a.screen, #ban2 ul li a.screen {
width:102px;
margin-right:40px;
}
#ban ul li a.forum, #ban2 ul li a.forum {
width:47px;
margin-right:43px;
}
#ban ul li a.contact, #ban2 ul li a.contact {
width:62px;
}
#ban ul li a span, #ban2 ul li a span{
position:absolute;
height:0;
width:0;
overflow:hidden;
}
/* on vire les puces */
ul {list-style-type:none;
}
/* on centre le formulaire */
#ban form {
text-align:center;
padding-top:1em;
font-size:14px;
}
/* on positionne le texte dans la zone correspondante */
#texte {
padding:0 50px;
}

#col1 {
float:left;
width:130px;
padding:0 10px;
}
#col2 {
float:right;
width:410px;
padding:0 25px;
}
/* une marge a conserver pour empecher le contenu de passer , disparaitre sous le pied */
#margepied {

height:72px;
clear:both;

}
#margepied2 {

height:48px;
clear:both;

}
#pied, #pied2 {
background: url('images/pied.jpg') bottom center;
height:72px;
clear:both;
position:absolute;
bottom:0;
left:0;
width:100%;
}
#pied2 {
background: url('images/pied2.jpg') bottom center;
height:48px;
}

strucky

15 juin 2006 à 19:07:40

J'ai pas besoin de ton code css je l'ai déjà vu, met ces bordures sur tes a.

Cherche un peu.

Ricain

15 juin 2006 à 19:19:32

Mais je c'est pas au quel les metre

strucky

15 juin 2006 à 19:58:58

Ce que je te dis de faire, c'est de mettre ces bordures pour que tu visualises ton problème, c'est quand même pas compliqué.

Ps: fait un effort sur ton orthographe.

Ricain

16 juin 2006 à 7:51:39

Je croi que je vais faire le gros newbee mais j'ai esayer et je c'est pas ou metre le code :

ul li a{ border: 1px solid yellow }

Aider moi svp

nicmac

16 juin 2006 à 8:05:11

Tu le mets n'importe ou dans ton code CSS, voilà tout
Ca dit "ok, pour tous les liens dans un tableau, mets-moi une bordure jaune"

C'est pas compliqué, tu fais copier/coller et tu l'ajoutes à la fin (ou n'importe ou, mais à la fin ca te mélange pas) de ton CSS

Ricain

16 juin 2006 à 8:28:43

ah merci dja je comprend mieu mais regarder ce que sa fait :

http://teddy.alban.free.fr/street_ghetto/test/

nicmac

16 juin 2006 à 9:17:26

Ben ca fait rien, à ce que je peux voir.

Rayan.

16 juin 2006 à 10:01:58

Relis ton cours sur le positionnement aboslue, tu as du manquer un épsiode

C'est ici que ça se passe !

strucky

16 juin 2006 à 12:48:29

Ce n'était pas supposé faire quelquechose...

Allez, un début de soluce.

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

#ban ul {
position: absolute;
left: 100px;
bottom: 100px;
}

#ban ul li{
float:left;
margin: 0;
}

#ban ul li a{
display:block;
width: 70px;
height: 18px;
}

#ban ul li a.screen{
width: 105px;
margin-left: 20px;
}

#ban ul li a.forum{
width: 70px;
margin-left: 20px;
}

#ban ul li a.contact{
width: 75px;
margin-left: 10px;
}

#ban ul li a.telechargement{
width: 135px;
margin-left: 10px;
}

Par contre tu m'expliqueras à quoi servent les span dans les balises a.

Ricain

16 juin 2006 à 19:58:10

J'ai fait ce que tu ma dit voici ce que sa donne :{

http://teddy.alban.free.fr/street_ghetto/test/

Quelqu'un pourai me donner le code entier du css corigier psk ji arrive pas

Ricain

17 juin 2006 à 13:02:07

aider moi svp

strucky

17 juin 2006 à 14:24:43

Enlève les bordures maintenant !!

J'ai pas testé sur IE, à voir.

Ricain

17 juin 2006 à 17:42:42

MErci sa marche falai enlever les bordure