trends4media

Affichage des articles dont le libellé est aligner. Afficher tous les articles

Aligner côte à côte 2 images sans tableau sujet

mardi 8 avril 2014

Bonjour,

J'ai la chose suivante à faire qui est très simple avec un tableau mais j'aimerais savoir si on peut le faire sans tableau : je voudrais aligner deux images côte à côte sans utiliser de tableau.

Code:

1
2
<img title="texte_accueil" src="http://www.developpez.net/forums/images/titre_site.png" alt="Jean-Martin Barbut Photographies haute et très haute résolution" />
<img title="image_accueil" src="http://www.developpez.net/forums/images/image_accueil.jpg" alt="Buste femme" id="image_accueil">

Ce code fonctionne mais si je réduis la largeur du navigateur web une image passe sous l'autre. JE voudrais donc faire cela sans utiliser de tableau :

http://photo.jeanmartinbarbut.fr/web/home.html

Merci !

[UI Mobile] Aligner deux elements graphique a l'horizontal sujet

jeudi 27 mars 2014

Bonjour,

Je cherche a aligner deux éléments (un <input> et une icone-bouton <a>). J'ai essayé avec data-inline ou avec un FieldContain mais je conserve comme affichage l'input qui prend toute la ligne et le bouton a la ligne suivante. De plus, je ne réussis pas a capter l’événement de click sur le bouton (avec un alert('Test'))

C'est sans doute un problème assez simple mais je sèche un peu la. Est ce que quelqu'un aurais une idée ? J'utilise JQueryMobile 1.4.2

Ex1.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
		<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
		<script src="Ex1.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
	</head>
	<body>
		<div data-role="page" id="PageItem">
			<div data-role="content">
				<div data-role="fieldcontain">
					<input type="text" name="newItem" id="newItem" value="" />
					<a href="#" id="addItem" data-role="button" data-icon="plus" data-iconpos="notext">Add new item</a>
				</div>
				<input type="text" name="newItem2" id="newItem2" value="" data-inline="true" />
				<a href="#" id="addItem2" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true">Add new item</a>
			</div>
		</div>
	</body>
</html>

Ex1.js

Code:

1
2
3
4
5
$('document').ready(new function() {
	$('#addItem').click(function(){
		alert('Test');
	});
});

Merci d'avance pour votre aide :D

aligner divs de hauteur différente sujet

mercredi 29 janvier 2014

salut à tous,

tout d'abord je voudrais préciser que j'y connais pas grand chose aux CSS.

J'ai des données dynamiques que j'affiche à l'intérieur de div. La largeur des divs est fixe mais la hauteur varie en fonction du contenu.

J'aimerais obtenir un alignement régulier (en tableau) de mes divs au lieu du patchwork suivant.

Pièce jointe 135796

Voilà mon code pour l'affichage

Code:

                                         <Html>
                                             
                                             <tpl for=".">
                                                         <div class="thumb-wrap" id="{ID}">
                                                         <div class="matchTable" style="width:300px;">        
                                                            <div class="matchRow">
                                                                <div class="matchCell">INDEX</div>
                                                                <div class="matchCell">{INDEX}</div>
                                                            </div>
                                                            <div class="matchRow">
                                                                <div class="matchCell">Ligue</div>
                                                                <div class="matchCell">{[LeagueRenderer(values.LEAGUEID)]}</div>
                                                            </div>
                                                            <div class="matchRow">
                                                                <div class="matchCell">LOCAUX</div>
                                                                <div class="matchCell">{[TeamRenderer(values.HOMETEAMID)]}</div>
                                                            </div>
                                                            <div class="matchRow">
                                                                <div class="matchCell">VISITEURS</div>
                                                                <div class="matchCell">{[TeamRenderer(values.GUESTTEAMID)]}</div>
                                                            </div>
                                                            <div class="matchRow">
                                                                <div class="matchCell">DATE</div>
                                                                <div class="matchCell">{DATE:date('d M Y')} - {TIME:date('G:i')}</div>
                                                            </div>
                                                            <div class="matchRow">
                                                                <div class="matchCell">PLACE DE JEU</div>
                                                                <div class="matchCell">{[PlayGroundRenderer(values.PLAYGROUNDID)]}</div>
                                                            </div>                                                             
                                                        </div>
                                                           {[convocationsRenderer(values.CONVOCATION)]}
                                                         </div>
                                                    </tpl>                                                                                          
                                         </Html>

Code:

.matchTable {
    /*width:300px;*/
    display: table;
}


.matchRow {    
    width: 100%;
    display: table-row;
}

.matchCell {
    padding: 3px;
    margin: 3px;
    border-style: none none solid none;
    border-width: 1px;
    border-color: #C0C0C0;
    display: table-cell;
    
}

.matchTableCaption {
    margin-top: 5px;
    display: table-caption;
    text-align: center;
    font-weight: bold;
}
.match-view .x-panel-body {
    background: white;
    font: 11px Arial, Helvetica, sans-serif;
}

.match-view .thumb-wrap {
    float:left;
    margin: 4px;
    margin-right: 0;
    padding: 4px;
    border: 1px solid #999999;
}

.match-view .thumb-wrap span {  
    display: block;
    overflow: hidden;
    text-align: center;
    width: 86px; // for ie to ensure that the text is centered
}

.match-view .x-item-over{
    border: 1px solid #dddddd;
    background: #efefef url(../../Shared/images/row-over.gif) repeat-x left top;
    padding: 4px;
}

.match-view .x-item-selected{
    background: #eff5fb url(../../Shared/images/selected.gif) no-repeat right bottom;
    border: 1px solid #99bbe8;
    padding: 4px;
}

Est-ce que c'est possible de faire ça avec du CSS?

je vous remercie d'avance

Images attachées

divs.PNG (42,4 Ko)

trends4media

Pages

Aligner côte à côte 2 images sans tableau sujet

mardi 8 avril 2014

[UI Mobile] Aligner deux elements graphique a l'horizontal sujet

jeudi 27 mars 2014

aligner divs de hauteur différente sujet

mercredi 29 janvier 2014