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 PointsDream weaver sees it differently
I've posted the files here, but also online HERE: http://baxter5.com/new/index.html
Illustration of ultimate goal here: http://baxter5.com/new/img/template.jpg
Problem is with placement ONLY (I know numerous hurdles, but first things first) of first 2 elements class "book" (iframe) and class "box"
"box" is overlapping "book" . Also box should be lower and book should be higher. book was fine until I added box. Please help - thanks
~Michelle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="css/normalize.css" rel="stylesheet" type="text/css" /> <link href="css/grid.css" rel="stylesheet" type="text/css" /> <link href="css/b5.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Baxter Five - Vacation & Short Term Rentals Los Angeles</title> </head>
<body> <hr class="header" />
<iframe class="book" style="height: 201px; width: 252px;" src="https://Secure.RezOvation.com/Reservations/CheckAvailabilityEmbedded.aspx?_0H63RJ5PUANDV6" noresize frameborder="no" scrolling="no" allowtransparency="true"></iframe>
<div class="box"> Baxter Five <br /> <ul> <li>Explore Hotel</li> <li>Rooms</li> <li>Apartments</li> <li>Neighborhood</li> <li>Special Offers</li> <li>View Map</li> <li>Book Now</li> </ul> </div>
<hr class=footer />
</body> </html>
@charset "utf-8"; /* CSS Document */
body { background-image:url('img/front.jpg'); background-repeat:no-repeat; background-position:left top; }
hr.header { margin: 0px; color: #000; background: #000; width: 100%; height: 40px; position: fixed; top: 0%; }
.book { position: fixed; left: 0%; margin-left: 0px; margin-top: 42px; }
.box { position: relative; margin-top: 65px; margin-left: 50px; width: 300px; }
hr.footer { margin: 0px; color: #000; background: #000; width: 100%; height: 30px; position: fixed; bottom: 0%; }
4 Answers
Kevin Korte
28,149 PointsThe reason they are overlapping is because of the position fixed in the CSS. You're taking that element out of the natural flow and telling the browser where you want it regardless of anything else on the page.
Also, position fixed means that element will not scroll when the page is scrolled. It will stay exactly there on the screen. Everything else will scroll in front of or behind it.
If this is what you want, you can give book a high z-index, of say 1000. Then box will be overlapped by book when scrolling.
I hope that helps you.
michelle salsbury
Courses Plus Student 569 PointsOkay deleting position all together worked! Book is now staying right where I put it in the upper left corner, regardless of window size. So, 1 answer.
Now my box problem? I'd like the box to float on the page about 65px from the top, but never over lap the book.
~Michelle
Kevin Korte
28,149 PointsOkay, so currently box has a 65px margin from the bottom of book. Do you want box to below book still, or next to it?
michelle salsbury
Courses Plus Student 569 PointsHi kevin,
I did an illustration of desired layout. http://baxter5.com/new/img/template.jpg So floating just to the right of 'book' Ideally floating to the right of book, but if the window gets to small, never traveling below book. Always 65px from the tippy top of window.
~Michelle
.book { left: 0%; margin-left: 0px; margin-top: 42px; }
.box {
float:left;
margin-left: 300px;
margin-top: 65px;
width: 300px;
}
michelle salsbury
Courses Plus Student 569 PointsAgain - it looks different in DW Is there a list of css tags? I know it's on w3.org, but I can never find the full list css tags.
~m
michelle salsbury
Courses Plus Student 569 Pointsmichelle salsbury
Courses Plus Student 569 PointsThanks Kevin - I'll ltry that!