sschlangen Posted May 4, 2011 Report Share Posted May 4, 2011 Hey killer, I am stumped on this for some reason, I am trying to get together this banner, and I am placing two images side by side. here is the html: <a href="index.html"><img src="images/ralph.jpeg " border="0"></a> <div id="topBanner"> <a href="index.html"><img src="images/topBanner.png " border="0"></a> </div> and the CSS #topBanner{ position:absolute; left:300px; top:7px; } I put it in the division tag so I could place it right where I wanted it, but when the screen is not maximized, it doesn't adjust. what i mean is you have to view it full screen in order to see it all lined up....what I was thinking was if I place the whole thing in a div, but I don't know how to position it accordingly. So in short is there a css style to make that container adjust when not being viewed in the browser fullscreen? Or am I going about this all wrong? Thanks in advance Shrek PS I cant attach what I am seeing, images are to big Quote Link to comment Share on other sites More sharing options...
falkencreative Posted May 4, 2011 Report Share Posted May 4, 2011 Assuming I understand you correctly... Absolutely positioned elements align themselves to the top left of the browser, unless you specify otherwise. Which means, as you are finding, their position may change if the browser size itself changes. What you can do, however, is enclose the absolutely positioned element within something that has "position:relative" applied to it. The absolutely positioned element will then be positioned based on the relatively positioned element. For example: HTML: <div class="wrapper"> <a href="#">Link</a> <div class="absolute">Absolutely positioned element</div> </div> CSS: .wrapper { width:600px; margin:0 auto; position:relative; } .absolute { position:absolute; top: 20px; left:20px; } The .wrapper div has a width of 600px, and the margin:0 auto part centers the div horizontally on the screen. Since the .wrapper div has position:relative, the .absolute div is positioned based on the wrapper div. The top/left values will position it 20px from the top of the .wrapper div, and 20px from the left of the .wrapper div. Make sense? Quote Link to comment Share on other sites More sharing options...
sschlangen Posted May 4, 2011 Author Report Share Posted May 4, 2011 yes it did work, I am really excited about that concept. I would like to show you the completed workup. There is not much data but its what I have learned straight from the tutorials. You guys are amazing. I dont want to get flagged for spam but this is what I can do now straight from notepad just by watching your basic web developer course. d e v.sschlangen(dot)org. that is the site. I didnt want to link to it directly because I think I read a stick somewhere on it, but if you would like to see my progress there she is. I am wiped, ready for some sleep. Thanks for all you do Killer Shrek Quote Link to comment Share on other sites More sharing options...
Andrea Posted May 4, 2011 Report Share Posted May 4, 2011 Nice work. A couple things I notice: Your doctype is not complete. It should look like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> H tags should be used by priority - so the most important header on your page, should be h1 - in this case, that should be for 'Law Offices of ...... You can still syle the h tags to look any way you want in the CSS, but spiders pick up on their ranking. White on black is hard to read, especially your small, serif font. And you have 3 'e's in Market Street. In your CSS, you probably don't need all those relative positions, especially not on the body - that's the entire thing, that can't really be relative. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.