Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
michelle salsbury
Courses Plus Student 569 Pointsimage "front.jpg" is wiping out my table when resized.
Template (stagnant illustration of how it should look) http://baxter5.com/new/img/template.jpg
Home page file http://baxter5.com/new/index.html
Css http://baxter5.com/new/b5.css http://baxter5.com/new/normalize.css
I finally get it framed the way I want and now the image is obliterating the left side of the page when I resize the page.
6 Answers
Thomas Daugherty
23,983 PointsFirst time doing this so bare with me. I personally think the Table Should come before the Image. But from what your template shows it seems as if you want to have 1/2 of the page to be the interface and the other be the image. So maybe you should warp the Interface in a div to hold all interface contents and other hold the image. To solve your issue have the Interface Float Left and the Image container Float Right. You could also add a width to both Containers at 50%. I hope this helps.
<body>
<div id="interface_container" style="float: left;">
<table></table>
</div>
<div id="image_container" style="float: right; background-image: url('/img/background.jpg')"></div>
</body>
michelle salsbury
Courses Plus Student 569 PointsHi Thomas,
I love that you tried. However; my goal is to try and do this with a grid instead of tables. However; I think your division of the site is very clever. I actually think this could work to remove the table. I could use the grid system for the ul element.
I'm going to give it a shot.
I'll try your code then upload as thomas.html
In the interim... belos is my source of inspiration.. http://www.thompsonhotels.com/hotels/la/hollywood-roosevelt?source=google+Roosevelt+TopBrand+TopBrand+roosevelt%20hotel
When I view the pages of this site my spirit expands.
~Michelle
michelle salsbury
Courses Plus Student 569 PointsI posted your file. I don't know what I did wrong, I can't get the image to display.
~m
Thomas Daugherty
23,983 PointsCheck it out. They are using the same method as I had suggested. This may save you a lot of time. If you use Modern web browsers they support Developer Tools. Google Chrome, by far my favorite, can allow you to dig into websites to find out how they made using their dev tools. Read more here: Chrome Dev Tools
michelle salsbury
Courses Plus Student 569 PointsThat's brilliant!
I just tried.
Earlier, I posted 2 pages in your name... Layout with table: http://baxter5.com/new3/thomas.html Layout with grid_4 or grid_6 (doesn't matter which it looks the same - not connected) on UL http://baxter5.com/new3/thomas2.html
I tried to sort out any grid errors using your chrome trick - it's not connecting to the grid and I can't see the error.
Thomas Daugherty
23,983 PointsThere's a lot of work to do to give a simple answer but hopefully the tools will let you tear up their website to find out what makes it tick. This has always helped me out trying to do cool tricks like their website. But I hope you can figure it out. Your on the right path but I suggest you remove the background image from the body and image container. Try doing this...
<div id="image-container">
<img src="/img/background.jpg"/>
</div>
michelle salsbury
Courses Plus Student 569 PointsI'll try that thank you.
~Michelle.