Putting a little box on top of CSS template

5 replies [Last post]

Sun, 2010-08-08 12:14

Pongy

Offline

Regular

Timezone: GMT+2

Joined: 2010-08-08

Posts: 18

Points: 25

Hi there,

I'm not an expert of web design but there's something I've wanted to do for a long time and I just can't seem to figure out how on my own.

I have this website with a separate CSS template (style.css).

Normally, when I want to put something on a website I just use the tool Draw AP Div.
But if I want to add a box on top of the stylesheet file I don't know how. If I use Draw AP Div the new layer will just be added to the main page itself, not the style.css file. And if I try to open the style.css file I can't see the design so I don't know where to put the box.

This is what the site looks like now:

e p r i c e l i s t . t k / s c r e e n s h o t 1 . j p g

...And this is what I'm trying to make it look like:

e p r i c e l i s t . t k / s c r e e n s h o t 2 . j p g

When a viewer zooms the page in the browser the new box needs to stick to the template.

I hope you understand and that you, yes, you could help me out here.

Kind regards

Pongy

Current look: c l i . g s / W r r s r M - ignore the red box, I've tried to solve this on another forum and that was all they could come up with.

Tags:

Sun, 2010-08-08 12:19

Pongy

Offline

Regular

Timezone: GMT+2

Joined: 2010-08-08

Posts: 18

Points: 25

I couldn't post the message

I couldn't post the message at first due to unknown reasons (some sort of spam warning) so I tried editing the links first, then remove the code - the latter solved the problem.

Anyways, for your convenience I'm removing the spaces from the URL:s:

This is what the site looks like now:

epricelist.tk/screenshot1.jpg

...And this is what I'm trying to make it look like:

epricelist.tk/screenshot2.jpg

And the real URL for the work-in-progress:

cli.gs/WrrsrM

Mon, 2010-08-09 07:52

jon19870

Offline

Enthusiast

Timezone: GMT+1

Joined: 2007-01-05

Posts: 195

Points: 194

Copy and paste the following

Copy and paste the following HTML over your existing HTML for your main page. It will then look like it does in the screenshot.

<!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 name="google-site-verification" content="lhi1yn3mWF2crCNqqsXBfzyIW1kxQb-YyGlIGJwHTAk" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>NEMO Networks | Marketing Research | Outsourcing</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
 
<meta name="description" content="Freelance programmers. Custom marketing services. Buy and sell marketing services."> 
<meta name="keywords" content="outsource projects, freelancing, freelancers, trade, free marketing, marketing, programmers, web designers, freelance work, outsource work, contract jobs, freelance programming, contract programming, contract work, php, services, website design, SEO, search engine optimization, web promotion, javascript, webmaster, webmasters, cgi, perl, java, marketing services,  visual basic, banner design, system admin, logo design, website security, freelance programmer, custom web design, buy, purchase, web, services, company, web services, commercial">
<link rel="alternate" type="application/rss+xml"  href="http://www.google.com/support/forum/p/Webmasters/rss_v2_0_msgs.xml?lid=41234c84d9491af8&hl=en">
<style type="text/css">
.style1 {
	color: #225799;
	font-size: 28px;
}
.style3 {
	font-size: 36px
}
#Layer1 {
	position:absolute;
	left:717px;
	top:2px;
	width:75px;
	height:18px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	left:722px;
	top:2px;
	width:76px;
	height:18px;
	z-index:1;
}
#apDiv1 {
	position:absolute;
	left:742px;
	top:0px;
	width:58px;
	height:21px;
	z-index:1;
}
#apDiv2 {
	position:relative;
	left:716px;
	top:2px;
	width:100px;
	height:16px;
	z-index:1;
}
#apDiv3 {
	position:relative;
	left:666px;
	top:20px;
	width:0px;
	height:5px;
	z-index:2;
}
#apDiv4 {
	position:absolute;
	left:730px;
	top:17px;
	width:70px;
	height:23px;
	z-index:3;
}
 
 div#languages
 {
     width:840px;
	 margin:0 auto;
	 text-align:right;
 }
 
 div#languages a 
 {
	background-color:white;
	padding:10px;
	margin:0;
	display:inline-block;
	display:-moz-inline-stack; 
 
	/* inline block fixes */
	zoom:1; 
	*display:inline; 
 }
</style>
 
 
<meta name="google-site-verification" content="lhi1yn3mWF2crCNqqsXBfzyIW1kxQb-YyGlIGJwHTAk" />
 
</head>
 
<body>
<div style="position:relative">
<div id="apDiv3"></div>
<div id="languages">
	<a href="#">EN</a><a herf="#">SVE</a>
</div>
<div id="container">
  <div id="holder" class="clearfix">
    <p align="left" class="style1">
NEMO  Networks | Marketing Research | Outsourcing	  </p>
      <div id="navigation">
				<li><a href="about.php">ABOUT </a></li>
				<li><a href="services.php">SERVICES </a> </li>
                <li><a href="jobs.php">CAREER</a></li>
				<li><a href="contact.php">CONTACT</a></li></ul>
 
                <li><a href="about.php">IN SWEDISH</a></li></ul>      </div>
		<div id="header"></div>
	  <div id="content">
			<h3><a href="services.php">Outsourcing of Technical Services</a></h3>
            <div align="justify">We assist  with e.g. outsourcing of programming services, marketing research, contract jobs (project management, business platforms, customer service, sales, database management) and SEO/SEM. Let us find the right service provider for your needs and take care of the quality control. Our deadlines are always met on time!</div>
            <h3><a href="jobs.php">Current Assignments with NEMO </a></h3>
 
        <div align="justify">NEMO is  looking for talented programmers and database admins for hire on an on-off project basis.</div>
            </p>
            <h3><a href="contact.php">Investment Opportunities</a></h3>
            <div align="justify">Business angel or venture manager - contact us for new investment opportunities.</div>
            </p>
            <p align="justify"></p>
            <div align="justify"></div>
 
      </div>
		<div id="news">
			<div class="newsItem">
<h1>Copyright &copy;2010</h1>
				<p>All rights reserved. &copy;2010 NEMO</p>
			</div>
 
			<div class="newsItem">
				<h1><a href="contact.php">Contact us</a>				</h1>
				<p>&nbsp;</p>
		  </div>
	  </div>
  </div>
<div id="footer">
		<p>This website is under construction. <span>NEMO is currently not registered as a limited company.</span>
 
<ul>
				<li><a href="about.php">ABOUT </a></li>
				<li><a href="services.php">SERVICES </a> </li>
                <li><a href="jobs.php">CAREER</a></li>
				<li><a href="contact.php">CONTACT</a></li></ul>
                <li><a href="about.php">IN SWEDISH</a></li></ul>          <li></li></ul>
  </div>
</div>
</body>
</html>
<!-- <a href="http://www.000webhost.com" rel="nofollow">www.000webhost.com</a> Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
<!-- End Of Analytics Code -->

ASP.NET jQuery JavaScript CSS XHTML Tea

Tue, 2010-08-10 11:50

Pongy

Offline

Regular

Timezone: GMT+2

Joined: 2010-08-08

Posts: 18

Points: 25

jon19870, Thanks mate, you

jon19870,

Thanks mate, you solved something I've been working on for quite a while - I made a post at the Adobe Dreamweaver forum about this and after two weeks and 30-40 replies noone could still sort this one out.

Really appreciated.

I may try to understand exactly how you solved it at a later stage, perhaps on some weekend when I have time to learn some new (to me) CSS concepts.

Thanks again.

Wed, 2010-08-11 06:46

jon19870

Offline

Enthusiast

Timezone: GMT+1

Joined: 2007-01-05

Posts: 195

Points: 194

Your welcome, you could award

Your welcome, you could award me with the best reply that would be nice!

ASP.NET jQuery JavaScript CSS XHTML Tea

Sat, 2010-08-21 10:52

chautalakomal

Offline

newbie

Timezone: GMT+5.5

Joined: 2010-08-21

Posts: 1

Points: 1

Much love, these are awesome

Much love, these are awesome and incredibly helpful. The css template is clean and easy to work with!

Web Design Agency
Web Design London

Putting a little box on top of CSS template

I couldn't post the message

Copy and paste the following

jon19870, Thanks mate, you

Your welcome, you could award

Much love, these are awesome

New forum topics

User login

Navigation