WordPress.org

Ready to get started?Download WordPress

Forums

Lining up the columns?? (32 posts)

  1. Gymshoes
    Member
    Posted 9 years ago #

    I'm new to css. And to WordPress. I had no trouble installing the program and with a bit of fiddling--and some nosing around css references linked here--managed to get my blog to roughly approximate the design of my website.

    Here's the URL of my blog: http://www.gymshoesmusic.us/Amp/
    Not a perfect match of the website, but close. :-)

    The problem is with the columns. I have left and right nav columns in addition to the center where the entries go. The problem is that all the individually columns stop when they run out of text, so all three columns are an uneven length. (Scroll down the pages and you'll see.) Since a lot of my entries are long, I just padded the hell out of the left and right columns to make them go down the page, but this isn't a satisfactory solution because each page will be a different length.

    Also, something weird is happening with the center and right (menu) columns. When the right column ends, then the center column spreads out all the way to the right. It doesn't do this on the left. Of course, it wouldn't be a problem if all the columns were the same length down the page. :(

    I know this is probably something simple, but I'm going mad fiddling with it. How do I make all the columns even up?

    Thanks!

    Gymshoes

  2. Mark (podz)
    Support Maven
    Posted 9 years ago #

    Can I suggest you either grab some different CSS or use the CSS in the examples to modify your own ?
    Two links, slightly different looks:
    Trident can be seen working here:
    http://www.tamba2.org.uk/wordpress/Trident/index.php
    Download:
    http://pinksocks.co.uk/trident.zip

    I think - if memory serves - that vesuvius is a max-width 3 column layout.
    http://pinksocks.co.uk/vesuvius.zip

    Either way, bith are very very easy to install (or remove) - but do backup your current css

  3. Gymshoes
    Member
    Posted 9 years ago #

    I tried trident. Boy, have I tried trident. I have at one time or another modified practically every variable, trying to get it to work with my design.

    There are two really BIG problems: I can't seem to get both left and right menus to display at the top of their columns. AND I cannot widen the left column. I mean, I have altered every possible number, but that column will not budge. It *should* be slightly bigger than the imagemap for site nav. I've worked on this so much yesterday I'm punch drunk...got up early this morning and started working on it again. I *know* this is just a matter of minor adjustments, but I'm running out of ways to tweak it. I'm to the hair-pulling stage now. (sigh) My blog is at: http://www.gymshoesmusic.us/Amp/ Below you'll see what the current .css looks like, if anyone wants to take a crack at it. I'm going to get breakfast and a shower. (BTW, I *did* try vesuvius, but there was a layout problem with the index and css when I installed the default! *Huge* gap between my last entry and the next...so I've gone back to battling Trident.)
    Thanks for your help and suggestions.

    body {
    background: #000000;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    text-align: center; /* IE 5.5 hack */
    }

    #rap {
    width: 1000px;
    background: #FFB531 url('industrial1.jpg') repeat-y left;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 0px 0 60px;
    border: 1px solid #565;
    border-bottom: 0;
    text-align: left; /* IE 5.5 hack part II */
    }

    #container {
    background: transparent url('wp-images/bg1.gif') repeat-y right;
    }

    #masthead {
    background: #C60808;
    font: italic normal 100% 'Times New Roman', Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 0 10px 0 60px;
    border-bottom: 1px solid #565;
    }

    #main {
    float: left;
    width: 500px;
    height: 100%;
    }

    #content {
    float: right;
    width: 700px;
    padding: 0px 0px 0px 120px;
    }

    #menu {
    float: left;
    width: 300px;
    padding: 0 100px 0 100px;

    }

    #rmenu {
    float: right;
    width: 195px;
    }

  4. Gymshoes
    Member
    Posted 9 years ago #

    I have made considerable progress since my earlier post. I now have the blog nav (which is on the right side) in the column at the top.

    I solved the mystery of the left column not being able to be widened. I's *visible* width is a function of the image size. I widened my image. However, the nav for the left column stubbornly remains at the bottom. :(

    Also, I don't seem to be able to adjust the entry text's position any more. It's scrunched up against the left column, but has a bit of room on the right. Any further adjustments (even a pixel or two) of the padding for content or main causes the blog nav in the right column to go back down to the bottom again. :(

    So the outstanding issues are how to get the left column navigation to the top of the column and how to shift the entry text to the right a bit without messing up anything else.

    I appreciate any help you can give me. I feel like I'm *very* close to sorting this out, but I'm inexperienced with css, so I'm having trouble finessing it. :)
    Thanks! :)

    The current .css:

    #rap {
    width: 900px;
    background: #FFB531 url('wp-images/industrial2.jpg') repeat-y left;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 0px 0 0px;
    border: 1px solid #565;
    border-bottom: 0;
    text-align: left; /* IE 5.5 hack part II */
    }

    #container {
    background: transparent url('wp-images/bg1.gif') repeat-y right;
    }

    #masthead {
    background: #C60808;
    font: italic normal 100% 'Times New Roman', Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 0 10px 0 60px;
    border-bottom: 1px solid #565;
    }

    #main {
    float: left;
    width: 300px;
    padding: 0px 0px 0px 0px;
    height: 100%;
    }

    #content {
    float: right;
    width: 500px;
    padding: 0px 0px 0px 202px;
    }

    #menu {
    float: left;
    width: 200px;

    }

    #rmenu {
    float: right;
    width: 195px;
    }

  5. dawg
    Member
    Posted 9 years ago #

    If you do the math on your columns and wrap nothing adds up correctly and you will have problems. The wrap is set at 1000 px which will give any user of a screen res 800x600 a messed up viewing of your site. many still use this res, not myself but many do, even with the 1000 rap your columns exceed that. You need to space your columns correctly that will fit a pc screen.

  6. dawg
    Member
    Posted 9 years ago #

    PS your posts are going in the main div that is three hundred pixels either widen that to the content width of 500 or rename these two divs so that your posts go into the yellow content area where they would fit.

    I would narrow you rap to 750 and you can place a background color in your page body to achieve the look for the entire screen no matter what res you site is looked at.

  7. Gymshoes
    Member
    Posted 9 years ago #

    Thanks for your suggestions.

    I *did* try to get the math right, I *did* make main and content the same number and I *did* narrow the rap, but all of those things either singly or together make it MUCH worse.

    I currently have both content and main at 500. I'm not sure what you mean about the math adding up. Assuming that "content" and "main" are counted as one (since I cannot figure out what the difference between them), I've got a column that's 195 & one that's 200. Add in the 500 central column and that's a total of 895...5 pixels short of my 900 rap---and I can't decrease the rap because it messes up the right menu.

    The original numbers for the Trident template were: rap 797, main 645, content 485, menu 150, rmenu 150...those numbers don't add up either! And content and main aren't the same number!

    I *had* to increase rap to make the content on at least the right column display at the top of the column. If I decrease the rap to even 850, the right menu goes to the bottom of the page. :(

    Using all the original widths in the Trident design gives me *both* columns with the navigation text at the bottom of the page.

    I still haven't gotten the left menu *up* to the top of the column. I'd like the design to match the overall site design as closely as possible. The modification I did of the original WordPress css looked good except the left and right columns did not end evenly with the middle text column. If I can't get Trident modified to get that left menu to the top I may have to go back to it. :(

    I'm open to more suggestions...

  8. dawg
    Member
    Posted 9 years ago #

    Sorry about the confusion what I mean by adding up is if you have a container/rap and it is 800px then everything inside the container should add up to 800px wide if it is over then you have spillage. A container is like a glass and can only be filled so much. Liquid layouts are flexible especially vertically, horizontal is not as forgiving due to screen size. IMO people do not like to scroll horizontal.

    Different parts of your word press db call for different div tags so that is why some do not appear to add up. For your main index.php if the container is a fixed width then everything inside should add up.

    Hope this makes sense if you need help post back

  9. dawg
    Member
    Posted 9 years ago #

    ps this will bounce your content into place make these changes to your main css div

    #main {
    float: left;
    width: 510px;
    padding: 0px 0px 0px 202px;
    height: 100%;
    }

  10. Gymshoes
    Member
    Posted 9 years ago #

    I pasted in the code above and now it's really screwed up! When I said I couldn't change *any* numbers without messing things up, I meant it! ;-)

    Since some number relate to div tags for the db, tell me which ones are the ones that are supposed to add up. I *should* be able to add. ;-)

    BTW, the site right now is after the change to the #main. I'm going to leave it hashed for a while so you get a change to see it. :-)

    I really appreciate you help in sorting this mess out. It's hard to believe I started with a decent template. LOL!

  11. Gymshoes
    Member
    Posted 9 years ago #

    PS...In case you've lost track, here's the current settings:

    #rap {
    width: 900px;
    background: #FFB531 url('wp-images/industrial2.jpg') repeat-y left;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 0px 0 0px;
    border: 1px solid #565;
    border-bottom: 0;
    text-align: left; /* IE 5.5 hack part II */
    }

    #container {
    background: transparent url('wp-images/right1.gif') repeat-y right;
    }

    #masthead {
    background: #C60808;
    font: italic normal 100% 'Times New Roman', Times, serif;
    letter-spacing: 0.2em;
    margin: 0;
    padding: 0 10px 0 60px;
    border-bottom: 1px solid #565;
    }

    #main {
    float: left;
    width: 510px;
    padding: 0px 0px 0px 202px;
    height: 100%;
    }

    #content {
    float: right;
    width: 500px;
    padding: 0px 0px 0px 202px;
    }

    #menu {
    float: left;
    width: 200px;

    }

    #rmenu {
    float: right;
    width: 195px;
    color: #fff;
    }

  12. dawg
    Member
    Posted 9 years ago #

    it looks how I think it should look now with the only exception being your navigaion that is down below instead of to the left column, I think this is how you want it in the left sort of steel gray column if I am right let me know so we can sort that out,

    At least it is readable now where before your post were not contained

  13. dawg
    Member
    Posted 9 years ago #

    Funny thing is I can remove the content div and nothing happens except you lose a margin on your posts so this div appear unnessary. If you could send you index.php file it would be easier to figure out where you are going wrong but it appears as though this should be placed in the div that contains your industrial jpg.
    {menu-narrow-new.jpg}

    send me an e-mail if you wish with the index file at sachmo_007@yahoo.com

  14. dawg
    Member
    Posted 9 years ago #

    sachmo_007[at] yahoo.com

  15. Gymshoes
    Member
    Posted 9 years ago #

    Well, sachmo and I worked on this and neither of us could get trident to work the way it should. :(

    I did, today, finally get the site nav menu up to the top of the left column, but now the blog menu on the right side is down at the bottom of the page! :(

    Could someone suggest something for me to tweak? Here's what I've got up now:

    #main {
    float: right;
    padding: 0px 0px 0px 0px;
    height: 100%;
    }

    #content {
    float: right;
    width: 500px;
    padding: 0px 250px 0px 0px;
    }

    #menu {
    float: left;
    width: 200px;
    padding: 10px 0px 10px 8px;

    }

    #rmenu {
    float: right;
    width: 195px;
    color: #fff;
    }

    Thanks! :-)

  16. Mark (podz)
    Support Maven
    Posted 9 years ago #

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gymshoesmusic.us%2FAmp%2F&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&verbose=1

    277: <div class="clearer"> </div>

    Look at the line above - it is stopping everything, then whatever follows in the code gets put underneath it.
    Remove that line from your index, and see what happens...

    Trident is a good template so I guess it's a simple copy/paste error that has crept in.

    .

  17. Gymshoes
    Member
    Posted 9 years ago #

    I removed it, but it didn't change anything. The right menu is still at the bottom of the column. The code may be cleaner, but the effect is exactly the same. (sigh)

  18. Mark (podz)
    Support Maven
    Posted 9 years ago #

    That thin black line is marking the end of the #content div.
    Have you tried moving a </div> from just above the rmenu to below it ?

  19. dawg
    Member
    Posted 9 years ago #

    Just put this in instead of float right for your right column use position:absolute;
    left/ whatever width clears your main content;} this will do it for you

    http://www13.addr.com/~latinage/Capture-2.jpg

  20. dawg
    Member
    Posted 9 years ago #

    PS Sachmo is my dogs name, since I posted my email on this board I used his email just incase it got spammed

  21. Gymshoes
    Member
    Posted 9 years ago #

    Podz: moving the div tag as suggested hashed the layout much worse.

    Dawg: changed only the #menu and at 1024 x 768 the menu disappears. At higher res the menu shows up at the bottom.

    That's with ONLY the change to the menu. However, your screenshot shows that some of the css above #menu was also changed. I'm guessing that it's #content...but making that change eliminates the right menu at all resolutions. :(

    What other changes did you make besides the menu? (Like just above #menu in the screenshot.) #content? #main?

  22. dawg
    Member
    Posted 9 years ago #

    Seeing this late and am going to bed but you could position everything from left such as

    left menu{
    position:absolute;
    left:20px;
    width:200px;}

    content{
    position:absolute;
    left: 220px;
    width:500px;}
    rightmenu{
    position:absolute;
    left:720px;
    width:200;} This should work, I do not have the other changes off the top of my head as I thought you said you got them from my screenshot.

  23. Gymshoes
    Member
    Posted 9 years ago #

    I said I'd get them from the screen shot; in my exuberance I didn't realize that all the changes to the .css weren't visible in the shot. :(

    I tried the suggestion above. The whole screen went black except for the title links. No sign of the menu (white letters) either. (sigh).

    If you've got the full .css you used in the screenshot, let me know. Otherwise, it's back to the drawing board...

  24. dawg
    Member
    Posted 9 years ago #

    Sorry it was late last night and I may not have made this clear, the two divs for right and left menu have to correspond exactly how youyour divs are in your layout.css file so if they are rmenu you would have to make the appropiate changes to the text for the correct divs. In the original all I did was position the right column absolute. What you have to keep in mind is the 60 pixels on the left {screenshot}wher I am editing will throw my nubers off slightly.

  25. dawg
    Member
    Posted 9 years ago #

    #content {
    float: right;
    width: 400px;
    padding: 0px 200px 0px 0px;}

    #rmenu {
    position:absolute;
    left:680px;
    width: 195px;
    color: #fff;
    }
    those are the changes from the screenshot

  26. Gymshoes
    Member
    Posted 9 years ago #

    I understood that the css was rough. ;-) Before uploading it I made all the necessary changes to make it correspond to the divs in my .css. I neatened it up, uploaded it and the screen went black except for the entry titles (red link) and the site menu image on the left and a bit of the header. Everything else was black.

    I didn't realize that the column where you are editing would throw the number off. :(

    Also, you definitely changed more than the rmenu absolute. Look at my .css in the above post and then look at the numbers in the screenshot. You changed other variables in #rmenu, you changed the numbers in #menu and you changed something above #menu...possibly #content. (I tried those numbers for #content and that doesn't work either.)

    There is some magic combination of numbers that works with this layout. I just can't figure out what they are. :( Now I'm going to have to log off for today. I'll check back tonight or tomorrow morning to see if anyone has the solution. (It's like some weird math puzzle...)

    Thanks for your help.

  27. dawg
    Member
    Posted 9 years ago #

    Ok but my math does add up here is your index file and your css with my site.

    http://www.cafe789.com/kyles_eyes/index23.php

  28. Gymshoes
    Member
    Posted 9 years ago #

    It still only looks like two columns, but I guess that's because it doesn't have my images. E-mail me that index.php and .css file, so I can try it. I'm thinking that between the two of us working on it that what I've got now isn't what you've got. Something maybe got scrambled because it was being simultaneously worked on by both of us. ;-)

    Thanks!

  29. Gymshoes
    Member
    Posted 9 years ago #

    Well, it's beginning to look like Podz was correct about the problem--or at least a significant part of it--being with the index.php.

    I went back to the original Trident template and if I do not change *anything* the page layout displays correctly. However, when I swap out the contents of the menu and rmenu---in the php file--the left menu continues to display correctly and the right menu is down at the bottom.

    What I did is cut everything between <div id="menu"> and </div>, then paste it between <div id="rmenu"> and </div> Then I put my site nav (text: I didn't use the image map for this test) between <div id="menu"> and </div> When I do this the right menu displays at the bottom on the page instead of the top. :(

    I tried swapping out the left and right float in the .css file, but oddly, that had no effect.

    So. The question is: If I want my site navigation on the left and the blog navigation on the right, how do I do it?

  30. Gymshoes
    Member
    Posted 9 years ago #

    I've CRACKED IT! Instead of swapping the *contents* of the divs in the index.php file, I swapped the position of the divs themselves and it works! Site nav is on the left. Blog nav is on the right. Both menus are at the top of the columns. The columns are even and extend the length of the page.

    Whew! :-)

    Of course, right now I've got the default image instead of my own for the left column and I've got text nav instead of my image map, but the layout is displaying properly. I will continue to fiddle with it to see if I can get my images to work in this layout, but if I had to I could live with it as it is now.

    Thanks dawg and podz for their help. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.