HTML - Heading Background With Image

My website home page has no h1 tag, only a h3 tag, and that was used to create a heading of a certain font size. My spider simulator reports there in no h1 tag, suggesting that isn't good for SEO. Should I make sure there is a h1 tag somewhere, and can that be anywhere on the page? (It's not a heading as such). I want a certain sentence to be the h1 tag as it contains several of the keywords. Can I make these changes and dump the h3 tag, leaving only one h1 tag?

And can it be done locally rather than in a css file? My website uses the Woo Canvas theme in Wordpress.

Hello everybody,

As you can see here http://arturbuchhorn.com/index.html the h2 element is displayed right alongside the navigation. What would be the best way to move the heading below the navigation?

Thank you.

PS: I would prefer a CSS solution if possible. The code is right he Code:

/*
CSS for Un Buchhorn en route
*/

a:visited {
	color: black;
}

#sitebranding a {
	border: 3px solid white;
	padding: 20px 10px 20px 10px;
}

#sitebranding a:hover {
	background-color: #FFE4C4;
}

#tagline {
	margin: 2em 0 1em 0;
}

#navigation {
}

#navigation ul li {
	list-style-type: none;
	float: left;
	margin: 0px 5px 0px 0px; 
}

#navigation ul li a {
	background-color: #FFE4C4;
	text-decoration: none;
	border: black 1px solid;
	border-bottom: none;
	padding: 0 10px 2px 10px;
}

#navigation ul li a:hover {
	background-color: #F5DEB3;
}

#navigation ul li a:visited {
}

#bodycontent {
}

body {
	font-family: Calibri, Arial, Verdana, sans-serif;
	background-color: #F5DEB3;
}

#essay {
	text-align: justify;
	margin: 0 15% 0 15%;
}

#worksList ul {
	margin: 3em 0 3em 0;
}

#worksList ul li {
	list-style-type: square;
	line-height: 200%;
}

#worksList ul li a{
	text-decoration: none;
}

#footnotes {
	font-style: italic;
	text-align: left;
}

h1 {
	font-family: "Jayne Print";
	font-size: 200%;
}

h1 a {
	text-decoration: none;
}

h2 {
	font-size: 125%;
	font-weight: normal;
}

#footer p {
	font-size: 60%;
	font-family: Arial;
	font-style: italic;
}

#adsense {
	position: absolute;
	right: 0;
	top: 5%;
}

#pagedoesnotexist p {
	margin: 20% 20% 20% 25%;
	color: red;
	font-size: 125%;
}

Hello,
I am new to web design and am just learning the basics right now. I am trying to have an ad banner show up to the right of the main heading for my site. What would be the best way to have these two show up side by side within the same div box? Is there a way to turn off the line break that naturally occurs with headings? Thanks for your suggestions in advance! Here is some of the code I am working with:

Code:

<div class="heading">

<h1><a class="header" href="home.htm">Plotbound.com</a></h1>

<script type="text/javascript" src="http://x10hosting.com/adserve.js?kaoticja"></script>
</div>

And the CSS:

Code:

div.heading
{
background-color: #ffffff;
border-bottom: 3px ridge #000000;
border-left: 3px ridge #000000;
margin-bottom: 10px;
}

- Jack

I have made a box mostly from 3 divs a top middle and bottom, when I add any h1 element makes a gap between the top and the middle killing the box effect in FireFox.

I have tried everything with this but now give up, does anyone have any ideas on how to fix this.
I have added a another div called maincontentinner so that the text was easier to adjust but even removing this did not solve it.

All I am trying to do is get rid of the tables layout and have hit a brickwall

my html

HTML Code:

<div class="mainboxtop"></div>
	
			<div class="maincontent">
		 
 
			 <div class="maincontentinner"><!--All content starts here-->
				<h1> More Information</h1>
								this is a test
 			 </div><!--All content stops here-->
	
	
    
	 <div class="mainboxbottom"></div>
	
			
	</div><!--  /closing of maincontentdiv -->

the CSS

Code:

.maincontent {
background:#CFCFCF url(../images/contentmain.gif) repeat scroll 0%;
border:0;
width:710px; 
}
.maincontentinner {/*added to give padding inside the box and a few other styles*/
padding-left:15px;
padding-right:15px;
font-size:1.2em;
}
.mainboxtop {
background:#CFCFCF url(../images/contenttop.gif) no-repeat scroll 0%;
border:0;
height:26px;
margin:0;
padding:0;
width:710px;
}
.mainboxbottom {
background:#CFCFCF url(../images/contentbottom.gif) no-repeat scroll 0%;
border:0;
height:26px;
width:710px;
}

Here's a test page to see it for real

I'm having trouble with a header in IE. I'm a beginner but modifying a webpage.

I have a header that when opened in Firefox or Chrome stretches normally across a page, e.g.

"This is the header"

However, when I open the same page in IE, I'm getting one word per line, e.g.

"This
is
the
header"

Does anyone know how to resolve this please? I'd be very grateful for any help

Hey guys! It's been awhile, but life has been busy and doing new things with web pages hasn't been on the top of my list. However, I've run into a small issue which will hopefully be easy to solve.

I've been doing some scripting for a program which exports and imports scripts in an XML setup. I've been posting those scripts on another site, and, for now, have been instructing users to simple right+click save as... the scripts in order to get them, because, when they click on the link, it tries to bring them to a page of the XML.

Is there any way for me to tell the links to simply download the XML file (effectively like right+click save as... except it will go to wherever they download stuff) if it is clicked?

Hi,

I'm a complete newb and html-challenged, so please forgive my stupid questions.

This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right?
So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks!

~Serena

P.S. is it possible to do mouseovers for certain coordinates on an image map?

Hello All,
I hope this is a good place to ask my question. I was working on a a webpage and tinkering with two different screen capturing software to capture my website then all of a sudden I realized I can no longer see the background of my webpage. I can go online and see background images of someone else webpage but no the webpages stored on my computer. If anyone has any idea about the cause of the problem please help.

How would I do this?

i'm trying to set an image from my harddrive as the background but it doesn't seem to be working. I've been trying <body background="image location.jpg"> but it doesn't work. Any thoughts or solutions?

thanks

Hey everyone.

I'm not too experienced in HTML and I'm having a problem with displaying a background image on this site I'm building. I know this probably isn't the best way to be doing what I'm trying to do, but I'm using a Frameset with 3 columns. The left and right I just want to display the background image and the main to be another frameset containing the main website content. It looks perfectly fine in Firefox, but in Internet Explorer the background images in leftMargin and rightMargin don't show; it's just blank.

Here is my index.html file:
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>| Totaro's Restaurant |</title>
</head>

<frameset cols="15%, 70%, 15%" border=0>
<frame name="left" src="leftMargin.html" />
<frame name="main" src="main.html" />
<frame name="right" src="rightMargin.html" />
</frameset>
<noframes>
I'm sorry, it seems your browser doesn't support frames! x(
</noframes>
</html>

and here is the code of one of the margins:
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></title>
<style>
body {
	background-image:url(images/bg.jpg);
 	background-repeat: repeat;
}
</style>
</head>

<body>
</body>
</html>

Here it is in Firefox: http://i34.photobucket.com/albums/d1...itefirefox.jpg

And in IE: http://i34.photobucket.com/albums/d1.../websiteie.jpg

Any help would be appreciated.

Hello, Well im trying to make a web page type thing and i was wondering if there is a way to make the background change as if it were an image when you shrink the page down. http://www.legouniverseforums.com/radio.html thats the link. i want the video chat to be on the orange part box and the chat to be in its box but on some computers they go in there boxes but on other computers they dont.

Here is how it looks on mine i would like it to look like this on every computer. http://www.legouniverseforums.com/Sc...34.34%20PM.png

This is the current script I am using for background change upon a timer, does anyone know how and where I can add a no bg repeat and position the image on the bottom left?

Any help would be great! Thanks

<script type="text/javascript">

var bgImages = new Array();
bgImages.push("/image/girl.gif");
bgImages.push("/image/girl2.gif");
bgImages.push("/image/girl3.gif");

//bgImages.push("URL HERE");

function LoadRandomBackground()
{
var randomImageIndex = Math.floor(Math.random()*bgImages.length)
document.body.background = bgImages[randomImageIndex];

}

function StartBackgroundRefreshTimer()
{
var timer = setInterval('LoadRandomBackground()',10000); // 10 seconds
}


</script>

</head>

<body onload="LoadRandomBackground(); StartBackgroundRefreshTimer()">

Hey,

I'm wanting to use a larger background image with a height of around 810pixels.

Currently when i implement it, only around half the image appears and there is no scroll bar to use to view the whole image. And currently when i put a css box into it, when i scroll down it will still only show the top section of the image.

Can anyone assist in what code to put into the CSS to allow the scroll bar to appear so i can view the whole background image?

Thanks

(sorry, meant to put this in the CSS section, only just realised)

Hi Guys,

Firstly i apologise if this in the wrong section of the forum, please let me know.

My problem:

I have designed a webpage for my DJ services in Photoshop and plan to slice it up.
The first problem is my background. I designed it myself so its not simple. Basically i dont have a clue on how i should export the background from CS5 or how to implement it into my website on dreamweaver cs5.

Also i want to export my images once sliced from Photoshop with a transparent background, how would i do this?


Thanks for any help

Raver910