Layout in CSS

Greetings.
I have 2 columns layout using .
Say, and .
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.

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

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/php/include_files.php

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

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.

<div id="ads" style="position:absolute; right:0px; width=20%; height=100%">
  <!-- include file="ads.html" -->
</div>

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

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

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

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

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. :(

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

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?

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

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

<link rel="stylesheet" type="text/css" href="redevolve.css">
<span class="something">
  Copyright reserved
  red_evolve 2004
</span>

And, in index.html, I have

<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. ;)

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

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.

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

Greetings.
I will try what was advised by you.
By the way, can someone please help me look at this codes below?
The is the rectangle on the left hand side, while the 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
And, I specified to be of width=80% of the body which is 100%.
Please help.

#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
}

[IMG]http://cc.domaindlx.com/redevolve/snapshot.jpg[/IMG]

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

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

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?

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

Greetings.
Erm, left: 20% and also left: 100px?
I don't get you - 2 divs?

<div id=homepage>
  <div id=25percent>
    <div id=100px>
    </div>
  </div>
</div>

Errr, sorry but I really don't get the concept. ;)

By the way, I noticed that things are much "larger" in Mozilla compared to IE and Opera eh. What can I do to balance it up so that it not only looks fine in Mozilla and also don't look to small in IE when I try to reduce the size of elements displayed in Mozilla.

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

Show Comments

1

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

Greetings.
Oh, I get you.
Thanks a lot for that explanation.

Nope, font sizes are the same.
It's just that the size of the divs, err, never mind, first.
I guess it's something related to what you have just explained.
Let me first try to apply what you have just said, and see how thing goes.
Thanks a lot. :)

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

NP!
There's another thing in there that I should really explain: the box model. Ryan's got a good explanation here: http://www.ryanbrill.com/archives/css_box_model_and_you/ The way he describes here is the proper way as used by mozilla, where padding etc is added to width, whilst IE cheats and does it the other way - subtracting padding etc from the width.

Another explanation by Tantek: http://tantek.com/CSS/Examples/boxmodelhack.html
However the solutions he proposes here are unnecessary if you nest divs - one div with width, another inside with a margin or padding, and so on. This way is futureproof, whereas other future browsers may or may not work with the hacks suggested on the tantek link.

Hopefully that gives you another insight into more of your problems ;)

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

[QUOTE=red_evolve]Greetings.

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

This is the bit of code where the box model stuff applies. If you've figured out those links you'll realise IE is saying 80%-25%=55% wide, whilst Mozilla is saying 80%+25%=105%. :!:

DaveSW

Master Poster

769 posts since Jul 2004

Reputation Points: 54

Solved Threads: 20

7 Years Ago

0

Greetings.
Thanks for your continuous support.
This is the bit of code where the box model stuff applies. If you've figured out those links you'll realise IE is saying 80%-25%=55% wide, whilst Mozilla is saying 80%+25%=105%.
I understand what you're saying there.
What I still can't figure out is that, If this is the case, how can I balance things up in IE & Mozilla?

On the other hand, if I opt to not use nested divs, would something like this be easier and as efficient?

<style type="text/css">
  .ads{
    width: 20%
  }
   
  .homepage{
    width: 80%
  }
</style>
:
:
:
<div align="center">
  <span class="ads">bla bla bla</span>
  <span class="homepage">bla bla bla</span>
</div>

red_evolve

Posting Whiz

313 posts since Jun 2003

Reputation Points: 53

Solved Threads: 1

7 Years Ago

0

Yes that would do the job. The problem only applies where you have padding or margins as well as width. Nesting them is the ideal way to split them, but you can simply avoid using them, as you suggest.

There are a number of ways to achieve the two column layout.
One would be

Layout in CSS

This article has been dead for over three months