HTML and CSS

Layout in CSS

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Last »

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Layout in CSS

Jul 21st, 2004

Greetings.
I have 2 columns layout using <div>.
Say, <div id="navMenu"> and <div id="content">.
Is it possible to target links clicked on "navMenu" to be displayed in "content"?
I have done this using iFrame. Can I do it without using any frames?
Please advice. Thanks.

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

Jul 21st, 2004

Generally you'd use another page to do it. e.g. index.htm would have your menu and the content for the index page. Page1.htm would have the menu and page 1's content.

A useful technique is the use of includes to add a menu or other reapeated code into multiple pages. http://www.hardcoder.com/scripting/p...lude_files.php

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Re: Layout in CSS

Jul 21st, 2004

Greetings.
Thanks for your feedback.
I have tried to use the include function but I don't understand why it would not work.
can I do something like this? I've tried but nothing came out.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div id="ads" style="position:absolute; right:0px; width=20%; height=100%">
  <!-- include file="ads.html" -->
</div>
<div id="ads" style="position:absolute; right:0px; width=20%; height=100%">
  <!-- include file="ads.html" -->
</div>

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

Jul 22nd, 2004

What server side stuff does your server support? (just checking).

also if your server supports ASP you're missing a # -

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Re: Layout in CSS

Jul 22nd, 2004

Greetings.
Yea, my server supports ASP.
Oh! Yea, I did include a '#', forgotten to type that out in my last post.
I've seen people using  and . But mine won't work.

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

Jul 23rd, 2004

Can you post the content of the html file you're including?
Is your main page a .asp extension?
in the file to be included, have you just put the actual code you want to include - no doctyle or body tags etc?

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Re: Layout in CSS

Jul 24th, 2004

Greetings.
Nope, my main page is simply index.html.
Below is a sample of my footer.html.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<link rel="stylesheet" type="text/css" href="redevolve.css">
<span class="something">
  Copyright reserved<br>
  red_evolve 2004
</span>
<link rel="stylesheet" type="text/css" href="redevolve.css">
<span class="something">
  Copyright reserved<br>
  red_evolve 2004
</span>

And, in index.html, I have

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html>
<!-- meta tags, head tag, and other relevants -->
<body>
<!-- A few div tags for navigator menu, content -->
<div id="footer">
  <!-- #include file="footer.html" -->
</div>
</body>
</html>
<html>
<!-- meta tags, head tag, and other relevants -->
<body>
<!-- A few div tags for navigator menu, content -->
<div id="footer">
  <!-- #include file="footer.html" -->
</div>
</body>
</html>

Please advise.

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

Jul 24th, 2004

I believe your index page needs to be renamed to index.asp for asp code to work. Otherwise it will not be processed as ASP.
I use php and that's the way php works, so I guess asp is the same.

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Re: Layout in CSS

Jul 26th, 2004

Greetings.
I will try what was advised by you.
By the way, can someone please help me look at this codes below?
The <div id="ads"> is the rectangle on the left hand side, while the <div id="homepage"> is the bigger rectangle in the center.
The display looks fine in IE & Opera7, but not in Mozilla :-|
In Mozilla, the content of #homepage spread across to the right hand side, not overlapping the #ads, but stretches to the right, until the horizontal scroll bar appears. FYI, the #ads & #homepage lie inside another <div id="content">
And, I specified <div id="content"> to be of width=80% of the body which is 100%.
Please help.

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#ads
{
  position: absolute;  
  left: 100px;
  width: 20%;
  height: 100%;
  padding-top: 10px
}
 
#homepage
{
  width: 80%;
  height: 100%;
  padding-top: 10px;
  padding-left: 25%;
  text-align: center
}

http://cc.domaindlx.com/redevolve/snapshot.jpg

[** Edit: I renamed index.html to index.asp, and it worked, yeah! Thanks a lot! **]

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

#10

Jul 31st, 2004

take the width of #homepage and use a combination of margins to move it 20% and 100px from the left - i.e. two divs, one with the px margin-left, the other with the % margin-left.

That make any sense to you?