FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

Vous n'êtes pas identifié(e).

Pages : 1

#1 13-04-2012 02:03:57

a-snowboard
Membre
Inscription : 20-06-2011
Messages : 440
Site Web

[Résolu, Css] Positionnement DIV

Bonsoir tout le monde.

Après avoir réussi a créer des balises DIV (un gros pas de franchis pour moi ce soir), je m'arrache les cheveux pour l'imbrication des balises DIV

En fait avec mon code j'ai ça :
bloc1i.png

Alors que je voudrais ça :
bloc2.png
J'ai réussi a avoir cet agencement en écrivant directement dans le main.tpl . ça marche. Mais ce n'est pas valide W3C

Voici mon bout de code :

<div id="brdheader" class="block" >
	<div class="box">
		<div class="entete2" style="display: inline;">
			<a href="http://127.0.0.1/www/index.php"><img title="Logo forumphotoparis.fr" alt="Logo du forumphotoparis.fr" src="http://127.0.0.1/www/img/logo.png"></a>
		</div>
		<div id="brdtitle2" class="inbox" style="display: inline;">
			<pun_title>
			<div class="entete1" style="display: inline;">
				<a href="extern.php?action=feed&amp;type=rss"><img width="43" border="0" height="43" align="right" title="Flux RSS du Forum" alt="Flux RSS du Forum" src="rss.png"></a>
			</div>
			<div class="entete1" style="display: inline;">	
				<a href="http://twitter.com/forumphotoparis"><img width="43" border="0" height="43" align="right" title="Suivez nous sur Twitter" alt="Suivez nous sur Twitter" src="twitter.png"></a>
			</div>
			<div class="entete1" style="display: inline;">	
				<a href="https://www.facebook.com/pages/Forum-Photo-Paris/112898292168368"><img width="43" border="0" height="43" align="right" title="Suivez nous sur Facebook" alt="Suivez nous sur Facebook" src="facebook.png"></a>
			</div>
		</div>					
		<div id="brdtitle" class="inbox">
			<a href="http://127.0.0.1/www/index.php"><pun_desc></a>	
		</div>
		<pun_navlinks>
		<pun_status>
	</div>
</div>

et le css :

/* Logos en haut a droite
----------------------------------------------------------------*/
#entete1 {
  width: 43;
  border: 0;
  height: 43;
  align: right;
}

#entete2 {
  width: 63;
  border: 0;
  height: 38;
  align: left;
}

#brdtitle2 h1 {
	padding: 0 0 10px 0;
	width: 800px;
}

J'ai créé brdtitle2 qui est strictement identique à brdtitle sauf que j'ai raccourcis la balise. Car j'ai naïvement pensé qu'en raccourcissant ça allait laisser naturellement la place aux autres DIV.

J'ai essayé beaucoup de possibilité et je sature ! sad
Pourtant j'ai constaté que style="display: inline;" empêchait le retour à la ligne. ça marche vu que les 3 logos sont cote à cote. Mais visiblement ce n'est pas suffisant pour le reste.

Dernière modification par a-snowboard (13-04-2012 02:05:44)

Le roi du snowboard ! Sans prétention hein ? mdr

Fluxbb 1.4.7, Forum Photo Paris

Hors ligne

#2 13-04-2012 08:58:21

WinuX
Membre
Inscription : 18-07-2010
Messages : 390

Re : [Résolu, Css] Positionnement DIV

Il faut éviter les styles directement implanté dans les balises html (erreur W3C).
Sauf si tu veux forcer le css, mais dans ton cas pas vraiment besoin happy

Dans ton css, il faut savoir que # correspond au id et le . aux class. Comme il n'y a pas d'ID entete1 remplace ton #entete1 par .entete1 et ton #entete2 par .entete2

Ensuite les balises img et a sont des balises de type inline, contrairement aux balises div qui sont de type block.

Chez moi, j'ai le même résultat que sur ton second screen. Problème résolu ou il s'agit d'autre chose?

Dernière modification par WinuX (13-04-2012 09:00:02)

Hors ligne

#3 13-04-2012 10:06:39

a-snowboard
Membre
Inscription : 20-06-2011
Messages : 440
Site Web

Re : [Résolu, Css] Positionnement DIV

A mon avis il doit s'agir d'autre chose. (je suis en local)
J'ai bien fait le remplacement comme tu le préconise mais je ne constate aucun changement.
Bon par contre j'ai vu que j'avais oublié d'enlever les caractéristiques des images dans le img donc j'ai tout enlevé.

et j'ai quelques modifications mais j'ai toujours le même problème.

voici le nouveau code avec quelques changement qui n'ont rien apporté sur le plan visuel. Mais il sera un peut plus propre ! 

<div id="brdheader" class="block" >
	<div class="box">
		<div id="entete2" style="display: inline;">
			<a href="http://127.0.0.1/www/index.php"><img title="Logo forumphotoparis.fr" alt="Logo du forumphotoparis.fr" src="http://127.0.0.1/www/img/logo.png"></a>
			<div id="brdtitle2" class="inbox" style="display: inline;">
				<pun_title>
				<div id="entete1" align="right">
					<a href="extern.php?action=feed&amp;type=rss"><img title="Flux RSS du Forum" alt="Flux RSS du Forum" src="rss.png"></a>
					<a href="http://twitter.com/forumphotoparis"><img title="Suivez nous sur Twitter" alt="Suivez nous sur Twitter" src="twitter.png"></a>	
					<a href="https://www.facebook.com/pages/Forum-Photo-Paris/112898292168368"><img title="Suivez nous sur Facebook" alt="Suivez nous sur Facebook" src="facebook.png"></a>
				</div>
			</div>	
		</div>
		<div id="brdtitle" class="inbox">
			<a href="http://127.0.0.1/www/index.php"><pun_desc></a>	
		</div>
		<pun_navlinks>
		<pun_status>
	</div>
</div>

J'ai aussi constaté que dans div je ne peux pas  faire 

<div id="entete2" align="right" style="display: inline;">

il faut que ce soit ou align OU style

du coup je suis complètement perdu.

Dernière modification par a-snowboard (13-04-2012 10:07:12)

Le roi du snowboard ! Sans prétention hein ? mdr

Fluxbb 1.4.7, Forum Photo Paris

Hors ligne

#4 13-04-2012 14:59:01

PascL
Membre
Inscription : 06-09-2007
Messages : 554
Site Web

Re : [Résolu, Css] Positionnement DIV

Le align est pas valide w3c.
float est à utiliser

#entete1
{
float:right;
}

La fin du img doit être slashé (/>) pour être valide w3c.

Bouh !
StarShip Renaissance

Hors ligne

#5 13-04-2012 15:20:27

a-snowboard
Membre
Inscription : 20-06-2011
Messages : 440
Site Web

Re : [Résolu, Css] Positionnement DIV

Merci pour tes préconisations PascL

Je n'ai toujours pas réglé mon souci malgré des nouvelles tentatives. sad

Le roi du snowboard ! Sans prétention hein ? mdr

Fluxbb 1.4.7, Forum Photo Paris

Hors ligne

#6 21-04-2012 15:06:53

a-snowboard
Membre
Inscription : 20-06-2011
Messages : 440
Site Web

Re : [Résolu, Css] Positionnement DIV

J'ai enfin retrouvé mon pc.

Après quelques essais je constate que c'est le <pun_title> qui pose problème.

En effet il reviens automatiquement à la ligne et fait revenir les autres balises à la ligne.
Alors que je n'ai pas ce problème avec les autres balises.

J'ai réduit la longueur de la balise de <pun_title>. Mais rien à faire.

Une idée ?

Dernière modification par a-snowboard (21-04-2012 15:07:14)

Le roi du snowboard ! Sans prétention hein ? mdr

Fluxbb 1.4.7, Forum Photo Paris

Hors ligne

#7 03-05-2012 13:15:03

a-snowboard
Membre
Inscription : 20-06-2011
Messages : 440
Site Web

Re : [Résolu, Css] Positionnement DIV

Bon finalement j'ai enfin pu régler le problème non pas en créant une balise mais en mettant devant mes images

<div style="float: left">

Du coup nul besoin de CSS ! smile
Visiblement au W3C ça ne pose pas de souci.
Me reste 3 erreurs a régler et c'est bon ! smile

Je met le bout code, ça peut servir :

<div id="brdheader" class="block">
	<div class="box">
		<div style="float: left">
			<a href="http://www.forumphotoparis.fr"><img title="Logo forumphotoparis.fr" alt="Logo du forumphotoparis.fr" src="img/logo.png"></img>		
		</div>
		<div style="float: right">	
			<a href="https://www.facebook.com/pages/Forum-Photo-Paris/112898292168368"><img title="Suivez nous sur Facebook" alt="Suivez nous sur Facebook" src="img/facebook.png"></a>
			<a href="http://twitter.com/forumphotoparis"><img title="Suivez nous sur Twitter" alt="Suivez nous sur Twitter" src="img/twitter.png"></a>
			<a href="http://www.forumphotoparis.fr/extern.php?action=feed&amp;type=rss"><img title="Flux RSS du Forum" alt="Flux RSS du Forum" src="img/rss.png"></img></a>
		</div>
		<div id="brdtitle" class="inbox">	
			<pun_title>
			<a href="http://www.forumphotoparis.fr"><pun_desc></a>
		</div>
		<pun_navlinks>
		<pun_status>
	</div>
</div>

Dernière modification par a-snowboard (03-05-2012 13:22:59)

Le roi du snowboard ! Sans prétention hein ? mdr

Fluxbb 1.4.7, Forum Photo Paris

Hors ligne

Pages : 1

Pied de page des forums