Layout in CSS

Question

red_evolve 1 Posting Whiz

19 Years Ago

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.

web-design

2 Contributors
24 Replies
393 Views
2 Weeks Discussion Span
Latest Post 19 Years Ago Latest Post by DaveSW

All 24 Replies

DaveSW 15 Master Poster

19 Years Ago

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 15 Master Poster

19 Years Ago

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

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

DaveSW 15 Master Poster

19 Years Ago

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 15 Master Poster

19 Years Ago

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 15 Master Poster

19 Years Ago

<div id="homepage>
<div>
Content
</div>
</div>

#homepage {
margin-left: 100px;
}

#homepage div {
margin-left: 20%;
}

Basically your left bar is width 20%. But it's placed 100px from the edge. That makes it 20%+100px. You can't make that in pixels or %, so mozilla is adding 20% +80% (=100%) and then it's adding another 100px to 100%, hence the scrollbar.

You mean font sizes by 'much larger'?

red_evolve commented: Appreciate your help. +3

Reply to this topic

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.

red_evolve 1 Posting Whiz · Answer 1 · 2004-07-22T06:06:45+00:00

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 1 Posting Whiz · Answer 2 · 2004-07-23T06:29:34+00:00

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 1 Posting Whiz · Answer 3 · 2004-07-24T21:49:17+00:00

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<br>
  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 1 Posting Whiz · Answer 4 · 2004-07-27T06:29:11+00:00

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.

#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! **]

DaveSW 15 Master Poster · Answer 5 · 2004-07-31T19:30:37+00:00

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?

red_evolve 1 Posting Whiz · Answer 6 · 2004-07-31T21:43:14+00:00

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 1 Posting Whiz · Answer 7 · 2004-07-31T22:27:34+00:00

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

DaveSW 15 Master Poster · Answer 8 · 2004-08-01T01:21:03+00:00

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 15 Master Poster · Answer 9 · 2004-08-01T01:24:17+00:00

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%. :!:

red_evolve 1 Posting Whiz · Answer 10 · 2004-08-02T14:33:27+00:00

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>

DaveSW 15 Master Poster · Answer 11 · 2004-08-02T15:10:35+00:00

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

<div id="ads">
Advertisements
</div>

<div id="homepage">
Content
</div>

#ads {
position: absolute;
left: 0;
top: 0;
width: 20%;
}
#homepage {
position: absolute;
left: 20%;
top: 0;
width: 80%;
}

However this screws up printing the page, so this might be better:

<div id="ads">
Advertisements
</div>

<div id="homepage">
Content
</div>

#ads {
position: absolute;
left: 0;
top: 0;
width: 20%;
}
#homepage {
margin-left: 20%;
}

There are thousands of css layout sites: http://www.google.com/search?q=css+layouts&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8

Or you can check out layoutomatic, which can automatically generate the box model hacks for you: http://www.inknoise.com/experimental/layoutomatic.php

red_evolve 1 Posting Whiz · Answer 12 · 2004-08-02T15:24:10+00:00

Greetings.
Thanks a lot.
The inknoise one is definitely a great guide towards css layouts and should serve as a great BASIS for other more complicated layouts.

Thanks a lot for that.
Well, case solved! Hope there'll be no more complications in my road to building a presentable website.
And thanks again, DaveSW.

DaveSW 15 Master Poster · Answer 13 · 2004-08-02T17:02:31+00:00

NP ;)
Good Luck completing your site to your satisfaction!

red_evolve 1 Posting Whiz · Answer 14 · 2004-08-03T06:20:59+00:00

Greetings.
Hehe...one more problem here.
It's not about CSS but I thought I should just continue with this thread.
I have a page and it's a gallery of pictures.
On top, there's an empty square.
Below, there are pictures. When a picture is clicked, the larger version would be targeted onto that empty square.
I use javascript here. Things worked fine, again, in IE and Opera but not Mozilla.
The function goes something like this:-

function changePic(n)
{ 
  if(n==0)
    document.images['large'].src = frames['gallery'].im0.src;
  if(n==1)
    document.images['large'].src = frames['gallery'].im1.src;
  if(n==2)
    document.images['large'].src = frames['gallery'].im2.src;
}

FYI, "gallery" is an Iframe - accomodates all the tiny pictures.

DaveSW 15 Master Poster · Answer 15 · 2004-08-07T16:01:54+00:00

Do you mean something like this accessible example which works in all browsers which I created so long ago for someone else with the same problem? ;) :D

http://www.emdevelopments.co.uk/demo/iframe/

Replace the numbers by dropping thumbnail images inside the a tags. the href is the full size version. There's no javascript involved, just plain html. Rearrange the code to put the links underneath.

How's that? Or would you prefer me to examine the one you're using?

red_evolve 1 Posting Whiz · Answer 16 · 2004-08-09T07:26:28+00:00

Greetings.
Cool!
Thanks a lot for the help.
That is one alternative...but err...yeah, I'd like to know why can't mine work in Firefox :(
If you can, could you please shed some lights here?

DaveSW 15 Master Poster · Answer 17 · 2004-08-09T13:45:43+00:00

have you got the rest of the code for it? Or is it scattered throughout a number of other long pages? :D

red_evolve 1 Posting Whiz · Answer 18 · 2004-08-09T14:05:00+00:00

Greetings.
Ok, below is what I have in gallery.asp

// This is the function which does the "picture swapping" in <script> tag
function changePic(n)
{ 
  if(n==0)
    document.images['large'].src = frames['gallery'].im0.src;
  if(n==1)
    document.images['large'].src = frames['gallery'].im1.src;
  if(n==2)
    document.images['large'].src = frames['gallery'].im2.src;
  if(n==3)
    document.images['large'].src = frames['gallery'].im3.src;
}
:
:
<!-- This is a snapshot of what is in the <body> tag -->
<!-- "large" contains an empty jpg file, a white square only -->
<!-- Inside <p> lies all my folder thumbnails, when clicked, the corresponding html file will load inside the IFrame -->
    
<p>Click on the folders  to view the content.</p>
<br>
<img src="pictures\empty.jpg" width=400 height=300 border=1 name="large" style="position:relative; top:-5px; right:-5px">
      
<p>
<a href="gallery_family.html" target="gallery" class="gallery">
<img src="buttons/folderFamily.gif" name="folder_family" alt="Family" border=0></a>
          
<a href="gallery_nature.html" target="gallery" class="gallery">
<img src="buttons/folderNature.gif" name="folder_nature" alt="Nature" border=0></a>

</p>

<!-- The Content -->
<div align="center" style="width:inherit">
  <iframe name="gallery" scrolling="no" frameborder="0" width="500px" height="150px" padding="2px">
  <font color="#eeeeee">Your Browser Doesn't Support Frames</font>
  </iframe>
</div>

Say I clicked on the folder_nature folder, so below is the content of gallery_nature.html

<a href="Javascript:parent.changePic(0)" onMouseover="window.status='Mists in the morning.'; return true" onMouseout="window.status=''; return true">
<img name="im0" src="pictures/nature/big08.jpg" border="0" width="60" height="45" alt="Mists in the morning"></a>

<a href="Javascript:parent.changePic(1)" onMouseover="window.status='Leaf.'; return true" onMouseout="window.status=''; return true">
<img name="im1" src="pictures/nature/big09.jpg" border="0" width="60" height="45" alt="Leaf"></a>

<a href="Javascript:parent.changePic(2)" onMouseover="window.status='Bricks.'; return true" onMouseout="window.status=''; return true">
<img name="im2" src="pictures/nature/big10.jpg" border="0" width="60" height="45" alt="Bricks"></a>

I am not sure whether my concept is correct or not.
But, err, sometimes my algo towards solving problems is just too long and complicated.
Sigh! For example, when I see yours, I would be thinking, why didn't I thought of that? ;)

DaveSW 15 Master Poster · Answer 19 · 2004-08-09T16:00:15+00:00

Hmm ok that's strange but I'm probably missing something...

I don't know if there are any people on daniweb good with javascript but you might want to try webdeveloper.com - we have an excellent javascript forum there. Sorry Dani...

;)

Layout in CSS

Recommended Answers Collapse Answers

All 24 Replies

Recommended Answers