:: 2 positioning questions ::

brysonprice · 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>

<title>Bryson Price Music</title>

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

<p>Biography content here</p>

</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">

<head>

<title>Bryson Price Music</title>

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

<p>contact content here</p>

</div>

</body>

</html>

falkencreative · 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.

BeeDev · 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.

PicnicTutorials · February 23, 2011

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

brysonprice · 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

brysonprice · 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"

Andrea · 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.

brysonprice · 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

falkencreative · 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.

Andrea · February 23, 2011

If nothing else:

#4contacts (or .4contacts) img {margin-left: 233px;} should center this.

why are you using 4contacts ID and class?

newseed · February 23, 2011

Ben is right. You cannot start with a number for id or class.

Andrea · 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.

brysonprice · 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

grabenair · 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.

Sign In

:: 2 positioning questions ::

Recommended Posts

brysonprice

falkencreative

BeeDev

PicnicTutorials

brysonprice

brysonprice

Andrea

brysonprice

falkencreative

Andrea

newseed

Andrea

brysonprice

grabenair

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Store

Support