faux columns - getting frustrated

Discussion in 'Scripts' started by rooster, Apr 9, 2012.

to remove all ads.
  1. rooster

    rooster New Member

    Messages:
    43
    hey all.
    i have been working on a new version of my website.
    the URL is www.tkleather.com/test2/index.php

    i can NOT get the faux columns to work right. if you click the first link that says "testing" then click the link that appears that says "test1" it will bring u to a test page. just says test over and over - and ignore the images at the top. just playing with a few things. but why cant i get the faux columns to work? I have a nav.php and inside that file, i have the CSS code for the background image and i repeat it. I have tried repeat, and repeat-x repeat-y together.

    any suggestions?

    and i cant get the text in my footer to float correctly! but ill work on that later.

    thanks!
     
  2. rooster

    rooster New Member

    Messages:
    43
    also, just now I tried to move the CSS code to my style.css file because i have alot of my fonts in a stylesheet, but it still didnt work.
     
  3. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    Hey Rooster,

    Unfortunately there is much more than a faux column issue going on here.

    first and most importantly you can only ever have one
    doctype
    html tag
    head tag and
    body tag.

    eg.
    HTML:
    <!DOCTYPE html>
        <html>
            <head>
            </head>
            <body>
            </body>
        </html>
    
    all links, scripts, meta tags etc in the head
    all html elements in the body

    now you cant make up your own tags f1 f2???

    center is deprecated

    this...
    HTML:
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    is just silly. thats what margins and padding are for.

    overall I think the direction you are trying to go with this site, is better than what you have previously shown us, and commend you for getting it out of the table.

    as for the faux column issue.

    HTML:
    <div class="background">
    <div class="col-A"></div>
    <div class="col-B"></div>
    </div>
    
    Code:
    .background {
    position:relative;
    margin:0;
    background-image: url(images/bg.jpg);
    background-repeat:repeat-y;
    overflow:hidden;
    }
    
    .col-A {
    float:left;
    width:31%;
    margin:1%;
    }
    .col-B {
    float:left;
    width:65%;
    margin:1%;
    }
    
     
  4. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
  5. rooster

    rooster New Member

    Messages:
    43
    thanks @Phreaddee
    i was using a little copy and pasting, so i will fix the numerous of the same tags.
    and thank you, hopefully when im done, this one will look better than the previous site :)
    working on getting out of the tables and learning new ways to do things.

    i will try the faux columns script that you posted in a few minutes. thanks again!
     
  6. rooster

    rooster New Member

    Messages:
    43
    also, the f1 and f2 tags i was using so i can easily switch between font sizes. I read somewhere that that was a good thing to do.
    so its not? should i add the font script every time i change the font size?
     
  7. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    well the best option would be to use h1, h2, h3, h4, h5 + h6 tags

    if you want to use "f1" it needs to be a class ie
    Code:
    .f1 {
    font-size:16px;
    }
    
     .f2 {
    font-size:12px;
    }
    
    and in the html
    HTML:
     
    <p class="f1">size 1</p>
    <p class="f2">size 2</p>
    
    under no circumstances is using <font> a good idea. period.
     
  8. rooster

    rooster New Member

    Messages:
    43
    ill change it to the h1 h2 etc. i didnt think using a font tag was a good idea :)
     
  9. rooster

    rooster New Member

    Messages:
    43
    So I'm still having this issue.
    While I thing the faux columns ARE working, the whole thing won't work. I'm using php includes for the header nav and footer. I have the nav at a width of 20% and the height have set at auto, and 100%. But both times it only goes to the bottom of the links (or text). It won't do past that. So I think maybe its an issue with my php includes. Should I make the height 1000% or something crazy??
     
  10. rooster

    rooster New Member

    Messages:
    43
    I meant to say I tried the height for the nav php include to be 100% and I have also tried it using auto. Not both at the same time obviously.
     
  11. rooster

    rooster New Member

    Messages:
    43
    Also, I see what you mean when you said ONE head tag, one body tag etc. I wasn't thinking and had one in each of the pages that I use in the php includes. I will fix that right away. Then ill start using my style sheet more too.
     
  12. rooster

    rooster New Member

    Messages:
    43
    any more ideas? I added the <br> tag about 100 times and then just put a period to see if my faux columns were working. and they were working fine, the BG image tiled perfectly.
    so i know the faux columns is working right. I have a feeling that its something with the PHP includes or the div class. in the div class (css) I put the height at 100% and ive also tried the height at auto.

    the website is www.tkleather.com/test2/index.php

    again, i know the code is messy, but I am working on cleaning it up. im not used to using php includes, so im learning.
    i just thought using the height in the div class tags would work. i guess it doesnt?

    i also broke down and tried to make tables help with the faux columns (only in the nav.php) and that didnt help.

    any suggestions?
     
  13. ronaldroe

    ronaldroe Super Moderator Staff Member

    Messages:
    1,223
    My first suggestion is this: if you're coding whatever first and then cleaning it up, you're creating more work for yourself. Start it back from scratch, write it clean from the top. Second suggestion: Tables not used for tabular data will never help any situation ever. Third suggestion: When using php includes to create a site, create the basic template with all of the HTML, from DOCTYPE to </html>, in one document. Make sure all of your JS and CSS are in separate files, linked either in the head or at the end of the document. Then, separate it into your include files, replacing the content with your include code. You avoid a whole lot of confusion that way.
     

Share This Page