|
CSS - Adding A Linear Banner To My Current Css Template Which I Got From Blogspot.com
Here's a format of my css script.. im under blogspot.com's url. I am changing some details of their template ive chosen...
like the comments, dates, text header, archives and sorts instead of the common text header, i would like to change it with a full linear header embedded (left to right as displayed on the screen) i was browsing sites, but i could not any css script that could copy and change the image url.. here it goes... please do edit/add as to my preference are... by the way, i will still use blogspot.com's photo upload feature and posting.. lastly i would like to have a navigation bar (links) following the 'embedded' top linear header (jpeg.format,as supported by a web host). some what like thishovered) MAIN SEARCH SITEMAP .... the sequence would be: LINEAR HEADER (jpeg format) BACKGROUND( see below: ****) Within the background the Navigation Line will start.. ------ blogspot posts will follow... ( my current css format. ------------ Code: [CPAN][
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/* IMAGE EFFECTS */
a:hover img { filter:none; }
img { filter:gray; }
body {
background-image:url ((URL address blocked: See forum rules)); background-position:center;
margin:0;
padding:45px 25px;
font:x-small trebuchet,verdana, serif;
text-align:center;
color:#cccccc;
font-size/* */:/**/small;
font-size: /**/small;}
/* IMAGE EFFECTS */
a:hover img { filter:none; }
img { filter:gray; }
a:link {
color:#ccc;
text-decoration:none;
}
a:visited {
color:#F0F0F0;
text-decoration:none;
}
a:hover {
color:#993300;
text-decoration:none;
}
a img {
border-width:0;
}
/* CURSOR: BODY */
body { cursor:crosshair; }
/* CURSOR: LINKS */
body { cursor:crosshair; }
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px; length:1024px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
length:100;
}
}
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:60 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:210px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:50%;
float:none;
}
#sidebar {
width:100%;
float:left;
}
}
/* Headings
----------------------------------------------- */
/* Posts
----------------------------------------------- */
@media all {
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
}
@media handheld {
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:120%;
line-height:1.4em;
color:#ad9;
}
.post-title a {
text-decoration:none;
color:#ad9;
}
.post-title a:hover {
color:#fff;
}
.post img {
padding:4px;
border:1px solid #222;
}
/* Comments
----------------------------------------------- */
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #444;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-align:left;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#999;
line-height:1.5em;
}
/* Profile
----------------------------------------------- */
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
</head>
<body>
<!-- Begin #content -->
<div id="content">
<bgsound src="(URL address blocked: See forum rules)"loop="-1" /> MUSIC background. as is!
<!-- Begin #main -->
<div id="main"><div id="main2">
<Blogger>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
</p>
</div>
<!-- End .post -->
<!-- Begin #comments -->
<!-- End #comments -->
<!-- begin code provided by createblog.com -->
<script language="JavaScript">
var message=" You are viewing ?????.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</SCRIPT>
<!-- end code provided by createblog.com -->
</Blogger>
</div></div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<br> <br> <br> <br><br> <br><br> <br>
<ul>
< a href="http://other links"
style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;" >HOME</a></li><br><br></a>
<a href="http://other links"
style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;">SEARCH </a></li><br><br>
</ul> </MainOrArchivePage>
<MainOrArchivePage>
</MainOrArchivePage>
<!-- begin code -->
<a href>
<!-- end code -->
<!-- begin code -->
</a> <a href=style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px;" ></a>
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var curDateTime = new Date()
document.write(curDateTime)
//-->
</SCRIPT>
<!-- end code -->
<!--
<p>This is a paragraph of text that could go in the sidebar.</p>
-->
</div></div>
<!-- End #sidebar -->
</div>
<!-- End #content -->
<!-- Begin #footer -->
<div id="footer"><hr />
<p><!--Thank you for visiting!--> </p>
</div>
<!-- End #footer -->
</body>
</html>
</body>
</html>][/CPAN]
Similar TutorialsHello. I'm relatively new to CSS and was wondering how I can create a page to look like some of the blogspot templates. Here is the example: http://mickeymac.blogspot.com/ I basically want to have a header at the top, and then the links on the left, and information in the center. I know the basic idea after playing around and reading different tutorials, but I don't know how to do it with the rounded edges like on the example page. I mean the header seems like you could create a photoshop image or something, set that as the background, and write your text on it. But then the links which could always be changing, as well as the size of my content for the center, I'm not sure how to do it since I can't just create a background image in photoshop. Or is there some trick in making it stretch and shrink to fit the size of your content or something? Thanks! Hi there, I have the following in my css file: } #headerBannerWrapper { background-image: url(/GREENLOGO.jpg); background-position: bottom left; background-repeat: no-repeat; background-color: #DEF2B0; padding: 0px; margin: 0px; } #headerBannerWrapper img { padding: 0px; margin: 0px; vertical-align: bottom; However the banner doesn't get rendered in IE7. It renders OK in IE8 Any help most appreciated. The above is linked to the following class: .clearFix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; NB If the banner has content inside then it renders OK, however if there is no contents inside then the banner (green background) is not displayed. I'm trying to figure out a way to create a banner across the top that consists of an image, but whose right edge extends all the way to the right edge of the browser -- regardless of the window size. At the same time, I need to do the same thing with the left column: fill it with an image whose bottom edge extends all the way to the bottom of the window. I can do this with tables, but can't figure out a cross-browser way to do it in CSS. The "stretchy" right edge of the banner is simply a 1 pixel wide slice of the banner's right edge, repeated as necessary. Similarly, the "stretchy" bottom of the left column is a 1 pixel slice of the bottom of the column's image. I can't get these to appear in Mozilla. Here's my code: Styles.css: PHP Code: .banner { background-image:url(./images/banner-fill.gif); width:100%; } .nav { background-image:url(./images/nav-fill.gif); width:104px; height:100%; } .content { position:absolute; left:140px; top:140px; } Template.htm: PHP Code: <html> <head> <title>Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="height:100%;width:100%"> <div class="banner"><img src="images/banner.jpg" width="800" height="134" border="0"></div> <div class="nav"><img src="images/nav.jpg" width="104" height="327" border="0"></div> <div class="content"> <p>Page Content</p> </div> </body> </html> Hi and thank you in advance for any advice or help. my website: http://earlystartdc.com/ Im having trouble trying to find the right css code so that i can adjust the banner underneath the menu in order to remove the white spaces in the module. I would like for the banner to be at margin 0 so that its all the way to the top without any white space in between. any help?? Thank you P.s - This is what my css files look like from my template/css folder . hmm i cant get this to work... i have the left side of the banner that needs to be expandable wich is a long picture.....and the right side is 10px wide. how can i get this 2 in a div wich get width by % and center aligned on the page? and also on a layer above other stuff I've been away for nearly three months and may have forgotten some of the basics of CSS. Today I added a banner photo to the top of my new bike club site, but cannot remember how to style it so that, when a visitor adjusts the width of their browser window, the banner photo sidles to the left or right to remain centered at the top of their window, along with the the bike club name and pull-down menus immediately below (see http://stallinswebdesign.com/vs/index.php). Can you suggest how I can style that banner photo so that it remains centered whenever a visitor stretches their browser window? I know you can view source to view my <div> structure and so forth; let me know if you'd like to see any parts of my style sheet. Thank you for your valuable time. Curtis Hi, I just installed Gallery on my website, and I'm trying to integrate it with the main theme of the rest of the site. Well I'm having a problem with the banner overlapping the logo in FireFox. It renders fine in IE7 (surprisingly), but not in FF. Have a look he http://www.lightblu.com/gallery/main.php un/pass: test/test You can look at how I want it on the homepage, or anywhere else for that matter. What am I doing wrong? I tried everything with no success. Thanks guys --Waj Hi everyone, I've been playing around with this for a while but I can't seem to get it to work. Basically, I'm trying to get this table effect in CSS layers. Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#669999">
<td width="580">Welcome</td>
<td>
<div align="right"><img src="images/bg_dblue_gradient.gif" width="200" height="25"></div>
</td>
</tr>
</table>
It's basicly a 2 column layout, with the left column being some kind of content and the right column being a gradient graphic I made, to make the banner look like it has a full gradient. The gradient graphic is 200px wide, thus one resizing of the browser the table in a whole won't shrink down past 780 pixels. I want to use a <div> tag for the graphic so I can repeat-y and have the gradient appear fluid if someone resizes the text size. Any suggestions? Cheers, Fozzy Hi, I need to add some content (small div) over the top of a flash banner. I tried adding wmode="transparent" to both the object and embed tag but that didnt work. Any other suggestions? thanks i am writing a site for fun to learn how websites work. The site i write right now will be like a school newspaper. I have one problem with the background, at the begining i couldnt make it no repeat but later i did it, now, i got something wrong with my code. PLease help me here is my code: ( i mean that the back ground color does not appear!! Code: <html>
<head>
<title>
blah blah
</title>
</head>
<body bcolor="#004d79">
<center>
<img src="/pics/banner.png">
</center>
<h4>
<b>
<center>
blah blah
</center>
</b>
</h4>
<style type="text/css">
<!--
body {background-image: url(pics/background.png); background-repeat: no-repeat;}set to background-repeat: no-repeat;background-position:center;
</style>
<center>
<b>
(C) blah blah
</b>
</center>
<center>
<div style="position:absolute;top:130px;left:375px">
<h1>
<b>
<p>
Our website is under construction!!<br>Thank you for visiting us!!
</p>
</b>
</center>
</h1>
</div>
<div style="position:absolute;top:250px;left:260px">
<b>
<p>
blah blah
</p>
</b>
</center>
</div>
</html>
Thanks alot, J. My content and navigation bars, though set to 100%, are actually 100% (of the body/html element) plus 100 pixels (their "top" property). If I set their "top" property to 0, they fit the page perfectly but I need them below the title banner. Is there a way to make the 100% height value of these two columns relative to the fixed height of the title banner? Note: One solution was to set their "bottom" properties to 0px. This does not work in IE so it's not a valid option. Also, I do not have the option of setting the navigation's and content's divs to a "top" value of 0 and rasing the title banner's z-index to cover them as I need the overflow scroll bars to extend from the bottom of the title banner to the bottom of the page and not from the top of the page to the bottom of the page. (think frameset ) Code: <!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>100% Height - CSS Problem</title>
<style>
html {
height:100%;
}
body {
height:100%;
padding:0px;
margin:0px;
background-color:#CCCCCC;
}
#title_banner {
display:block;
position:absolute;
width:600px;
height:100px;
left:0px;
top:0px;
background-color:#CC6666;
}
#navigation {
display:block;
position:absolute;
width:140px;
height:100%;
left:0px;
top:100px;
background-color:#66CC66;
overflow:auto;
}
#page {
display:block;
position:absolute;
top:100px;
left:140px;
width:460px;
height:100%;
background-color:#6666CC;
overflow:auto;
}
</style>
</head>
<body>
<div id="title_banner">
Set width and heighth title banner image.
</div>
<div id="navigation">
Navigation links.
</div>
<div id="page">
Page content.
</div>
</body>
</html>
I'd appreciate any links you can share as well. All of the tutorials I've seen for 100% high pages do not include a horizontal, fixed-height banner across the top. Hello. Test Page CSS Page I'm trying to get my banner working properly. I have a div for the banner itself #banner and then I have an #innerbanner for the contents (images). I use a BG image in the #banner that allows it to be stretchable. I want one of my images in #innerbanner to be tight to the left and the 2nd of tight to the right side of the screen. I tried using a spcaer in the middle to allow for space between the images when it gets stretched but nothing is lineing up properly in firefox or IE 6. Any suggestions? Hi everyone I am running a blog that uses xhtml and css style sheets to generate templates. I have about 10 templates that I would like to switch to and from. I want to add a banner on the bottom of the page, but I cannot figure out how to do it correctly. If I add it to the footer templates, before the </body> tag, it does not always come out correctly. Sometimes it the banner ends up in the 3rd column over to the right, sometimes the banner is obscured by the body of the main column. I am trying to find a way to forcefully push the banner to the bottom of the page, below all of the text that is generated. I was thinking that perhaps javascript could be used to force a banner underneath, but I am not too familiar with the sort of code that is in my blog. any ideas? thanks Roy Hi, I want to place a Logo and Banner in the header using CSS, i tried this but no use its not working properly. PHP Code: div#main #header{ width:100%; height:95px; text-align: center; background:url(images/top_bg.jpg); } div#header #header_title{ text-align:left; font-family: Arial, Helvetica, sans-serif; font-size:25px; color:#ffffff; padding-left:20px; padding-top:20px; } div#header #header_title #banner{ text-align:right; width:468px; height:60px; background:url(images/banner.jpg); background-repeat: no-repeat; padding-right:20px; padding-bottom:20px; } Then i used this in html PHP Code: <div id="page"> <div id="header"> <div id="header_title"> Your Logo <div id="google"></div> </div> </div> But its not working properly, please please please help me....thanks... vinodkv I have a problem that I've been wrestling for the past hour and a half, and I've come to the conclusion that I will most likely never solve it on my own, so here I am. I have a header area of a website. It has a logo(basically the name of the website in a fancy font). The logo is in the bottom-left area of the header. I also have a banner. This banner can be anywhere from 468x60 to 728x90 pixels in dimension, depending on user input from a back end. I want the banner positioned near the bottom-right of the header, with a bit of space in between it and the right edge of the browser window. I'm having a lot of trouble accounting for the varying banner sizes. I can't use margins and floats to position the banners because the banner image size changes, therfore I thought it would be a good idea to use absolute positioning (relative to the header). This works perfectly, except when I resize the window, the banner overlaps the logo image. So, I guess I can't use absolute positioning. My HTML is: Code: <body> <div id="header"> <div id="header_ads"> <?php display_banner() ?> </div> <h1 id="heading"><span class="invisible">This is the heading</span></h1> </div> </body> My CSS is: Code: * {margin:0;padding:0;}
body {width:100%}
.invisible {visibility:hidden;}
/*Header*/
#header {margin-bottom:3em;background-color:rgb(80, 80, 82);padding:0 0 0.2em 0;height:8em;width:100%;position:relative;}
#header #heading {background:url("../images/logo.jpg") no-repeat;height:70px;width:400px;position:absolute;top:1.6em;left:1em}
#header_ads {float:right;margin-top:-1.5em;margin-right:1em;position:absolute;bottom:0.3em;right:4em}
The above CSS/HTML yields the exact desired result, but does strange things when the browser window is resized... I would greatly appreciate any help! Hi all, I'm working on a header which I'm having trouble with. Here's a crude diagram of what I'm looking to accomplish: Code:
____________
_______________________| |___
| _____________________| Logo |_ |
| | |___________| | |
| | Banner | |
| |___________________________________| |
| |
| | <-- container div
Uhhh, hopefully you can see what I'm getting at! I want a logo to be positioned on top of the banner image, but offset above and to the right, outside the container div holding the banner. Note also that the container div is centered in the page, so that the relative amount of space on either side of the container div increases and decreases with the browser window. Approaches I've tried: (1) Use position:absolute for the logo. The problem here is the horizontal position. Regardless of what I've tried, the logo moves horizontally with the size of the window. I want the logo fixed relative to the container div. (2) I've tried to use negative margins and place the logo inside the container div, but this doesn't seem to work either. How should I do this? All suggestions welcome. Thanks! |
|||||||