Page 1 of 1

search template

Posted: Tue Oct 11, 2005 8:20 pm
by Grover
Hello guys (&girls),

I look for a bigger sample template with css. At the moment I'm a little bit lost to build up a page. If it posible I will do it without table.
My goal is something like http://www.kreatives-chaos.com/index.php?seite=home.

How to handle the navigation and the top.

Maybe someone can send me a sampletemplate.

Thanks and best regards

Grover

Re: search template

Posted: Tue Oct 11, 2005 10:21 pm
by westis
Hi Grover & welcome to CMSMS!

Here's a simpliefied version of a template for the page you were referring to. You can always just look at the code of a page you like and put the {content} tag where you want the content and {bulletmenu} or whichever menu you are using where you want the menu. You can read more about templates in this thread: http://forum.cmsmadesimple.org/index.ph ... ml#msg9411

Let us know how you proceed! :-)

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<__html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>Title of your page here</TITLE>

{stylesheet}

</head>

</__body>

<!-- This is the header, where you can put a header image or text -->
<div id="header">
    <h1>Type page title here (like "kreatives-chaos.com")</h1>
</div>

<!-- This is section between the header and the content, where the breadcrumbs are placed -->
<div id="contentpre">
  <div id="breadcrumb">
    <p>{breadcrumbs}</p>
  </div>
</div>


<!-- This is where the left menu and the content goes -->
<div id="content">
<div id="content-border">


  <!-- This is for the left menu -->
  <div id="menue">
    <div id="menue-intern-box">
       {bulletmenu}
    </div>
  </div><!-- End of left menu div -->


<!-- Beginning of content //-->

{content}

{cms_module module="news" number="3" swaptitledate="true"}

<!-- End of content //-->

 
</div><!-- end of the section with left menu and content -->
</div>


<!-- The footer //-->
<div id="footer">
 Footer content here
</div>


<__body>
</__html>

And the CSS (stripped down, you need to style more things, like the bulletmenu, to look the way you want:

Code: Select all

* {
	margin:0;
	padding:0;
}

body {
	font-family:Verdana, Helvetica, Arial, sans-serif;
	font-size:100.01%;
}

p, ul, ol, td {
	font-size:80%;
}

#header {
	height:70px;
	background-color:#dad3c2;
	color:#000;
}

#header-pre {
	position:absolute;
	top:0px;
	left:0px;
	background-image:url(path/image.gif);
	background-repeat:no-repeat;
	width:150px;
	height:146px;
}


#header h1 {
	font-family:Georgia, Verdana, Helvetica, Arial, sans-serif;
	font-size:260%;
	font-style:italic;
	text-align:left;
	background-color:transparent;
	color:#000;
	padding:10px 0 0 170px;
	letter-spacing:2pt;
	white-space:nowrap;
}


#contentpre {
	height:30px;
	vertical-align:middle;
	background-color:#e2ddcf;
	color:#000;
	border-top:1px solid #866d4d;
	border-bottom:1px solid #866d4d;
}

#breadcrumb {
	margin-top:8px;
	margin-right:30px;
	text-align:right;
}

#breadcrumb p {
	font-size:70%;
}

#breadcrumb a {
	text-decoration:none;
	padding:0 5px;
	background-color:transparent;
	color:#600;
	border-bottom:1px solid #000;
}

#breadcrumb a:hover {
	background-color:transparent;
	color:#a00;
	border-bottom:1px solid #000;
}


#content {
	padding-bottom:20px;
	background-color:transparent;
	border-left:200px solid #ffffff;
	min-height:350px;
}

#content-border {
	border-left:1px solid #000;
	min-height:350px;
}


#menue {
	position:absolute;
	left:0px;
	top:160px;
	width:200px;
	color:inherit;
}

#content {
	line-height:140%;
	padding:10px 30px 10px 40px;
}


#footer {
	background-repeat:no-repeat;
	background-position:top right;
	height:70px;
	background-color:#dad3c2;
	color:#000;
	border-top:1px solid #866d4d;
	text-align:left;
	clear: both;
}

#footer p {
	font-size:70%;
	padding:30px 0 0 20px;
}

Hope that helps you a bit on the way.

Re: search template

Posted: Wed Oct 12, 2005 8:28 am
by Grover
Thanks a lot westis,
this is the right stuf to start with. Now it is more clear what to do. But.. I still have some questions.
If I move the menue to the right, dots are shown. Where can I change the look of the {bulletmenue}?
I whant my menue like at the samplepage. I try it with

Code: Select all

#menue-intern-box {
border-width:1 solid #000000;
}
no effect. I think also that this will make a box around all. Is it posible to split the menue?
Like:
x menue point 1
x menue point 2
x menue point 3


x menue point 4
x menue point 5


solved see http://forum.cmsmadesimple.org/index.ph ... 872.0.html

solved
Between

and

is no space. Means "|content" I like to have "|(10px)content"

#content-border {
padding-left:10px;
border-left:1px solid #000;
min-height:350px;
}


Thanks

Dirk