Modification Thème TUMBLR

Version imprimable

09/11/2012, 01h06
cooperz

Modification Thème TUMBLR

Bonjour tous le monde.
J'ai besoin de votre aide.
Donc voila, j'ai créé un TUMBLR il y a peu de temps pour parlé de mon acteur préféré, Paul Adelstein. Après avoir créé mon TUMBLR, j'ai cherché un thème qui pourrait correspondre à mes attentes, mais rien. J'ai mis donc en place un thème qui ressemble à peu près à celui que j'attends.
En faite ce qui ne me plaît pas au thème, c'est qu'il n'y à pas de place en haut de la page pour mettre une quelconque bannière et le menu est de coté, et moi j'aimerais l'avoir en haut.
Donc voila a quoi ressemble en ce moment mon TUMBLR
http://hpics.li/48409bd
http://paulhandsomeadelstein.tumblr.com/

Donc ce que j'aimerais c'est que le menu soit en haut, au-dessus des photos, et qu'il y est la place, au-dessus du menu donc, nécessaire pour mettre un bannière.
J'ai fait vite fait un croquis pour vous montrez ce que j'aimerais bien
Pour voir le croquis cliquez sur ce lien : http://hpics.li/4f70e95

Le code source du thème http://code.empreintesduweb.com/2649.html

J'espère que quelqu'un pourra m'aidé.
Merci de votre aide.
09/11/2012, 09h51
NoSmoking

Bonjour et bienvenue sur DVP.

La structure HTML employée n'est pas la bonne.

Va donc jeter un oeil à :fleche: La galerie CSS > Modèles de mise en page.
09/11/2012, 11h33
cooperz

D'accord excusez moi de mettre trompé de catégorie.
Je vais de ce pas allez voir à la catégorie CSS.

Merci de votre aide

EDIT : Je suis allez voir dans la catégorie CSS et je ne sais pas quoi faire ? Si quelqu'un pourrait m'aidé ça serait avec grand plaisir.

A partir du premier exemple
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <style> </style> <title>Trame page</title> </head> <body> <div id="bandeau">Ceci est le bandeau</div> <div id="contenu">Ceci est le contenu</div> <div id="pied_page">Ceci est le pied de page</div> </body> </html>
tu reportes les données de ta page actuelle dans les bonnes DIVs, tu disposes d'une structure de base.

09/11/2012, 13h22
cooperz

Désolé, mes je ne comprend rien. Je ne comprend rien au language informatique. Désolé.
09/11/2012, 14h14
Bovino

D'accord. Donc en définitive,

Citation:

J'espère que quelqu'un pourra m'aidé.

signifie surtout

Citation:

J'espère que quelqu'un pourra me le faire.

Malheureusement, ce n'est pas du tout la philosophie du forum, destiné à l'entraide, pas à faire le travail des autres...
09/11/2012, 19h04
cooperz

D'accord pas de soucis, ce n'est pas grave je vais essayé de le faire moi-même, mais bon c'est assez compliqué.
09/11/2012, 21h05
Bovino

Attention. Ne te trompes pas : je précise bien que nous ne sommes pas là pour coder à ta place, en revanche, lorsque tu rencontres un problème ou une difficulté, nous serons là pour t'aider à le surmonter !

Merci je crois que toutes aide sera la bienvenue.
En faite je pense que j'ai trouvé la parti du code à modifier pour le menu.
Je pense que c'est cela

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.sidebar {
	width: 125px;
	float: left;
	padding: 10px 10px 0 10px;
	margin: 0 0 0 25px;
	{block:IfSidebarBackground}
	background:#FFF;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-ms-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	-o-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	{/block:IfSidebarBackground}
	{block:IfNotSidebarBackground}
	color: {color:Sidebar Text};
	{/block:IfNotSidebarBackground}
	{block:IfFixedElements}
	position: fixed;
	{/block:IfFixedElements}
}
.sidebar img {
	max-width: 100%;
}
.sidebar h1 {
	margin: 0;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	/*{block:IfNotSidebarBackground}*/
	color: {color:Sidebar Text};
	/*{/block:IfNotSidebarBackground}*/
}
.sidebar #links {
	/*{block:IfSidebarBackground}*/
	border-top: 1px solid {color:Link};
	border-bottom: 1px solid {color:Link};
	/*{/block:IfSidebarBackground}*/
	/*{block:IfNotSidebarBackground}*/
	border-top: 1px solid {color:Sidebar Text};
	border-bottom: 1px solid {color:Sidebar Text};
	/*{/block:IfNotSidebarBackground}*/
	margin-bottom: 15px;
}
.sidebar h2 {
	margin: 0;
	font-size: 12px;
	text-transform: uppercase;
	padding: 5px 0;
	{block:IfSidebarBackground}
	border-top: 1px solid {color:Link};
	border-bottom: 1px solid {color:Link};
	color: {color:Link};
	{/block:IfSidebarBackground}
	{block:IfNotSidebarBackground}
	border-top:1px solid {color:Sidebar Text};
	border-bottom:1px solid {color:Sidebar Text};
	color: {color:Sidebar Text};
	{/block:IfNotSidebarBackground}
	-webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.sidebar h2 a, .sidebar h2 a:hover, .sidebar h2 a:active, .sidebar h2 a:visited {
	{block:IfSidebarBackground}
	color: {color:Link};
	{/block:IfSidebarBackground}
	{block:IfNotSidebarBackground}
	color: {color:Sidebar Text};
	{/block:IfNotSidebarBackground}
	text-decoration:none;
}
.sidebar h2:hover {
	padding-left: 5px;
	border-right: 4px solid {color:Link};
	-webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}
.sidebar #field {
	background: #FFF;
	width: 115px;
	padding: 5px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	outline:none;

Mais c'est là que tous ce complique je ne sais pas comment le mettre au-dessus des images et comment les mettre un après l'autre ( Menu 1 | Menu 2 | ...)

Et pour le header je me suis aidé de ceci : http://www.tumblr.com/docs/fr/custom_themes+
Sur ce site il écrit qu'il faut mettre le code suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
    <head>
        <!-- DEFAULT IMAGE -->
        <meta name="image:Background" content="http://static.tumblr.com/..."/>
        <meta name="image:Header" content=""/>
 
        <style type="text/css">
            body {
                background: #2D567C url('{image:Background}');
            }
        </style>
    </head>
    <body>
        {block:IfHeaderImage}<img src="{image:Header}"/>{/block:IfHeaderImage}
        {block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}
    </body>
</html>

Et je ne sais pas ou le mettre, car quand je mets le code mon header s'affiche, mais tous la page après est écrit avec le code, il n'y a plus que le header et tous pleins de code.