1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design Creating a 2nd page

Discussion in 'Web Design' started by Irisg, Nov 22, 2009.

  1. Irisg

    Irisg New Member

    Hello everyone,

    I am using the architecture template and trying to create a 2nd page. Here is my idea:

    First page - Modified original template, elements are all in place, no problem with changing text, pictures etc.

    2nd page (and actually, all pages in the nev section) - I would like to leave the shell as it is, i.e. - the left side stays the same with the welcome information, the top is the same, with the nev buttons, however I would like on the right side to have a small picture (like it is now) with the heading and text (longer of course), but to delete the additional.
    However, when I do that the bottom gets choppy and unfinished.

    What am I missing?
    (I went over the primer, did the CSS tutorial etc), it feels like I am removing too much code, however, when I try to put it back in sections it build the page back with the additional sections I do not want. Help any one!!
    ​
     
    Irisg, Nov 22, 2009
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    To have a longer header you can place the code for "About Our Company" above the code for the image.

    To fix the bottom shift, there is one line of code that must remain.
    Code:
    <div class="clear-flat"></div>
    Starting with "content" your code should look like this.
    Code:
    		<div id="content">
	[COLOR="Red"]<!-- Start Rightside About Our Company -->[/COLOR]
<img src="http://www.freewebsitetemplates.com/forum/images/pic_2.jpg" width="109" height="108" alt="Pic 2" class="left" />
<h2>About Our Company</h2>			
<p>You can remove any link to our websites from this template you're  free to use the template without linking back to us. Don't want your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p class="more" id="intro"><a href="http://www.freewebsitetemplates.com" class="bar-lit">more</a></p>
		[COLOR="Red"]<!-- End About Our Company -->[/COLOR]
					
[COLOR="#ff0000"]<!-- <div class="clear-flat"></div> IS the key to keeping the template shape intack -->[/COLOR]		
<div class="clear-flat"></div>   [COLOR="Red"]<!-- this line of code must stay in -->[/COLOR]
		</div>
		<div class="clear"></div>
	</div>
</div>
</div>
	<div id="footer">
<p>Copyright statement goes here. All rights reserved</p>
	</div>
</div>
</body>
</html>
     

    Attached Files:

    • arc.jpg
      arc.jpg
      File size:
      46.1 KB
      Views:
      1,033
    ishkey, Nov 22, 2009
    #2
  3. Irisg

    Irisg New Member

    Thank you for the quick replay

    (can you feel a but coming on)

    First let me tell you how amazing you are for going the extra mile and actually going to the page I needed.

    I inserted the code you suggested, however, it does not keep the page nice and long like yours, If I want the full message to so on the welcome side, I need to put a lot of words on the right side

    I wish I can insert the image like you did to show you what I see.
     
    Irisg, Nov 22, 2009
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    If you want to post a picture read "FAQ" BB Code or look at the Blue Box Called Posting Rules below the Quick Post see BB Code (click on it). If you look at the bottom of Quick Post you will see "Go Advance" click on it for more options.

    Let's try this again -
    You first have to understand html code. This <!-- --> is a "comment" in html code and looks like
    <!-- some code or words --> A comment in the code will not display in your browser (on screen when viewing a page - it's just there to leave comments to make coding easier or you can use it to comment out code to see how a page will display, as the browser ignores it.)

    When I said "Starting with "content" your code should look like this."
    You were to replace your code with the code from the post or just edit yours. Starting at
    Code:
    <div id="content">
    you still need the the rest of the page starting from the top down to that part.

    Code:
    <!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   	<title>Architectural Company</title>
	<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />	
	</head>
<body>
<div id="wrapper">
	<h1>Architecture</h1>
	<div id="nav">
		<a href="http://www.freewebsitetemplates.com">About Us</a>
		<a href="http://www.freewebsitetemplates.com">Services</a>
		<a href="http://www.freewebsitetemplates.com">Solutions</a>
		<a href="http://www.freewebsitetemplates.com">Projects</a>
		<a href="http://www.freewebsitetemplates.com">Contact Us</a>
	</div>
	<div id="body">
		<div id="body-top">
			<div id="body-top-2"></div>
			<div id="body-bot">
				<div id="welcome">
					<img src="images/pic_1.jpg" width="231" height="301" alt="Pic 1" />
					<h2>Welcome</h2>
					<p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add at least one free website template daily.</p>			
			<p>This is a template designed by free website templates for you for free you can replace all the text by your own 
			text. This is just a place holder so you can see how the site would look like.</p> 
					<p class="more"><a href="http://www.freewebsitetemplates.com" class="bar-drk">more</a></p>
					
				</div>
				<div id="content">
					<!-- Start Rightside About Our Company -->

					<img src="images/pic_2.jpg" width="109" height="108" alt="Pic 2" class="left" />
					<h2>About Our Company</h2>			
			<p>You can remove any link to our websites from this template you're  free to use the template without linking 
			back to us. Don't want your boss to know you used a free website template ;) .</p>
			<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
					<p class="more" id="intro"><a href="http://www.freewebsitetemplates.com" class="bar-lit">more</a></p>

					<!-- End About Our Company -->
					
			
				  <div class="clear-flat"></div>   <!-- this line of code must stay in -->
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>Copyright statement goes here. All rights reserved</p>
	</div>
</div>
</body>
</html>
    Open your index.html page in your editor - Save it as test.html - Now you have a new page - Highlight all the code in your test page, like you are going to copy it, just Highlight it. - Copy all of the code from this post and paste it over your new page code, which is highlighted. You now have replaced the code. - Save the file. - Open it in your browser, look at it. Now study it and compare it to your page that didn't work to see where you went wrong.

    If you did it right you could make it as short or as long as you wanted.
    take a look...
     

    Attached Files:

    • arc2.jpg
      arc2.jpg
      File size:
      8.9 KB
      Views:
      998
    • arc3.jpg
      arc3.jpg
      File size:
      15.7 KB
      Views:
      1,037
    ishkey, Nov 22, 2009
    #4
  5. Irisg

    Irisg New Member

    Found the missing line

    Thank you!
     
    Irisg, Nov 22, 2009
    #5