|
CSS - Header/background Image Link
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. Similar TutorialsHey, 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 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. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, Please help me with this, I'm at my wit's end. I can not for the life of me set the background image of a link from the CSS. I can do it from the link HTML itself with: Code: style="background-image: url(resources/menu_over.jpg);" But I CANNOT do it from the CSS with something like this: Code: <a class="navlink" href="#">asdf</a> Code: .navlink
{
/*background-color: red;*/
background-image: url(resources/menu_over.jpg);
}
Also, I am referincing my CSS file correctly b/c I tested it with "background-color", as you can see above. Please help... thanks Just wondering if there was any way to have a background-image as a link? The reason why: I have a banner across the top of a site, and I'm sure I can probably lay it out using Divs, but I had made the banner a background anyways because I have a horiz. nav. menu that needed to go across the bottom of the banner on the left side. Essentially, there's a logo at the top left, nav. menu on the bottom left, and an image on the entire right side. But now I realized that I should make the logo a link back to the main page of the site. So can I make a background-image as a link, or do I need to pull it out and make it a regular image? Thanks. ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com I have a site where the header img for the page is actually set in the CSS as a background-image: url (link). However, in good form, I'd like to place an <a href="home.htm"> on that image so that users can click the top header and return to the home page. Has anyone done this? If so, how did you accomplish it? Hi. I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover? I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link. URL URL Thanks for any help anyone can offer Hello, I'm trying to create an list menu like the one in attached image and I have 2 problems. 1. In IE 6,IE 7 the list is ordered verticaly and not horizontaly (in Opera and FF it is ok) 2. I need to align the text on the bottom of the list like inattached image. Here is what I manage to do till now : http://www.sibiul.net/test/list-align.php Anyone knows what I must do ? 10x Hi, I'm using html:link with a background image. This works fine on IE and Firefox, but the link won't show in Mozilla. Could changes to the css fix this? Does anyone know how to solve this? Regards, Nina 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 Hi, I'm new to CSS and am using the weebly website builder. I need to add a link to my header image. Could anyone help me with this? This is the CSS: #header{ width: 961px; height: 141px; border-top: 2px solid #cccccc; border-left: 2px solid #cccccc; border-right: 2px solid #cccccc; border-bottom: 1px solid #cccccc; } .weebly_header{ background: url(%%HEADERIMG%%) no-repeat; } thank you! 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 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 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 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. Trying to delete my post but no option to delete so just removing content. this is what i got: a menuBox Code:
<tr align="center" valign="top" height="120">
<td height="120">
<div class="menuBox">
<div class="menuBoxHeader">Menu</div>
<p><a href="blah-blah4">4.</a></p>
<p><a href="blah-blah5">5.</a></p>
<br>
<p>some text>
</div>
</td>
</tr>
I use for the links Code: a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}
for the menuBox Code:
.menuBox { color: #c36;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 2px; font-family: Verdana;
background-color: #fef;
border: solid 1px #c36 }
and for the menuBoxHeader Code: .menuBoxHeader {
color: #efe;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 13px;
font-family: Verdana, Arial, Helvetica;
background: #c36 0px 0px;
margin: 1px 0px 0px;
position: relative;
top: 0px;
left: 0px;
width: 130px;
height: 16px }
So now my two questions. 1. What do I have to do to let it look in all the browsers the same? In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ). 2. The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right? I hope that someone can help me? Hey all, I have a seemingly simple problem with my link and header styles that I keep thinking had a really obvious solution which I can't see, so maybe it will be glaringly obvious to someone on here! Notes: I'm a bit of a css beginner and I'm using Wordpress on my site. I want to style the link-attributes of a specific <h3> tag so it won't underline when hovered. (the current hover-decoration is specified in the overall a: styles of the website). Only thing is that I can't use a link class because the <h3> tag has only <?php the_category(', ') ?> inside, which displays and links to the relevent categories of a blog post. So how can I style the link without creating a link class?? Appreciate anyone's thoughts on this, Cheers! The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. |
|||||||