# [SOLVED] Template



## Acer2000 (Sep 17, 2006)

Hello to all,

I have a question: What do I have to do to make the dark blue color at the top of the website (Where fashion is written) go white? I know I can substitute the picture, but how can I change the color?

This is the website I mean:Fashion Magazine | Fashion - Free Website Template- TemplatesCreme.com

I substituted the picture with my logo (simple text and white background) but it still shows dark blue during the first second when it is loaded. 

Will greatly appreciate your advice as always. :wave:


----------



## kilonox (Dec 3, 2010)

It is purely text for where it says fashion. You need to edit the CSS and have you image up in the header and float it to the left


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi and thanks for replying.

Which part of the CSS do you think is rendering it dark blue during the first seconds?


----------



## kilonox (Dec 3, 2010)

That is caused by the image loading as a background (because HTML is ran line by line, the CSS is processed first) and then your image or text.


----------



## Laxer (Dec 28, 2010)

*Re: Template*



kilonox said:


> That is caused by the image loading as a background (because HTML is ran line by line, the CSS is processed first) and then your image or text.


kilonox is correct, to fix this look at the source of the page and find the id of the div where your picture is located, probably something like "header"

from there go to the css and search for whatever you found above. for my example i would search for "#header"

once you are their look for an attribute something along the lines of background or background-color.

replace the color (probably hexdec) with #FFFFFF;


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Thank you very much guys. The color issue has been successfully resolved.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi again,

I am trying to figure out how to create an outside border similar to the red border found on Time magazine: Breaking News, Analysis, Politics, Blogs, News Photos, Video, Tech Reviews - TIME.com

for the template I posted earlier on this thread (please see fashion template)

I am sure it is not a table? is it an html or a css thing?

I will appreciate your advice. Thank you.


----------



## Laxer (Dec 28, 2010)

*Re: Template*


```
<div id="wrapper" style="background-color:#ff0000; width:700px;">
<div id="whitebox" style="margin:40px auto 40px auto; background-color:#ffffff; width:680px;">CONTENT HERE</div>
</div>
```
It would be something like above, with an outside wrapper that is red, then an inside div that has the white background.

please note: everything in the style="" could be moved to the css file.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi Laxer,

Thank you for your help.

Do mean I copy only this line into the CSS sheet: style="margin:40px auto 40px auto; background-color:#ffffff; width:680px;">

?


----------



## Laxer (Dec 28, 2010)

*Re: Template*

your taking that from the div with id="whitebox"

so your css would look like

#whitebox{
margin:40px auto 40px auto;
background-color:#ffffff;
width:680px;
}

hope that helped


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Thank you. I inserted it into the css. I also inserted the entire code into the HTML. 

Something did come out... but not the way it is supposed to. I am sure I am not doing it correctly, 

Basically, what I would like to do is have a thin border left and right around this template: Fashion Magazine | Fashion - Free Website Template- TemplatesCreme.com


----------



## Laxer (Dec 28, 2010)

*Re: Template*

Meh, you could do it with all css as well.

I will need to see the source to be able to give you the exact code.

do you have a link to your site?


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Not yet. I am working offline


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

This is the HTML Code: 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fasion website layout - free css template</title>
<meta name="keywords" content="fashion website layout, free css template" />
<meta name="description" content="Fashion Template - free css template provided by templatemo.com" />
<!-- Free CSS Template is designed by TemplateMo.com -->
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="templatemo_container">

<div id="templatemo_top_panel">
<div id="templatemo_header">
<div id="site_title">FASHION</div>
<div id="slogan">Your tagline goes here</div>
</div>

</div> <!-- end of top panel -->

<div id="templatemo_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="subpage.html">Events</a></li>
<li><a href="subpage.html">Gallery</a></li>
<li><a href="subpage.html">Models</a></li> 
<li><a href="subpage.html">Bars</a></li> 
<li><a href="#">Company</a></li> 
<li><a href="#" class="lastmenu">Contact</a></li> 
</ul> 

<form method="get" action="#">
<input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search" value="GO" />
</form>
</div> <!-- end of menu -->

<div id="templatemo_content">

<div id="templatemo_content_left">
<div class="tempaltemo_content_left_section_01">
<div class="section_01_two_col">
<a href="#"><img src="images/templatemo_image_01.jpg" alt="templatemo" /></a> </div>
<div class="section_01_two_col">
<div class="section_01_box">
<h4>Latest Fashion Style</h4>
<img src="images/templatemo_image_02.jpg" alt="templatemo" />
<a class="section_01_box_title" href="#">Free Website Template</a><br />
This is a <a href="http://www.templatemo.com" target="_parent">FREE CSS template</a> provided by TemplateMo website. You may apply this layout for any of your websites. </div>

<div class="section_01_box">
<h4>Fashion Holidays</h4>
<img src="images/templatemo_image_03.jpg" alt="templatemo" />
<a class="section_01_box_title" href="#">Donec mollis aliquet</a><br />
Hello friend, Credit goes to <a href="http://www.publicdomainpictures.net" target="_blank"><strong>PublicDomainPictures</strong></a> for some photos used in this layout. Special Thanks to <a href="http://www.flickr.com/khumpong" target="_blank"><strong>s.OliverImages</strong></a> for fashion photos.</div>
</div>
<div class="cleaner"> </div>
</div> <!-- end of content left section 01 -->

<div class="cleaner_with_height"> </div>

<div class="tempaltemo_content_left_section_02">
<div class="section_02_box">
<h3>Fashion Lovers</h3>
<div class="section_02_box_content">
<a href="#"><img src="images/templatemo_image_04.jpg" alt="image" /></a>
<a class="section_02_box_content_title" href="#">Lorem ipsum nunc</a><br />
<a href="#">Maecenas adipiscing vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. </a>
<ul>
<li>Lorem ipsum nunc quis sem dolor sit amet.</li>
<li>Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum.</li>
</ul>
</div>
</div>
<div class="section_02_box">
<h3>Beauty</h3>
<div class="section_02_box_content">
<a href="#"><img src="images/templatemo_image_06.jpg" alt="image" /></a>
<a class="section_02_box_content_title" href="#">Nulla sed leo sed</a><br />
<a href="#">Nulla sed leo sed sapien sagittis aliquet. Vivamus vestibulum condimentum massa.</a>
<ul>
<li>Donec a purus vel purus sollicitudin placerat.</li>
<li>Sed pretium, neque hendrerit rhoncus accumsan.</li>
</ul>
</div>
</div>
</div> <!-- end of content leeft section 01 -->

<div class="cleaner_with_height"> </div>

<div class="tempaltemo_content_left_section_02">
<div class="section_02_box">
<h3>Fashion Events</h3>
<div class="section_02_box_content">
<a href="#"><img src="images/templatemo_image_07.jpg" alt="image" /></a>
<a class="section_02_box_content_title" href="#">Sed pretium neque</a><br />
<a href="#">Sed pretium, neque hendrerit rhoncus accumsan, nibh tellus pharetra neque, quis rutrum elit justo vitae.</a>
<ul>
<li>Lorem ipsum nunc quis sem dolor sit amet.</li>
<li>Curabitur eleifend congue leo.</li>
</ul>
</div>
</div>
<div class="section_02_box">
<h3>Life Style</h3>
<div class="section_02_box_content">
<a href="#"><img src="images/templatemo_image_08.jpg" alt="image" /></a>
<a class="section_02_box_content_title" href="#">Donec a purus vel</a><br />
<a href="#">Donec a purus vel purus sollicitudin placerat. Nunc at sem. Sed pellentesque placerat augue.</a>
<ul>
<li>Nunc at sem. Sed pellentesque placerat.</li>
<li>Mauris pede nisl, placerat nec, lobortis vitae.</li>
</ul>
</div>
</div>
</div> <!-- end of content leeft section 01 --> 

<div class="cleaner_with_height"> </div>

<div class="tempaltemo_content_left_section_03">
<h1>Fashion Events</h1>
<div class="section_03_box">
<h4>Swim Wears</h4>
<a href="#"><img src="images/templatemo_image_10.jpg" alt="templatemo" /></a>
<p>
<a href="#">Lorem ipsum nunc quis sem dolor sit amet.</a>
</p>
</div>
<div class="section_03_box">
<h4>Fashion Week</h4>
<a href="#"><img src="images/templatemo_image_09.jpg" alt="templatemo" /></a>
<p>
<a href="#">Curabitur eleifend congue leo.</a>
</p>
</div>
<div class="section_03_box">
<h4>Musical Event</h4>
<a href="#"><img src="images/templatemo_image_11.jpg" alt="templatemo" /></a>
<p>
<a href="#">Sed pellentesque placerat augue. </a> </p>
</div>
<div class="section_03_box">
<h4>Summer Style</h4>
<a href="#"><img src="images/templatemo_image_12.jpg" alt="templatemo" /></a>
<p>
<a href="#">Donec a purus vel purus sollicitudin placerat. </a> </p>
</div>
<div class="cleaner"> </div>

</div>
</div> <!-- end of content left -->

<div id="templatemo_content_right">
<div class="content_right_section_01">
<center>advertisement</center>
<a href="http://www.flashmo.com" target="_parent"><img src="images/templatemo_image_13.jpg" alt="free flash website" /></a> 
</div>

<div class="content_right_section_01">
<h2>Subscribe Newsletter</h2>
<form method="get" action="#">
<input type="checkbox" name="maillist" /> Daily fashion news
<p>Lorem ipsum nunc quis sem dolor sit amet, consectetuer adipiscing elit</p>
<input type="checkbox" name="maillist" /> Weekly fashion news
<p>Nunc at sem. Sed pellentesque placerat augue.</p>
<input name="email_address" type="text" id="email_addremss" value="email address..." /><input type="submit" name="Submit" value="Subscribe" />
</form>
</div>

<div class="content_right_section_01">
<h2>Fashion Blog</h2>
<div class="blog_box">
<h5><a href="#">Lorem ipsum nunc quis sem</a></h5>
Posted by <a href="#"><span>Maecenas Magazine</span></a> in <a href="#"><span>Donec mollis</span></a><br />
Dec 28, 2024 2:24 pm
</div>
<div class="blog_box">
<h5><a href="#">Donec mollis aliquet ligula</a></h5>
Posted by <a href="#"><span>Lorem ipsm Magazine</span></a> in <a href="#"><span>Maecenas adicing</span></a><br />
Dec 24, 2024 11:50 pm
</div>
<div class="blog_box">
<h5><a href="#">Sed pellentesque placerat augue</a></h5>
Posted by <a href="#"><span>Curabitur eleifend Magazine</span></a> in <a href="#"><span>Duis dolor</span></a><br />
Dec 21, 2024 8:16 pm
</div>
</div>

<div class="content_right_section_01">
<h2>Quick Links</h2>
<div class="sister_links_box">
<h5>Designers</h5>
<a href="#">Lorem ipsum nunc</a><br /> 
<a href="#">Donec mollis aliquet</a><br />
<a href="#">Maecenas adipiscing </a><br />
<a href="#">Nunc quis sem nec</a><br /> 
<a href="#">Duis mollis aliquet</a><br />
</div>
<div class="sister_links_box">
<h5>Models</h5>
<a href="#">Cras nisl eros</a><br /> 
<a href="#">Sed pellentesque</a><br />
<a href="#">Donec a purus vel</a><br />
<a href="#">Sed pretium</a><br /> 
<a href="#">Nulla sed leo sed</a><br />
</div>
<div class="cleaner"> </div>
</div>

<div class="content_right_section_01">
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a> 

</div>
</div> <!-- end of content right --> 

<div class="cleaner"> </div>

</div> <!-- end of content -->

<div id="templatemo_footer">
<a href="#">Home</a> | <a href="#">Events</a> | <a href="#">Gallery</a> | <a href="#">Bars</a> | <a href="#">Company</a> | <a href="#">Contact</a><br />
Copyright © 2024 <a href="#"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com" target="_parent">Free Web Template</a><br /><br />
<p>Lorem ipsum nunc quis sem dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis mollis aliquet ligula. Maecenas adipiscing elementum vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. </p>
</div> <!-- end of footer -->
<!-- Designed by w w w . t e m p l a t e m o . c o m --> 
</div> <!-- end of container -->
</body>
</html>


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

And this is the CSS Code:


/*
CSS Credit: Free CSS Templates
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333333;
}

a:link, a:visited { color: #333333; text-decoration: none;} 
a:active, a:hover { color: #333333; text-decoration: underline;}

h1 {
margin: 0 0 5px 0;
padding: 10px 0 10px 10px;
font-size: 24px;
font-weight: normal;
color: #ffffff;
background: #26405b;
}

h2 {
margin: 0 0 10px 0;
padding: 5px 0 5px 10px;
font-size: 16px;
color: #ffffff;
background: #26405b;
}


h3 {
letter-spacing: 5px;
margin: 0;
padding: 3px 0 3px 10px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
background: #26405b;
}

h4 {
margin: 0 0 10px 0;
padding: 0;
font-size: 16px;
font-weight: bold;
color: #333;
}

h5 {
margin: 0 0 5px 0;
padding: 0;
font-size: 12px;
font-weight: bold;
color: #195fff;
}

p{
margin: 0 0 15px 0;
}

img {
border: none;
margin: 0;
}

.cleaner {
clear: both;
width: 100%;
height: 1px;
}

.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
}

#templatemo_container {
margin: auto;
width: 960px;
}

/* top panel */
#templatemo_top_panel {
width: 960px;
height: 120px;
margin: 0;
padding: 0;
background: #003 url(images/templatemo_top_panel_background.jpg) no-repeat;
}

#templatemo_header {
float: left;
display: inline;
margin: 40px 0 0 30px;
}

#templatemo_header #site_title{
padding: 10px 0 8px 0;
margin: 0;
color: #FFF;
font-size: 50px;
font-weight: bold;
background: none;
}

#templatemo_header #slogan{
padding-left: 3px;
margin: 0;
color: #CCC;
font-size: 12px;
font-weight: bold;
}

.templatemo_ad_468x60 {
float: right;
color: #FFFFFF;
margin: 40px 15px 0 0;
width: 468px;
height: 60px;
}

.templatemo_ad_468x60 img{
border: none;
}
/* end of top panel */

/*------------- Menu ------------------*/
#templatemo_menu {
width: 960px;
height: 35px;
background: #000;
border-bottom: 1px solid #333;
}

#templatemo_menu ul {
float: left;
width: 750px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#templatemo_menu ul li{
display: inline;
}

#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#templatemo_menu ul li .lastmenu{
border-right: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #b3d7fc;
}

#templatemo_menu form{
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;	
}

#templatemo_menu form input{
width: 120px;
color: #FFFFFF;
background: #000;
height: 20px;
border: 1px solid #666;
}

#templatemo_menu form .button{
border: none;
background: none;
color: #FFF;
font-weight: bold;
cursor: pointer;
width: 40px;
}
/* ----------------- end of menu----------------*/

#templatemo_content {
width: 960px;
margin-bottom: 25px;
}

#templatemo_content #templatemo_content_left {
float:left;
width: 640px;
padding: 0 10px 0 0;	
border-right: 1px solid #CCCCCC;
}

#templatemo_content #templatemo_content_right {
float: right;
width: 300px;
}

#templatemo_content_left .tempaltemo_content_left_section_01 {
clear: both;
width: 640px;
}

.tempaltemo_content_left_section_01 .section_01_two_col {
float: left;
width: 300px;
margin: 0 20px 0 0;
}

.section_01_two_col .section_01_box {
clear: both;
width: 100%;
height: 149px;
padding: 15px 0 0 0;
border-bottom: 1px solid #CCCCCC;
}
.section_01_box .section_01_box_title{
font-weight: bold;
font-size: 14px;
}

.section_01_box img{
float: left;
margin: 3px 15px 0 0;
}

#templatemo_content_left .tempaltemo_content_left_section_02{
clear: both;
width: 640px;
}

.tempaltemo_content_left_section_02 .section_02_box {
float: left;
width: 298px;
border: 1px solid #CCCCCC;
margin: 0 20px 0 0px;
}

.section_02_box .section_02_box_content{
float: left;
padding: 15px;
}

.section_02_box_content .section_02_box_content_title {
font-weight: bold;
}

.section_02_box_content ul{
clear: both;
list-style: none;
margin: 0;
padding: 0;
}

.section_02_box_content ul li{
padding: 0 0 5px 15px;
margin: 0;	
background: url(images/templatemo_listicon.gif) top left no-repeat;
}

.section_02_box img {
float: left;
margin: 3px 15px 0 0;
}

#templatemo_content_left .tempaltemo_content_left_section_03 {
clear: both;
width: 640px;
background: #d2d6db;
}

.tempaltemo_content_left_section_03 .section_03_box {
float: left;
width: 140px;
margin: 0 10px;
}

#templatemo_content_right .content_right_section_01 {
width: 300px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #CCCCCC;
}

.content_right_section_01 .blog_box {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #dddddd;
}

.content_right_section_01 .blog_box h5 a{
color: #195fff;	
}

.content_right_section_01 .blog_box span{
color: #ff366f;
}


.content_right_section_01 .sister_links_box {
float: left;
width: 140px;
padding-right: 10px;
}

/* ----- Footer ----- */
#templatemo_footer {
clear: both;
padding: 10px 25px;
width: 910px;
text-align: center;
background: #DDD;
text-align: center;
font-size: 11px;
color: #666;
}

#templatemo_footer p{
margin-bottom: 10px;
padding: 0;
text-align: justify;
}

#templatemo_footer a{
font-weight: normal;
}

/* ----- End of Footer ----- */


----------



## Laxer (Dec 28, 2010)

*Re: Template*

add


```
#templatemo_container{
border-top:5px solid #ff0000;
border-left:2px solid #ff0000;
border-right:2px solid #ff0000;
border-bottom:5px solid #ff0000;
}
```
to the bottom of the css file, or add the borders into the correct section.

does this give you what you want?


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

I will try it out and let you know.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Thank you very very much. It worked indeed. :wave:


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

So if I understood it correctly, the CSS code you gave, was able to make the border?


----------



## Laxer (Dec 28, 2010)

*Re: Template*



Acer2000 said:


> So if I understood it correctly, the CSS code you gave, was able to make the border?


yes that is correct.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

So...basically this means that one can create an entire website using CSS codes and only the content i.e. text and pictures can be added?

So if I wish to create a box... all I have to do is just create the CSS code for the box and the CSS code will determine its size, color, etc... and then I only have to fill it with text and pictures?


----------



## kilonox (Dec 3, 2010)

Yes, assuming that you pad everything correctly


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Wow.... that's cool. Thank you for your response kilonox. 

I have to learn more about padding and what is meant by it.


----------



## kilonox (Dec 3, 2010)

Padding is the distance between the edge of a area and it's content. This allows for better looking sites and if used correctly can boost speed of a site.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Thank you very much for the clear explanation. I appreciate it. :wave:


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi Guys,

I was just wondering if there is a way to obtain a "standard" code for a box.
A code that will simply allow me to color it, resize etc. is this possible in CSS?

I learned recently that the CSS code for doing this requires a code for the border, padding, color, size and font, (I am not sure if I missed something) yet on one website that explains CSS, I can still read that they are making reference to tables and from what I learned, tables are now frowned upon. 

Here is an example of a site that has boxes with grey borders (Please scroll down to the page to see the four grey boxes where text and pictures are inserted): Read the latest on Details about Mark Ruffalo, Patrick Schwarzenegger, our new fitness and health section, The Body, plus additional style, fashion, grooming, sex and culture stories: Details

I would like to know what CSS code is necessary to create such boxes. 

Thanks.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

This is the website that I am using as a reference: CSS Tutorial - Border


----------



## Laxer (Dec 28, 2010)

*Re: Template*

do something like

<div id="box"><p>Text</p></div>

then for the css have something like:

#box{
width:100px;
min-height:100px;
background-color:#ff0000;
color:#000000;
border:1px solid black;
padding:5px;
margin:10px auto 10px auto;
text-align:justify;
font-size:12px;
}

something like that, i just typed it up so don't quote me on it


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

 It didn't work for some reason... I just inserted the CSS code into the CSS document...I am not sure if there is a certain place where i should insert it. As for the div...i am not why this is necessary if a website design is designed with css.


----------



## Laxer (Dec 28, 2010)

*Re: Template*

if you dont have an attached css file you insert it generally in the head inside
<style> tags


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi Laxer, It is the same CSS file that I have attached in this thread from the templatemo. 
I am trying to attach the CSS code you supplied inside the CSS stylesheet, but it is not working for some reason.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

/*
CSS Credit: Free CSS Templates
*/

body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #333333;
}

a:link, a:visited { color: #333333; text-decoration: none;} 
a:active, a:hover { color: #333333; text-decoration: underline;}

h1 {
margin: 0 0 5px 0;
padding: 10px 0 10px 10px;
font-size: 24px;
font-weight: normal;
color: #ffffff;
background: #26405b;
}

h2 {
margin: 0 0 10px 0;
padding: 5px 0 5px 10px;
font-size: 16px;
color: #ffffff;
background: #26405b;
}


h3 {
letter-spacing: 5px;
margin: 0;
padding: 3px 0 3px 10px;
font-size: 16px;
font-weight: bold;
color: #ffffff;
background: #26405b;
}

h4 {
margin: 0 0 10px 0;
padding: 0;
font-size: 16px;
font-weight: bold;
color: #333;
}

h5 {
margin: 0 0 5px 0;
padding: 0;
font-size: 12px;
font-weight: bold;
color: #195fff;
}

p{
margin: 0 0 15px 0;
}

img {
border: none;
margin: 0;
}

.cleaner {
clear: both;
width: 100%;
height: 1px;
}

.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
}

#templatemo_container {
margin: auto;
width: 960px;
}

/* top panel */
#templatemo_top_panel {
width: 960px;
height: 120px;
margin: 0;
padding: 0;
background: #003 url(images/templatemo_top_panel_background.jpg) no-repeat;
}

#templatemo_header {
float: left;
display: inline;
margin: 40px 0 0 30px;
}

#templatemo_header #site_title{
padding: 10px 0 8px 0;
margin: 0;
color: #FFF;
font-size: 50px;
font-weight: bold;
background: none;
}

#templatemo_header #slogan{
padding-left: 3px;
margin: 0;
color: #CCC;
font-size: 12px;
font-weight: bold;
}

.templatemo_ad_468x60 {
float: right;
color: #FFFFFF;
margin: 40px 15px 0 0;
width: 468px;
height: 60px;
}

.templatemo_ad_468x60 img{
border: none;
}
/* end of top panel */

/*------------- Menu ------------------*/
#templatemo_menu {
width: 960px;
height: 35px;
background: #000;
border-bottom: 1px solid #333;
}

#templatemo_menu ul {
float: left;
width: 750px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#templatemo_menu ul li{
display: inline;
}

#templatemo_menu ul li a{
float: left;
padding: 0 25px;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#templatemo_menu ul li .lastmenu{
border-right: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current{
color: #b3d7fc;
}

#templatemo_menu form{
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;	
}

#templatemo_menu form input{
width: 120px;
color: #FFFFFF;
background: #000;
height: 20px;
border: 1px solid #666;
}

#templatemo_menu form .button{
border: none;
background: none;
color: #FFF;
font-weight: bold;
cursor: pointer;
width: 40px;
}
/* ----------------- end of menu----------------*/

#templatemo_content {
width: 960px;
margin-bottom: 25px;
}

#templatemo_content #templatemo_content_left {
float:left;
width: 640px;
padding: 0 10px 0 0;	
border-right: 1px solid #CCCCCC;
}

#templatemo_content #templatemo_content_right {
float: right;
width: 300px;
}

#templatemo_content_left .tempaltemo_content_left_section_01 {
clear: both;
width: 640px;
}

.tempaltemo_content_left_section_01 .section_01_two_col {
float: left;
width: 300px;
margin: 0 20px 0 0;
}

.section_01_two_col .section_01_box {
clear: both;
width: 100%;
height: 149px;
padding: 15px 0 0 0;
border-bottom: 1px solid #CCCCCC;
}
.section_01_box .section_01_box_title{
font-weight: bold;
font-size: 14px;
}

.section_01_box img{
float: left;
margin: 3px 15px 0 0;
}

#templatemo_content_left .tempaltemo_content_left_section_02{
clear: both;
width: 640px;
}

.tempaltemo_content_left_section_02 .section_02_box {
float: left;
width: 298px;
border: 1px solid #CCCCCC;
margin: 0 20px 0 0px;
}

.section_02_box .section_02_box_content{
float: left;
padding: 15px;
}

.section_02_box_content .section_02_box_content_title {
font-weight: bold;
}

.section_02_box_content ul{
clear: both;
list-style: none;
margin: 0;
padding: 0;
}

.section_02_box_content ul li{
padding: 0 0 5px 15px;
margin: 0;	
background: url(images/templatemo_listicon.gif) top left no-repeat;
}

.section_02_box img {
float: left;
margin: 3px 15px 0 0;
}

#templatemo_content_left .tempaltemo_content_left_section_03 {
clear: both;
width: 640px;
background: #d2d6db;
}

.tempaltemo_content_left_section_03 .section_03_box {
float: left;
width: 140px;
margin: 0 10px;
}

#templatemo_content_right .content_right_section_01 {
width: 300px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #CCCCCC;
}

.content_right_section_01 .blog_box {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #dddddd;
}

.content_right_section_01 .blog_box h5 a{
color: #195fff;	
}

.content_right_section_01 .blog_box span{
color: #ff366f;
}


.content_right_section_01 .sister_links_box {
float: left;
width: 140px;
padding-right: 10px;
}

/* ----- Footer ----- */
#templatemo_footer {
clear: both;
padding: 10px 25px;
width: 910px;
text-align: center;
background: #DDD;
text-align: center;
font-size: 11px;
color: #666;
}

#templatemo_footer p{
margin-bottom: 10px;
padding: 0;
text-align: justify;
}

#templatemo_footer a{
font-weight: normal;
}

/* ----- End of Footer ----- */


----------



## Laxer (Dec 28, 2010)

*Re: Template*

Sorry i miss understood your question.

try this:


```
<h3>The latest in <i>Detail</i></h3>
<div class="newsbox"><p>Text</p></div>
<div class="newsbox"><p>Text</p></div>
<div class="newsbox clear"><p>Text</p></div>
<div class="newsbox"><p>Text</p></div>
```
Here is the respective css:

```
.newsbox{
	background:#ffffff;
	width:200px;
	height:100px;
	float:left;
	padding:5px 10px 5px 10px;
	margin-left:10px;
	margin-top:10px;
	border:1px solid #999999;
}

.clear{
	clear:both;	
}
```
Please note this is just an example, you can edit to your liking.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Laxer, I am grateful for your help. I will write to you as soon as I have worked it out. Thank you, my friend. Have an excellent weekend.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hello all,

The following code is showing to the left side of my website when I embed it. I would like to have it at the center. Any idea?

<!-- Search Ask Jeeves UK -->
<form method="get" action="http://uk.ask.com/web">
<table cellpadding="3" cellspacing="0" border="0"><tr>
<td><a href="http://uk.ask.com/">
<img src="http://sp.uk.ask.com/i/logos/uk_new_logo.png"
border="0" alt="Ask Jeeves UK" align="absmiddle"></a></td>
<td><input id="q" name="q" type="text" size="25" maxlength="255" value="" /></td>
<td><input type="submit" value="Search" /></td>
</tr></table>
<input type="hidden" id="qsrc" name="qsrc" value="2300" />
</form>
<!-- Search Ask Jeeves UK -->


----------



## Laxer (Dec 28, 2010)

*Re: Template*

there are a few things you could try....

1: Center the table using css:

```
<!-- Search Ask Jeeves UK -->
<form method="get" action="http://uk.ask.com/web">
<table cellpadding="3" cellspacing="0" border="0" style="margin:auto auto;"><tr>
<td><a href="http://uk.ask.com/">
<img src="http://sp.uk.ask.com/i/logos/uk_new_logo.png"
border="0" alt="Ask Jeeves UK" align="absmiddle"></a></td>
<td><input id="q" name="q" type="text" size="25" maxlength="255" value="" /></td>
<td><input type="submit" value="Search" /></td>
</tr></table>
<input type="hidden" id="qsrc" name="qsrc" value="2300" />
</form>
<!-- Search Ask Jeeves UK -->
```
2. Align the table using html:

```
<!-- Search Ask Jeeves UK -->
<form method="get" action="http://uk.ask.com/web">
<table cellpadding="3" cellspacing="0" border="0" align="center"><tr>
<td><a href="http://uk.ask.com/">
<img src="http://sp.uk.ask.com/i/logos/uk_new_logo.png"
border="0" alt="Ask Jeeves UK" align="absmiddle"></a></td>
<td><input id="q" name="q" type="text" size="25" maxlength="255" value="" /></td>
<td><input type="submit" value="Search" /></td>
</tr></table>
<input type="hidden" id="qsrc" name="qsrc" value="2300" />
</form>
<!-- Search Ask Jeeves UK -->
```
If that does not work you can try the same code but apply it to the <tr>.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Thank you very much. ray:

It worked. :wave:


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi again,

I would like to be able to add links to useful external sites on my forthcoming webpage. I find that the design that shows at the very bottom of the following website very simple and useful: Nachrichten - Aktuelle News, Hintergründe und bildstarke Reportagen | STERN.DE

Please see where it says Rubriken, Tools, Ratgeber, Top Themen etc. at the very bottom.

I would like to apply the idea to the template that I am working on. 

Your help greatly appreciated as always. Thank you ray:
:wave:


----------



## kilonox (Dec 3, 2010)

*Re: Template*

That can be achieved using some CSS and Tables. They did it using strictly CSS and had a bunch of DIVs


----------



## Laxer (Dec 28, 2010)

*Re: Template*



kilonox said:


> That can be achieved using some CSS and Tables. They did it using strictly CSS and had a bunch of DIVs


Weird, i would do it with divs 

Hopefully this will work for you as i am coding on the fly! 

html:

```
<div class="link-holder">
<h3>Links!</h3>
<p><a href="#">Link1</a></p>
<p><a href="#">Link2</a></p>
<p><a href="#">Link3</a></p>
</div>
<div class="link-holder">
<h3>Links2!</h3>
<p><a href="#">Link1</a></p>
<p><a href="#">Link2</a></p>
<p><a href="#">Link3</a></p>
</div>
```
CSS:

```
.link-holder{
border:1px solid #000;
width:150px;
float:left;
padding:5px;
margin-left:5px;
}
.link-holder h3{
width:100%;
text-align:center;
border-bottom:1px solid #000;
}
.link-holder p{
padding:0px;
margin:0px;
}
```
Hopefully my minute of button mashing gives you an idea


----------



## kilonox (Dec 3, 2010)

Like I said, there is two ways. I like to provide as many ways as I can think of. Everyone is better at some things verses others. So I just gave another possibility. I too would have do it with divs.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi Laxer,

It came out differently...it has blue above each column and no thin grey lines that divide each column from the other...apart from that...it was not centered...

I am attaching a snapshot of the footer... they also created a nice thin grey line above it... 

Your help greatly appreciated. Thank you :wave:


----------



## Laxer (Dec 28, 2010)

*Re: Template*

to achieve what they have you would just change the css up a bit and add a wrapper....

My code was just to give you an idea....

If you are unable to create it i can help after school today...


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Dear Laxer,

I understand. Thank you very much. Yes, please after school... if you can help me out that would be great and most appreciated... I am having an issue trying to create this code...

Again, many thanks my friend. ray:
:wave:


----------



## Laxer (Dec 28, 2010)

*Re: Template*

I won't be able to assist until tonight probably.

Wen't out and bought a laptop for college next year and need to set it up and configure it to my nerd likings


----------



## kilonox (Dec 3, 2010)

*Re: Template*

What is it that you need help with?


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Any time, Laxer... have fun with your new laptop :grin:

Kilonox, thank you for asking.... I am trying to create a code that will give me a result similar to the snapshot that I have attached in this thread...

Thanks :wave:


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Kilonox, any idea? Thanks


----------



## kilonox (Dec 3, 2010)

*Re: Template*

Sorry, I had work. I have worked on it a bit. I'll finish it up and send it.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

ray: :wave:


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hi Laxer,

How much would you ask in $$$ for doing this work on the website?

:idea:


----------



## kilonox (Dec 3, 2010)

*Re: Template*

Sorry man, I have been real busy this past week, and have not had a lot of time to do much of anything much less sit down and do this. I am doing right now though, so its all good.


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

hey no problem dude... :smile:


----------



## Laxer (Dec 28, 2010)

*Re: Template*

Sorry Exams + Graduation hit my like a tsunami!

It appears Zach has taken on the task. If he is unable to achieve what you want i will take a second look at it


----------



## Acer2000 (Sep 17, 2006)

*Re: Template*

Hey dude don't worry about it I have resolved the issue. :wink:

My best wishes to you with your exams & graduation :wave:

We shall stay in touch. :wink:


----------



## Laxer (Dec 28, 2010)

*Re: Template*



Acer2000 said:


> Hey dude don't worry about it I have resolved the issue. :wink:
> 
> My best wishes to you with your exams & graduation :wave:
> 
> We shall stay in touch. :wink:


sounds good, let me know how your site is coming along


----------

