Layout in CSS

Reply

Join Date: Jun 2003
Posts: 313
Reputation: red_evolve is on a distinguished road 
Solved Threads: 0
red_evolve's Avatar
red_evolve red_evolve is offline Offline
Posting Whiz

Re: Layout in CSS

 
0
  #11
Jul 31st, 2004
Greetings.
Erm, left: 20% and also left: 100px?
I don't get you - 2 divs?
HTML and CSS Syntax (Toggle Plain Text)
  1. <div id=homepage>
  2. <div id=25percent>
  3. <div id=100px>
  4. </div>
  5. </div>
  6. </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.
"Study the past if you would define the future" - Confucius
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Layout in CSS

 
1
  #12
Jul 31st, 2004
<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'?
Reply With Quote Quick reply to this message  
Join Date: Jun 2003
Posts: 313
Reputation: red_evolve is on a distinguished road 
Solved Threads: 0
red_evolve's Avatar
red_evolve red_evolve is offline Offline
Posting Whiz

Re: Layout in CSS

 
0
  #13
Jul 31st, 2004
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.
"Study the past if you would define the future" - Confucius
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Layout in CSS

 
0
  #14
Jul 31st, 2004
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/cs...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
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Layout in CSS

 
0
  #15
Jul 31st, 2004
[QUOTE=red_evolve]Greetings.
HTML and CSS Syntax (Toggle Plain Text)
  1. #homepage
  2. {
  3. width: 80%;
  4. height: 100%;
  5. padding-top: 10px;
  6. padding-left: 25%;
  7. text-align: center
  8. }
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%. :!:
Reply With Quote Quick reply to this message  
Join Date: Jun 2003
Posts: 313
Reputation: red_evolve is on a distinguished road 
Solved Threads: 0
red_evolve's Avatar
red_evolve red_evolve is offline Offline
Posting Whiz

Re: Layout in CSS

 
0
  #16
Aug 2nd, 2004
Greetings.
Thanks for your continuous support.
Originally Posted by DaveSW
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?

HTML and CSS Syntax (Toggle Plain Text)
  1. <style type="text/css">
  2. .ads{
  3. width: 20%
  4. }
  5.  
  6. .homepage{
  7. width: 80%
  8. }
  9. </style>
  10. :
  11. :
  12. :
  13. <div align="center">
  14. <span class="ads">bla bla bla</span>
  15. <span class="homepage">bla bla bla</span>
  16. </div>
"Study the past if you would define the future" - Confucius
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Layout in CSS

 
0
  #17
Aug 2nd, 2004
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+l...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
Reply With Quote Quick reply to this message  
Join Date: Jun 2003
Posts: 313
Reputation: red_evolve is on a distinguished road 
Solved Threads: 0
red_evolve's Avatar
red_evolve red_evolve is offline Offline
Posting Whiz

Re: Layout in CSS

 
0
  #18
Aug 2nd, 2004
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.
"Study the past if you would define the future" - Confucius
Reply With Quote Quick reply to this message  
Join Date: Jul 2004
Posts: 764
Reputation: DaveSW is on a distinguished road 
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: Layout in CSS

 
0
  #19
Aug 2nd, 2004
NP
Good Luck completing your site to your satisfaction!
Reply With Quote Quick reply to this message  
Join Date: Jun 2003
Posts: 313
Reputation: red_evolve is on a distinguished road 
Solved Threads: 0
red_evolve's Avatar
red_evolve red_evolve is offline Offline
Posting Whiz

Re: Layout in CSS

 
0
  #20
Aug 2nd, 2004
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:-
HTML and CSS Syntax (Toggle Plain Text)
  1. function changePic(n)
  2. {
  3. if(n==0)
  4. document.images['large'].src = frames['gallery'].im0.src;
  5. if(n==1)
  6. document.images['large'].src = frames['gallery'].im1.src;
  7. if(n==2)
  8. document.images['large'].src = frames['gallery'].im2.src;
  9. }
FYI, "gallery" is an Iframe - accomodates all the tiny pictures.
"Study the past if you would define the future" - Confucius
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC