Website layout problem

  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I am working on a website that has a 3 small menuboxes in the left, 2 newsboxes in the middle and another 3 (small) muneboxes on the right.
This however is causing trouble. The boxes won't format the way I want them to. I am using CSS. I set the newsbox (the one in the middle) to
Code: [ Select ]
float: "right";
float: "left";
  1. float: "right";
  2. float: "left";

The left one is
Code: [ Select ]
float: "left";

and the right one is
Code: [ Select ]
float: "right";


The problem comes when I add more than one menubox. Instead of going under the previous one, it goes next to it. (due to the float: "left";)
Do you know how to fix this ? I do not want to use tables.

Thanks in advance.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Posts: 371
  • Loc: Riverside, CA

Post 3+ Months Ago

I think you are going to need tables... And you dont want to use that... Well i dont see anothr way around it. :(
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

noooooooooooooooooooooooooooooooooooooooooooo

Code: [ Select ]
float:left;
clear:left;
  1. float:left;
  2. clear:left;


on the left boxes

Code: [ Select ]
float:right;
clear:right;
  1. float:right;
  2. clear:right;



on the right boxes


then use margins on the center section. floating both left and right does nothing usefull

Note that for the above method, all of you nav elements must appear above the content <i>in the html document</i>. If this is not acceptable then I suggest you use this alternative method:

You could also nest the navigational elements in container divs, and then use position:absolute to position the containers, the boxes will stack up nicely inside them. Again use margins on the content area


hacker - you <i>never</i> need tables unless you have an actual grid.
  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

tables have become a designer's preference, not a necessity. Personally, I use tables for
everything but I understand the use and positives of using divs instead.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I used a container div to set it up. However I had the same problem for my other design. I had to use frames, which I could have avoided.
Let me ask you something:
Code: [ Select ]
float: left;
clear: left;
  1. float: left;
  2. clear: left;

Won't those cancel each other out ? Or is it going to align the element to the left and then not allow another element on the left of it ?
If thats the case, isn't
Code: [ Select ]
float: right;
clear: right;
  1. float: right;
  2. clear: right;
going to disallow the middle element to on its side ?

Quote:
must appear above the content in the html document

What do you mean ? I have this:
Code: [ Select ]
<html>
  <body>
   <div class="leftbox">
       stuff
    </div>
    <div class="leftbox">
       stuff
    </div>
    <div class="leftbox">
       stuff
    </div>


    <div class="middlebox">
       stuff
    </div>
    <div class="middlebox">
       stuff
    </div>


    <div class="rightbox">
       stuff
    </div>
     <div class="rightbox">
       stuff
    </div>
     <div class="rightbox">
       stuff
    </div>
  </body >
</html>
  1. <html>
  2.   <body>
  3.    <div class="leftbox">
  4.        stuff
  5.     </div>
  6.     <div class="leftbox">
  7.        stuff
  8.     </div>
  9.     <div class="leftbox">
  10.        stuff
  11.     </div>
  12.     <div class="middlebox">
  13.        stuff
  14.     </div>
  15.     <div class="middlebox">
  16.        stuff
  17.     </div>
  18.     <div class="rightbox">
  19.        stuff
  20.     </div>
  21.      <div class="rightbox">
  22.        stuff
  23.     </div>
  24.      <div class="rightbox">
  25.        stuff
  26.     </div>
  27.   </body >
  28. </html>
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Another question:
I have the following in CSS:
Code: [ Select ]
div.title
{
  font-weight: "bold";
  background-color: "transparent";
  background-image: url"/images/largetable_back.gif";

  width="217";
  height="20";
  text-align: "center";

  margin: "0";


}
  1. div.title
  2. {
  3.   font-weight: "bold";
  4.   background-color: "transparent";
  5.   background-image: url"/images/largetable_back.gif";
  6.   width="217";
  7.   height="20";
  8.   text-align: "center";
  9.   margin: "0";
  10. }

As you can see there is background image that appears behind some text. The problem is the image is not shown. What do you think is wrong ? I use the class like this:
Code: [ Select ]
<div class="title">text</title>

the idea being that the text should appear over the image.

thanks in advace :)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

ok lots of questions!

Yeah, float left clear left will float the item to the left, butn esure that it sits below any item already on the left. Ie the boxes will stack

Secondly no, because you aren't going to float the central column - I don't think I made that clear before.

Third. I am suggesting that you do not float the inside column. Therefore to float the outer columns left and right, they will need to above the middlebox in the html. At the moment the right boxes are below the middle box in the html. They need to be moved up.

Your syntax is wrong with the background image:

Code: [ Select ]
background-image: url"/images/largetable_back.gif";

should read
Code: [ Select ]
background-image: url(/images/largetable_back.gif);


That all said, I think the best way to lay out your site, now that I have had time to consider it. Is to use a three column layout from glish.com

<a href="http://www.glish.com/css/7.asp">this one</a> if you want fluid
<a href="http://www.glish.com/css/3.asp">this one</a> if you want fixed width and centered.

Then just next your multiple boxes in the side columns.

Just take those layouts apart - it's pretty clear how they work.

Post back if you need any more help :D
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Thanks for the links rtm223. I think I got it. Thanks a bunch.

I still have problem with my background image.
Here is what I have
Code: [ Select ]
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
  <head>
   <title>simple_cpphomelayout2</title>

   <style>
    div.title
    {
        font-weight: "bold";
        background-color: "transparent";
        background-image: url("\images\largetable_back.gif");

        width="217";
       height="20";
       text-align: "center";
        border: "1 solid black";
       margin: "0";
     }
     </style>


  </head>

  <body >
   <div class="title">news</div>
  </body>
</html>
  1. <?xml version="1.0"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5.   <head>
  6.    <title>simple_cpphomelayout2</title>
  7.    <style>
  8.     div.title
  9.     {
  10.         font-weight: "bold";
  11.         background-color: "transparent";
  12.         background-image: url("\images\largetable_back.gif");
  13.         width="217";
  14.        height="20";
  15.        text-align: "center";
  16.         border: "1 solid black";
  17.        margin: "0";
  18.      }
  19.      </style>
  20.   </head>
  21.   <body >
  22.    <div class="title">news</div>
  23.   </body>
  24. </html>

I change the path to a win type of path, but still no image. Can someone try this code in their browser with some image and let me know if it works. The problem might be at my end.
Thanks.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Yeah I see. Dont use a windows backslash, that just wont work. You need to use forward slashes, but the problem is probably the leading slash. If you put a leading slash on a path, it is an absolute path. IE:

/images/largetable_back.gif

would be http://www.mydomain.com/image/largetable_back.gif

Which is fine, but I have a feeling you are testing on your local computer? Without it being on a actual http server I don't think it will work. Try removing the leading slash to make it a relative path.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I am actually running Apache :).
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I fixed it by changing the path to :
Code: [ Select ]
http://localhost/images/myimage.gif"

I think you were right about the slashes

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 48 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
 
cron
 

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