28172 sujets

CSS et mise en forme, CSS3

2 colonnes sur une ligne

bonjour:

je souhaiterai afficher mon module "une annonce" et "cours au format téléchargeable" cote à cote mais comme vous pouvez le voir : http://www.findlessons.net

il y a un souci donc voici ce que j'ai fait:

code html
<div id="format">
<?php $this->renderModules( 'format' ); ?></div>
<div id="format1">
<?php $this->renderModules( 'format1' ); ?></div>


et le css
div.format {
 display: block;
   width: 200px;
   float: left;
}

div.format1 {
 display: block;
   width: 200px;
   float: right;
}


merci pour vos réponses Smiley biggrin
Hello,
Alors sur ton site tu as une div id="format" qui contient les 2 div class="moduletable" que tu veux mettre cote à cote... Donc en css ça pourrait donner :

#format{
width:500px//mets la valeur que tu veux
overflow:visible;
}
#format .moduletable{
float:left;
width:200px;
}

Avec un clear:both; sur la div suivante ou une div class="clearfix" juste après tes div moduletable (pour faire réentrer dans le flux au bon endroit la suite de ta page).
J'ai pas tester, il y aura peut être quelques subtilités à adapter mais dans l'idée ça devrais le faire Smiley biggrin

Et au passage je crois avoir rarement vu autant de div dans un code source Smiley lol j'imagine que ça vient d'un cms quelquonque qui a un template générique permettant de faire face à tous les cas de figures et ajout de css possibles par l'utilisateur mais du coup le code deviens une vrai soupe bien épaisse pour pas grand chose.
Sur ce, à +
merci beaucoup pour ta réponse claire et rapide.

cela à l'air de marcher mais je n'arrive pas à faire apparaitre mes modules correctement (voir sur le site)

voici ce que j'ai fait mais j'ai peut être mal compris

code html
 <div id="format">
 <div class="moduletable">
<?php $this->renderModules( 'format' ); ?></div>
<div class="moduletable">
<?php $this->renderModules( 'format1' ); ?></div>
</div>

code css
#format{ 
width:300px;
overflow:visible; 
} 
#format .moduletable{ 
float:left; 
width:150px; 
}


et si j'ai bien saisi tes informations, je crois qu'il existe déjà des classe moduletable, puis je mettre autre chose?


ps: oui j'utilise joomla car je sais copier/coller les codes mais aucunement en créés
Oui les class moduletable doivent être générées par joomla!
Dans ton site je vois exactement la même chose que tout à l'heure... Qu'entends tu par "je n'arrive pas à faire apparaitre mes modules correctement" ?
C'est quels modules qui n'apparaissent pas ? Annonce et cours ou un autre (celui d'en dessous?) ?

Tu n'as pas besoin de mettre <div class="moduletable"> dans ton template php, joomla! va mettre tout seul les div et class de tes modules... Essaye de retirer ça voir si ça marche (en laissant le css tel quel).
j'ai réussi entre temps

maintenant j'essaye de faire mon projet entièrement seul et sans CMS (oui je rêve LOL)

donc j'ai un autre problème à te (vous) soumettre:

j'aimerai faire des colonnes d'éléments comme sur mon précédent problème dans un menu

voici ce que j'ai codé
http://www.findlessons.net/projet/

voyez vous, il y a un problème car j'aimerai que le menu 1 et 2 se touche

et que mes éléments (titre,network, recherche) soit alignés

et pour finir j'aimerai savoir si mon code est propre et logique Smiley smile

mon html:
<!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">

<head>
<title>Findlessons.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/pageprincipale.css" />
</head>
<body>

<div id="menu1">

<div class="titredusite">
<h1>Page du projet</h1>
</div>


<div class="soustitredusite">
|network
</div>

<div class="recherchesite">
recherche
</div>

</div>


<div id="menu2">menu deuxième</div>

</body>
</html>


et mon css
body {
background-color:grey }



h1{
	font-size:150%;
	font-weight:normal;
	}
#menu1 {
background-color:red;		
width:100%
height: 40px;}

#menu1 .titredusite {
position: absolute;	
	width: 20%;
height:40px;
	background: #FC8;
}

#menu1 .soustitredusite {
margin-left: 20%;
width:10%;
height:40px;
	background: #FF8;

}

#menu1 .recherchesite {

margin-left: 30%;
width:12%;
height:40px;
	background: #FFF;}



#menu2 {
margin-top:40px;
width:100%;
height:50px;
background: #000;}
Sujet clos
Aller à