Create 100% header, 960px body, 100% footer

HTML & CSS
21

ok it should work

ok here it is without the text I won’t let me upload still but its the same title i use go to stephentemple.com/
draft/images/top-img.png

22

HTML:

<div id="header_wrap">
                   <div id="header"><header>STEPHEN TEMPLE CHURCH OF GOD IN CHRIST</header><img src="http://www.stephentemple.com/draft/images/logo.png" alt="logo" /></div>
                    
                        </div>

CSS:

#header_wrap
{
	height:351px;
	display:table;
	margin:auto;
	width:100%;
	text-align:center;
	background-repeat:repeat-x;
}
#header
{
	background-size:initial;
	display:table;
	background-repeat:repeat-x;
	width:100%;
	margin:auto;
	text-align:center;
}

#header header
{
	color:lightblue;
	font-size:2em;
	margin-top:10px;
}

I just pasted the full CSS - I only added in some of the code. Just add in what is new/updated.

The text will wrap if it gets too small…do you want the text to be responsive in size? If so, might want to make it an image (or do media queries to check for screen size and update the font size accordingly to a smaller value.)

Edit: Remove the img{} margin-top:55px. No longer needed. I removed it from my above CSS.

23

ok thank you

24

its not going to responsive

25

That’s an ambiguous line of text. What does this mean?

It’s not responsive?
It’s not going to be responsive (the page?)

If the former, then I addressed this issue in my last post.
If the latter, then my work here is done.

26

sorry i meant to say its not going to be responsive site. Thanks for the help.

27

I hope you understand the limitations and possible frustrations users will have then on tablets/mobile phones! Considering more and more people are browsing on these devices, you neglect them. But good luck!

28

ok

29

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.