CSS tip on positioning

  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I've been fiddling about with this for a while now and it's actually beginning to be more of a pain than i'd like. I wonder if someone could help me out a bit.

The problem i have at the moment is placing the group of boxes within the right column i have on the page.

The site

The html "body" code:

//REMOVED CODE: this code is no longer important.

While i am typing this i may as well explain another few issues i know i'm likely to encounter here and one i am unable to get rid of. I'd hope to have a horizontal navigation system which spans the bottom of the box where the copyright symbol is and for the copyright symbol to appear underneath the box but whenever i have attempted this it just messes and is placed off center and looks silly.

I'm aware when viewing in IE that the border lines on the right and left hand side go right to the top, but in FF it appears how i hoped it would. Any ideas on how i can sort this?

I am also aware that the left and right column have invalid images and don't display.

Cheers! :)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

I don't really get it... you want those boxes that are outside that yellow border box to be inside that yellow border box on the right side... right?

Okay with you if I recode the entire thing for you?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

That's exactly it.

I won't object to that Bogey. Any help and advice here would be greatly appreciated.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

Delete line 113 of your css. Works for me
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8413
  • Loc: USA

Post 3+ Months Ago

I guess you got it figured out... I couldn't post for a while since I had to go to work... :lol:
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Not all figured though, still the other small niggly bits that are still being a pain in the butt to figure out.

Thanks for both of your help natas and bogey. Much appreciated.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

SB,

If you still need more help, I'd be glad to because I'm still in the process of learning CSS. It would be a learning experience for me also.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thank you.

As i mentioned in initial post i am aware that the site displays differently in both IE and FF with the left and right borders. Ideally i'm looking at having it display just like it shows in FF.

To be perfectly honest i was slightly interested to see if Bogey was going to recode it because i know that the coding is horrific and will cause me problems in the future. I can never seem to get a site coding the way i like it to without there being an issue displaying on any of the browsers.

Thanks again.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

I will also work on a new code and see if it works for you any better. It will give me an opportunity to practice.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

Try this SB.. I checked it in both firefox and IE.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 
transitional.dtd">
<html>
<head>
<title>James Campbell Architects and Environmental</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
<div id="page_container">
    <div id="header">
        <p>James Campbell Architects &amp; Environmental</p>
    </div>
 
    <div id="left_column">
        <ul>
        </ul>
    </div>
 
    <div id="center_column">
        <h2>Welcome</h2>
        <p>Example: text position</p>
    </div>
 
    <div id="right_column">
        <p>
        <div id="smallboxes">
            <div class="smallbox" id="bluecube"></div>
            <div class="smallbox"></div>
            <div class="smallbox"></div>
 
 
            <div class="smallbox"></div>
            <div class="smallbox"></div>
            <div class="smallbox" id="greencube"></div>
 
            <div class="smallbox" id="yellowcube"></div>
            <div class="smallbox"></div>
            <div class="smallbox"></div>
        </div>
        </p>
    </div>
 
    <div id="footer">
        <p>&copy;</p>
    </div>
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
  2.  
  3. transitional.dtd">
  4. <html>
  5. <head>
  6. <title>James Campbell Architects and Environmental</title>
  7. <link rel="stylesheet" type="text/css" href="style.css" />
  8. </head>
  9.  
  10. <body>
  11. <div id="page_container">
  12.     <div id="header">
  13.         <p>James Campbell Architects &amp; Environmental</p>
  14.     </div>
  15.  
  16.     <div id="left_column">
  17.         <ul>
  18.         </ul>
  19.     </div>
  20.  
  21.     <div id="center_column">
  22.         <h2>Welcome</h2>
  23.         <p>Example: text position</p>
  24.     </div>
  25.  
  26.     <div id="right_column">
  27.         <p>
  28.         <div id="smallboxes">
  29.             <div class="smallbox" id="bluecube"></div>
  30.             <div class="smallbox"></div>
  31.             <div class="smallbox"></div>
  32.  
  33.  
  34.             <div class="smallbox"></div>
  35.             <div class="smallbox"></div>
  36.             <div class="smallbox" id="greencube"></div>
  37.  
  38.             <div class="smallbox" id="yellowcube"></div>
  39.             <div class="smallbox"></div>
  40.             <div class="smallbox"></div>
  41.         </div>
  42.         </p>
  43.     </div>
  44.  
  45.     <div id="footer">
  46.         <p>&copy;</p>
  47.     </div>
  48. </div>
  49. </body>
  50. </html>



CSS

Code: [ Select ]
/* Intrinsic HTML Elements */
body{
    margin:0;
    padding:0;
    background: #000;
    font-family: sans-serif;
    font-size: 75%;
    color: #fff;
}
 
div{
    margin:0;
    padding-top:0;
}
 
h1, h2, h3, p {
    margin:0;
    padding:10px;
}
 
 
 
ul{
    margin:0;
    padding:0;
}
 
li{
    list-style-type:none;
    color: #fff;
}
 
li a{
    display:block;
    background:#000;
    padding:5px 10px 5px 10px;
    color: #fff;
}
 
li a:hover{
    background:#000;
}
 
/* Uniquely Identified Containers */
 
#page_container{
    width:950px;
    margin:0 auto;
    margin-bottom: 50px;
}
 
#header{
    background:#000;
    margin-top: 50px;
    border-top: 1px solid #ffff00;
    border-left: 1px solid #ffff00;
    border-right: 1px solid #ffff00;
    border-bottom: 1px solid #666666;
}
 
#left_column{
    width:149px;
    float:left;
    background:url(back.gif);
    height: 340px;
    border-left: 1px solid #ffff00;
    padding-top: 60px;
    padding-left: 30px;
}
 
#center_column{
    width:420px;
    float:left;
    height: 375px; 
    padding-top: 25px;
    padding-left: 50px;
}
 
#right_column{
    width:299px;
    float:left;
    background:url(back.gif);
    height: 325px;
    border-right: 1px solid #ffff00;
    padding-top: 75px;
}
 
#footer{
    clear:both;
    background:#000;
    border-bottom: 1px solid #ffff00;
    border-right: 1px solid #ffff00;
    border-left: 1px solid #ffff00;
}
 
/* CSS Document */
 
.smallbox {
    width: 80px;
    height: 80px;
    border: 1px solid #666;
    float: left;
    margin-left: 6px;
    margin-bottom: 7px;
}
 
div#smallbox div a:link, div#smallbox div a:visited {
    text-decoration: none;
}
 
div#smallbox div a:hover {
 
}
#bluecube {
    background-color: #40668C;
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    opacity: 0.75;
}
#greencube {
    background-color: #335C33;
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    opacity: 0.75;
}
#yellowcube {
    background-color: #FFD699;
    filter:alpha(opacity=75);
    -moz-opacity:0.75;
    opacity: 0.75;
}
#yellowcube:link, #yellowcube:visited {
    opacity: .40;
    filter: alpha(opacity=40);
}
 
  1. /* Intrinsic HTML Elements */
  2. body{
  3.     margin:0;
  4.     padding:0;
  5.     background: #000;
  6.     font-family: sans-serif;
  7.     font-size: 75%;
  8.     color: #fff;
  9. }
  10.  
  11. div{
  12.     margin:0;
  13.     padding-top:0;
  14. }
  15.  
  16. h1, h2, h3, p {
  17.     margin:0;
  18.     padding:10px;
  19. }
  20.  
  21.  
  22.  
  23. ul{
  24.     margin:0;
  25.     padding:0;
  26. }
  27.  
  28. li{
  29.     list-style-type:none;
  30.     color: #fff;
  31. }
  32.  
  33. li a{
  34.     display:block;
  35.     background:#000;
  36.     padding:5px 10px 5px 10px;
  37.     color: #fff;
  38. }
  39.  
  40. li a:hover{
  41.     background:#000;
  42. }
  43.  
  44. /* Uniquely Identified Containers */
  45.  
  46. #page_container{
  47.     width:950px;
  48.     margin:0 auto;
  49.     margin-bottom: 50px;
  50. }
  51.  
  52. #header{
  53.     background:#000;
  54.     margin-top: 50px;
  55.     border-top: 1px solid #ffff00;
  56.     border-left: 1px solid #ffff00;
  57.     border-right: 1px solid #ffff00;
  58.     border-bottom: 1px solid #666666;
  59. }
  60.  
  61. #left_column{
  62.     width:149px;
  63.     float:left;
  64.     background:url(back.gif);
  65.     height: 340px;
  66.     border-left: 1px solid #ffff00;
  67.     padding-top: 60px;
  68.     padding-left: 30px;
  69. }
  70.  
  71. #center_column{
  72.     width:420px;
  73.     float:left;
  74.     height: 375px; 
  75.     padding-top: 25px;
  76.     padding-left: 50px;
  77. }
  78.  
  79. #right_column{
  80.     width:299px;
  81.     float:left;
  82.     background:url(back.gif);
  83.     height: 325px;
  84.     border-right: 1px solid #ffff00;
  85.     padding-top: 75px;
  86. }
  87.  
  88. #footer{
  89.     clear:both;
  90.     background:#000;
  91.     border-bottom: 1px solid #ffff00;
  92.     border-right: 1px solid #ffff00;
  93.     border-left: 1px solid #ffff00;
  94. }
  95.  
  96. /* CSS Document */
  97.  
  98. .smallbox {
  99.     width: 80px;
  100.     height: 80px;
  101.     border: 1px solid #666;
  102.     float: left;
  103.     margin-left: 6px;
  104.     margin-bottom: 7px;
  105. }
  106.  
  107. div#smallbox div a:link, div#smallbox div a:visited {
  108.     text-decoration: none;
  109. }
  110.  
  111. div#smallbox div a:hover {
  112.  
  113. }
  114. #bluecube {
  115.     background-color: #40668C;
  116.     filter:alpha(opacity=75);
  117.     -moz-opacity:0.75;
  118.     opacity: 0.75;
  119. }
  120. #greencube {
  121.     background-color: #335C33;
  122.     filter:alpha(opacity=75);
  123.     -moz-opacity:0.75;
  124.     opacity: 0.75;
  125. }
  126. #yellowcube {
  127.     background-color: #FFD699;
  128.     filter:alpha(opacity=75);
  129.     -moz-opacity:0.75;
  130.     opacity: 0.75;
  131. }
  132. #yellowcube:link, #yellowcube:visited {
  133.     opacity: .40;
  134.     filter: alpha(opacity=40);
  135. }
  136.  
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Much appreciated natas. That has solved one of the issues i was having and has made the actual php text alot clearer to understand and work with.

I'm owe you one.

Now i need to work on the navigation :lol:
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

I viewed the source code here...

http://www.campbell-james.co.uk/2006/new/index.php

There are tags for an unordered list, but no list items. I'm guessing this is going to be your navigation menu, so I'm not sure how I can help with that.
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks natas.

Idea was to have the navigation system span across the bottom of the page where the copyright symbol is and for the copyright info to immediately underneath the main content area (the box).

Gonna look into this a bit more now.

Thanks
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

I'm actually still having some problems with the navigation bar.

Ideally hoping the nav bar would be situated below the rectangle main content box. Any idea what i am doing wrong for it to be positioning the way it is right now?

Link is on original post here and coding within the body is now...

Code: [ Select ]
<body>
<div id="page_container">
<div id="header">
<p>James Campbell Architects &amp; Environmental</p>
</div>
 
<div id="left_column">
<ul>
</ul>
</div>
 
<div id="center_column">
<p>Index</p>
<p>James Campbell Architects &amp; Environmental...</p>
</div>
 
<div id="right_column">
<p>
<div id="smallboxes">
<div class="smallbox" id="blue"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
 
 
<div class="smallbox"></div>
<div class="smallbox" id="logo"></div>
<div class="smallbox" id="green"></div>
 
<div class="smallbox" id="yellow"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
</p>
</div>
 
<div id="footer">
<ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
<p><li><a href="/2006/about.php">About</a></li>
<li><a href="/2006/projects.php">Projects</a></li>
<li><a href="/2006/services.php">Services</a></li>
<li><a href="/2006/contact.php">Contact Us</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li></p>
</ul>
</div>
</div>
</body>
  1. <body>
  2. <div id="page_container">
  3. <div id="header">
  4. <p>James Campbell Architects &amp; Environmental</p>
  5. </div>
  6.  
  7. <div id="left_column">
  8. <ul>
  9. </ul>
  10. </div>
  11.  
  12. <div id="center_column">
  13. <p>Index</p>
  14. <p>James Campbell Architects &amp; Environmental...</p>
  15. </div>
  16.  
  17. <div id="right_column">
  18. <p>
  19. <div id="smallboxes">
  20. <div class="smallbox" id="blue"></div>
  21. <div class="smallbox"></div>
  22. <div class="smallbox"></div>
  23.  
  24.  
  25. <div class="smallbox"></div>
  26. <div class="smallbox" id="logo"></div>
  27. <div class="smallbox" id="green"></div>
  28.  
  29. <div class="smallbox" id="yellow"></div>
  30. <div class="smallbox"></div>
  31. <div class="smallbox"></div>
  32. </div>
  33. </p>
  34. </div>
  35.  
  36. <div id="footer">
  37. <ul id="navigation"><li id="youarehere"><a href="/2006/index.php">Home</a></li>
  38. <p><li><a href="/2006/about.php">About</a></li>
  39. <li><a href="/2006/projects.php">Projects</a></li>
  40. <li><a href="/2006/services.php">Services</a></li>
  41. <li><a href="/2006/contact.php">Contact Us</a></li>
  42. <li><a href="#">Link 1</a></li>
  43. <li><a href="#">Link 2</a></li></p>
  44. </ul>
  45. </div>
  46. </div>
  47. </body>


navigation CSS is...

Code: [ Select ]
#navigation {
clear:both;
    background:#000;
    border-bottom: 1px solid #ffff00;
    border-right: 1px solid #ffff00;
    border-left: 1px solid #ffff00;
}
#navigation li {
float: left;
}
#navigation li a {
display: block;
width: 115px;
text-align: center;
padding: 3px 0;
}
#navigation li a:hover {
background: ;
color: ;
}
  1. #navigation {
  2. clear:both;
  3.     background:#000;
  4.     border-bottom: 1px solid #ffff00;
  5.     border-right: 1px solid #ffff00;
  6.     border-left: 1px solid #ffff00;
  7. }
  8. #navigation li {
  9. float: left;
  10. }
  11. #navigation li a {
  12. display: block;
  13. width: 115px;
  14. text-align: center;
  15. padding: 3px 0;
  16. }
  17. #navigation li a:hover {
  18. background: ;
  19. color: ;
  20. }


Thanks everyone.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

I visited the link on the original post in this thread, but it doesn't seem anything like the code you've posted above.

I noticed some new classes in your html not defined in the css previously, so that's confusing.

Here's my CSS for the navigation that works for me in both browsers (using the previous html that I had posted earlier).

Code: [ Select ]
 
 #navigation {
      height: 30px;
      width: 948px;
      background:#000;
 }
 #navigation li {
    display: inline;
 }
 #navigation a {
    float: left;
    display: block;
    width: 115px;
    text-align: center;
    padding: 3px 0;
 }
 #navigation li a:hover {
    background: ;
    color: ;
 }
 
  1.  
  2.  #navigation {
  3.       height: 30px;
  4.       width: 948px;
  5.       background:#000;
  6.  }
  7.  #navigation li {
  8.     display: inline;
  9.  }
  10.  #navigation a {
  11.     float: left;
  12.     display: block;
  13.     width: 115px;
  14.     text-align: center;
  15.     padding: 3px 0;
  16.  }
  17.  #navigation li a:hover {
  18.     background: ;
  19.     color: ;
  20.  }
  21.  
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

Thanks natas, i fixed the link as it was displaying to an older page i hadn't removed.

I tried the code you suggest and it actually fails to display the menu at all. Infact, other than that i actually think it's a vast improvement to what was there in that at least there isn't some messy menu screwing up the page and at least it displays the same on both IE and FF (not checked other browsers).

Any idea what is wrong?

Thanks again.
  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

I looked at your css file...

http://www.campbell-james.co.uk/2006/style.css

The navigation section has hash tags beginning every line. I'm assuming this is a remnant from the bbcode on the forums. If you delete them, you should see a difference. Then you can move forward from there.

Post Information

  • Total Posts in this topic: 17 posts
  • Users browsing this forum: No registered users and 56 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.