** How to nudge this image up / center it **

B

bigbonthabeat

New Member
contact.jpg


I usually don't have a problem centering and moving divs around, but for some reason, this one won't move the way I want it.

I want to move the YOUTUBE, TWITTER, FACEBOOK & GMAIL logos (they are combined in one image) up and center them.

How would I do this?

Here is the current code for this project:

<!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;
}
</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>&nbsp;</p>
</div>
</div>

</body>
</html>
 
ronaldroe

ronaldroe

Super Moderator
Staff member
My bad. I gave you very incomplete instructions. Remove the div the img tag is in. Ad id="4contacts" to the img tag.
 
B

bigbonthabeat

New Member
ronaldroe said:
My bad. I gave you very incomplete instructions. Remove the div the img tag is in. Ad id="4contacts" to the img tag.
Click to expand...

It's all good, I just appreciate that you are taking the time to help me : )

I tried to put this:

id="4contacts" {position:relative; left:50%; margin:-215px;}

under my .4contacts, inside the style tag...but it came out looking the exact same
 
ronaldroe

ronaldroe

Super Moderator
Staff member
Put this between the style tags:
#4contacts img{position:relative; left:50%; margin:-215px;}

Add this inside the img tag:
id="4contacts"
 
B

bigbonthabeat

New Member
ronaldroe said:
Put this between the style tags:
#4contacts img{position:relative; left:50%; margin:-215px;}

Add this inside the img tag:
id="4contacts"
Click to expand...

do you mean like this?

#4contacts img{position:relative; left:50%; margin:-215px; id="4contacts"}

If so, I tried this and it didn't work
 
K

Kat- EtherClear

New Member
I'm assuming from what he said that you would need to do it like this:

<!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;
}

#4contacts img{position:relative; left:50%; margin:-215px;}

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

<img src="../New Design/Sliced menu/contact/4-contacts_03.png" alt="4contacts" width="430" height="178" id="4contacts" />

<p>&nbsp;</p>
</div>
</div>

</body>
</html>

Of course removing any BB tags that may come from copy & paste. Hope this works!
 
You must log in or register to reply here.
Top