Jump to content

:: 2 positioning questions ::


brysonprice

Recommended Posts

#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>

Link to comment
Share on other sites

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 by Eric
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...