Current location: Hot Scripts Forums » General Web Coding » CSS » Quick Question


Quick Question

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 04-30-07, 08:38 PM
sushi4664's Avatar
sushi4664 sushi4664 is offline
Aspiring Coder
  
Join Date: Apr 2007
Location: USA
Posts: 411
Thanks: 0
Thanked 0 Times in 0 Posts
Question Quick Question
I have the following CSS code for napkinz.com :

CSS Code:
  1. body{
  2.  padding:0;
  3.  margin: 0;
  4.  background:#FE7A3C
  5.  } 
  6.  
  7. #header{
  8.  height:150px;
  9.  background: #FFFFFF;
  10.  color:#333333;
  11.  margin:20px 250px 20px 20px;
  12.  padding:0;
  13.  border: 2px solid #333333;
  14.  } 
  15.       
  16. #main{
  17.  position: relative;
  18.  margin: 20px 250px 20px 20px;
  19.  border: 2px solid #333333;
  20.  background: #ffffff;
  21.  color: #333333;
  22.  padding: 20px;
  23.  min-width: 750px;
  24.  z-index: 13;
  25.  }
  26. #right{
  27.  top: 20px;
  28.  right: 20px;
  29.  width: 210px;
  30.  background:#FFF428;
  31.  border: 2px solid #333333;
  32.  color: #333333;
  33.  margin: 0px;
  34.  padding: 0px;
  35.  height: auto;
  36.  z-index: 1;
  37.  }
  38.  
  39. #authCom{
  40. margin:10px;
  41. text-align:left;
  42. }
  43.  
  44. div#footer{
  45. clear: both;
  46. padding: 0px;
  47. margin: 0px;
  48. width: 100%;
  49. background: #FFCC33;
  50. height: 20px;
  51. }
  52.  .style2{
  53.  color: #333333;
  54.  font-weight: bold;
  55.  font-size: 11px
  56.  }
  57.  .style3 {
  58.     color: #333333;
  59.     font-weight: bold;
  60.     font-size: 12px;
  61. }
  62. .style1{
  63.     color: #333333;
  64.     font-weight:normal;
  65.     font-size: 14px;
  66.     text-align:justify;
  67.     
  68. }
  69. a:link    { color: #333333 }
  70. a:visited { color: #333333 }
  71. a:hover   { color: #FF6600 }
  72. a:active  { color: #FF6600 }
  73.  
  74. #dashed {
  75.     width:80%;
  76.     height:80%;
  77.     padding:10px;
  78.     margin:9.5px;
  79.     border:1px dashed #000000;
  80. } 
  81.  
  82. /*Nifty Corners Cube CSS by Alessandro Fulciniti
  83. The following classes are added dinamically by javascript,
  84. and their use should be avoided in the markup */
  85.  
  86. b.niftycorners,b.niftyfill{display:block}
  87. b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
  88.     overflow:hidden;border-style:solid;border-width: 0 1px}
  89. /*normal*/
  90. b.r1{margin: 0 3px;border-width: 0 2px}
  91. b.r2{margin: 0 2px}
  92. b.r3{margin: 0 1px}
  93. b.r4{height: 2px}
  94. b.rb1{margin: 0 8px;border-width:0 2px}
  95. b.rb2{margin: 0 6px;border-width:0 2px}
  96. b.rb3{margin: 0 5px}
  97. b.rb4{margin: 0 4px}
  98. b.rb5{margin: 0 3px}
  99. b.rb6{margin: 0 2px}
  100. b.rb7{margin: 0 1px;height:2px}
  101. b.rb8{margin: 0;height:2px}
  102. b.rs1{margin: 0 1px}
  103. /*transparent inside*/
  104. b.t1{border-width: 0 5px}
  105. b.t2{border-width: 0 3px}
  106. b.t3{border-width: 0 2px}
  107. b.t4{height: 2px}
  108. b.tb1{border-width: 0 10px}
  109. b.tb2{border-width: 0 8px}
  110. b.tb3{border-width: 0 6px}
  111. b.tb4{border-width: 0 5px}
  112. b.tb5{border-width: 0 4px}
  113. b.tb6{border-width: 0 3px}
  114. b.tb7{border-width: 0 2px;height:2px}
  115. b.tb8{border-width: 0 1px;height:2px}
  116. b.ts1{border-width: 0 2px}

I want it so that when the user resizes the browser, the #right division doesn't overlap the #main division, instead the browser shows the scroll bars. What am I doing wrong??
__________________
- sushi
Visit http://napkinz.com/index.php - web comic that is update weekly

-ps: got through the archive...there are really funny comics in there....
Reply With Quote
  #2 (permalink)  
Old 05-02-07, 10:39 PM
jfulton's Avatar
jfulton jfulton is offline
Community VIP
  
Join Date: Apr 2006
Location: Los Angeles, CA
Posts: 660
Thanks: 0
Thanked 0 Times in 0 Posts
Looks like your layout has changed on the live site...if you remove the "position:absolute;" on #right, then everything looks good to me.
Reply With Quote
  #3 (permalink)  
Old 05-03-07, 02:36 PM
sushi4664's Avatar
sushi4664 sushi4664 is offline
Aspiring Coder
  
Join Date: Apr 2007
Location: USA
Posts: 411
Thanks: 0
Thanked 0 Times in 0 Posts
THANKS!!! WAHOOO!!! ok now i have one more question on this positioning thing...

I have the following css code:

CSS Code:
  1. html{ 
  2.  margin: 0px;
  3.  padding: 0px;
  4. }
  5.  
  6. body{
  7.  margin: 0px; padding: 0px;
  8.  min-width: 1200px;;
  9.  background:#FE7A3C;
  10.  } 
  11.  
  12. #header, #main, #right{
  13.  float: left;
  14.  margin: 0px; padding: 0px;
  15.  border: 2px solid #333333;
  16. }
  17.  
  18. #header{
  19.  width:940px;
  20.  background: #FFFFFF;
  21.  color:#333333;
  22.  margin: 20px 250px 20px 20px;
  23.  padding: 0px;
  24.  margin:10px;
  25.  z-index:2;
  26.  } 
  27.       
  28. #main{
  29.  margin: 20px 250px 20px 20px;
  30.  background: #ffffff;
  31.  color: #333333;
  32.  width: 900px;;
  33.  padding:20px;
  34.  z-index:1;
  35.  margin:10px;
  36.  }
  37. #right{
  38.  right: 20px;
  39.  width: 210px;
  40.  background:#FFF428;
  41.  color: #333333;
  42.  margin: 0px;
  43.  padding: 0px;
  44.  height: auto;
  45.  z-index:3;
  46.  }
  47.  
  48. #authCom{
  49. margin:10px;
  50. text-align:left;
  51. }
  52.  
  53. div#footer{
  54. clear: both;
  55. padding: 0px;
  56. margin: 0px;
  57. width: 100%;
  58. background: #FFCC33;
  59. height: 20px;
  60. }
  61.  .style2{
  62.  color: #333333;
  63.  font-weight: bold;
  64.  font-size: 11px
  65.  }
  66.  .style3 {
  67.     color: #333333;
  68.     font-weight: bold;
  69.     font-size: 12px;
  70. }
  71. .style1{
  72.     color: #333333;
  73.     font-weight:normal;
  74.     font-size: 14px;
  75.     text-align:justify;
  76.     
  77. }
  78. a:link    { color: #333333 }
  79. a:visited { color: #333333 }
  80. a:hover   { color: #FF6600 }
  81. a:active  { color: #FF6600 }
  82.  
  83. #dashed {
  84.     width:80%;
  85.     height:80%;
  86.     padding:10px;
  87.     margin:9.5px;
  88.     border:1px dashed #000000;
  89. } 
  90.  
  91. /*Nifty Corners Cube CSS by Alessandro Fulciniti
  92. The following classes are added dinamically by javascript,
  93. and their use should be avoided in the markup */
  94.  
  95. b.niftycorners,b.niftyfill{display:block}
  96. b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
  97.     overflow:hidden;border-style:solid;border-width: 0 1px}
  98. /*normal*/
  99. b.r1{margin: 0 3px;border-width: 0 2px}
  100. b.r2{margin: 0 2px}
  101. b.r3{margin: 0 1px}
  102. b.r4{height: 2px}
  103. b.rb1{margin: 0 8px;border-width:0 2px}
  104. b.rb2{margin: 0 6px;border-width:0 2px}
  105. b.rb3{margin: 0 5px}
  106. b.rb4{margin: 0 4px}
  107. b.rb5{margin: 0 3px}
  108. b.rb6{margin: 0 2px}
  109. b.rb7{margin: 0 1px;height:2px}
  110. b.rb8{margin: 0;height:2px}
  111. b.rs1{margin: 0 1px}
  112. /*transparent inside*/
  113. b.t1{border-width: 0 5px}
  114. b.t2{border-width: 0 3px}
  115. b.t3{border-width: 0 2px}
  116. b.t4{height: 2px}
  117. b.tb1{border-width: 0 10px}
  118. b.tb2{border-width: 0 8px}
  119. b.tb3{border-width: 0 6px}
  120. b.tb4{border-width: 0 5px}
  121. b.tb5{border-width: 0 4px}
  122. b.tb6{border-width: 0 3px}
  123. b.tb7{border-width: 0 2px;height:2px}
  124. b.tb8{border-width: 0 1px;height:2px}
  125. b.ts1{border-width: 0 2px}

Now if you would go to napkinz.com , the #right div is a little too low, its supposed to start where the #header div is....whats up with that?
__________________
- sushi
Visit http://napkinz.com/index.php - web comic that is update weekly

-ps: got through the archive...there are really funny comics in there....
Reply With Quote
  #4 (permalink)  
Old 05-03-07, 05:00 PM
Vicious's Avatar
Vicious Vicious is offline
Community VIP
  
Join Date: Jan 2007
Location: Belgium
Posts: 584
Thanks: 0
Thanked 0 Times in 0 Posts
It's there because you are using float to position #header, #main and #right.

I have done some changes, and this layout looks much better. Also, don't force me to have a document of 1200px wide, when my screen only has 1024px capacity. So I took the liberty to make your layout "liquid".

Only the changed CSS code is below:
css Code:
  1. #header, #main, #right {style.css (line 7)
  2. border:2px solid #333333;
  3. float:none;
  4. margin:0px;
  5. padding:0px;
  6. }
  7.  
  8. #right {style.css (line 33)
  9. background:#FFF428 none repeat scroll 0%;
  10. color:#333333;
  11. margin:0px;
  12. padding:0px;
  13. position:absolute;
  14. right:0px;
  15. top:10px;
  16. width:210px;
  17. z-index:3;
  18. }
  19.  
  20. #main {style.css (line 24)
  21. background:#FFFFFF none repeat scroll 0%;
  22. color:#333333;
  23. margin:10px 220px 10px 10px;
  24. padding:20px;
  25. width:auto;
  26. z-index:1;
  27. }
  28.  
  29. #header {style.css (line 13)
  30. background:#FFFFFF none repeat scroll 0%;
  31. color:#333333;
  32. margin:10px 220px 10px 10px;
  33. padding:0px 0px 0px 40px;
  34. width:auto;
  35. z-index:2;
  36. }

Of course, some CSS optimization would be needed, but this will do the trick. Just try it out, and let me know what you think of it.

ps: despite what jfulton said, I added the absolute positioning again for #right

edit: I see now that this CSS is not far from your original code
__________________
Jack Bauer makes Chuck Norris cry
Last edited by Vicious; 05-03-07 at 05:03 PM.
Reply With Quote
  #5 (permalink)  
Old 05-03-07, 05:13 PM
sushi4664's Avatar
sushi4664 sushi4664 is offline
Aspiring Coder
  
Join Date: Apr 2007
Location: USA
Posts: 411
Thanks: 0
Thanked 0 Times in 0 Posts
yes, that works though since there is a comic displaying in that place i need the minimum width of the #main div to be atleast 800px, also since there are ads that are 728px on the page, i again need a min-width, and when i set that, and u resize the browser, the #right div overlaps the #main div....

ive tried everything, there is an option of putting all this on tables but....tables = disgusting......
__________________
- sushi
Visit http://napkinz.com/index.php - web comic that is update weekly

-ps: got through the archive...there are really funny comics in there....
Reply With Quote
  #6 (permalink)  
Old 05-04-07, 02:16 AM
Vicious's Avatar
Vicious Vicious is offline
Community VIP
  
Join Date: Jan 2007
Location: Belgium
Posts: 584
Thanks: 0
Thanked 0 Times in 0 Posts
If you give #main a width of 800px, then IE will threat that as a min-width.
For firefox, you can just use min-width. That should work...
__________________
Jack Bauer makes Chuck Norris cry
Reply With Quote
  #7 (permalink)  
Old 05-04-07, 03:41 PM
sushi4664's Avatar
sushi4664 sushi4664 is offline
Aspiring Coder
  
Join Date: Apr 2007
Location: USA
Posts: 411
Thanks: 0
Thanked 0 Times in 0 Posts
Yes I did that...but again the same problem comes up...the #right div overlaps the #main...
__________________
- sushi
Visit http://napkinz.com/index.php - web comic that is update weekly

-ps: got through the archive...there are really funny comics in there....
Reply With Quote
  #8 (permalink)  
Old 05-04-07, 08:18 PM
sushi4664's Avatar
sushi4664 sushi4664 is offline
Aspiring Coder
  
Join Date: Apr 2007
Location: USA
Posts: 411
Thanks: 0
Thanked 0 Times in 0 Posts
nevermind i GOT IT!!!
__________________
- sushi
Visit http://napkinz.com/index.php - web comic that is update weekly

-ps: got through the archive...there are really funny comics in there....
Reply With Quote
  #9 (permalink)  
Old 05-05-07, 01:59 AM
Vicious's Avatar
Vicious Vicious is offline
Community VIP
  
Join Date: Jan 2007
Location: Belgium
Posts: 584
Thanks: 0
Thanked 0 Times in 0 Posts
Do you mind sharing your solution with us?
__________________
Jack Bauer makes Chuck Norris cry
Reply With Quote
Reply

Bookmarks

« Background attributes issues | i solved the other problem, but now IE says there is an error with scroll bars?? »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
quick foreach question TheNixMaster PHP 4 10-30-06 03:56 AM
Quick Question on mysql_query(); nova912 PHP 5 05-21-06 10:09 PM
Quick Question JBrown1045 PHP 4 06-06-05 01:43 PM
Get information from another page QUICK QUESTION HairySpider PHP 13 04-12-05 10:17 AM
Quick Question for you php guru's Tokahashi PHP 3 04-09-04 12:00 PM


All times are GMT -5. The time now is 01:59 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.