1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help required please!

Discussion in 'HTML & Website Design' started by Hopper, Jun 7, 2007.

0
  1. #1
    I have purchased a 'coded' template for my web site and I am having a little trouble - please can anyone help.

    I don't think it should be that difficult but its giving me a headache :mad:

    The site is Juniper Internet

    The problem I am having is I need the main content area to automatically resize so that no matter what the content is it fills the main area down to the footer. The page is coded in html.

    [​IMG]

    Any ideas please.

    Obviously any help will be appreciated and rep givien for the help provided.

    Cheers

    Hopper
     
    Hopper, Jun 7, 2007 IP
  2. NITRO23456

    NITRO23456 Well-Known Member

    Messages:
    516
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    110
    #2
    seems fairly straight forward........

    I can sort this out for $5 if you dont get any other help.
     
    NITRO23456, Jun 7, 2007 IP
  3. fornve

    fornve Peon

    Messages:
    2
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Put left menu and content into table.
     
    fornve, Jun 7, 2007 IP
    Hopper likes this.
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    A table is unnecessary, and offering to help people in exchange for compensation is flat out rude and unprofessional (another reason why I love SitePoint - you ask for help, and you'll get it without fear of getting the "robber baron" treatment).

    As it is in the OP's case, the code is rather messy and non-semantic, so I'd suggest a re-write. In the meantime, if you want to have equal height columns, I'd go with a background image on your #wrapper DIV to create a faux-column effect.

    I'll also show you how you can cut down on the code you're using to create the same effect with cleaner markup (and the freedom from JavaScript). Just let me take care of the other threads I need to go through first. :)
     
    Dan Schulz, Jun 7, 2007 IP
    Hopper likes this.
  5. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You should make those divs and make the background div, the one holding the left and the right, white. It will then fill in the rest on the right hand side.
     
    LeetPCUser, Jun 8, 2007 IP
    Hopper likes this.
  6. Hopper

    Hopper Well-Known Member

    Messages:
    1,330
    Likes Received:
    96
    Best Answers:
    0
    Trophy Points:
    140
    #6
    Hi Dan, Thanks for that, I created a image 10px high x 1 wide and included it in the CSS file as the wrapper background image. This seems to have done the trick.

    Cheers

    Special thanks to all who offered help and advise, its much appreciated.

    Hopper
     
    Hopper, Jun 8, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Ok, I have your HTML ready. Notice how lean it is. I decided to go with a 100% document height model (which I'll explain when I get around to writing the CSS and its associated post), so I ended up using not one but two non-semantic DIVs (ooh, arrest me officer for using non-semantic code :p ). The empty SPAN inside the H1 is for an image replacement technique I love to use, but other than that, the HTML's about as lean as you're going to get.
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen" />
</head>
<body>
<div id="container">
	<h1><span></span>Velizo Networks</h1>
	<ul id="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Web Sites</a></li>
		<li><a href="#">Advertising</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<div id="content">
		<div class="section">
			<h2>Welcome to the Velizo Network</h2>
			<p>
				xenon.com is a leading provider in dedicated servers. The owner,
				steve mannors, contact velizo for a fresh and modern website. This
				is what we produced. this is all dummy tecxt and will be replaced
				by some meaningful welcome to our network type content. Usually you
				will brag about what your company has to offer and what makes it
				unique. xenon.com is a leading provider in dedicated servers. The
				owner, steve mannors, contact website. This is what we produced.
				This is all dummy text and will be replaced by some meaningful
				welcome to our network type content. Usually you will brag about
				what your company has to offer and what makes it unique. xenon.com
				is a leading provider in dedicated servers. The owner, Steve
				Mannors, contacted velizo for a fresh and modern website. This is
				what we produced. This is all dummy tecxt and will be replaced by
				some meaningful welcome to our network type content. Usually you
				will brag about what your company has to offer and what makes it
				unique.
			</p>
			<div class="signature">
				Mr.M.Surname
			</div>
		</div>
		<div class="section">
			<h2>The Velizo Network</h2>
			<ul>
				<li>Lorem Ipsum Text</li>
				<li>Lorem Ipsum Text</li>
				<li>Lorem Ipsum Text</li>
				<li>Lorem Ipsum Text</li>
			</ul>
		</div>
	</div>
	<div id="sidebar">
		<div class="section" id="latest-site">
			<h2>Latest Web Site</h2>
			<p>
				xenon.com is a leading provider in dedicated servers. The owner,
				Steve Mannors, contact velizo for a fresh and modern website. This
				is what we produced.
			</p>
			<div>
				<a href="#">view project</a>
			</div>
		</div>
		<div class="section" id="latest-news">
			<h2>Latest News</h2>
			<h3>09.07.05</h3>
			<p>
				xenon.com is a leading provider in dedicated servers. The owner,
				Steve Mannors, contact velizo for a fresh and modern website. This
				is what we produced.
			</p>
			<h3>09.07.05</h3>
			<p>
				xenon.com is a leading provider in dedicated servers. The owner,
				Steve Mannors, contact velizo for a fresh and modern website. This
				is what we produced.
			</p>
		</div>
	</div>
	<div id="clear-footer"></div>
</div>
<div id="footer">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Web Sites</a></li>
		<li><a href="#">Advertising</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
</body>
</html>
    Code (markup):
    Like I said, the CSS will be coming later. :)
    And I also suggest canning the footer menu, since it's not needed (a "return to top" link will do just as well). In its place, I suggest you put in a footer, which can be done by slapping a paragraph element without a class or ID (since the CSS will reference its parent element, the DIV with the ID of footer).
     
    Dan Schulz, Jun 9, 2007 IP