Aller au contenu

Div Et Span

Portekoi

Par Portekoi
dans (X)HTML et CSS

 Partager

Sujets conseillés

Portekoi

Portekoi

Posté
Posté

Bonsoir,

Je travaille actuellement sur un nouveau site mais j'éprouve quelques difficultés à passer des Table aux feuilles de styles.

Voici mon 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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 90px;
background-color: #FFFFFF;
border:1px dotted #CCCCCC;
}

#sconteneur{
position: relative;
margin-top:18px;
width: 100%;
}
#conteneur {
position: relative;
width: 99%;
height:80%;
background-color:#FFFFFF;
margin-left:5px;
margin-right:5px;
}

div.centre {
position: relative;
background-color:#FCB0DB;
margin-left: 0%;
margin-right: 0%;
border:1px solid #CC3399;
border-bottom:1px;
padding:3px;
margin-top: 0px;
width:30%;
}

div.scentre {
position: relative;
background-color:#FFFFFF;
margin-left: 0%;
margin-right: 0%;
border:1px solid #CC3399;
padding:3px;
margin-top: 0px;
width:98%;
}

#gauche {
position: absolute;
left:0;
width: 16.5%;
padding:0px;
margin-top: -4px;
}

.sgauche{
border:1px solid #CC3399;
color:#000000;
text-decoration:none;
font-size:12px;
text-align:center;
}

#droite {
position: absolute;
right:0;
width: 16.5%;
padding:0px;
margin-top: -4px;
}

.sdroite{
border:1px dotted #CCCCCC;
}

#pied {
height: 30px;
background-color: #99CC99;
}
.menugauche {
list-style-type: none;
margin: 0;
padding:3px;
text-align:left;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
.menudroit {
list-style-type: none;
margin: 0;
padding:3px;
text-align:left;
}
.menudroit li {
margin-bottom: 5px;
}
.menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menudroit a:hover {
text-decoration: none;
}
p, span {margin: 0 0 10px 0;}

ul#menu li ul{
  display:none;
}

ul#menu li:hover>ul{
  display:block;
}

ul#menu{
  margin:0px;
  padding:0px;
  list-style:none;
  width:100%;
  color:#FFFFFF;
  float:left;
  font-size:10px;
}

ul#menu hr{
 margin-right: 4px;
 margin-left: 4px;
}

ul#menu li{
  float:left;
  display:block;
  padding:2px 1px;
  width:16.5%;
}

ul#menu li.first{
  padding-left:0px;
}

ul#menu li.last{
  padding-right:0px;
}

ul#menu li a{
  display:block;
  padding:2px 6px;
  border:1px solid #CC3399;
  color:#000000;
  background:#FCB0DB;
  text-decoration:none;
  font-size:12px;
  text-align:center;
}

ul#menu li a:hover{
  border-top-color:#F0F0F0;
  border-left-color:#F0F0F0;
  border-right-color:#999999;
  border-bottom-color:#999999;
  background:#FFFFFF;

}

ul#menu ul{
  position:absolute;
  background:#FFFFFF;
  list-style:none;
  margin-top:2px;
  margin-left:0px;
  margin-right:0px;
  margin-bottom:0px;
  padding:0px;
  width:inherit;
  z-index:1;
  border:1px solid #CCCCCC;

}

ul#menu ul ul{
  top:0px;
  left:155px;
  z-index:2;

}

ul#menu ul li{
  position:relative;
  float:none;
  margin:0px;
  padding:0px;
  _display:inline;
  width:100%;


}

ul#menu ul li a{
  display:block;
	margin:0px;
	padding:0px;
	width:96%;
  border:none;
   color:#000000;
   height:auto;

}
ul#menu ul li a span{
  display:block;
  width:100%;
  _width:100%;
  padding:2px 6px 0px 0px;
  margin:0px 0px;
  border:none;
  cursor:hand;
  background:#FFFFFF;
  text-align:left;
}


ul#menu ul li a.next:hover span{
  background-position: -160px 50%;
  border:1px solid #CCCCCC;

}

ul#menu ul li a:hover span{
  background-color:#FFFFFF;
  color:#FFFFFF;
  border:none;
  background:#CCCCCC;  
}

ul#menu ul li.first{
  padding-left:0px;
}

ul#menu ul li.first a{
  padding-top:0px;
}

ul#menu ul li.last{
  padding-right:0px;
}

ul#menu ul li.last a{
  padding-bottom:0px;
	background:url(imgmenuencascade/m1.gif) no-repeat left bottom;
}
/*
p{
  margin-left:170px;
}
*/
</style>
<script type="text/javascript">
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu.display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}

function setHover(){
  LI = document.getElementById('menu').getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}
</script>
</head>
<body onLoad="setHover()">
<div id="conteneur">
	<div id="header">
		<br/><br/>Header<br/><br/><br/>

	</div>
	<ul id="menu">
	   <li class="first">
		<a href="#">Accueil</a>

		<ul>
		  <li class="first"><a href="#"><span>  Menu1</span></a></li>
		  <li><a href="#"><span>  Menu2</span></a></li>

		   <li class="last"><a href="#"><span>  Menu3</span></a></li>
		</ul>
	  </li>
	  <li>
		<a href="#">Mon Compte</a>

		<ul>
		  <li class="first"><a href="#"><span>  Menu4</span></a></li>

		  <li><a href="#"><span>  Menu5</span></a></li>
		   <li><a href="#"><span>  Menu6</span></a></li>
		  <li class="last"><a href="#"><span>  Menu7</span></a></li>
		</ul>
	  </li>
	  <li class="last">
		<a href="#">Rechercher</a>

		<ul>
		  <li class="first"><a href="#"><span>  Menu8</span></a></li>
		  <li><a href="#"><span>  Menu9</span></a></li>
		  <li class="last"><a href="#"><span>  10</span></a></li>
		</ul>
	  </li>
	</ul>

	<br />
<div id="sconteneur">

	<div id="centre">
	<div class="centre">
	<span class="titre">Inscription</span><br />

</div>
<div class="scentre">
	Login : <input type="texte" size="20" maxlength="25" />
</div>

</div>



</div>
</div>
</body>
</html>

J'aimerais présenter un peu mieux mon début de formulaire. Par exemple que "Login" prenne au moins 30% avec un fond bleu par exemple.

J'essais tant bien que mal avec des span mais il refuse de s'agrandir. Avec div ca marche si c'est ca, je vais avoir autant de Div que de TD ce que je ne veux pas.

Une idée?

merci

Portekoi

Dudu

Dudu

Posté
Posté

Salut Portekoi

Une idée?

Alléger ton code ? :blink::fou:

Reprenons depuis le début:

* <span> est une balise neutre de type "en-ligne"

* <div> est une balise neutre de type "bloc"

* essayer de replacer l'un par l'autre, l'un par un <td>, l'autre par un <tr>, le premier par un <span class="machin"> puis le deuxième tenter de mettre un <div> et le positionner en absolu, en fait repasser le premier en <div> et l'autre en <span> ... çà ne marche pas !!!!! :gueule:

Revois tranquillement ton code: utilise des balises correctes pour tes formulaire (<label> par exemple, est indispensable), évite au maximum de positionner les éléments de manière absolue ou relative car il n'y a rien de pire pour la perénnité du code, trouve-toi un script de menu déroulant moins alambique et moins "hacké" que celui-là (à tout hasard Suckerfish Dropdowns sur ALA comme indiqué sur un autre topic ? :whistling:), évite la divite ou la spanite à l'infini, évite les <br/> qui servent à créer des espaces blancs entre les éléments, apprends à différencier les éléments "en-ligne" et les éléments "bloc" parce que c'est le B-A-BA du CSS, etc etc..

..et tout se passera mieux.

J'essaie de te modifier ton code pour qu'il soit pas trop mal. J'édite ou reposte dès que c'est correct et/ou que tu peux finir le reste tout seul.

PS: tu t'es mis en mode ucwords pour le titre de ton topic ? :lol:

Portekoi

Portekoi

Posté
  • Auteur
Posté (modifié)

Bon, j'ai découvert les balises FieldSet et Label mais je n'arrive pas à aligner mes champs de saisie :(

Dans mon head, j'ai rajouté ceci :

label {text-align: left; margin-left: 75px; }

input { text-align: right; margin-right: 150px;}

Puis :



<fieldset>	
		<label for="login">Login :	
			<input type="text" name="login" id="login" size="20" maxlength="20" />	
		</label>
		<br />
		<label for="mdp">Mdp :	
			<input type="password" name="mdp" id="mdp" size="20" maxlength="20" />	
		</label>
	</fieldset>

EDIT : Merci Dudu, je vais revoir mon code :) CSS pas évident quand même ^_^

EDIT2 : j'aime bien le mode UCWORD :D

Modifié par Portekoi
spoutniknak

spoutniknak

Posté
Posté

Ca devrais plutôt être:

<fieldset>
<p>
<label for="login">Login :</label>
<input type="text" name="login" id="login" size="20" maxlength="20" />
</p>

<p>
<label for="mdp">Mdp :</label>
<input type="password" name="mdp" id="mdp" size="20" maxlength="20" />
</p>
</fieldset>

le label n'inclus pas l'input

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...