brysonprice Posted February 23, 2011 Report Share Posted February 23, 2011 #1 The word "biography" is an image that I've placed in the HEADER. How do I nudge the "biography" down a little so that it's not at the very top of the page? http://i187.photobucket.com/albums/x292/bigbonthabeat/bioproblem.jpg CODE FOR #1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">'>http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bryson Price Music</title> <style type="text/css"> #wrapper { text-align: left; width: 960px; position: relative; padding: 0px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; height: auto; background-color: #FFF; } body { background-repeat: repeat; text-align: center; margin: 0px; padding: 0px; } .biobody { background-color: #e9e6e6; border: 3px solid #282828; height: 400px; width: 896px; margin-right: 34px; margin-left: 36px; clip: rect(auto,34px,auto,36px); } .belowheader { height: 122px; width: 899px; margin-left: 38px; } .header { height: 170px; background-color: #e9e6e6; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 3px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-top-color: #282828; border-right-color: #282828; border-bottom-color: #282828; border-left-color: #282828; text-align: center; } </style> </head> <body> <div class="header" id="header"><span class="Biography"><img src="../New Design/Sliced menu/Menu words/sky-logo-font---sliced-in-photoshop_03.png" width="530" height="106" alt="biography" /></span></div> <div id="wrapper"> <div class="Biography" id="biography"></div> <div class="fancy" id="fancy"> <div class="belowheader" id="belowheader"><img src="../New Design/Sliced menu/biography/below-header_03.png" width="899" height="122" alt="belowheader" /></div> </div> <div class="biobody" id="biobody"> <p>Biography content here</p> <p> </p> </div> </div> </body> </html> #2 No matter what I do, I can't get the YOUTUBE,TWITTER, FACEBOOK and GMAIL logos centered. It looks fine in Dreamweaver, but when I preview it in a browswer, it looks stuck to the left (as in the picture below) http://i187.photobucket.com/albums/x292/bigbonthabeat/contact.jpg CODE FOR #2 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bryson Price Music</title> <style type="text/css"> #wrapper { text-align: left; width: 960px; position: relative; padding: 0px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; height: auto; background-color: #FFF; } body { background-repeat: repeat; text-align: center; margin: 0px; padding: 0px; } .Biography { background-color: #e9e6e6; text-align: center; border-top-width: 3px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 3px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #282828; height: 130px; width: 580px; margin-top: 40px; margin-right: 200px; margin-left: 200px; } .biobody { background-color: #e9e6e6; border: 3px solid #282828; height: 400px; width: 896px; margin-right: 34px; margin-left: 36px; } .belowheader { height: 122px; width: 899px; margin-left: 38px; } .4contacts { text-align: center; width: 896px; position: fixed; height: 178px; padding-top: 50px; } </style> </head> <body> <div id="wrapper"> <div class="Biography" id="biography"><img src="../New Design/Sliced menu/Menu words/sky-logo-font---sliced-in-photoshop_11.png" width="435" height="107" alt="contact" /></div> <div class="fancy" id="fancy"> <div class="belowheader" id="belowheader"><img src="../New Design/Sliced menu/contact/contact-below-header_02.png" width="899" height="122" alt="contactbelowheader" /></div> </div> <div class="biobody" id="biobody"> <p>contact content here</p> <div class="4contacts" id="4contacts"><img src="../New Design/Sliced menu/contact/4-contacts_03.png" alt="4contacts" width="430" height="178" /></div> <p> </p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 23, 2011 Report Share Posted February 23, 2011 You'll have to post the code you are working with, or a link to the site. There isn't much we can do without knowing what code you are working with. Quote Link to comment Share on other sites More sharing options...
BeeDev Posted February 23, 2011 Report Share Posted February 23, 2011 You can just use Padding or Margin for the first question. margin-top: 5px; OR padding-top: 5px; For your second question, as Ben says we need to see how it's coded. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted February 23, 2011 Report Share Posted February 23, 2011 (edited) The second question looks like you should just be able to wrap th logos in a fixed width div and give the div margin auto. Or actually those logos I imagine are img's. Which is inline. So you could also just give the existing container text align center. Then your HTML just looks like... img img br img img. Edited February 23, 2011 by Eric Quote Link to comment Share on other sites More sharing options...
brysonprice Posted February 23, 2011 Author Report Share Posted February 23, 2011 You'll have to post the code you are working with, or a link to the site. There isn't much we can do without knowing what code you are working with. I'm sorry...forgot to post it, but I just edited my orginal post right now Quote Link to comment Share on other sites More sharing options...
brysonprice Posted February 23, 2011 Author Report Share Posted February 23, 2011 You can just use Padding or Margin for the first question. I tried that, but it moves the whole div down...not just the word "BIOGRAPHY" Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 23, 2011 Report Share Posted February 23, 2011 I tried that, but it moves the whole div down...not just the word "BIOGRAPHY" Where did you add the margin /padding to? Have you tried adding a top margin or padding to the very image inside your header? Also, I notice that some of your classes and IDs start with lower case, some with upper case - you'll save yourself a lot of trouble in the long run, if you pick lower case for EVERYTHING and stick with it. These things are case sensitive. Quote Link to comment Share on other sites More sharing options...
brysonprice Posted February 23, 2011 Author Report Share Posted February 23, 2011 Where did you add the margin /padding to? Have you tried adding a top margin or padding to the very image inside your header? Also, I notice that some of your classes and IDs start with lower case, some with upper case - you'll save yourself a lot of trouble in the long run, if you pick lower case for EVERYTHING and stick with it. These things are case sensitive. Thank you for answering the 1st question Andrea...it was so simple! I didn't know I could add padding to an individual image. I thought you could only add it to a div, but then I googled it and found what the "H" and the "V" meant in the image properties. I'll remember to stick with lower case. thanks! Now I just need to find an answer to my question #2 Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 23, 2011 Report Share Posted February 23, 2011 If I remember correctly, you may be having issues with #2 since technically class names can't start with a number ("4contact"). Try changing the name to start with a regular letter ("four-contact"?), and see if that fixes things. If not, I'll take a more in depth look. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 23, 2011 Report Share Posted February 23, 2011 If nothing else: #4contacts (or .4contacts) img {margin-left: 233px;} should center this. why are you using 4contacts ID and class? Quote Link to comment Share on other sites More sharing options...
newseed Posted February 23, 2011 Report Share Posted February 23, 2011 Ben is right. You cannot start with a number for id or class. Quote Link to comment Share on other sites More sharing options...
Andrea Posted February 23, 2011 Report Share Posted February 23, 2011 Yup - I forgot about that number thing: http://www.456bereastreet.com/archive/200902/creating_valid_names_with_the_id_attribute/ but still - why a class and an id? Not that it's wrong, sometimes there's a good reason, but this is a pretty simple layout - and using the same name for both might also lead to confusion. Quote Link to comment Share on other sites More sharing options...
brysonprice Posted February 23, 2011 Author Report Share Posted February 23, 2011 Thank you so much everyone! I had no clue that the name CANNOT start with a number. This solved the problem Andrea, that is just how I learned to do things when watching youtube Quote Link to comment Share on other sites More sharing options...
grabenair Posted March 6, 2011 Report Share Posted March 6, 2011 Here is a little trick for making you code easier to read. When you have have more then one word in code and can not have any white space, try camel casing. Camel casing is making your next word start with upper case like goodMorning. Also you can use the underscore like this good_morning. This is standard coding convention. But I would suggest picking one and sticking with it. 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.