#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2015
    Posts
    27
    Rep Power
    0

    Problems with page layout using css


    I am trying to modify a webpage for my wife's business website. I need to take five current pages that are used class sign-up locations and add an additional class line up to each page. I am doing this using CSS in Dreamweaver. I got my correct layout once in IE but then in Chrome the first line was overwriting the heading line as it shows now.

    My secondary issue is that the original table on the right holding our schedule has a lime green background. When I copied this table to the left side of the page I lost the light green and can't figure out how to get it back. My preference would also be that the two schedule tables would line up evenly vertically with each other at the top of the page below the heading.

    Sure appreciate some help. I'm sure this is pretty basic, but I'm kind of stumped here.

    I am including a screen shot from my monitor using Dreamweaver showing what I want it to look like.

    The page presently seen by our customers is at:
    Alcohol Awareness Class in The Woodlands, TX

    The new page that has my current modifications (butchering) is at:
    Alcohol Awareness Class in The Woodlands, TX

    My Style sheet is located at:
    http://www.alcoholawarenessassociates.com/css/style.css

    What I see on Dreamweaver layout wise and am trying to replicate on browsers:


    Truly appreciate any help!
    Thanks,
    John
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    937
    Rep Power
    279
    ok, I edited your CSS file to what I thought you were going for.
    attached should be the edited file.
    backup your old style.css file and replace it with this one [after removing the .txt extension]
    Attached Files
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2015
    Posts
    27
    Rep Power
    0
    Originally Posted by DonR
    ok, I edited your CSS file to what I thought you were going for.
    attached should be the edited file.
    backup your old style.css file and replace it with this one [after removing the .txt extension]
    Wow Don, really appreciate it!
    I studied your CSS trying to figure out where I went wrong. I saw the extended margin at the top of the left schedule block for alignment, that worked real well.
    I noticed, as I hadn't before. that I had a listing for "table" in my css associated with schedule and now (with your help) dwi_schedule. Can I assume that's how you brought back my lime green background on the left side?
    How did you keep the center text area from overrunning the Heading that shows the class location?

    Only one more thing and I will be done with this page. The two table schedules appear slightly different in regards to padding around the text, the one on the right has more padding. It's causing the table to sit a little lower from the top too. I can't see any difference in the CSS to cause this. Do you have any insight as to how I could fine tune my CSS and get them to match?
    Alcohol Awareness Class in The Woodlands, TX
    Thank you again for running with this and going above and beyond!
    Thanks,
    John
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2015
    Posts
    27
    Rep Power
    0
    Hey Don, I figured out the padding issue! There was a "schedule table td" in CSS that I had to replicate for the left side.

    Would sure appreciate any other explanation you can help with though from the questions on my last post.

    Thanks Again!!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2015
    Posts
    27
    Rep Power
    0
    Originally Posted by John S
    Hey Don, I figured out the padding issue! There was a "schedule table td" in CSS that I had to replicate for the left side.

    Would sure appreciate any other explanation you can help with though from the questions on my last post.

    Thanks Again!!
    Don, there is a post missing prior to my last that required an administrator to approve it. I guess because I included a link in it. Check it out when it gets the "final approval" It was a thank you with a couple questions and an issue I resolved.
    Thanks!
    John

    Comments on this post

    • Will-O-The-Wisp agrees : Apologies! It was indeed the link that held your post in our moderation queue. I've approved it.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    937
    Rep Power
    279
    Originally Posted by John S
    I noticed, as I hadn't before. that I had a listing for "table" in my css associated with schedule and now (with your help) dwi_schedule. Can I assume that's how you brought back my lime green background on the left side?
    the lime green color was originally applied to .schedule table table , and since your .dwi_schedule had the same html layout, I changed line 278 [in the new css file] from .schedule table table to .schedule table table, .dwi_schedule table table to apply that to both.

    Originally Posted by John S
    How did you keep the center text area from overrunning the Heading that shows the class location?
    I increased the height (and fixed your padding typo..you forgot the 'px') for .dwi_class_heading

    Originally Posted by John S
    Only one more thing and I will be done with this page. The two table schedules appear slightly different in regards to padding around the text, the one on the right has more padding. It's causing the table to sit a little lower from the top too.
    I'm assuming from your next post, that you found the CSS rule for .schedule table td that had the padding-top:10px; (line 275 in new CSS file) and found that if you changed that to .schedule table td, .dwi_schedule table td , that it fixed that padding issue you were talking about.


    PS: I notice you use Dreamweaver...I used to use Dreamweaver a long time ago and found out that the Design View isn't completely accurate when it comes to layouts and CSS. It'll get you close, but, you still need to do some tweaking to the CSS to get it right....which means having to learn the CSS language. If you are interested in actually learning CSS, check out the tutorials at Codecademy.com. I've been using that site as a stepping stone for learning Javascript and AngularJS and some other languages. Good luck to you.

    Comments on this post

    • Will-O-The-Wisp agrees : Thanks for helping out here!
    Last edited by DonR; October 6th, 2015 at 01:55 AM.

IMN logo majestic logo threadwatch logo seochat tools logo