|
CSS - Positioning Banner On Top Of Header Background
Hi everyone,
I'm somewhat new to CSS and so far I have been able to solve everything except for this one problem. This is code from the styles.css file in the blog that I'm building, now this is a free template that I'm using and there is also a header.php file but that has only php code. In the frist part of the css file this appears: body { font-family: Verdana, sans-serif, Arial; font-size: 80%; color: #232323; margin: 0px; padding: 0px; background: url(images/header.png) no-repeat top; } The background line is the image that appears as the background for the header portion of the site, and it is 960px X 150px. Then there's this part: #header { float: left; width: 960px; height: 156px; } Then towards the middle of the code there is this other part which also relates to the header: .top-header { float: left; width: 960px; height: 62px; padding-top: 60px; } .top-header a { color: #000000; text-decoration: none; } .top-header h1 { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; font-size: 26px; } .top-header p { color: #000000; margin: 0px; padding: 0px; float: left; width: 960px; } So the problem I'm having is that I have designed a logo that is about 460px X 100px and I want this to go on top of the already defined background layer above in the body part. I have tried "positioning" and also tried to set it as another background and it just appears all over the place. Also the picture I crafted in photoshop has an invisible background so that only the decorative text of the log shows up, so if I use the background method to insert it, it appears with a white background. So any pointers on this would be a great help. I have tried researching this all kinds of ways and I'm still not sure what to do Thanks Chas. Similar TutorialsI like the way this liquid banner degrades as the browser is narrowed. Is this the preferred way to accomplish this effect? I like the way the overflow: hidden attribute causes objects to basically disappear rather than force the banner div to be taller as content shifts. If you could please pick this apart I would appreciate it before I update 500 product pages with it. For testing purposes I have simply styled the html tags directly. When I get it right I'll make it external. Code: <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"></meta> </meta> </head> <body bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" style="overflow: auto"> <div style="border: 1px solid gray; text-align: center; height: 72px; background: white url(site_images/share_logo_header_middle.gif) repeat-x; overflow: hidden"> <div style="float: left; margin-top: 0px"><img src="site_images/share_logo_header_left.gif" alt=""></img></div> <div style="float: right; margin-top: 0px"><img src="site_images/share_logo_header_right.gif" alt=""></img></div><h1 style = "font: 1em/1.2 Verdana, Arial, Helvetica, sans-serif; color: navy; font-size: 1em; margin-top: 0px; line-height: 40px">The finest Specialty Chemical Products Since 1971</h1> </div> <div>Content is king </div> </body> </html> See the page here. As I'm writing this thread I see that I need to clean up a few unneeded declarations in the css - please disregard. Thanks for looking, Rob 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! Whenever I change my browser window size all my content moves with it. I feel like this has something to do with my banner being in %'s and not absolute and pixels but I have no idea how to change it. not being able to put in URLS and images probaly won't help. If any 1 has skype please add me ethan.pidcock. I've tried fixing this for like 8 hours. My css knowledge is bad sadly 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. Can someone please help me with positioning of my .gif in the header and links? It moves whenever I change a computer. Depending on the screen size, the image always moves to some weird obscure place. The site name is: papercranes.comlu.com Is there a substitute for absolute positioning? hello everyone, I'm quite new at the whole css and coding stuff and I've encountered a problem with my vbulletin forums. on my resolution(1024/768) everything looks as intended, no problems what so ever, but on widescreen monitors part of my header is moved to the left. it also happens if I zoom out from my browser. this is how it looks on my resolution: this is how it looks when you zoom out/widescreen monitor I've tried to provide the code here but it gives me couldn't find phrase aktespam something error so if you aren't bothered please check it in the page source here http://www.g-gaming.ge/forum Hello, I am trying to create a header with a background color and a padding of the text. I know that if I apply the background color to the header it will expand 100%. So I did the following: <h1><span>Header</span></h1> h1 {} h1 span { background-color: #252525; color: #D2D2D2; font: normal 1.2em/1.8 Verdana, Geneva, sans-serif; letter-spacing: 0.1em; padding: 0.8em; } But now I am not able to apply the top and bottom padding. How should I create this header? Thanks, Miguel Hello, Tried searching and couldn't find anything. I want my header's background to match that of the body. Essentially, a "see-through" header. Shouldn't this be some easy markup? Thanks. Hi I am trying to insert a logo into my header at Site and here is the CSS code for the Header section: Code: /* HEADER */
#header h1{
font-family:Edwardian Script ITC;
font-size:300%;
font-weight:bold;
}
#header h1 a, #header h2{
color:#000;
margin-left:2em;
}
#header h1 a:hover{
background:transparent;
color:#000;
text-decoration:none;
}
#header h2{
padding-left:7em;
font-size:120%;
font-weight:bold;
font-style:italic;
}
/* END HEADER */
I want to have this inserted which puts a logo icon exactly where I need it Quote: background-image: url(http://guayadeque.wikidot.com/local--files/start/guayadeque2.png); height: 80px; width: 80px; position: absolute; top: 5px; left: 10px; And this is exactly how I want it but no matter where I try to put it, it mucks up the entire Header. Can someone shed some light on where that can go on the Header to be a logo icon in the position I want it? Hi guys, I know most of you are probably not familiar with the blogger code, but I wanted to see if I code post some bits of code and maybe you can help me with my problem. My problem is, is that I'm trying to add a google adsense search bar in the header of my blog (www.mytechnicalinterviewexperience.com). Here is the piece of code that initially defines the header: Code: #header-wrapper {
background:$titleBgColor url("http://www.luckyninedesign.com/tech/header.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
height:105px;
}
So in blogger, you can make it so you can add a "widget" to the header, and in that widget is where I'll be able to put my adsense code. However, when I add the widget, the adsense search bar appears, but it also puts the background image that I have defined for #header-wrapper. Here is the code that appears after I add the widget: Code: <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> Basically, I just want to add a new widget to the header without having the header background appear again. Is there any code I can add here that says, don't have the background appear? I've tried removing the if statement but it does not work. If there is anything else I can provide you with, let me know. Any help would be much appreciated, thanks. Joe Hey, Im pulling my hair out...basically iv developed a site testing it in safari and when i have come to test it in FF the background image i am displaying in my header div doesn't display in FF but displays fine in Safari, unable to check IE atm. Iv broken down my code down and put together a simple test html script and css script and still no joy. Below is the script can anyone see where i am going wrong...hope so. Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Background Image Test</title> <link rel="stylesheet" type="text/css" href="millar.css" /> </head> <body> <div id="container"> container <div id="header"> header </div> <div id="main"> main </div> <div id="footer"> footer </div> </div> </body> </html> Code: body {
background-color: #F0F0F0;
font-family: verdana;
font-size: 10px;
color: #333333;
}
#container
{
background-color: red;
margin: 0 auto;
}
#header
{
background-color: yellow;
height: 100px;
background-image: url('topbanner.jpg');
}
#main
{
background-color: blue;
}
#footer
{
background-color: green;
}
cheers tom I had been helped on this board previously with this question for a site I was working on. I am using the same approach on another site to link back to the home page from the internal pages. And for all intents and purposes it is working. However I could/can not figure out how to precisely position where the link starts and ends. http://www.guestwardho.com/campground_map.html If, for example, you go to the above page and put your mouse over the header image you will see the link begins at the left edge of the header image. If you move to the right the link 'ends' a little more then half way across the image - at the uppercase 'H' in 'Ho' for reference. Again, this is fine for this purpose/site, but cannot figure out how to control where the link area starts and ends. Thank you in advance for your assistance. Hey all, I have a background image that I want to repeat horizontally at the top and the bottom of a page (below all of the content, not necessarily at the bottom of the screen) that I'm creating, for the Header and Footer. I would like it to look something like this. I'm using this code for the background image, for the Header: body { background-image: url(stars.gif); background-repeat: repeat-x } And I'm wondering whether I can include another background image in the "body" code, telling it to repeat horizontally, but at the bottom of the page? Here is the code that I'm assuming would have to be used: { background-image: url(stars.gif); background-repeat: repeat-x; background-position: bottom; } Can someone suggest to me where this code should go? Could I include it in the "body" css code? Or should I put it below all of the rest of the columns/content code? Thanks. Hi evryone. The web site in question can be found: http://www.timtro.innovationdev.com/summer05/pg1.html My problem is (i think) simple. There are two seperate problems, depending on the browser you use. What I want is to have the background image appear only in the 'content' div, to be fixed (so it does not move with the scroll bar), and to be positioned with the allignment to the right hand side of the div. With FireFox The image is fixed fine, but is position relative to the right hand side (RHS) of the BROWSER WINDOW, and not the div. This results in much of my image getting cut off, or completely invisible with full screen and a high resolution monitor. With IE, The broblem isn't with left alignment, which works fine. I do suspect a problem with the top alignment, but that is not important. The problem is that the background is not fixed, it scrolls on large windows (try my CV for a long scrolling page.) The CSS for this div is: Code: #content{
float: left;
width: 80%;
border-left: 1px solid #ccd2d2;
background-color:#FFFFFF;
background-image: url("http://www.timtro.innovationdev.com/images/bg.gif");
background-position:right;
background-attachment:fixed;
background-repeat:repeat-y;
}
Thanks alot mates! Cheers! I'm using a variant of a sliding doors technique to swap between areas of a background on an li when it is in normal state and when it is being hovered over. Code: div#listmenu ul li {float:left; position:relative; list-style-type:none; background: #AAA url("css_images/nav_link.gif") repeat-x left top; border-right:1px solid #333; height:100%; font-weight:bold;}
div#listmenu ul li:hover {background: #555 url("css_images/nav_link.gif") repeat-x 0px -26px;}
Basically, I've got a drop down menu working in IE6, so no worries about that, and I used 2 backgrounds before and it worked. This works in Firefox, but not IE6. Something simple I'm guessing! Hello! If i need to put background-image at the bottom of display i use such css rule: background-position: bottom; but in my case i need image to be fixed in right bottom corner. apparently i cant use two declarations like: background-position: bottom; background-position: right; so how could i attain this via just CSS? Ive got three divs all nested in a row. The idea is to have the main div (body tag) contain the background image that composes the color. Then the next div contains the upper left hand image and the next div contains the lower right hand image. The problem is this. When I specify "top-left" for the image the image is positioned to the top left. When I specify "bottom-right" for the image in the next div, instead of going to the bottom right, the image ends up all the way over on the top left. why is that? here are my three divs: Code: body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
margin: 0px;
border: 3px solid black;
background-image: url(http://www.doublethinkdesigns.com/pics/dtdbg.jpg);
background-repeat: repeat;
/*
*/
}
div#outer {
margin: 0px;
border: 3px solid white;
background-image: url(http://www.doublethinkdesigns.com/pics/upper-left-fan.gif);
background-position: top-left;
background-repeat: no-repeat;
}
div#inner {
margin: 0px;
border: 3px solid black;
background-image: url(http://www.doublethinkdesigns.com/pics/lower-right-samurai.gif);
background-position: right;
background-repeat: no-repeat;
}
Hey, I would like to create a tab/erollover effect using css on some links. The problem is I am not sure how to get the whole of my image displayed in the background of the link. So for example if my image is 100px wide, but my text only 40px wide only 40px of my background are displayed. How can I solve this? I am trying to apply a background to my #container div, but I don't want it to start until 150px down the y-axis (repeating y). Dreamweaver set the code to: Code: #container {
padding: 0px;
width: 760px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-repeat: repeat-y;
background-position: center 150px;
background-image: url(graphics/container-bg.png);
}
I've even tried it with setting "center" to "0px" and the background image will still not start 150px down, but instead flush to the top and all the way to the end of the content. I would ask if the problem is occurring because I'm mixing "center" with a pixel amount, but like I said it still wouldn't go down with "0px 150px". Any help would be greatly appreciated. Thanks. |
|||||||