28172 sujets

CSS et mise en forme, CSS3

Positionnement relatif + texte dans un checkbox ?

Bonjour à tous,

Je suis nouveau sur le forum, et débutant en html/css... J'ai déjà potasser beaucoup de cours, notamment ceux d'alsacreations, mais je crée ce topic pour obtenir votre avis sur ce que je souhaite faire.

J'aimerais que le logo de mon site, soit de ce type la, avec le carré bleu etant une image, et les textes, des textes Smiley cligne
upload/47205-exemple-lo.png
Après avoir lu tout un tas de tuto sur le positionnement de mes éléments, je me suis dit que je devais le positionnement relatif pour mes textes et images pour créer les decalages. par contre le tout n'est pas exactement centré, le corp de la page passe sous le texte (normal me dirait vous) et surtout, mes positionnement relatif se font en plusieurs centaines de pixels.
J'ai lu sur ce site qu'il n'est pas conseillé d'avoir de tel decalage

Je me pose en fait la question de la technique à mettre en oeuvre pour arriver à ce rendu, proprement. Que pouvez vous me conseiller ?


Deuxième question : je souhaite créer un "selecteur", comme l'on pourrait faire avec des checkbox, mais version "graphique"
upload/47205-exempleche.png

J'ai reussi via le CSS à modifier les checkbox, leur taille, leur couleur etc etc, mais je me demande s'il existe la possibilité d'ajouter du texte à l'interieur? Suis-je sur la bonne voie ou est ce absolument propre de faire cela comme ça?

Merci d'avance pour les idées que vous pourrez m'apporter.
Bonjour,

Pour ta première question il me manque des précisions pour t'apporter une réponse cohérente.

Avec une portion de ton code je pourrais t'aider. Smiley smile
Hello !! Smiley smile

Voici mon code HTML

<body>
<div id="header">
	<span id="txt1"><logotxt1>{ sort.</logotxt1></span>
	<span id="nuage"><img src="cloud.png" alt="logo nuage" /></span>
	<span id="txt2"><logotxt2>on / ze / cloud </logotxt2></span>
	<span id="txt2"><logotxt3>}</logotxt3></span>
</div>
test
</body>


et voici mon code CSS

#header{
	//background:#DDD;
	text-align: center;
}

img{
	//background:blue;
	position:relative;
	top:10px;
	left:25px;
}

logotxt1 {
	position:relative;
	top:20px;
	//background:yellow;
	font-weight:bold;
	font-size:3.5em;
	letter-spacing:-3px;
}

logotxt2 {
	position:relative;
	top:55px;
	left:-175px;
	//background:green;
	font-size:2.2em;
	letter-spacing:-1px;
}

logotxt3 {
	position:relative;
	top:55px;
	left:-175px;
	font-weight:bold;
	font-size:3.5em;
}


Comme ca, ça "fonctionne" a peu pres correctement, malgré le fait que ce ne soit pas vraiment centré et que le code ca ne me semble pas propre du tout.
Je ne vois pas trop comment faire autrement par contre, je suis preneur de bonnes idées Smiley cligne

Pour ma deuxieme question (je me repond à moi même) j'ai trouvé la parade en appliquant le style CSS au label de ma checkbox, en n'affichant pas la box concerné, mais seulement le label, ca me semble bien comme ça. Je pourrais fournir le code si des gens sont interessés.
Tu peux essayer ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#header {
	background-color: #DDD;
}
img {
 //background-color:blue;
	position: relative;
	left: 10px;
	top: 10px;
}
#logotxt1 {
	position: relative;
 //background-color:yellow;
	font-weight: bold;
	font-size: 3.5em;
	letter-spacing: -3px;
	height: auto;
	width: 200px;
}
#logotxt2 {
	position: relative;
 //background-color:green;
	font-size: 2.2em;
	letter-spacing: -1px;
	height: auto;
	width: 300px;
}
#logotxt2::after {
	content: "}";
	font-weight: bold;
	font-size: 2.5em;
	position: absolute;
	top: -63px;
}
#logo {
	width: 200px;
	margin-right: auto;
	margin-left: auto;
}
</style>
</head>
<body>
<div id="header">
  <div id="logo">
    <div id="logotxt1">{ sort.<img src="cloud.png" alt="logo nuage" width="50" height="50" /></div>
    <div id="logotxt2">on / ze / cloud </div>
  </div>
</div>
test
</body>
</html>

Modifié par rodolpheb (28 Nov 2012 - 09:34)
Sujet clos
Aller à