Wish to learn to make Theme's

[2old2learn?]

HeyI am wishing to learn how to make my own Theme's..any help is greatly appreciated..here is my first problem??

#header{   width:900px;   background-image:http://localhost/icc/skins/image/waterfront.jpg; /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

I have a style sheet made already and it does display the background color I wish for..but wish to add a banner on the top of page...??Thanks

[dsonesuk]

the background image is added by usingbackground-image: url(http://localhost/icc/skins/image/waterfront.jpg);

[2old2learn?]

the background image is added by usingbackground-image: url(http://localhost/icc/skins/image/waterfront.jpg);

Okay tried it still doesn't work..no image shown...also I just realized this is for background-image...I wish to have this at the top of the page as a banner using My_Style.css file that is being called for by all pages...Now updated like you posted..

#header{   width:900px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

[Den-Dezyn]

i am new to this but can you have a background color and a background image surely you can only have one or the other you cant have two backgrounds.

[2old2learn?]

i am new to this but can you have a background color and a background image surely you can only have one or the other you cant have two backgrounds.

I am not looking to change the background I want to add a banner to the " Top " of the page..

[Den-Dezyn]

so you want the header to have a background color of #333 are you putting the image above this or on top of this if you are putting it above then perhaps you should make a div above header to hold it as a background if you want to add it on top of the color then perhaps you should add it to the htm doc in the header div and not the css just add your positioning and repeat to your css.

[2old2learn?]

so you want the header to have a background color of #333 are you putting the image above this or on top of this if you are putting it above then perhaps you should make a div above header to hold it as a background if you want to add it on top of the color then perhaps you should add it to the htm doc in the header div and not the css just add your positioning and repeat to your css.

okay let's say I wish to put it above ..can you give me an example of div..???

[Den-Dezyn]

<div id="headerwrapper"> /* i tend to put divs in a wrapper if i want them in same section*/<div id="banner"> /* div for your banner*/</div><div id="header"> /*div for your header*/</div></div> /*close wrapper after you finish your section*/ really you can name a div pretty much what you want remember i am fairly new to this and you may get a better solution from a more experienced memeber but i hope this helps.

[2old2learn?]

<div id="headerwrapper"> /* i tend to put divs in a wrapper if i want them in same section*/<div id="banner"> /* div for your banner*/</div><div id="header"> /*div for your header*/</div></div> /*close wrapper after you finish your section*/ really you can name a div pretty much what you want remember i am fairly new to this and you may get a better solution from a more experienced memeber but i hope this helps.

So you are saying it goes like this then

<div id="headerwrapper"> /* i tend to put divs in a wrapper if i want them in same section*/div id="(http://localhost/icc/skins/image/waterfront.jpg); "> /* div for your banner*/</div><div id="header"> /*div for your header*/</div></div> /*close wrapper after you finish your section*/

So is this the right way you are saying????

[dsonesuk]

you have to give the element that you assigning a background image to, a set height, or it will be width:900px; and height:0px high, and you won't see any of the background, be it a colour or image.Also yes! you can set the background-color: and background-image to same element, the image will overlap the background color, if you use image with some areas that are transparent, you can use the background-color used to show through.

[2old2learn?]

you have to give the element that you assigning a background image to, a set height, or it will be width:900px; and height:0px high, and you won't see any of the background, be it a colour or image.Also yes! you can set the background-color: and background-image to same element, the image will overlap the background color, if you use image with some areas that are transparent, you can use the background-color used to show through.

so the original code settings is fine..just have to set the height and width...yes/no...???is this what you mean>> dsonesuk??

#wrapper{   /*find a coding standard that works best for you so that it is readable*/  width: 900px;  height: 250px;  /* just added this line */  margin: 0 auto;	/*this is how you center a div*/  background-color:#666666;

Sorry above code is the wrong place I believe am I correct do I added the "height 250px;" here

#header{   width:900px;   height:250px; <<<<this is where I made the change..yet to test it...   background-image:http://localhost/icc/skins/image/waterfront.jpg; /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

[Den-Dezyn]

So you are saying it goes like this then

<div id="headerwrapper"> /* i tend to put divs in a wrapper if i want them in same section*/div id="(http://localhost/icc/skins/image/waterfront.jpg); "> /* div for your banner*/</div><div id="header"> /*div for your header*/</div></div> /*close wrapper after you finish your section*/

So is this the right way you are saying????

<div id="headerwrapper"> /* i tend to put divs in a wrapper if i want them in same section*/<div id="banner "> /* div for your banner*/ <img src="http://localhost/icc/skins/image/waterfront.jpg" width="900px" height="250px" alt="banner"></div><div id="header"> /*div for your header*/</div></div> /*close wrapper after you finish your section*/

[2old2learn?]

<div id="headerwrapper"> /* i tend to put divs in a wrapper if i want them in same section*/<div id="banner "> /* div for your banner*/ <img src="http://localhost/icc/skins/image/waterfront.jpg" width="900px" height="250px" alt="banner"></div><div id="header"> /*div for your header*/</div></div> /*close wrapper after you finish your section*/

lol okay thanks..and the placement is Here is my style sheet:

body{ /*global styles are not usually useful in a CSS layout, you want to specify your tags separatly for each div, it gives you more control and less .class span class garb everywhere, usually the only thing I style globally is the font in the body, because you only want ONE FONT for your whole site, in special circumstances you can specify otherwise*/  background-color:#DCDCDC;  font-family:Arial, Helvetica, sans-serif;}/* You need something to wrap the whole thing up in, this will also control your overall width and positioning */#wrapper{   /*find a coding standard that works best for you so that it is readable*/  width: 900px;  margin: 0 auto;	/*this is how you center a div*/  background-color:#666666;}/*Now we must start our layout*/#header{   width:900px;   height:250px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}#header p{  /*We want to style the paragraph tags inside of the header*/   color:#fff;   font-size:14px;   margin:0;   padding: 82px 6px 0px 6px; /* Top Right Bottom Left (thanks Chris) 82px will push it down enough to show the whole background...it's a hack but that's how I roll*/}/*Let's start the menu8--this is a simple version of my vertical pretty css memu*//*We make menus by unordered lists*/#menu{	height:25px;	font-size:11px;	color:#fff;	background-color:#999999;}#menu ul{	margin:0;	padding:0;	list-style-type:none;}#menu ul li{	display:inline;}#menu ul li a{	float:left;	padding:6px 0;	width:65px;	text-align:center;} /*See my Pretty CSS Menus Tutorial for a more detailed explanation*//*Now for our Content*/#content{  background-color:#CCCCCC;  width:900px;  /* You know I am sure that some DIC Heads out there may think that specifying this width over and over is redundant...but I just like to for insurance*/}/*We style the p tag here again, as well as our h tags*/#content h1{  font-size:18px;  font-weight:normal; /*All h tags are BOLDED by default*/  margin: 0 6px;  padding: 15px 0 3px 0;}#content p{  color:#000;  font-size:12px;  margin: 0 6px; /* Top/Bottom Left/Right...we want the paragraph to flush rught up to the bottom of the h1*/   padding: 0 6px 9px 6px; }/* And now the fun part!*/#information{  margin:15px 6px; /*this will position it level w/ the h1 tag and a bit away from the edge...my preferance*/  width:200px;  float:right;  background-color:#FF0000;  border:1px solid #000;}#information p{  font-size:11px;  color:#fff;  margin: 0;  padding: 6px;}/*THE FOOTER IS THE MOST IMPORTANT PART WHEN USING ANY FLOATING DIVS*/#footer{  clear:both; /*This ensures that your floating information box pushes the wrapper to the bottom of the box, leaving this out would result in the information box poking out of the wrapper into the body like a tab...that’s bad...and ugly*/  background-color:#FFFF00;}#footer p{  font-size:15px;  font-weight:bold;  color:#000;}

[Den-Dezyn]

Is it all working ok now. Using dsonesuk fix.

[2old2learn?]

Is it all working ok now. Using dsonesuk fix.

nope

[dsonesuk]

<div id="wrapper">  <div id="headerwrapper"> 	<div id="banner">	</div><-- End banner -->	<div id="header">	</div><-- End header -->  </div><-- End  headerwrapper-->  <div id="menu">  </div><-- End menu -->  <div id="content">  </div><-- End  content-->  <div id="footer">  </div><-- End  footer--></div><-- End  wrapper-->

if bg image in banner above header

#banner { width:900px;   height:250px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top center;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

if bg image in header only

#banner { display:none;}#header { width:900px;   height:250px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top center;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

Note: if use absolute path background-image:url(http://localhost/icc/skins/image/waterfront.jpg); when you upload to your site, this will fail because localhost should reference you sites domain name, it would be better to use relative paths instead, so if pages in root directory localhost/domain you would use

background-image:url(/icc/skins/image/waterfront.jpg);

[dsonesuk]

i suppose you do have a separate external style sheet, and are properly linking to it in same folder.+ Edit: you may want to clear history/cache before refreshing/reloading page

[Den-Dezyn]

nope

well not sure what you are trying to achieve but is it a banner at the top 900px by 250px then a colored background of 900px by not sure what height with a title and or text within the colored area.If this is what you are after then using the divs i gave earlier your css should be something like this.body {a, h1, li, p, img, ul, div, margin:0 auto; padding:0; background-color:#dcdcdc; font-family:Arial, Helvetica, sans-serif; font-size:12px;}#headerwrapper { Width:900px; margin:0 auto;}#banner img { width:900px; height:250px; repeat:none; position:relative;}#header { /*height of coloured area will be set by your text + top and bottom padding*/ width:900px; background-color:#333333;}#header p { color:#fff; font-size:14px; padding: 82px 6px 0px 6px;}hope this helps.

[2old2learn?]

<div id="wrapper">  <div id="headerwrapper"> 	<div id="banner">	</div><-- End banner -->	<div id="header">	</div><-- End header -->  </div><-- End  headerwrapper-->  <div id="menu">  </div><-- End menu -->  <div id="content">  </div><-- End  content-->  <div id="footer">  </div><-- End  footer--></div><-- End  wrapper-->

if bg image in banner above header

#banner { width:900px;   height:250px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top center;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

if bg image in header only

#banner { display:none;}#header { width:900px;   height:250px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top center;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

Note: if use absolute path background-image:url(http://localhost/icc/skins/image/waterfront.jpg); when you upload to your site, this will fail because localhost should reference you sites domain name, it would be better to use relative paths instead, so if pages in root directory localhost/domain you would use

background-image:url(/icc/skins/image/waterfront.jpg);

okay this code worked..thanks..bud..I put this above the #header

#banner { width:900px;   height:250px;   background-image:url(http://localhost/icc/skins/image/waterfront.jpg); /*Of course this is optional but usually how I do it*/   background-repeat:no-repeat;  /*This line and the next are best practices and usful attributes to know*/   background-position:top center;  /*Now we have our pic in the bg and can add all the text on top that we want*/   background-color:#333333;}

thanks..now each page I refer to has the image on top great stuff..thanks again...

[Den-Dezyn]

glad you got it fixed dsonesuk way looks good to me.

[dsonesuk]

*{margin:0; padding:0;}body{background-color:#dcdcdc;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#headerwrapper {width:900px;margin:0 auto;}#banner img {width:900px;height:250px;background-repeat:none;position:relative;}

[2old2learn?]

Not sure of what your trying to explain here...but the first info you gave now works...all pages show Banner...from stylesheet..thank...Next is I would like to make blocks and apply them...LOL

*{margin:0; padding:0;}body{background-color:#dcdcdc;font-family:Arial, Helvetica, sans-serif;font-size:12px;}#headerwrapper {width:900px;margin:0 auto;}#banner img {width:900px;height:250px;background-repeat:none;position:relative;}