Hi,
I’m having issues with the full width header using and image and center my main with a full width footer and its not working right. Here is my draft http://www.stephentemple.com/draft/index.html?Preview=True
What can i do to make my markup work and my css to work. or how do i save my header image to make it work.
It’s asking for Email/Password?
ok sorry.
here is the html part
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header_wrap">
<div id="header"></div>
</div>
<!--nav-->
<div class="top-nav">
<nav class="nav">
<ul>
<li><a href="index.html">Home </a></li>
<li><a href="church.html">The Church </a></li>
<li><a href="pastor.html">Our Pastor</a></li>
<li><a href="lady.html">First Lady</a></li>
<li><a href="ministries.html">Ministries</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
<!--nav end-->
<div id="body-container">
<div id="main-Content">
<div class="tagline">
<img src="images/banner-img.jpg" width="960" height="67" alt="banner-img">
</div><!-- End Tagline -->
<div class="banner">
<div class="slider">
<img src="images/slider.png" width="930" height="370" alt="slider">
</div>
</div><!-- End Banner -->
<section class="blog">
<p><span>Mission Statement:</span> We endeavor to provide you with an environment conducive to spiritual development, moral excellence, soul winning skills and effectiveness, real Christian fellowship, crises therapy, practical life skills, social responsibility, and the exercising of your spiritual gifts. Our goal is to attract those that are not saved to the saving grace of God through Jesus Christ. To aide, them, encourage and strengthen them during the early critical stages of life as a believer. We also endeavor to receive those who are already Christians in such a way that they will be totally pleased with their decision, and quickly feel that they are an intricate part of the congregation life.</p>
</section>
<div id="mainWrapper">
<div id="leftcol">
<div class="block">
<img src="images/welcome.jpg" alt="welcome-img">
</div><!-- End Block -->
<div class="prayer"></div>
<div class=" thumb-box"></div>
</div><!-- End Left Column -->
<div id="rightcol">
<div class="box">
<h3>Intercessory Prayer Line</h3>
<p>6:00am [Tuesdays & Thursdays]<br>
Dial: (712) 432-3900- Code: 524976#</p>
</div>
<div class="box">
<h3>Intercessory Prayer</h3>
<p>7:00pm (Wednesday]</p>
<h3>Hour of Power Service</h3>
<p>7:30pm [Wednesday]</p>
</div>
<div class="box">
<h3>Intercessory Prayer</h3>
<p>9:00am [Sunday]</p>
</div>
<div class="box">
<h3>Sunday School</h3>
<p>9:30am [Sunday]</p>
</div>
<div class="box">
<h3>Morning Worship</h3>
<p>10:30am [Sunday]</p>
</div>
</div>
<div class="clear"></div>
<div class="thumb-buttons"></div>
</div><!-- End Right Column -->
</div>
</div><!-- End Main Content -->
</div><!-- End Body Container -->
<!--footer-->
<footer class="footer">
<div class="footer-nav">
<ul>
<li><a href="index.html" target="_self">Home </a></li>
<li><a href="church.html" target="_self">The Church</a></li>
<li><a href="pastor.html" target="_self">The Pastor</a></li>
<li><a href="lady.html" target="_self">First Lady</a></li>
<li><a href="ministries.html" target="_self">Ministries</a></li>
<li><a href="http://www.facebook.com/pages/Stephen-Temple-Church/481275941888432">Facebook </a></li>
<li class="no-border"><a href="contactus.html" target="_self">Contact</a></li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
the Css
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
margin: 0 auto;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
#header_wrap {
width: 100%;
height: 341px;
background: url(../images/headerbg.jpg) no-repeat;
background-size: cover;
}
#header {
height: 341px;
background: url(../images/top-img.png) no-repeat;
background-size: cover;
}
.top-nav {
margin:0;
padding:0;
width:100%;
background:#012851 url(../images/nav-bg.jpg) no-repeat;
}
.nav {
display:block;
margin:0 auto;
padding:0;
width:875px;
}
.nav ul {
display:inline-block;
margin:0 0 0 35px;
padding:20px 0 16px;
list-style: none;
}
.nav ul li {
display:inline-block;
margin:0 15px 0 19px;
padding:0;
float:left;
}
.nav ul li a {
display:inline-block;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
text-decoration:none;
}
.nav ul li a:hover {
text-decoration:underline;
}
#body-container {
width:100%;
height: auto;
background: url(../images/bodyimg.jpg) no-repeat;
background-size: cover;
margin: 0px;
padding: 20px 0;
overflow: hidden;
}
#main-Content {
width: 960px;
margin: 0 auto;
padding: 0px;
}
.tagline {
width: 960px;
height: 67px;
margin: 0px;
padding:0px;
}
.banner {
width: 960px;
height: 400px;
background: url(../images/banner-bg.jpg) no-repeat;
margin: 0px;
padding: 10px 14px 0 14px;
}
.slider {
width: 930px;
height: 370px;
border: 1px solid #000;
}
.blog {
width:960px;
background:#012951 url(../images/blogbg.jpg) no-repeat;
height:117px;
}
.blog p span {
margin:10px 0 0 20px;
padding:10px 0 0 0;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
color:#ffcc00;
font-weight:bold;
}
.blog p {
margin:0;
padding:0 4px 0 0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#fff;
font-weight:normal;
}
#mainWrapper {
width: 930px;
margin: 10px auto;
}
#leftcol {
width: 600px;
float: left;
background-color: #ccc;
margin-bottom: 10px;
}
.block {
width: 540px;
height: 260px;
margin: 10px;
}
.prayer {
width: 540px;
height: 240px;
border: 1px solid #000;
margin: 10px;
}
#rightcol {
width: 300px;
float: right;
}
.footer {
display:inline-block;
margin:0;
padding:0;
width:100%;
background-color:#7b95b0;
}
.footer-nav {
display:block;
margin:0 auto;
padding:0 0 0 70px;
width:625px;
}
.footer-nav ul {
display:inline-block;
margin:0;
padding:15px 0;
}
.footer-nav ul li {
display:inline-block;
margin:0;
padding:0 10px;
float:left;
border-right:2px solid #fff;
line-height:15px;
}
.footer-nav ul li a {
display:inline-block;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#fff;
font-weight:normal;
text-decoration:underline;
}
.footer-nav ul li a:hover {
text-decoration:none;
}
.footer-nav .no-border {
border: none;
}
It won’t let me upload my image yet. I don’t know why. It saids because i was new
http://www.stephentemple.com/draft/index.html
it should work now
EDIT
page has since been revised, please see below
Ok and what is yoru specific issue? I don’t see any glaring flaws with this page.
I can’t upload the image yet so you can see what I’m trying to do. My header is in one image, but I’m trying to make it a full width header with the image. When i did that my logo sits on at the bottom of the nav. It’s suppose to be on top not below it.
Please upload your picture to tinypic.com and give me the link. I think I know what you’re after but I’d like visual confirmation before I work.
I’d separate this image.
http://www.stephentemple.com/draft/images/top-img.png
Make that dark blue background a separate image and put that on a <header> or something. Then have that circle logo be the background image for #header and center that image. The way you’re doing now is needlessly complicated. This is simpler. To get the overlap, use position:relative; and top:-10px; or something like that.
ok. Can you give me like the code. I’m kind of lost about the background. in the header tag itself I should put the light blue checker background inside that tag and the topbar on its layer itself.
Separate the images, get both images up on the live site (by whatever means neccessary) and then give me the updated link.
I’ll customize from there.
ok it should work. Here is the new link
http://www.stephentemple.com/draft/index.html
The top image i use is the top-img.png and the header bg is the header-bg.png
thanks
EDIT
page has since been revised, please see below
I don’t believe you separated the images like I asked?
I did but I guess i’m not understanding right. I did put the logo with the dark background like you had it earlier was it suppose to be on its own or with the light blue background with squares.
The two parts of that image (darkblue / circle) needs to be separated to make this easy.
ok i think i got it this time. I got the logo as logo.png, top-img.png still the same and the header-img.png
Cool. Work is slow so I just went ahead and did it. Add/update your CSS here (some CSS here I had to write on my local copy to override your styles. Go through each selector and look to see if the value is there - if it is there, then just update the value from my code. If it’s not there, then add it in)
#header_wrap
{
height:351px;
display:table;
margin:auto;
width:100%;
background-repeat:repeat-x;
}
#header
{
background-size:initial;
max-width:1200px;
display:table;
width:100%;
margin:auto;
text-align:center;
}
#header img
{
margin-top:55px;
}
Now update your HTML (throw in the image logo)
<div id="header_wrap">
<div id="header"><img src="http://www.stephentemple.com/draft/images/logo.png" alt="logo" /></div>
</div>
<!--nav-->
<div class="top-nav">
<nav class="nav">
<ul>
<li><a href="index.html">Home </a></li>
<li><a href="church.html">The Church </a></li>
<li><a href="pastor.html">Our Pastor</a></li>
<li><a href="lady.html">First Lady</a></li>
<li><a href="ministries.html">Ministries</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
<!--nav end-->
As for the top darkblue with the text. Remove the text from the image and make that image like 1px wide (and repeat-x it) and I’d place that text instead inside of a header.
If you don’t understand what I mean, update your darkblue image (top-img?) and remove the text and I’ll show you the updated HTML/CSS
I mention that about the darkblue image (top-img) because right now it’s impossible to get that dark blue gradient to be 100% of the screen width (like in your ideal tinypic image) because the text is embedded in the image. I need the text out.