demande d'aide sur une découpe CSS

Question

Bonjour,

Je suis en train de travailler à la création d'un site : http://balistiq.free.fr/0000/
J'ai fais le design mais j'avoue ne pas être super à l'aise en ce qui concerne la découpe CSS.
J'ai fais en sorte dans la disposition des fichiers images que ça soit facilement utilisable pour une découpe, enfin, j'espère.

Quelqu'un peut-il m'apporter une aide ?

D'avance, merci.

@karamel · Answer

jour
les image sont tres lourdes le temp de chargement est long et le logo ne fontionne pas sur IE et FF  sinon le design est pas mal

chabgyver · Answer

T'a quel version de IE et de FF car moi, ça fonctionne super bien avec IE7, FF3 et 2
Sinon, je fais ce site pour mon cousin et il est satisfait du design même si c'est un peu lourd. Et puis, bon, de nos jours presque tout le monde à l'adsl, ceux qui fonctionnent encore en bas débits sont peu nombreux, en tout cas largement minoritaires et j'ai fais le choix de ne plus en tenir compte.

cs_bultez · Answer

Bonjour,
je peux même pas essayer... je suis en bas débit et kazma dit déjà que c'est long !
quand au "largement minoritaire" : plus ou moins nombreux que ceux qui
refusent le javascript ?
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

chabgyver · Answer

J'en sais rien, comment le saurai-je ? Mais bon, ce que je veux faire n'a pas grand chose à voir avec du javascript il me semble sauf erreur de ma part.

cs_bultez · Answer

ben on est sur le site [d]html/javascript,
je faisais simplement le parallèle...
après tout pourquoi se préoccuper de ceux qui n'utilisent pas IE ?
ils sont [largement] minoritaires ( et ne me demande pas le % : j'en sais rien ! )
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

banbanfr · Answer

Bonjour,

Ton découpage actuel n'est pas terrible car a mon avis tu fais ta struture autour de ton exemple fait sous photoshop ou autre et non le contraire.
Je te conseil déjà de faire ta structure, regarde sur google : mise en page css.
Ensuite je te conseil de revoir tes images, moi je suis sous photoshop et il te permet de faire un enregistrement pour le web et il le fait très bien.
il faut aussi savoir qu'une image peut etre répéter mais etre charger 1 fois ce qui evite par exemple de grand fond pour 200Ko mais plus pour 10Ko :)

Tiens pour tester ton site :

http://balistiq.free.fr/0000/' target='_blank'>http://www.websiteoptimization.com/services/analyze/wso.php?url=http://balistiq.free.fr/0000/

Donc si on look http://balistiq.free.fr/0000/fond.jpg on pourra en déduire que tu peux la rogner a 50px de large et non de 900 et des brouette je suppose :)

En espérant que ca t aide a avancer.
Je reste a ta disposition pour pus de conseil.
Cordialement

chabgyver · Answer

Bon, voilà où j'en suis : J'ai 2 fichiers : - index.html - design.css Le fichier html a pour code : Hotel-Restaurant l'Escapade

[ accueil]

[ loisirs]

[ restaurant]

[ hotel]

[ specialites]

[ plan]

[ contacts]

Blablablabla ddscd Designed and created by Net and Business Le fichier CSS : a:visited { color:white; } a { color:white; } p:hover { color:green; } a:hover { color:green; } h3:hover { color:red; } body { text-align:center; background-image:url('img/fond.jpg'); margin:auto; color:white;/ } div.logo { background-image:url(img/logo.gif); height:290px; width:75px; margin:auto; margin-top:15px; } div.header { background-image:url('img/header.gif'); height:700px; width:75px; margin:auto; margin-top:15px; } div.image { background-image:url('img/image.gif'); height:290px; width:148px; margin:auto; padding-top:3px; } div.espace { background-image:url('img/espace.gif'); height:700px; width:148px; margin:auto; } div.menu { background-image:url('img/menu.jpg'); height:180px; width:527px; margin:auto; padding-top:3px; } div.menu_vertical_li { display : inline; padding : 0 0.5em; margin:0; } div.menu_ul{ list-style-type : none; margin:0; } div.left { background-image:url('img/left.gif'); height:9px; width:509px; margin:auto; } div.contener { background-image:url('img/contener.gif'); width:509px; margin:auto; } div.right { background-image:url('img/right.gif'); height:23px; width:509px; margin:auto; } div.footer_menu { background-image:url('img/footer_menu.gif'); width:18px; margin:auto; padding-top:3px; } div.corner_left { background-image:url('img/corner_left.gif'); height:9px; width:18px; margin:auto; padding-top:4px; } div.footer { background-image:url('img/footer.jpg'); height:778px; width:18px; margin:auto; padding-top:4px; } div.corner_right { background-image:url('img/corner_right.gif'); height:23px; width:18px; margin:auto; padding-top:4px; } p { padding:15px; margin:0; } h3 { padding:6px; margin:0; text-align:left; } Le résultat est visible à l'url mentionnée dans mon premier topic et comme vous pouvez le constarer, c'est pas terrible mais je sais pas corriger mes codes.

PetoleTeam · Answer

Bonjour, 
Sans bien avoir regardé, tu n'aurais pas 
inversé la width et la height dans ta feuille de style ? 
;O)

chabgyver · Answer

Effectivement, il y a eu confusion mais ça ne résoud pas le problème mais là, j'y vois déjà ,plus clair.

PetoleTeam · Answer

Il me semble encore qu'il faille inverser les DIVs 
header et image
;O)

chabgyver · Answer

Finalement, bien que n'y connaissant rien du tout il y a encore 8 heures, je suis arrivé à ça :
http://balistiq.free.fr/0000/

J'ai changé des choses dans mon fichier CSS et du coup, il ressemble à ça maintenant :

a:visited
{
color:white;
}
a
{
color:white;
}
p:hover
{
color:green;
}
a:hover
{
color:green;
}
h3:hover
{
color:red;
}
body
{
text-align:left;
background-image:url('img/fond.jpg');
margin:auto;
color:white;
}
div.logo
{
float:left;
background-image:url(img/logo.gif);
width:290px;
height:75px;
margin:auto;
margin-top:15px;
}
div.header
{
float:left;
background-image:url('img/header.gif');
width:700px;
height:75px;
margin:auto;
margin-top:15px;
}
div.image
{
float:left;
background-image:url('img/image.gif');
width:290px;
height:148px;
margin:auto;
padding-top:0px;
clear:both;
}
div.espace
{
float:left;
background-image:url('img/espace.gif');
width:700px;
height:148px;
margin:auto;
}
div.menu
{
float:left;
background-image:url('img/menu.gif');
float:left;
width:180px;
height:527px;
margin:auto;
padding-top:0px;
clear:both;
}
div.menu_vertical_li {
display : inline;
padding : 0 0.5em;
margin:0;
}
div.menu_ul{
list-style-type : none;
margin:0;
}
div.left
{
float:left;
background-image:url('img/left.gif');
width:9px;
height:509px;
margin:auto;
}
div.contener
{
float:left;
background-image:url('img/contener.gif');
width:778px;
margin:auto;
}
div.right
{
float:left;
background-image:url('img/right.gif');
width:23px;
height:509px;
margin:auto;
}
div.footer_menu
{
float:left;
background-image:url('img/footer_menu.gif');
height:18px;
margin:auto;
padding-top:0px;
clear:both;
}
div.corner_left
{
float:left;
background-image:url('img/corner_left.gif');
width:9px;
height:18px;
margin:auto;
padding-top:0px;
}
div.footer
{
float:left;
background-image:url('img/footer.gif');
width:778px;
height:18px;
margin:auto;
padding-top:0px;
}
div.corner_right
{
float:left;
background-image:url('img/corner_right.gif');
width:23px;
height:18px;
margin:auto;
padding-top:0px;
}
p
{
padding:15px;
margin:0;
}
h3
{
padding:6px;
margin:0;
text-align:left;
}

Merci aux différents sites qui proposent des tutos très bien faits. Mais j'ai pas terminé pour autant, je vais y travailler encore ce week-end mais je vous avouerai qu'une aide de votre part serai la bienvenue car j'ai du mal à comprendre pourquoi la partie basse de mon site est entièrement alignée à gauche. C'est vraiment étrange.

banbanfr · Answer

Fait ton choix :

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Cordialement Banban

chabgyver · Answer

Bon, ben, j'ai pas mal avancé, j'ai revu le code et voilà ce que ça donne : HTML : index3 CSS a:visited { color:white; } a { color:white; } p:hover { color:green; } a:hover { color:green; } h3:hover { color:red; } body { text-align:left; background-image:url('img/fond.jpg'); margin:auto; color:white; } apDiv1 { float:left; position: absolute; left: 87px; top: 0px; width: 290px; height: 75px; z-index: 1; } apDiv2 { float:left; position: absolute; left: 377px; top: 0px; width: 700px; height: 75px; z-index: 2; } apDiv3 { float:left; position: absolute; left: 87px; top: 75px; width: 290px; height: 148px; z-index: 3; clear:both; } apDiv4 { float:left; position: absolute; left: 377px; top: 75px; width: 700px; height: 148px; z-index: 4; } apDiv5 { float:left; style ="position: absolute; left: 87px; top: 223px; width: 180px; height: 500px; z-index: 5; clear:both; } apDiv6 { float:left; style="position: absolute; left: 267px; top: 223px; width: 9px; height: 500px; z-index: 6; } apDiv7 { float:left; style="position: absolute; left: 276px; top: 223px; width: 778px; height: 500px; z-index: 7; } apDiv8 { float:left; style="position: absolute; left: 1054px; top: 223px; width: 23px; height: 500px; z-index: 8; } apDiv9 { float:left; style="position: absolute; left: 87px; top: 723px; width: 990px; height: 9px; z-index: 9; clear:both; } apDiv10 { float:left; style="position: absolute; left: 87px; top: 732px; width: 990px; height: 18px; z-index: 10; clear:both; } apDiv11 { float:left; style="position: absolute; left: 87px; top: 0px; width: 1px; height: 751px; z-index: 11; } Les images s'affichent les unes en dessous des autres, que dois-je faire pour corriger ça ? Merci

@karamel · Answer

vue que c'est dans ton fichier css que la position des elements est donne je dirait que le fichier n'est pas pris en compte regarde au niveau de la declaration du fichier 
ou dans le fichier lui meme ou se trouve l'erreur

chabgyver · Answer

Effectivement, j'ai vu d'où venait le problème, dans le css, il m'a fallu ajouter un # au début de chaque balise, ensuite, afin de peaufiner, j'ai crée une cellule centrée dans le fichier html dans laquelle j'ai placé l'ensemble de mes div. Je crois que je touche au but.

chabgyver · Answer

Autre chose, si j'essai de taper du texte dans le contener, je m'aperçois que ca dépasse le cadre de mon interface, j'aurai voulu savoir comment faire les choses proprement en étendant l'interface, tout simplement, j'espère que vous m'aurez compris.

banbanfr · Answer

#NomStyle{} c'est pour un id="NomStyle"
et
.NomStyle{} c'est pour un class="NomStyle"

et essaye : display:block; je crois pour ton conteneur

Cordialement Banban
-------------------------------------------------------------------------->
Developpement sous MAC 
Firefox - Safarie - Internet Explorer - Opéra
Mon site pro : www.wubart.net
Mon site perso : www.mafiacity.fr

@karamel · Answer

peut etre a voir aussi overflow: hidden ou  auto

banbanfr · Answer

overflow c est pour mettre un ascenseur ou pas
hidden => invisible
auto => il gerer automatiquement l'horizontal et la vertical comme pour la fenetre en général

Cordialement Banban
-------------------------------------------------------------------------->
Developpement sous MAC 
Firefox - Safarie - Internet Explorer - Opéra
Mon site pro : www.wubart.net
Mon site perso : www.mafiacity.fr

chabgyver · Answer

J'ai encore un peu progressé, le mieux, c'est que je vous laisse voir mes codes :

le HTML : http://balistiq.free.fr/0000/index.html

le CSS : http://balistiq.free.fr/0000/design.css

Je pense que c'est meix de mettre les liens vers les fichiers plutôt que de copier/coller les codes à chaque fois.
Bon, pour résumer, là, j'ai réussi non sans mal à faire un contener qui s'étdn bien mais voilà, il y a des bordures qui, elles, ne s'étendent pas, on m'a expliqué que compte tenu du fait d'avoir utilisé des div, ces dernières sont indépendantes les unes des autres contrairement à un tableau, ce qui occasionnent mes soucis. De plus, si vous allez sur le lien du fichier html, vous verrez un gros trou sous le menu, ce qui est disgracieux, j'ai pensé faire un fichier de 1px de côté et de le coller dans un div placé sous le menu avec un repeat-x mais rien n'y fait, ça chamboulle tout.

Bon, je vous tiens au courrant de la suite de mes (més)aventures.

Demande d'aide sur une découpe CSS

40 réponses

Votre réponse

Discussions similaires