Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Frustrated with Dreamweaver CSS Designer...

Layout is has header/nav, main, rightsidebar and footer. On two of my pages the main div is floating left and the sidebar is floating right... perfect (examples http://www.1800gotblinds.com/index-draft.php and or http://www.1800gotblinds.com/products.php

However the http://www.1800gotblinds.com/about.php page is NOT... why??

Thanks so much in advance! Donna

10 Answers

Hi Donna!

I think for a simple right side-bar such as this, you may want to consider using percentage widths instead of floating. i.e. set your main body to take up 70% and your side bar 30%. When the device width get's smaller, set them to 100% each and you have a really nice and simple fluid design :-)

Also watch our for those pesky table based layouts in your sidebar and footer ;)

A quick right click - view source on your page brings up quite a lot of red. I'm using the latest firefox on mac (I'm not sure very browser does this) but in my page source, it highlights the html errors in red.

From what I can see, you've defined the <!doctype html> a few too many times (make sure it's just the once at the top of the script!). There's also a number of <html> and <body> tags - again, you should only need one one pair of these!

Also highlighted are a few div tags - make sure that you've closed all the <div> tags that you've opened, and all tags are within a single pair of <body> tags.

As an example - your footer looks like this.

<div class="fluid Footer"><!doctype html>
<html>
<body>
<table style="width:100% ; #FFFFFF; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-weight: bold; font-size: 100%; margin-left: 60px; margin-top: 0px; margin-right: 60px; margin-bottom: 0px; color:#e88e22 ">
<tr><td style="width:25%;" ><p style="font:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif; font-size:70%; color:#fff; font-style:italic; text-align:center;" >Suppling Calgary with Hunter Douglas & Shade O Matic Window Coverings for Over 10 Years!</p></td> <td style="width:75%; text-align:center;" >
<img src="../images/facebook.png" width="23" height="24" alt=""/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/pinterest.png" width="24" height="24" alt=""/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/twitter.png" width="23" height="24" alt=""/><br>Free in-home Consultation!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;403-466-6886   </td></tr>
</table>
</body>
</html></div>
</div>

</body>
</html>

Watch out for Dreamweaver adding automatic code to a new file - if you're using includes for the footer etc, maybe you've kept Dreamweaver template code in by accident?

After you've got all your tags in the right places - your problem may well disappear. Lot's of strange things can start happening to your css if the html tags are a little messy :-)

Hope this helps!

Thank you for your quick reply. The header, sidebar and footer have been set up with <?php includes as they stay the same on all pages. Thank you I have removed any redundant doctype in my php pages. Yes, I shouldn't be using tables in these three elements but I can't get a good handle YET on css to do them in any other way.

So basically the index-draft page I have used as a "template", as it was lining up as I wanted and all I did is removed the main content and swapped out the info for the various sub pages, ie., about, etc.

but the about page is still not formatting like the index page, the "main" does not allow the rightsidebar to move up on the right hand side.. and yet it does for the about page....

Still can't figure it out.

D

Hmmm so one big difference I've seen between the about-us and product pages: Your right side bar on the product page is currently nested inside the 'a' tag of the final product in your list. For whatever reason, there's also a redundant closing div tag.

I think you'll find more success by debugging your html before focussing on your css :-)

I think Dreamweaver should show lines with errors on in red - but only in the current file. If you're using includes, you have to go over with a fine-tooth comb to make sure you haven't left any divs open between the files. For example, if you open a div in the header and forget to close it in the footer, this error won't show in Dreamweaver but it's likely to upset your css ;)

Tom

Thanks Tom. So I have narrowed and it's almost the text is not "wrapping". If I use short sentences it works just fine.

http://www.1800gotblinds.com/about.php

Thoughts?

Looks much closer to how you want it!

I realize it's annoying me mentioning this again because it's not a fix to your solution (rather a totally different option!), but using simple percentage widths will sort your problem - plus you can insert any content you want without having to worry about sentence length. I should probably mention that I don't like floats because I never get them right :p

It it was me, I would do a very simple:

.main,
.rightsidebar {
  box-sizing: border-box;
  moz-box-siding: border-box;
  //maybe set an option min-height also
}

.main {
  width: 80%;
}
.rightsidebar {
  width: 20%;
}

Here is the treehouse badge which best describes what I'm trying to suggest http://teamtreehouse.com/library/css-layout-techniques/grid-layout/understanding-grids

And if you haven't checked them out already, here are the videos for floats and layout techniques http://teamtreehouse.com/library/css-foundations/the-box-model/floats-2 http://teamtreehouse.com/library/css-layout-techniques

I'm all out of ideas but best of luck! I hope you find a fix :-)

Hey, hope you are still talking to me.. LOL! I changed it to your suggestion (thank you), although now the rightsidebar does not fit on any of the pages.....

D

Hi Donna,

Remember that you only have a 100% max width across the page. 80% + 20% = 100% Great! But you also have some pixel margin applied to the content and rightside divs which is taking your overall width above 100%. I removed the margin by playing in the console (right click > inspect element) and the page layout displayed correctly.

The first two badges in this course

http://teamtreehouse.com/library/build-a-responsive-website

will help you out loads with this one!

Thanks again! I removed the margins, but still the rightsidebar doesn't move up. I am trying to review the courses to see what else I have missed. Thanks Donna

I'm looking at your about-us page right now -

There's some pixel margin being applied to the .main class on line 61 in syles-main.css.

When I remove that margin, the rightsidebar moves up :-)

Your awesome... thank you!!!!!! Obviously I have a lot to learn... but nothing ventured nothing gained!

Why does it look so different say between internet explorer and Chrome? Chrome appears to be so much bigger although still set at 100% zoom. Also in Chrome the rightsidebar goes all the way to the right, not like IE where it aligns under the header nicely. I thought the rightsidebar would stay contained within the gridcontainer?

Thanks Donna

Hmm, so there's always going to be differences between browsers (bluurgghhh!), which is one of the arts to dealing with css. Percentage widths on there own are universal across all browsers so it sounds like there's something else causing the issue.

If you're on chrome, I would suggest using the developer tools to find out what's going wrong. You can edit your css live (although it won't be saved so you have to remember what you've done!). You can also view the box model on a particular container to see if there's anything wrong with it.

You should be able to get to the developer tools by right clicking on the page and going to something like 'inspect element' or 'console'.

I think this might help you out: http://teamtreehouse.com/library/website-optimization

specifically this video: http://teamtreehouse.com/library/technology-foundations/chrome-devtools-basics/the-elements-panel

It speeds up debugging loads!

Watch out on your 'products' page - This a tag:

<a href="drapery.php"><br><br><br><img src="products/product-drapery.jpg" alt=""/>

doesn't have a closing...

</a>

...tag ;)

Thanks, I will keep trying to look and correct the Chrome issue. So I guess my next issue is images. Finding a balance of size for all browsers and/or media. For example, at 100% in IE the images almost looks small but when looking in Chrome their almost too big!

You have been a huge help!!!!!!

Thanks D

No worries, just keep playing with the percentages and see how it goes :-) The css deepdive is pretty extensive and can take quite a while to go through but it's totally worth it!

Also, I think you mentioned that you were working on swapping out your table based design for a more up to date method - Using the grid layout with div containers acting as rows and columns is totally scalable - You can translate your tables in your footer and sidebar into this layout style.

There are a number of ready made grid systems in existence, Bootstrap being amongst the most popular. You can see the grid system they operate here: http://getbootstrap.com/css/#grid. It's always good to work this stuff out without using a ready-made answer because you gain so much more understanding. In the future though - if it's already created, you might as well use it :-)

Sorry I should have been more specific 100% zoom in IE, not the pictures. And why do ems appear so much bigger in Chrome? I thought ems were recommended for font size?

Thanks

I thought I was okay with using Dreamweaver CC Fluid Grid Layout.... now I am further confused LOL!

So how difficult would it be to "transfer" my current draft into a grid system like the one you recommend?

D

Sorry my misunderstanding....I chose the fluid grid layout system from dreamweaver for the start of the site.... however, I went into table mode for the header, footer and side bar. So I am assuming I can go in and correct those ones using the method you suggest.

D

Yeah sure! I was just giving you some examples of grid systems 'in the wild'.

Be aware of any automated features Dreamweaver has to offer.. to the point where you're probably better off avoiding them altogether! If you want great code, hands on is the best way.

If you were to start a site using something like bootstrap, it's very quick and easy, but you might want to be a little more confident with your css and html before dipping you toe in.

If you are interested in converting, it's super simple. The basic premise: Download the css files, include them in your php header, then add the necessary classes to your html tags. Job done!

There are lots of frameworks - here is one just for grid systems. I just googled "basic css grid framework" and this came top, I'm sure there's many more!

http://thisisdallas.github.io/Simple-Grid/

If you are working with a framework, make sure it's one of the first css files you include.

Not trying to overload but it will give you ideas/speed in creating your project!