28172 sujets

CSS et mise en forme, CSS3

Mon design possible à intégrer ?

Pages :
Bonjour,

voila voulant m'entrainer sur un nouveau concept, j'ai crée un design :


Et commencant à me lancer dans le code je m'apercois que celui ci est difficile,
peut t'on ce lancer dans ce genre de chose ? je ne voit pas comment m'y prendre sachant que le bleu clair corespond au contenu et le rose à gauche au futur bouton.

merci pour votre aide,
Tristan
Bonjour,
Vu d'ensemble comme ça je trouve ça très facile

Du coup par plaisir j'ai intégrer ton site

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Là par contre je ne sais pas ce que tu veux mettre</title>
 </head>
 <body>
 </body>
</html>

Voilà Smiley lol
Modifié par masseuro (19 Oct 2009 - 09:40)
Salut,

C'est globalement assez simple, il te faut :
- une partie header avec une image qui prend la partie bleu foncée supérieure avec le titre,
- une zone de contenu avec une image de fond du haut du cadre bleu clair avec le fond bleu foncé derrière en réservant une marge de blanc à gauche dans l'espace du conteneur pour les onglets roses positionnée derrière le premier
- une zone de pied de page contenant le bas du cadre bleu clair et le bas du bloc bleu foncé et sa diagonale, avec une grande hauteur pour permettre à la page de s'allonger quand le contenu est grand. Et si la page est vraiment trop longue, songer à couper cette partie du design en 3 images (haut, milieu répété et bas)
- une zone positionnée à gauche pour le menu, avec les fonds roses aux onglets.
Bonjour,

La seule petite difficulté, pourrait être dans le cas d'un design fluide, ou il faudra prévoir pour les obliques des images très grandes et éventuellement en calculer les hauteurs pour que tout soit raccord.
nan je pense à laisser ce design fixe et centrer, je penser aussi laisser une hauteur fixe mais je vais tenter la technique de découpe plus haut pour avoir une hauteur extensible !

merci !

ps: je ne passe encore en résolus, j'attend juste d'avoir fait la découpe

mon dernier bloc pour le menu devras etre un float left c'est bien ça?
Modifié par Teytoon (19 Oct 2009 - 16:30)
bon donc content car c'est le premier design que j'arrive à correctement intégré ! congrat ! Smiley lol

bon petit soucil concernabt le menu et le futur contenu !
voila ce que j'obtient:

http://img7.imageshack.us/img7/4084/88560431.jpg

je l'ai compris ça bug à cause du float mais je ne vois pas comment les mettre à ligne, en faisait une liste ?

et concernant le contenu central, vous l'avez compris celui ci est découper en 3 collonnes, comment je m'en sort pour l'ajouter, avec des padding, doije découper cette partie en 3 collonnes (j'ai peur au niveau du callage) ?

merci encore !
Modifié par Teytoon (22 Oct 2009 - 16:42)
Salut,

Oui la liste est pour le moment idéale pour la navigation, et qui plus est, étant un élément de type bloc, tes liens vont automatiquement s'empiler les uns sous les autres. Smiley cligne

Concernant tes colonnes, si elles ont toujours les largeurs spécifiées, correspondant à l'image de fond, il ne te reste qu'à jouer sur les margin et padding selont tes besoins pour les positionner comme tu veux dans le gabarit.

Ceci dit tu t'embetterai peut être moins, vu le style de ta bordure, à utiliser l'attribut border sur deux de tes colonnes, avec le margin et le padding qui vont avec bien évidemment. Smiley smile

Bon courage pour la suite.
niquelle, ca commence a bien fonctionner la, je vous ressolicite concernant un probleme avec :hover, voici le code css de ma liste :


ul {
list-style-type: none;
padding: 0;
margin: 0;
float: left;
width: 40px;
}

li {
background-image: url(img/05.jpg);
background-repeat: no-repeat;
text-align: center;
margin-bottom: 4px;
}

li:hoover {
background-image: url(img/06.jpg);
background-repeat: no-repeat;
}

li a {
color: #FFFFFF;
text-decoration: none;
font-size: 0.6em;
}


L'html:


            <div id="menu1">
<ul>
   			<li><a href="#">1</a></li>
   			<li><a href="#">2</a></li>
   			<li><a href="#">3</a></li>
   			<li><a href="#">4</a></li>
</ul>

            </div>


j'ai donc l'image 06 qui ne s'affiche pas au passage de ma souris.. comment régler ça?
Hum déjà c'est hover et pas hoover Smiley cligne ..

Et ensuite je ne suis pas sur que tu puisses faire cela dans ton css.
Changer l'image de fond sur un hover.. j'ai un doute tout d'un coup...
Si quelqun peux me contredire?
Il me semble que tu dois utiliser du javascript pour cela.

Mais une option intéressante c'est le background position:
Tu fais ton image de fond 2 fois plus grande que nécessaire (tu lui met par contre la bonne taille dans le code)
Et au survol tu lui change le background position et donc la decale de sa propre taille vers la gauche par exemple.. Et ainsi tu optiens un changement d'image de fond

Ensuite autre erreur je te déconseil fortement le li:hover
je ne sais pas si tout les navigateur le prennent en compte

Je te reocmmande plustot de mettre un <a> dans tes <li>
et de gérer le background sur le a et non le li
Car le a:hover est gérer par tout le modne sans souci Smiley cligne

Voili voila

Si tu veux un exemple pour le background-position je l'utilise sur le menu de mon site: www.cas-p.net
Bon ca date... aujourdhui je ne ferais plus comme ca;
Mais dans ton cas ca devrais te servir d'exemple.
yes merci pour tous ça ! bon j'ai un peu fouiné et j'ai trouver la solution en convertissant les li ainsi que son over en "display : bloc;" Smiley smile j'avace petit à petit Smiley smile
re, alors voila j'ai upload la ou j'en suis :

http://tristanroger.fr/

donc pour les boutons il faudrais que je trouve a soluce pour le texte..

mais c'est surtous le contenu la je suis bloquer depuis hier dessus =(, j'vous passe mon html et css ci vous avez une idée je ne vois pas comment faire, je reste tous de meme content d'en être arriver ici ! =)

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>Un caca presque parfait !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
   </head>
<body>
			<div id="header">
			</div>
              
            <div id="menu1">
<ul>
   			<li><a href="#"></a></li>
   			<li><a href="#"></a></li>
   			<li><a href="#"></a></li>
   			<li><a href="#"></a></li>
</ul>

            </div>

            <div id="contenuhaut">
			</div>
            
            <div id="contenubas">
			</div>
			
</body>
</html>


css :
#header {
width: 595px;
height: 98px;
background-image: url(img/01.jpg);
background-repeat: no-repeat;
margin: auto;
}

#menu1 {
width: 70px;
margin-left: 305px;
} 

ul {
float: left;
list-style: none;
}

li {
display: block;
width: 70px;
height: 20px;
background-image: url(img/05.jpg);
background-repeat: no-repeat;
margin-bottom: 10px;
text-decoration: none;
font-size: 0.6em;
}

li:hover {
width: 70px;
height: 20px;
background-image: url(img/06.jpg);
background-repeat: no-repeat;
}

#contenuhaut {
width: 595px;
height: 176px;
background-image: url(img/02.jpg);
background-repeat: no-repeat;
margin: auto;
}

#contenubas {
width: 595px;
height: 134px;
background-image: url(img/03.jpg);
background-repeat: no-repeat;
margin: auto;
}
bas enfaite il est expliqué et répondus plus haut, mais je n'ai pas saisie, je me demande comment crée 3 zones de contenus dans les encarts prévus à cette effect sur mon design, sachant que c'est une image de fond.
à vue de nez, je te dirais 3 div
celui de gauche placé en float:left
et celui de droit en float: right...
Celui du centre devrait se placé automatiquement entre les deux.

il en parle ici
Salut,

juliesunset a écrit :
à vue de nez, je te dirais 3 div
celui de gauche placé en float:left
et celui de droit en float: right...
Celui du centre devrait se placé automatiquement entre les deux.

il en parle ici

Sauf que pour garder la logique de l'ordre d'affichage du code en lecture écran, il vaudrait peut être mieux mettre les deux div de gauche en flottant à gauche. Smiley cligne
Modifié par Mikachu (23 Oct 2009 - 16:29)
Pages :
Sujet clos
Aller à