|
CSS - Curving A Header Image
Hi again, i have another issue i can't get my head around. As before i'm sure it will be an easy solution.
basically, i currently have an image 1px wide with 100px height which is repeated accross the page, basically i want the top left and top right corners to be cornered. Any ideas people? Code: div.header
{
padding:0em;
color:white;
background-image:url(bg.jpg);
background-repeat:repeat-x;
clear:both;
margin:0 auto;
}
erm does rounded make more sense?, hang on let me find an example. http://a-ccarsales.com/page3.htm see like their header has rounded corners, thats what i want. However theirs is fixed, i want mine elastic but with the rounded corners, sorry if i'm not explaining this very well.. Similar TutorialsTrying to delete my post but no option to delete so just removing content. What I hope to do is have a header with a left "cap" a right "cap" and a background tiling across connecting the two if that makes any sense whatsoever so if L is the left image B is the background image and R is the right image it would look like this... LBBBBBBBBBBR Anyway, I've ALMOST got it working. The only thing missing is the image on the right. I have this code in an html table cell: Code:
<div id='logographicinner'>
<div id='logostrip'>
<div id='logographic'><div id='catname'>{$data['cat_name']}</div></div>
</div>
</div>
and this in the css Code:
#logostrip{
background-color: #ffffff;
background-image: url(images/headerbg.gif);
height: 29px;
margin: 0px;
padding: 0px;
}
#logostripinner{
background-color: transparent;
background-image: url(images/headerright.gif);
background-position: right;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}
#logographic{
background-color: transparent;
background-image: url(images/headerleft.gif);
background-position: left;
background-repeat: no-repeat;
height: 29px;
margin: 0px;
padding: 0px;
}
#catname{
text-align: left;
padding-top: 7px;
padding-left: 20px;
font-weight: bold;
}
Any ideas what I've done wrong? Wondering if anyone can tell me why there is a gap above my header image. Surely I am missing something in Firebug? h**p://www.topofferspage.com Hi, I guess I can't post the URL of my test page with the problem which would make it a lot easier to explain. I don't quite see why anyone would want to re-create the page from pasted code when they could just look at the actual page but oh well. Anyway, I'm working on a website that is supposed to look like a folder -- it is composed of a top graphic, content area, bottom graphic, all wrapped in an outer div. It looks like it ought to in Firefox. In IE there is a gap between the top graphic and the main content div. I've tried making sure all relevant margins, padding etc are set to 0. I can't put the top graphic inside the content div (fixed a similar problem this way on another project) as it is wider! Here is the page code: Code: <%@ LANGUAGE=JScript %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <link rel=stylesheet type="text/css" HREF="kahn.css"> <title>Crollard Kahn</title> </head> <body> <div class="Outer"> <img src="images/top2h.png" style="border: none; margin: 0; padding: 0;"> <div class="Main"> <div class="InnerMain"> <div style="text-align: left; padding: 10px; margin: 0 0 10px 0; background-color: #5C0D10; color: ffffc2; font-size: medium;"> <!--<img src="home_selected.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0"><img src="home1.png" border="0">--> Top navigation bar here... </div> <div class="Left"> <div class="InnerLeft"> Left navbar<br>here<br>...<br>...<br>...<br>... </div> </div> <div class="Right"> <div class="InnerRight"> <h1 class="Header1 Top">Header</h1> <p>Text.</p> <p>More Text.</p> <p>More Text.</p> <p>More Text.</p> </div> </div> <div style="clear: both; margin: 0; padding: 0;"></div> </div> <!-- InnerMain --> </div> <!-- Main --> <img src="images/footer2.png" style="border: none; margin: 0; padding: 0;"> </div> <!-- Outer --> </body> </html> Here is the stylesheet: Code: BODY { background: #868B6B; margin: 0; padding: 0; text-align: center; font-family: MS Sans Serif; color: black;}
DIV.Outer { width: 980px; background-color: #868B6B; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.Main { width: 950px; background-color: #ffffc2; padding: 0 0 10px 0; margin-left:auto; margin-right:auto; margin-top: 0;}
DIV.InnerMain { width: 918px; background-color: #ffffd9; padding: 0 0 10px 0; margin-left:auto; margin-right:auto;}
DIV.Left {float: left; width: 220px; text-align: center; padding: 0 0 0 0; }
DIV.InnerLeft {width: 212px; margin-left: auto; margin-right: auto; padding: 0 0 0 0;}
DIV.Right {float: right; width: 696px; padding: 0 0 0 0; text-align: center; border-left: 1px solid #5C0D10;}
DIV.InnerRight {width: 668px; margin-left: auto; margin-right: auto; padding: 0 0 0 0; text-align: left;}
.Header1 { font-weight: bold; font-size: x-large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Header2 { font-weight: bold; font-size: large; font-family: Times New Roman; color: #5B0D0F; font-variant: small-caps; }
.Question { font-weight: normal; font-style: italic; color: black; font-variant: small-caps;}
.Answer { color: black; }
.CK { font-variant: small-caps; }
.Topic { font-weight: bold; color: black; }
.TopicLink { font-weight: bold; color: black; text-decoration: underline; }
P.List { margin-bottom: 2em; }
.Top { margin: 0; } /* weird firefox blank space otherwise */
I'm fairly new to CSS, but am trying to leave tables behind as much as possible. Can anybody please tell me how to fix this? Regards, Elisabeth 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 Look - I'm 59....almost 60 - and I've been using tables forever. So please forgive, what I am certain, is a fairly stupid question. But I have been trying to wrap my head around CSS and I have struggled with it for the last couple of years..... It's like Algebra, for me - it seems as though it's something I can never really learn. I am trying to re-build an old site and avoid using tables. All I want to do is put an image - positioned absolutely - in a DIV header area. I've managed to get the page, by the way, to display the header, the footer, a fix-width center area, etc. just fine - which is no small miracle, for me. What I've got, now, looks like this: The code looks like this: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<style type="text/css">
body {margin: 0 0 0 0; background-color: #E1DACD;}
#header {width: 100%; height: 120px; background-color: #F1E2C2;}
#social {position: absolute; top: 26; left: 730;}
#container {
margin-left: auto;
margin-right: auto;
width: 960px;
text-align: left;
background-color: #FFF;
height: 600px;
}
#footer {width: 100%; height: 80px; background-color: #EFE1C1;}
h2 {font-family: arial; font-size: 21px; font-weight: normal; display: inline;}
</style>
</head>
<body>
<div id="header"><img src="head1.gif">
<div id="social"><img src="22s.gif"></div>
</div>
<DIV id="container">
<DIV style="padding-left: 12px;"><h2><br>Some content...</div>
</div>
<div id="footer">footer</div>
How in the heck do I get that social networking .gif to end up in the header, to the right of the domain name....? Any help would be greatly appreciated. Okay, I'm no newbie on using CSS but the long story short is that I bought software for a shopping cart and had to use their pre-made template in order to keep the peace. I of course, being a web designer changed the template to my own liking, but can NOT get this header centered for the life of me! I have tried everything I know, including things I have looked up, nothing will work. Here is the main.css (only css file being used) Code:
body {
color: #ffffff;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
margin:auto;
text-align:center;
margin:0 auto;
}
a {
color: #d92f2f;
font-weight: normal;
text-decoration: underline;
cursor: pointer;
}
p {
margin: 0px 0px 7px 0px;
}
sup {
display: inline;
padding: 0px;
vertical-align: super;
font-size: 8px;
}
a:hover {
color: #ffb4b4;
}
legend {
display: none;
}
label {
display: none;
}
fieldset {
border: none;
padding: 4px 0px 4px 5px;
}
fieldset p {
display: block;
margin: 5px 5px 5px 2px;
}
form {
margin: 0px 0px 5px 0px;
}
img {
border: none;
}
li {
padding-bottom: 5px;
}
/* +------------------------------------------------------------+ */
/* | General XHTML Classes | */
/* +------------------------------------------------------------+ */
.center {
text-align: center;
}
.inlinecenter {
text-align: center;
}
p.inline {
display: inline;
padding: 0px;
}
.strong {
font-weight: bold;
}
.big {
font-weight: bold;
font-size: 16px;
}
.hidden {
display: none;
}
a.unfancy {
color: #d92f2f;
font-weight: normal;
text-decoration: underline;
cursor: pointer;
}
/* +------------------------------------------------------------+ */
/* | Skin Specific Divs | */
/* +------------------------------------------------------------+ */
#skin_header {
height: 230px;
width: 899px;
margin:auto;
padding: 0px;
background-position: center top;
}
#skin_wrapper {
width: 910px;
padding: 0px;
margin:auto;
}
#skin_wrapper_full {
width: 100%px;
padding: 0px;
margin:auto;
background-image: url('../media/header.png')
background-repeat: repeat-x;
background-position: top left;
}
#skin_ct {
width: 100%;
padding: 0px;
margin: auto;
border-spacing: 0px;
border-collapse: collapse;
}
#skin_ct_lcol_head {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: auto;
width: 160px;
height: 80px;
}
#skin_ct_rcol_head {
font-size: 16px;
font-weight: bold;
padding: 10px;
margin: auto;
height: 80px;
text-align: right;
}
#skin_ct_lcol {
padding: 20px 10px 10px 10px;
margin: 0px;
vertical-align: top;
width: 160px;
text-align: left;
}
#skin_ct_mcol {
padding: 20px 10px 10px 10px;
margin: 0px;
vertical-align: top;
line-height: 150%;
}
#skin_ct_rcol {
padding: 2px 10px 10px 10px;
margin: 0px;
vertical-align: top;
width: 160px;
}
#skin_footer {
color: #FFFFFF;
background-color: #000000;
padding: 50px 10px 10px 10px;
margin: 0px;
text-align: center;
background-image: url('../media/footer.png');
background-repeat: repeat-x;
background-position: top left;
}
#skin_pgtitle {
font-size: 16px;
padding: 0px 0px 4px 0px;
margin: 0px 0px 10px 0px;
font-weight: bold;
border-bottom: 1px solid #999999;
}
#skin_content {
margin: auto;
}
There is more coding but the actual image header is located inside of the #skin_header. Also, here is the PHP code where the SRC code is located: Code:
</head>
<body>
<div id="skin_header" align="center">
<img src="skins/Default/media/logo.png" alt="Home" width="899" height="230" align="center" style="margin:auto;"/>
</div>
<div id="skin_wrapper_full"><div id="skin_wrapper">
<table id="skin_ct">
<tr>
<td id="skin_ct_rcol_head" colspan="3">
<div id="skin_menu_head">
<ul>
<?php
if (!(empty($link_home))) {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';}
if (!(empty($link_cart))) {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';}
if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';}
if (!(empty($link_account))) {print '<li><a href="' . $link_account . '" title="Your Account">Your Account</a></li>';}
if (!(empty($link_contact))) {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';}
?>
</ul>
Please, ANY help would be appreciated, I want to get this site live, pronto. The link is www.PhantomSupplements.net thank you! I am trying to get my header image to stretch 100% width in the browsers. Right now it's centered--and too short. My CSS code: body { font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva; background-color: #1c1c1c; background-repeat:repeat-x; border-color: #FC3; border-width: 1px; padding: 25px; margin: 30px; color: #FFC; } #header { height: 200px; width: 100%; margin: 0; background-image:url(images/header.jpg); background-repeat:no-repeat; margin-right: 0px; margin-left: 0px; border: thin solid #FFF; border-style:none; } #header { height: 200px; width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #p { padding-left:inherit; padding:inherit; } A:link {color:#FFF; text-decoration:underline; } A:visited {color:#CCC; text-decoration:underline; } A:hover {color:#FFC; text-decoration:underline; } #nav { height: 35px; } I've tried: width: 100%; and width: 100%; width: auto; There is nothing useful online that has really touched on this problem. The only solutions are the "width 100%" Any help would be so great please. I'm trying to get something that looks like this: Here is the xhtml: Code: <div id="container">
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
<div class="design_box">
<img src="images/image.png" alt="" />
<h1>Header goes here</h1>
<p>Paragraph goes here</p>
</div>
</div>
Here is the relevant css: Code: .design_box {
display: block;
margin-bottom: 17px;
}
#row_a_right_web_design img {
float: left;
}
.design_box h1 {
color: #fbfbfb;
font: bold .9em Tahoma, arial, sans;
margin-bottom: 4px;
}
.design_box p {
color: #c4c2c2;
}
Needless to say, the above css does not produce the desired outcome. I'm having a serious brain-fart as to what the best way is to tackle this. Thanks in advance. Hi, Av been having a lot of problems with my drop down working in IE since I added the flash fade to the images. Can anyone point me to the code that is responsible for keeping the drop down menu at the top of the header image.. How can I change it to make it at the bottom? Thanks This is in the header section Code: <!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/ie.css" />
<![endif]-->
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
#outer {
width:1000px; /* Fallback width if javascript is off */
width: expression(
(document.documentElement.clientWidth > 1152)? "1150px" :
(document.documentElement.clientWidth < 702) ? "700px" :
"auto");}
</style>
<![endif]-->
<?php wp_head(); ?>
I.E css Code: #header-image {
float: left;
width: 100%;
height: 383px;
background-repeat: no-repeat;
background-position: left top;
background-color: #FFFFFF;
margin-bottom: 20px;
}
Main stylesheet Code: #nav li {
position:relative; /* establish stacking context for the AP'd dropdown sublist */
float:right;
padding:0;
line-height:1.75em;
}
#nav li a {
float:left;
padding:0 .5em;
border-right: 1px solid #333;
color: #CCCCCC;
text-decoration: none;
}
#nav li a.first {border:none;}
#nav li:hover,
#nav li.sfhover{
background:black;/* background for all links on hover */
visibility:visible;/* makes IE7 think something changes on hover, fixes IE sticking dropdown */
}
#nav li:hover a,
#nav li.sfhover a {color:#FFF}/*1st level font color on hover*/
/*=== All Sublist Styles ===*/
#nav ul {
position:absolute; /* position the sublist to nearest positioned ancestor, the (#nav li) in this case*/
width:12em; /*150px*/
margin-left:-999em;/* hide the sublist */
padding:0;
left:0; /* IE6/7 need this to position the sublist correctly on hover*/
top:1.75em;
background: url(fake-image.jpg);/* IE needs some sort of BG on the nested ul */
}
#nav li li {
float: none;/*reset the float from #nav li*/
display:block;
height:auto;
line-height:1.5;
border:none;/*reset borders from #nav li*/
}
#nav li li a {
float: none;/*reset the float from #nav li*/
display:block;
width:11em;/*IE6 needs a width (12em total with padding)*/
padding:0 .5em;
border:0;
}
* html #nav li li a {display:inline-block;} /*hide an overflow bug in IE6*/
*+html #nav li li a {display:inline-block;} /*hide same overflow bug in IE7*/
/*=== Hide All Sublists ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:-999em;
}
/*=== Sublist Font Colors ===*/
#nav li:hover li a,
#nav li.sfhover li a {color:#000;} /*2nd level font color*/
#nav li li:hover a,
#nav li li.sfhover a {color:#FFF;} /*2nd level font color on hover*/
/*=== Second Level UL position on hover ===*/
#nav li:hover ul,
#nav li.sfhover ul {
margin-left: 0; /* show the sublist (line up with left border on main list items)*/
}
label.screen-reader-text {
display: none;
}
.avatar {
display:none;
}
thanks I just can't do it!!!! I need help on this.. My header.. I can't get rid of the spaces around the image.. hmm check this out.. I can't post a link direct but its on the world wide web at piedmontred (dot) com firebug is telling me its an element.style margin, but for the life of me I can't find that in any CSS sheet I have.. and for some reason firebug doesn't identify a sheet either.. I did buy this wordpress template and have done quite a bit of CSS hacks, but I just can't figure this one out.. Thanks for any help!! Todd I wish to include a header image on each page of my site. Is it typically better to include the image in the CSS or HTML? For example, see OPTION 1 and OPTION 2. Thank you OPTION 1 Code:
#header {
margin: 0;
padding: 0;
height: 165px;
background: url(headers/tapmeister_header.jpg) no-repeat scroll left top;
}
Code: <div id="header"> <h1 class="header_title">Welcome to Tapmeister</h1> <p class="tagline">Better Beer!</p> </div> OPTION 2 Code: <div id="header"> <img src="images/headers/tapmeister_header.jpg" style="margin: 0; width: 165px" /> <h1 class="header_title">Welcome to Tapmeister</h1> <p class="tagline">Better Beer!</p> </div> 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. I have an image and to the right of it I have text. I want the text to be aligned veritcally to the middle of the image. I can do the following and it works: Code:
.icon {vertical-align: middle;}
<a href="index.php"><img src="images/icon.png" class="icon" border="0" /></a>
Header Goes Here
However, if I wrap H1 tags around "Header Goes Here" the text drops below the image. Any ideas on how to use header tags and have it aligned? I know I could make the icon as a background with H1 but I want it to be clickable. Is there any way to make it so the H1 I want to display text, image, videolinks in the header and footer images in my html with css.While header and footer images are displayed in the html , the intended text,image,videolinks are not displayed within the image block of header, footer.Will you please advise me the correct code in css, html to embed the text,image,videolinks inside the header and footer images. thanks Hi all, I need some help. I have implemented a fixed header on my site, but certain content is scrolling above the header while other is scrolling behind. I would like it all to scroll behind the fixed div's. Why is the second header on his site is located at the bottom of the page, I can't seem to figure it out. Can anyone take a look at the page and maybe point me in the right direction? The url is <NO LONGER AVAILABLE> I know that is has to have something to do with #clearheader1 or #clearheader2 calls. Maybe where they are placed or something. How do i stop the <h1> add white space above and below anything in the header tag. Hello, my name is Jordan, and I run breatheheavy (can't post the URL) I have a new header designed that's 1665x515px. I am having a little trouble putting it on the website because of the current restrictions placed in Wordpress on the header.php and style.css files. When I uploaded the header and changed the settings in Wordpress, it didn't look correct on all browsers or the iPad. I was hoping to get some help from someone that could help me with this and make it compatible with all browsers / mobile version. You can see the site on an ipad simulator site (also can't post the link) Thanks for reading Sending good vibes your way, Jordan |
|||||||