Positionnement de contenu

Question

27 Sep 2012 à 19:25

Bonjour à tous,

Bonjour à tous,
Je suis novice dans le web design et j'essaye de monter un site internet. je dis bien j'essaye car je m'en voie plus que je ne croyais et ça me décourage un peu par moment.
bref. Smiley sweatdrop

j'ai un gros soucis de positionnement et même après avoir lu et relu une grande quantité de tutoriels sur le sujet j'ai encore l'impression que le principe m'échappe.
Je travail sur Dreamweaver. je crée une page de formulaire.
j'ai un logo, une barre de menu spry et mon formulaire. tout va bien.
là ou ça coince, c'est la position du formulaire. mon premier "fieldset" se place automatiquement à côté du dernier lien de mon menu. chose totalement absurde, vu que le menu est dans un <div> et le formulaire dans un autre. même en utilisant "display: block" ça fonctionne sur Safari, mais sur Firefox rien à faire. sur IE, je sais pas je suis sur Mc du coup je ne peux pas voir.
Alors j'appel au secours car je suis à cours d'idée. j'ai refais ma page plusieurs fois, décortiqué les codes, rien à faire.
Le mieux c'est que je vous montre mes codes et si une bonne âme arrive à trouver la solution, et bien je crois que je dormirais mieux cette nuit. Smiley confus

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Contact</title>

<link href="../CSS/bodylayout.css" rel="stylesheet" type="text/css" />

<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">

<link href="../CSS/contact.css" rel="stylesheet" type="text/css" />

<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>


</head>

<body>

<div id="header">

<h1><span>Bienvenue sur le site d'</span>
<img src="../IMG/logo.png" alt="logo-text omegamedical" /></h1>

</div>

<hr />

<div id="menu">

  <ul id="MenuBar1" class="MenuBarHorizontal">
  
    <li><a href="home.html">Accueil</a></li>
    
    <li><a  class="MenuBarItemSubmenu" href="#">Produits</a>
    	<ul>
        	<li><a href="Hopitaux_cliniques.html">Divans d'examens</a></li>
            <li><a href="Produits kinés/tables_reeducation.html">Tables de rééducation</a></li>
            <li><a href="Produits kinés/physiotherapie.html">Physiothérapie</a></li>
            <li><a href="Produits kinés/Pressotherapie.html">Pressothérapie</a></li>
            <li><a href="Hopitaux_cliniques.html">Atelles motorisées</a></li>
            <li><a href="Produits kinés/Ondes_de_choc.html">Ondes de choc</a></li>
            <li><a href="Produits kinés/Gym_reeducation.html">Gym/rééduc.</a></li>
            <li><a href="Produits ostéo/Tabourets.html">Tabourets coussins</a></li>
            <li><a href="Hopitaux_cliniques.html">Consommables</a></li>
            <li><a href="Nuancier.html">Nuancier</a></li>
          </ul>            
    </li>
    
   <li><a class="MenuBarItemSubmenu" href="Services.html">Services</a>
      <ul>
        <li><a  href="#1">Maintenance préventive et Curative</a></li>
        <li><a  href="#2">Décontamination de vos locaux</a></li>
        <li><a  href="#3">Création de cabinets / Plateaux techniques</a></li>
        <li><a  href="#4">Transfert de vos équipements</a></li>
        <li><a  href="#5">Dépôt vente</a></li>
        </ul>
      </li>
    
    <li><a class="MenuBarItemSubmenu" href="Partenaires.html">Nos Partenaires</a>
    	<ul>
        	<li><a  href="Partenaires.html#seers">SeersMedical</a></li>
            <li><a  href="Partenaires.html#djo">DJOGlobal <i>(Compex/Artromot)</i></a></li>
            <li><a  href="Partenaires.html#schwa">Schwamedico</a></li>
            <li><a  href="Partenaires.html#btl">BTL</a></li>
            <li><a  href="Partenaires.html#vivaltis">vivaltis</a></li>
            <li><a  href="Partenaires.html#masso">Massothermie</a></li>
            <li><a  href="Partenaires.html#kettler">Kettler</a></li>
            <li><a  href="Partenaires.html#alsit">Alsit</a></li>
            <li><a  href="Partenaires.html#phyto">Phytospace</a></li>
            <li><a  href="Partenaires.html#cmv">CMVMediforce</a></li>
        </ul>
     </li>
     
    <li><a href="Historique.html">Historique</a></li>
    
    <li><a href="Occasions.html">Occasions</a></li>
    
    <li><a href="Evenements_actus.html">Evenements/Actualités</a></li>
    
    <li><a href="Contact.html">Contact</a></li>
  </ul>
</div>

<div id="corps">

<form action="#result" method="post" name="contact" id="contact">

<fieldset>
	<p>Faites un choix parmis les propositions suivantes:<span class="rouge">*</span></p>

<p><select name="type_client">
		<optgroup label="Pratitien">
        	<option>Kinésithérapeute</option>
            <option>Ostéopathe</option>
            <option>Sage-Femme</option>
        </optgroup>
        <optgroup label="Centre">
        	<option>CRF</option>
            <option>SSR</option>
            <option>Hôpital</option>
            <option>Clinique</option>
            <option>Ehpad</option>
        </optgroup>
        <optgroup label="Autre">
        	<option>Ecole d'osthéos</option>
            <option>Ecole de Kinés</option>
            <option>Autres</option>
        </optgroup>
	</select></p>
</fieldset>

<fieldset>
    
<p><label for="fonction">Fonction:</label><span class="rouge">*</span><input id="fonction" name="fonction" type="text" /></p>

<p><label for="nom">Nom:</label><span class="rouge">*</span><input id="nom" name="nom" type="text" /></p>

<p><label for="prenom">Prenom:</label><span class="rouge">*</span><input id="prenom" name="prenom" type="text" /></p>

<p><label for="adresse">Adresse:</label><span class="rouge">*</span><input id="adresse" name="adresse" type="text" /></p>

<p><label for="code_postal">Code Postal:</label><span class="rouge">*</span><input id="code_postal" name="code_postal" type="text" /></p>

<p><label for="ville">Ville:</label><span class="rouge">*</span><input id="ville" name="ville" type="text" /></p>

<p><label for="tel">Tel:</label><span class="rouge">*</span><input id="tel" name="tel" type="tel" /></p>

<p><label for="mail">Mail:</label><span class="rouge">*</span><input id="mail" name="mail" type="email" /></p>

</fieldset>

<fieldset>

<p><label for="message">Votre Message:</label><span class="rouge">*</span><textarea id="message" name="message" rows="5" cols="50"></textarea></p>

</fieldset>

<fieldset>
	<p><input type="submit" value="Envoyer" class="bouton" />    <input type="reset" value="Annuler" class="bouton" /></p>
</fieldset>
</form>

</div>













<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});

</script>

</body>

</html>

@charset "UTF-8";
/* mise en page global */

html, body {
	height: 100%;
	width: 100%;
	}

body {
	background-color: #f3eac9;
	}


	
	
h1 {
	font-family: "Times New Roman", Times, serif;
	margin-left: 350px;
	}

#bienvenue {
	position: absolute;
	left: 200px;
	top: 60px;
	font-size: 16px;
	}

h2 {
	font-family: "Times New Roman", Times, serif;
	display: block;}

.mistral {
	font-family: Mistral;
	}

#menu {
	display: block;
}

address {
	text-align: center;
}

@charset "UTF-8";
/* CSS Document */


	
fieldset {
	
	width: 500px;
	border-radius: 10px;
	display: block;
	margin-top: 5px;
	background-color: #6CF;
	}
	
.rouge {
	color: red;
	}
	
select {
	margin-left: 130px;
	}
	
optgroup {
	font-style: italic;
	}
	
label {
	display: inline-block;
	width: 100px;
	margin-right: 20px;
	vertical-align: top;
	text-align: left;
	}
	
input {
	width: 300px;
	padding: 4px;
	vertical-align: top;
	border-radius: 10px;
	}
	
#code_postal {
	width: 100px;
	}
	
#tel {
	width: 150px;
	}
	
textarea {
	width: 300px;
	
	padding: 4px;
	vertical-align: top;
	border-radius: 10px;
	}

.bouton {
	width: 100px;
	margin-left: 90px;
	background-color:#FFFFFF;
	}

Desolée c'est un peu long. Merci à tous

RR7008

22 Jul 2013 à 14:18

vais eu un problème similaire il y a deux semaines, je ne sais pas si ca peut marcher pour ton problème

j'avai mis un paragraphe vide entre les deux éléments collé et ca a marché en écrivant <p> </p> car il y a alors eu une ligne vide séparatrice

mini-truc

22 Jul 2013 à 16:36

Bonjour,

Merci de ne pas coller des pages HTML et CSS en entier ; je n'ai donc pas lu tes bouts de code mais j'ai pensé à un manque de "clear : both"

Personnellement j'aime bien créer une classe :

.clear{ clear:both; }

Que j'utilise à souhait dans le cas d'élément flottant :


<ul class='menu_horizontal'>
   <li>menu1</li>
   <li>menu2</li>
</ul>
<div class='clear'></div>


.menu_horizontal li{ float:left; }

Sujet clos

Sémantique web et HTML

Positionnement de contenu