I'm trying to make a simple site, that showcases my music. Mainly for practice. Basically I have a navigation bar on top, header over image on left. Music widget under left img, and Main content on the right (of img). I used the margin attribute to get the paragraph more centered on the right but the only problem is that when my content gets below the image, it can't be next to the music player because of the margin i set on the paragraph. Here's the html and css. I'm a beginner and i'm sure i'm making it more messy and probably not doing certain things properly. So any advice is appreciated. -------------------------------------------------------------------------------------- <!DOCTYPE html> <html> <head> <title>Bradley Pink music</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="body"> <ul class="navbar"> <div class="navDiv"> <li> <a href="#">Home</a></li> <li><a href="#">Music Shop</a></li> <li><a href="#">Contact</a></li> </ul> <hr> <h1 class="nameheader">Bradley Pink</h1> <img id="face" src="http://i465.photobucket.com/albums/rr13/pinkstink123/youtube_profile.jpg" alt="gary"> <h3>Music</h3> <div id="content"> <p>You can purchase my music from this page. Payments are secure, through paypal. <br/><br/> Visit my youtube page to see <a href="htttp:www.youtube.com/bradleypinkmusic">videos</a> </p> <br/> </div> <iframe title="Store Widget" src="http://www.cdbaby.com/widgets/store/store.aspx?id=6spf0tRHk%2fp4YdJcorfbaQ%3d%3d&type=ByCustomer&c1=0x0E0101&c2=0xFFFFFF&c3=0xBE1111&c4=0x685D5D&c5=0xBE1111&c6=0xBFBFBF&c7=0xDBDBDB"></iframe> </div> </body> </html> --------------------------------------------------------------------------------------- body{ background-color:white; } #body{ width:90%; } .navbar{ list-style-type:none; margin:0; text-align:center; background-color:#600; border:1px solid black; } .navbar a{ text-decoration:none; color:white; font-size:15px; margin:28px; } .navbar li{ display:inline; } a:hover{ color:gray; } .nameheader{ margin-left:175px; font-family:"Georgia",serif; font-size:28px; } #face{ float:left; width:450px; height:460px; border:1px solid black; margin-left:45px; margin-bottom:65px; } iframe{ width:450px; height:550px; margin-left:45px; border:1px solid black; } p{ width:45%; margin-left:540px; color:black; background-color:#D8D8D8; } h3{ margin-left:690px; margin-right:0 auto; }
First off, if you're not actually going to use HTML 5 (I advise against it) get an actual RECOMMENDATION doctype on there. You don't have any MEDIA target for your stylesheet embed, and 'style.css' no matter how many crappy online tutorials suggest it, is needlessly vague. You cannot put a DIV as a direct child of UL (navDIV), and you fail to close it... NOT that there is likely any real reason to even HAVE an extra DIV there as there's little you can do to a DIV you can't do to a UL. I would suggest moving the H1 BEFORE the menu since the H1 is the heading under which all other headings and all content of the page is a subsection. Likewise skipping to a H3 makes no sense since H3 means "start of a subsection of the H2 before it" -- and you have no H2 before it. ... and one REALLY shouldn't be using IFRAME's ... for ANYTHING. Link to the store or make a real store that's part of the page. Wait, is that your 'music player'? IFRAME's are even MORE of a pain in the arse on things like that. I'd suggest finding a music player that embeds properly using an OBJECT as it's easier to design around; after all there's a REASON IFRAME was deprecated FIFTEEN YEARS AGO! Though really what you are asking is kind-of vague without seeing it live, as I'm not sure what you mean by 'past the image' and 'margins on the paragraph' interfering with the 'player'. your CSS is really bad though -- these massive margins and padding's for nothing, particularly that one on the H3 that makes no sense whatsoever. I'm not sure what you are trying to accomplish for a layout there, I am sure 'yer doing it all wrong'... even the inaccessible px metric font settings, changing font-size without restating the line-height, and incomplete font-family declarations really don't speak well for the page.
Just create the two part of the in content area. one is float left and one is float right. put the things in left part and the content on right hand side div area.
I agree with creativewebmaster. You can use float left and right. Just experiment and experiment until you get the right layouts that will suite your eyes.
I would put the image in a div and then assign margins to the image div. drop that div into the text div and position or float it and the text will respectively wrap around it.