CMSMS CSS
Sinds kort heb ik de CMS CMS Made Simple ondekt! Dit is precies wat ik nodig heb, simpel, niet te veel en snel. Alleen er is een gebrek aan lay-outs. Dit komt omdat het maken van een lay-out erg makkelijk is. Je hoeft alleen CSS & HTML te kennen. Dan zeg je natuurlijk "Maar Omar, maak dan je eigen lay-out". Ja, maar ik kan geen CSS :D. Ikzelf ben het nu wel aan het leren met een paar Engelse E-books. Hebben jullie misschien nog wat Nederlandse tutorials (ikzelf heb ook gezocht maar die van leren.nl zijn allemaal érg makkelijk).
Nu heb ik uiteraard zelf ook zitten klooien. Dit is mijn code:
Template:
Code (php)
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
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
{process_pagedata}
<!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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<!--Het maken van de header-->
<div id="header">
<h1>{sitename}</h1>
</div>
<!--Eind van maken header-->
<!--Het maken van het menu-->
<div id="menu">
{menu}
</div>
<!--Eind maken van menu-->
<!--Het maken van content-->
<div id="content">
{content}
</div>
<!--Eind maken van content-->
</body>
</html>
<!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" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
{metadata}
{stylesheet}
</head>
<body>
<!--Het maken van de header-->
<div id="header">
<h1>{sitename}</h1>
</div>
<!--Eind van maken header-->
<!--Het maken van het menu-->
<div id="menu">
{menu}
</div>
<!--Eind maken van menu-->
<!--Het maken van content-->
<div id="content">
{content}
</div>
<!--Eind maken van content-->
</body>
</html>
En natuurlijk de CSS:
Code (php)
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
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
body {
margin: 0px;
padding: 0px;
font-family: Georgia, Times, Serif;
color: black;
width: 600px;
}
#header {
background-color: #666;
color: white;
font-size: 28px;
}
#menu {
position: absolute;
top: 40px;
left: 5px;
width: 160px;
margin-left: 5px;
padding-top: 20px;
}
#content {
position: absolute;
top: 30px;
left: 180px;
padding-top: 50px;
margin: 0px 10px 0px 50px;
}
margin: 0px;
padding: 0px;
font-family: Georgia, Times, Serif;
color: black;
width: 600px;
}
#header {
background-color: #666;
color: white;
font-size: 28px;
}
#menu {
position: absolute;
top: 40px;
left: 5px;
width: 160px;
margin-left: 5px;
padding-top: 20px;
}
#content {
position: absolute;
top: 30px;
left: 180px;
padding-top: 50px;
margin: 0px 10px 0px 50px;
}
Het probleem is nu dat ik me menu krijg in een list. En niet normaal :@. Hoe kan dit nou?
Wie kan me helpen? Wie heeft ervaring met het maken van lay-outs of wie heeft ervaring met het maken van CMSMS lay-outs en zou mij wat willen leren, helpen en uitleggen via MSN, zodat ik het ook in de praktijk een beetje kan.
Alvast super bedankt
Omar
Code (php)
1
2
3
4
5
2
3
4
5
<!--Het maken van het menu-->
<div id="menu">
{menu}
</div>
<!--Eind maken van menu-->
<div id="menu">
{menu}
</div>
<!--Eind maken van menu-->
zie ik dat wij er zo niks aan kunnen doen, je moet effe kijken hoe die CMSMS het afhandeld.
Dat vertiale menu is.
Code (php)
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/********************
MENU
*********************/
#menu_vert {
padding-left: 0;
margin-left: 1em;
}
/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
padding-bottom: 0.5em;
}
/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/
/* first level links */
div#menu_vert a {
text-decoration:none; /* no underline for links */
display: block; /* IE has problems with this, fixed above */
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #18507C; /* this will be link color for all levels */
background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
min-height:1em; /* Fixes IE7 whitespace bug */
}
/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 90%;
padding: 0.5em 0.5em 0.5em 2.8em;
background-position: 1.5em center;
}
/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/dash.gif) no-repeat 2.8em center;
}
/* hover state for all links */
div#menu_vert a:hover {
background-color: ##FFFFFF;
}
div#menu_vert a.activeparent:hover {
background-color: #FFFFFF;
color: #18507C;
}
/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
background-color: #333333;
color: #fff;
}
div#menu_vert ul ul li a.activeparent {
background-position: 1.5em center;
background-color: transparent;
color: #18507C;
}
/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
background: none;
background-color: #333333;
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for <h3> */
margin: 0; /* as <h3> normally has some margin by default */
}
/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #000;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: none;
}
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}
/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding:2px 0 2px 0;
background-color: #000;
overflow:hidden !important;
line-height:1px !important;
font-size:1px; /* for ie */
}
div#menu_vert li.separator hr {
display: none; /* this is for accessibility */
}
MENU
*********************/
#menu_vert {
padding-left: 0;
margin-left: 1em;
}
/* third level has some padding to have it stand out */
div#menu_vert ul ul ul {
padding-bottom: 0.5em;
}
/** fix stupid ie bug with display:block; **/
* html #menu_vert li a { height: 1%; }
* html #menu_vert li hr { height: 1%; }
/** end fix **/
/* first level links */
div#menu_vert a {
text-decoration:none; /* no underline for links */
display: block; /* IE has problems with this, fixed above */
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #18507C; /* this will be link color for all levels */
background: url(images/cms/arrow-right.gif) no-repeat 0.5em center;
min-height:1em; /* Fixes IE7 whitespace bug */
}
/* next level links, more padding and smaller font */
div#menu_vert ul ul a {
font-size: 90%;
padding: 0.5em 0.5em 0.5em 2.8em;
background-position: 1.5em center;
}
/* third level links, more padding */
div#menu_vert ul ul ul a {
padding: 0.3em 0.5em 0.3em 4.3em;
background: url(images/cms/dash.gif) no-repeat 2.8em center;
}
/* hover state for all links */
div#menu_vert a:hover {
background-color: ##FFFFFF;
}
div#menu_vert a.activeparent:hover {
background-color: #FFFFFF;
color: #18507C;
}
/*
active parent, that is the first-level parent
of a child page that is the current page
*/
div#menu_vert li a.activeparent {
background: url(images/cms/arrow-down.gif) no-repeat 0.4em center;
background-color: #333333;
color: #fff;
}
div#menu_vert ul ul li a.activeparent {
background-position: 1.5em center;
background-color: transparent;
color: #18507C;
}
/*
current pages in the default Menu Manager
template are unclickable. This is for current page on first level
*/
div#menu_vert ul h3 {
background: none;
background-color: #333333;
display: block;
padding: 0.8em 0.5em 0.8em 1.5em; /* some air for it */
color: #fff; /* this will be link color for all levels */
font-size: 1em; /* instead of the normal font size for <h3> */
margin: 0; /* as <h3> normally has some margin by default */
}
/*
next level current pages, more padding,
smaller font and no background color or bottom border
*/
div#menu_vert ul ul h3 {
font-size: 90%;
padding: 0.3em 0.5em 0.3em 2.8em;
background-position: 1.4em center;
background-color: transparent;
border-bottom: none;
color: #000;
}
/* current page on third level, more padding */
div#menu_vert ul ul ul h3 {
padding: 0.3em 0.5em 0.3em 4.3em;
background: none;
}
/* section header */
div#menu_vert li.sectionheader {
border-right: none;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0;
background-color: #fff;
line-height: 1em;
margin: 0;
text-align:center;
}
/* separator */
div#menu_vert li.separator {
height: 1px !important;
margin-top: -1px;
margin-bottom: 0;
padding:2px 0 2px 0;
background-color: #000;
overflow:hidden !important;
line-height:1px !important;
font-size:1px; /* for ie */
}
div#menu_vert li.separator hr {
display: none; /* this is for accessibility */
}
Alleen in mijn CSS geef ik helemaal geen link naar dit bestand? Of is dat
Code (php)
1
2
2
{metadata}
{stylesheet}
{stylesheet}
De verticale layout css ziet er ingewikkeld uit. Hoe kan ik zorgen dat die list optie weg gaat en dat je gewoon zo het menu krijgt? Die list verwijderen uiteraard maar wat moet er voor in de plaats?
Home
About
Contact
Disclaimer
etc.
Alvast super bedankt
Omar