Centering Title in Header and Adding Pics to Header [Archive]

tbenson80

06-06-2010, 07:12 AM

Hello,

I am new to html/css (with a general background in coding) and learning the ropes by working on a website for a friend. I would like to center the logo in the middle of the page, as well as adding one picture on each side of the logo. The website is: http://www.renuyoursmile.com. However, I have tried adding a picture in the CSS code and the HTML code to no avail. I am also not sure on how to center the logo. Any help would be much appreciated. I have included what I think is the relevant code for reference:

CSS Code:

#ReNulogo {
width: 420px;
position: center;
height: 480px;
background: #CCC url(ReNuYourSmile.jpg) no-repeat center top;
padding: 0;
color: #FFF;
}

#content {padding:25px 20px; min-height:400px; height:auto !important; height:400px;}

.content-in {padding:10px 15px;}

#aside {float:right; overflow:hidden; width:230px; padding:10px;}

#aside .title {margin:0; font-size:100%; font-weight:bold;}
#aside .aside-padding {padding:0 0px 15px 0;}

#footer {clear:both; padding:15px;}
#footer p {margin:0;}

/* ----------------------------------------------------------------------------------------------------------
5) Page: Home
---------------------------------------------------------------------------------------------------------- */

#topstory, .article {position:relative; padding:10px 15px;}
#topstory .info, .article .info {padding-bottom:2px;}
#topstory .info h2, #topstory .info p, .article .info h3, .article .info p {margin:0;}
#topstory .info p, .article .info p {padding-top:5px;}
#topstory p.date, .article p.date {display:block; position:absolute; top:0; left:-50px; margin:0; overflow:hidden; width:50px; height:41px; text-align:center;}
#topstory p.date span, .article p.date span {display:block; padding-top:14px; font-size:85%; font-weight:bold;}
#topstory p, .article p {margin:10px 0;}

.article p {margin:10px 0;}

HTML Code:

<body>

<div id="header" class="box">
<div class="main">
<div id="ReNulogo">
</div>


</div> 

</div>

shapeshiftr

06-06-2010, 09:01 AM

I'm not sure if you've tried this (you said something about trying around with the html code) so go ahead and see if this works. Even though it doesn't use CSS it should get the job done.

This is the HTML:

<body>

<div id="header" class="box">
<div class="main">
<div id="ReNulogo">
<center>
<img src="ReNuYourSmile.jpg">
</center>
</div>


</div> 

</div> 

Just replace #ReNulogo and its contents with:

#ReNulogo {
width: 420px;
position: center;
height: 480px;
background: #CCC
padding: 0;
color: #FFF;
}

Hope this helps! I tested it and it looks like it worked, but there may be something elsewhere on the page messing it up, idk, I didn't copy the whole thing.