Member Avatar for s.t.s

Hi all

I am just starting this web design process and am learning as I go ... I have unfortunately jumped in at the deep end and struggling to find a decent location to cover the basics ... so I have what I am sure must be a really basic query.

I have my site set up with a background image on repeat in the html tag ... and I have a div positioned absolutely at the top of the page to give me a rounded top edge to the page ... and then a repeating background for the div tags ... however I am being left with "gaps" between divs even though there is nothing between them ... if that makes sense? example is at www.sts.me.uk

Any pointers very gratefully received ... cheers

Sam

  • 2 Contributors
  • 4 Replies
  • 81 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by peter_budo
Member Avatar for peter_budo

I'm not sure if this is exact code of your home page but lets have look at it

<!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>STS Technical Services - PC Support and more</title>

<link rel="stylesheet" type="text/css"
href="CSS/body.css">

</head>

<body>
<div id="pagetop">&nbsp;</div>
<div id="header">
<div id="heading">
		<div id="pageHeader">

		<h1>STS Technical Services</h1>
		</div>
		<div id="tagline">Making sense of IT all
		</div>
		<div id="tagline2">
		 Uncomplicating the technology in your life
		</div>
		<div id="quickInto">Offering support for all things technical in an increasingly digital world
		</div>		
	</div> 

</div>

<head>
<link rel="stylesheet" type="text/css"
href="CSS/nav1.css">
</head>

	<div id="navbar">
		<ul id="topnavbar">
			<li id="topnavbar-1"><a href="home.php">HOME</a></li>
			<li id="topnavbar-2"><a href="about.php">ABOUT</a></li>
			<li id="topnavbar-3"><a href="pcsupport.php">PC SUPPORT</a></li>

			<li id="topnavbar-4"><a href="business.php">FOR BUSINESSES</a></li>
			<li id="topnavbar-5"><a href="htpc.php">HTPC</a></li>
			<li id="topnavbar-6"><a href="contact.php">CONTACT US</a></li>
		</ul>
	</div>
 

<div id="container">
	<div id="supportingText">

		<div id="overview"><p class="p1">
		If you are here, then you are using a computer, you probably own it. More than likely you use it for things other than just looking at this site too. You probably have other items of technology; televisions, DVD and Blu-Ray players, iPods or MP3 players, games consoles, laptops, digital cameras, printers, scanners and maybe even more. You probably thought having all of these new technologies would help simplify your life, make you more productive or just be good old fashioned fun.</p>
		<p class="p2">Sadly, technology is often "over sold" and then "under delivers". It can be frustrating, irritating, slow, fail conpletely and sometimes, cause serious problems for you like data loss.
		</p>
		<p class="p3">That's why STS Tech services was started. We can help to protect you against failures, fix problems if they occur and give you the help and support you need to harness technology to your benefit.
		</p>
		<p id="p4">
		Take a look at the services we offer, our aim is to make your life simpler. If there is something specific you would like but don't see it on the site then get in touch and we will do our best to help.</p>
		</div>

		<div id="details">
		</div>
	</div>
</div>


<div id="footer">
	<div id="navbar">
		<ul id="bottomnavbar">
			<li id="bottomnavbar-1"><a href="home.php">HOME</a></li>

			<li id="bottomnavbar-2"><a href="pcsupport.php">PC SUPPORT</a></li>
			<li id="bottomnavbar-3"><a href="business.php">FOR BUSINESSES</a></li>
			<li id="bottomnavbar-4"><a href="htpc.php">HTPC</a></li>
			<li id="bottomnavbar-5"><a href="contact.html">CONTACT US</a></li>
		</ul>
	</div>
	<div id="copyrightText">

	Copyright © STS Technical Services 2008-2009
	</div>
</div>
 

</body>
</html>
  1. You have two header in one html decument, only one is allowed
  2. For rounded edges have look at this collection of tutorials they should be helpful
Member Avatar for s.t.s

d'oh :$ ... that was me and php'ing the nav bar in ... i had been testing it as a stand alone page and thus the second head tag. I'll sort that one out and see how I get on ... then I'll have a look at those tutes ... cheers

Member Avatar for s.t.s

Sorted the head tag ... still getting these "blank spots" between the divs?? any ideas on the specific issue?

I am just investigating some of those other alternatives though for now ... but I am not really sure the issue is to do with my basic solution for rounded corners.

Member Avatar for peter_budo

It does, you need to think out of the box.
All the tutorials show how to apply rounded edges to one div container with something inside, some text. However inside your div container will be number of other div containers. So you have to apply ronded edges styling to outside container and do what ever styling with inside components

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.