Background behind header

FashionCore · Dec 21, 2011

Hey!

I've been tryin to make a bloglayout for a while now, I usually get everything working with trial and error so I'm not used to ask questions.
Though I have no clue on getting this to work.

I have an header which is transparent and I want it to go over another backgrond, the contents background.
I also tried to get a gradient background behind everything.
The gradient works, but only if you set a fixed height which is not possible cause its a blog.

Its probably an easier way to do this but.
So to short it down:

Wrapper = Gradient background. - Goes to the bottom
Content = Pink background under content bubble. - Goes to the bottom
Header = The clouds which got the blue gradient.

Here's an example in what I mean:

Any Ideas?
Thank you in advance!

Phreaddee · Dec 22, 2011

Put the header clouds into the body background, along with the gradient.
Either combine them or use two backgrounds, mind you ie wont like two backgrounds. The rest will play nicely.
Alt, it can be done with (and I cant even believe im suggesting this!) Absolute positioning of the header div, and z-index the lot accordingly...

Phreaddee · Dec 22, 2011

You could also be able to do a css gradient on the body with the clouds as the bg.

FashionCore · Dec 22, 2011

Hey!

Thx for the reply, the only problem is, I cant restrict the body to a certain size, or am I wrong here?

Cause I still want the outside of the site to be empty.

-W-H-I-T-E-| SITE |-W-H-I-T-E-
Like this.

best regards.

Phreaddee · Dec 22, 2011

Then you need to use a wrapper...and what ive mentioned as "body" make that "wrapper"

FashionCore · Dec 23, 2011

Hmm.....

I've been encountered something else, when I try to add an background to the wrapper, it turns all white?

Do you know anything about that?

best regards

Phreaddee · Dec 23, 2011

Not without seeing your code unfortunately...

FashionCore · Dec 23, 2011

Okey!

It's quite much code, how do I show it the best possible way?

both css and html?

I've been testing the gradient part in both the wrapper and another div named gradient.

PHP:

html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,li,img,table,caption,tr,th,td,tt,span,fieldset,legend, form { margin: 0; padding: 0; border: 0; }
input, select, textarea { margin: 0; padding: 0; }

a {
  color: #202020;
}
a:hover {
  color: #000000;
}
a:visited {
  color: #202020;
}

body {
  font: 14px/16px 'Times New Roman', Arial, Sans-serif;
}

h1,h3,h4,h5,h6, div.navheader, div.default {
  font-family: 'Lucida Calligraphy', Georgia, Serif;
  color: #000000;

div#side h3 div.navheader {
  color: #000000;
}

}

body{


}

div#wrapper {

  margin: 0 auto 20px auto;
  width: 1024px;


}

div#gradient {

background: -webkit-gradient(linear, left top, left bottom, from(#9d51c6), to(#af9eba));

background: -moz-linear-gradient(top,  #9d51c6,  #af9eba);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9d51c6', endColorstr='#af9eba');

 width: 1024px;
 height: auto;

}

div#header {
  float: left;
  clear: left;
  display: inline;
  width: 1024px;
  height: 600px;
  margin-top: -30px;
  padding: 0px 0px 0px 0px;
  background-image: url(images/2011/banner_180147152.png)
}

div#content {
  float: right;
  clear: right;
  display: inline;
  padding: 0 60px 20px 60px;
  width: 600px;
  color: #202020;
  background: #d0a0d2;
}

div#side {
  width: 150px;
  padding: 0 0px 0 20px;
  float: left;
  display: inline;
}

div#side div.navheader, div#side h4, div.default {
  padding: 20px 0 5px 0;
  font-size: 16px;
  font-weight: normal;
}

/* hide calender - doesn't work anyway */
div#side div#calendar {
  display: none;
}

div#header h1 {
  font-size: 45px;
  letter-spacing: +2px;
  font-weight: bold;
  margin: 120px 0 15px 0;
  text-align: center;
}

div#header h1 a {
  text-decoration: none;
  color: #202020;
  cursor: default;
}

div#header h2 {
  font-size: 14px;
  text-align: center;
  color: #202020;
  margin-top: 20px

}

div#content h3 {
  font-size: 24px;
  font-weight: normal;
  padding: 13px 10px 10px 18px;
  margin: 0px;
background: url(images/2011/bubble-top_180148708.png) no-repeat;
}

div#content div.entrybody {
  margin: -5px 0px 0px 0px;
  padding: 10px 20px 20px 20px;
background: url(images/2011/bubble-mid_180148874.png) repeat-y;
}

div#content div.entrybody ul {
  margin: 10px 0 10px 15px;
}

div#content div.entrybody li {
  font-size: 12px;
  color: #202020;
  list-style-type: square;
}

div.default {
  margin: 0 0 15px 0;
}

div.nav input {
  margin-right: 5px;
}

div.nav li {
  list-style: none;
  padding: 2px 0;
}

div.nav ul li strong {
  line-height: 37px;
  font-size: 11px;
}

div.entrymeta {
  font-size: 11px;
  margin: -10px 0px 0px 0px;
  padding: 10px 0px 68px 60px;
  color: #202020;
  line-height: 0px;
background: url(images/2011/bubble-bottom2_180149887.png) no-repeat;
}

div.commentheader, p.commenttext {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #202020;
}
.pencil {
margin: -265px 0px 0px 470px;
padding: 0px 0px 0px 0px;
}

p.commenttext {
  font-weight: normal;
}

div.commentmeta {
  color: #202020;
  margin: 5px 0 20px 15px;
  font-size: 11px;
}

form.commentform {
  font-size: 11px;
}

form.commentform input, form.commentform textarea {
 margin: 0 5px 10px 0;
 vertical-align: middle;
}

input.formbutton {
 margin-top: 10px;
}

.separator {
  display:none;
}

.subside {}

.thumbnail {
  margin: 0 6px 6px 0;
}

.video {
  padding: 0;
}

.xmlButton {
  border: 1px solid;
  border-color: #FC9 #630 #330 #F96;
  padding: 0 3px;
  font: bold 10px Comic Sans MS, Arial, Helvetica, Sans-serif;
  color: #202020;
  background: #F60;
  text-decoration: none;
  margin:0;
}

PHP:

<!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>
 <title>${BlogTitle} - ${BlogDescription}</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta name="generator" content="${AppUrl}" />
 <link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
 <link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
  <script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
  <script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
 </head>

<body>



<div id="wrapper">

<div id="gradient">

<a href="http://name.blogg.se"><div id="header"></div></a>

 <div id="content">


  <tag:entrylist limit="15">
   <a name="a${EntryNum}"></a>
   <h3>${EntryTitle}</h3>
   <div class="entrybody">${EntryBody}</div>
   <div class="entrymeta">
    ${EntryDate} @ ${EntryTime}
    <a href="${EntryPermaLink}">Permalink</a>
    <a href="${EntryCategoryLink}">${EntryCategoryName}</a>
    <a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
	<a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
	<br /><br />
	<tag:taglist title="Nyckelord: ">
		<a href="${TagURL}" rel="tag">${TagName}</a>
	</tag:taglist>
   </div>
<div class="pencil">
<img src="images/2011/pen_132675148.png">
</div>
   <hr class="separator" />
  </tag:entrylist>
 </div>
</div>
 <div id="side">

  <div id="profile">

	<tag:profile>
		<tag:if test="${ProfileExists == 'true'}">
<h4></h4>
			
			<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
			<p><a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a></p>
		</tag:if>
	</tag:profile>
  </div>

<br><a href="">Besökare:</a>

<img src="http://www.easycounter.com/counter.php?tiiiza">

  <div class="nav">
	<div class="navheader">Sök i min blogg</div>
	<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
		<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="12" 
		maxlength="64" />
		<input type="submit" value="Sök" />
	</form>
   <div class="navheader">Mina senaste inlägg</div>
   <ul>
       <tag:recentlist limit="20">
     <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
       </tag:recentlist>
   </ul>
   <div class="navheader">Kategorier</div>
   <ul>
     <tag:categorylist>
        <li><a href="${CategoryLink}">${CategoryName}</a></li>
       </tag:categorylist>
   </ul>
   <div class="navheader">Arkiv</div>
   <ul>
    <tag:archivelist>
     <li><a href="${ArchiveLink}">${ArchiveName}</a></li>
    </tag:archivelist>
   </ul>
   <tag:if test="${hasLinks == 'true'}">
   <div class="navheader">Länkar</div>
   <ul>
    <tag:linklist>
     <li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
    </tag:linklist>
   </ul>
   </tag:if>
   <tag:if test="${hasBooks == 'true'}">
   <div class="navheader">Böcker</div>
   <ul>
    <tag:booklist>
     <li><a href="${BookUrl}"><img class="thumbnail" src="${BookImageSmall}" border="0" alt="${BookTitle}" title="${BookTitle}" /></a><br /><a href="${BookUrl}">${BookTitle}</a></li>
    </tag:booklist>
   </ul>
   </tag:if>
   <tag:if test="${hasMusic == 'true'}">
   <div class="navheader">Musik</div>
   <ul>
    <tag:musiclist>
     <li><a href="${MusicUrl}"><img class="thumbnail" src="${MusicImageSmall}" border="0" alt="${MusicTitle}" title="${MusicTitle}" /></a><br /><a href="${MusicUrl}">${MusicTitle}</a></li>
    </tag:musiclist>
   </ul>
   </tag:if>
   <tag:if test="${hasMovies == 'true'}">
   <div class="navheader">Filmer</div>
   <ul>
    <tag:movielist>
     <li><a href="${MovieUrl}"><img class="thumbnail" src="${MovieImageSmall}" border="0" alt="${MovieTitle}" title="${MovieTitle}" /></a><br /><a href="${MovieUrl}">${MovieTitle}</a></li>
    </tag:movielist>
   </ul>
   </tag:if>
  </div>
  <div class="subside">
   <a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>
  </div>
</div>
 <div id="footer">
</div>
</div>


<img src="http://stats.blogg.se/?id=${BlogID}" border="0" width="0" height="0" alt="" />

</body>
</html>

Phreaddee · Dec 24, 2011

what on earth is this?

HTML:

<tag:entrylist limit="15">

or this?

HTML:

   </tag:if> 
    </tag:profile>

your nesting is all wrong.
get the layout right first then add all those little extra bits.

HTML:

<body> <!-- bg white -->
     <div id="wrapper"> <!-- gradient (css) with clouds -->
          <div id="wrapper-inner"> <!-- the pink gradient -->
               ...copy ...
          </div>
     </div>
</body>

FashionCore · Dec 24, 2011

Hey!
Yea, I have not done the blog from the beginning, most of it was already there. I'm just trying to get my own design to work with it.
I cant really remove every line inside that part, I'm not that smart that I will know where to put everything back

'

But I'll try your suggestion and hope it works

thx!

FashionCore · Dec 24, 2011

Hey!

I did recreate the code, simplified it but still doesnt work.

not even the wrapper inner part works, and I cant see what I'm doing wrong.

heres the code:

PHP:

html,body,h1,h2,h3,h4,h5,h6,p,dl,dd,dt,ul,li,img,table,caption,tr,th,td,tt,span,fieldset,legend, form { margin: 0; padding: 0; border: 0; }
input, select, textarea { margin: 0; padding: 0; }

/* link colors */
a {
  color: #202020;
}
a:hover {
  color: #000000;
}
a:visited {
  color: #202020;
}

/* font & border */
body {
  font: 14px/16px 'Times New Roman', Arial, Sans-serif;
}

h1,h3,h4,h5,h6, div.navheader, div.default {
  font-family: 'Lucida Calligraphy', Georgia, Serif;
  color: #000000;

div#side h3 div.navheader {
  color: #000000;
}

}

body{


}

div#wrapper {

  margin: 0 auto 20px auto;
  width: 1024px;
  height: auto;


  background-image: url(images/2011/banner_180147152.png)


background: -webkit-gradient(linear, left top, left bottom, from(#9d51c6), to(#af9eba));

background: -moz-linear-gradient(top,  #9d51c6,  #af9eba);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9d51c6', endColorstr='#af9eba');

}

div#wrapper-inner {

  background: #d0a0d2;
  width: 654px;
  height: auto;
}


div#content {
  float: right;
  clear: right;
  display: inline;
  padding: 0 60px 20px 60px;
  width: 600px;
  color: #202020;
}

div#side {
  width: 150px;
  padding: 0 0px 0 20px;
  float: left;
  display: inline;
}

div#side div.navheader, div#side h4, div.default {
  padding: 20px 0 5px 0;
  font-size: 16px;
  font-weight: normal;
}

/* hide calender - doesn't work anyway */
div#side div#calendar {
  display: none;
}

div#header h1 {
  font-size: 45px;
  letter-spacing: +2px;
  font-weight: bold;
  margin: 120px 0 15px 0;
  text-align: center;
}

div#header h1 a {
  text-decoration: none;
  color: #202020;
  cursor: default;
}

div#header h2 {
  font-size: 14px;
  text-align: center;
  color: #202020;
  margin-top: 20px

}

div#content h3 {
  font-size: 24px;
  font-weight: normal;
  padding: 13px 10px 10px 18px;
  margin: 0px;
background: url(images/2011/bubble-top_180148708.png) no-repeat;
}

div#content div.entrybody {
  margin: -5px 0px 0px 0px;
  padding: 10px 20px 20px 20px;
background: url(images/2011/bubble-mid_180148874.png) repeat-y;
}

div#content div.entrybody ul {
  margin: 10px 0 10px 15px;
}

div#content div.entrybody li {
  font-size: 12px;
  color: #202020;
  list-style-type: square;
}

div.default {
  margin: 0 0 15px 0;
}

div.nav input {
  margin-right: 5px;
}

div.nav li {
  list-style: none;
  padding: 2px 0;
}

div.nav ul li strong {
  line-height: 37px;
  font-size: 11px;
}

div.entrymeta {
  font-size: 11px;
  margin: -10px 0px 0px 0px;
  padding: 10px 0px 68px 60px;
  color: #202020;
  line-height: 0px;
background: url(images/2011/bubble-bottom2_180149887.png) no-repeat;
}

div.commentheader, p.commenttext {
  margin: 0 0 0 15px;
  font-weight: bold;
  color: #202020;
}
.pencil {
margin: -265px 0px 0px 470px;
padding: 0px 0px 0px 0px;
}

p.commenttext {
  font-weight: normal;
}

div.commentmeta {
  color: #202020;
  margin: 5px 0 20px 15px;
  font-size: 11px;
}

form.commentform {
  font-size: 11px;
}

form.commentform input, form.commentform textarea {
 margin: 0 5px 10px 0;
 vertical-align: middle;
}

input.formbutton {
 margin-top: 10px;
}

.separator {
  display:none;
}

.subside {}

.thumbnail {
  margin: 0 6px 6px 0;
}

.video {
  padding: 0;
}

.xmlButton {
  border: 1px solid;
  border-color: #FC9 #630 #330 #F96;
  padding: 0 3px;
  font: bold 10px Comic Sans MS, Arial, Helvetica, Sans-serif;
  color: #202020;
  background: #F60;
  text-decoration: none;
  margin:0;
}

PHP:

<!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>
 <title>${BlogTitle} - ${BlogDescription}</title>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 <meta name="generator" content="${AppUrl}" />
 <link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />
 <link rel="alternate" href="${BlogUrl}index.rss" type="application/rss+xml" title="RSS" />
  <script type="text/javascript" src="http://static.blogg.se/public/js/script_blogg.js"></script>
  <script type="text/javascript" src="http://static.blogg.se/shared/js/script.js"></script>
 </head>

<body>
     <div id="wrapper">
	 
          <div id="wrapper-inner">
            
			
			 <div id="content">


  <tag:entrylist limit="15">
   <a name="a${EntryNum}"></a>
   <h3>${EntryTitle}</h3>
   <div class="entrybody">${EntryBody}</div>
   <div class="entrymeta">
    ${EntryDate} @ ${EntryTime}
    <a href="${EntryPermaLink}">Permalink</a>
    <a href="${EntryCategoryLink}">${EntryCategoryName}</a>
    <a href="${EntryPermaLink}#comment">Kommentarer (${EntryCommentCount})</a>
	<a href="${EntryPermaLink}#trackback">Trackbacks (${EntryTrackbackCount})</a>
	<br /><br />
	<tag:taglist title="Nyckelord: ">
		<a href="${TagURL}" rel="tag">${TagName}</a>
	</tag:taglist>
   </div>
<div class="pencil">
<img src="images/2011/pen_132675148.png">
</div>
   <hr class="separator" />
  </tag:entrylist>
 </div>
			
			
          </div>
		  
		   <div id="side">

  <div id="profile">

	<tag:profile>
		<tag:if test="${ProfileExists == 'true'}">
<h4></h4>
			
			<a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><img class="thumbnail" src="${AppUrl}shared/img/profiles/${ProfileImage}" alt="Min profilbild" /></a>
			<p><a href="${AppUrl}index.bd?fa=pf.view&amp;pf_id=${ProfileID}"><span style="font-weight:bold"> ${ProfileName}</span></a></p>
		</tag:if>
	</tag:profile>
  </div>

<br><a href="">Besökare:</a>

<img src="http://www.easycounter.com/counter.php?tiiiza">

  <div class="nav">
	<div class="navheader">Sök i min blogg</div>
	<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
		<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="12" 
		maxlength="64" />
		<input type="submit" value="Sök" />
	</form>
   <div class="navheader">Mina senaste inlägg</div>
   <ul>
       <tag:recentlist limit="20">
     <li><a href="${EntryPermaLink}">${EntryTitle}</a></li>
       </tag:recentlist>
   </ul>
   <div class="navheader">Kategorier</div>
   <ul>
     <tag:categorylist>
        <li><a href="${CategoryLink}">${CategoryName}</a></li>
       </tag:categorylist>
   </ul>
   <div class="navheader">Arkiv</div>
   <ul>
    <tag:archivelist>
     <li><a href="${ArchiveLink}">${ArchiveName}</a></li>
    </tag:archivelist>
   </ul>
   <tag:if test="${hasLinks == 'true'}">
   <div class="navheader">Länkar</div>
   <ul>
    <tag:linklist>
     <li><a href="${LinkURL}" title="${LinkDescription}">${LinkName}</a></li>
    </tag:linklist>
   </ul>
   </tag:if>
   <tag:if test="${hasBooks == 'true'}">
   <div class="navheader">Böcker</div>
   <ul>
    <tag:booklist>
     <li><a href="${BookUrl}"><img class="thumbnail" src="${BookImageSmall}" border="0" alt="${BookTitle}" title="${BookTitle}" /></a><br /><a href="${BookUrl}">${BookTitle}</a></li>
    </tag:booklist>
   </ul>
   </tag:if>
   <tag:if test="${hasMusic == 'true'}">
   <div class="navheader">Musik</div>
   <ul>
    <tag:musiclist>
     <li><a href="${MusicUrl}"><img class="thumbnail" src="${MusicImageSmall}" border="0" alt="${MusicTitle}" title="${MusicTitle}" /></a><br /><a href="${MusicUrl}">${MusicTitle}</a></li>
    </tag:musiclist>
   </ul>
   </tag:if>
   <tag:if test="${hasMovies == 'true'}">
   <div class="navheader">Filmer</div>
   <ul>
    <tag:movielist>
     <li><a href="${MovieUrl}"><img class="thumbnail" src="${MovieImageSmall}" border="0" alt="${MovieTitle}" title="${MovieTitle}" /></a><br /><a href="${MovieUrl}">${MovieTitle}</a></li>
    </tag:movielist>
   </ul>
   </tag:if>
  </div>
  <div class="subside">
   <a href="index.rss" title="RSS"><img src="http://static.blogg.se/img/rss.gif" border="0" alt="RSS 2.0" /></a>
  </div>
</div>
		  
     </div>
</body>


</html>

best regards

FashionCore · Dec 26, 2011

Been trying to get it work, but I still dont get it. The Only time the wrapper/wrapper-inner shows is when I add a fixed height. like height: 400px;

And I need to have it set to auto or 100%.. Any ideas?

thx in advance.

Background behind header

FashionCore

New Member

Phreaddee

Super Moderator

Phreaddee

Super Moderator

FashionCore

New Member

Phreaddee

Super Moderator

FashionCore

New Member

Phreaddee

Super Moderator

FashionCore

New Member

Phreaddee

Super Moderator

FashionCore

New Member

FashionCore

New Member

FashionCore

New Member