3 replies [Last post]
drw285
drw285's picture
Offline
Regular
Orange County, CA
Last seen: 2 years 15 weeks ago
Orange County, CA
Timezone: GMT-7
Joined: 2010-01-21
Posts: 18
Points: 25

Hello all:

I am using the negative text indent method but can't figure out why my header image is not showing.
Also, I have some confusion with specificity and my header tag colors.
I have validated my code.
Any suggestions appreciated.

<!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" />
<link href="style - Copy.css" rel="stylesheet" type="text/css" />
 
<title>Wedding Planner - BeDazzle My Events</title>
 
<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/PictureSlides-jquery-2.0.js"></script>
	<script type="text/javascript">
		jQuery.PictureSlides.set({
			// Switches to decide what features to use
			useFadingIn : true,
			useFadingOut : true,
			useFadeWhenNotSlideshow : true,
			useFadeForSlideshow : true,
			useDimBackgroundForSlideshow : false,
			loopSlideshow : true,
			usePreloading : true,
			useAltAsTooltip : true,
			useTextAsTooltip : false,
 
			// Fading settings
			fadeTime : 500, // Milliseconds	
			timeForSlideInSlideshow : 2000, // Milliseconds
 
			// At page load
			startIndex : 1,	
			startSlideShowFromBeginning : true,
			startSlideshowAtLoad : true,
			dimBackgroundAtLoad : false,
 
			// Large images to use and thumbnail settings
			images : [
				{
					image : "images/image1.jpg", 
					alt : "Picture 1",
					text : "This is picture 1"
				},
				{                                  
 
					image : "images/image2.jpg", 
					alt : "Picture 2",
					text : "This is picture 2"
				},
				{                                  
 
					image : "images/image3.jpg", 
					alt : "Picture 3",
					text : "This is picture 3"
				},
				{                                  
 
					image : "images/image4.jpg", 
					alt : "Picture 4",
					text : "This is picture 4"
				},
				{                                  
 
					image : "images/image5.jpg", 
					alt : "Picture 5",
					text : "This is picture 5"
				},
				{                                  
 
					image : "images/image6.jpg", 
					alt : "Picture 6",
					text : "This is picture 6"
				},
				{                                  
 
					image : "images/image7.jpg", 
					alt : "",
					text : "This is picture 7"
				},
				{                                  
 
					image : "images/image8.jpg", 
					alt : "Allen Wilson and Gail Navarro",
					text : "This is picture 8"
				}
			],
			thumbnailActivationEvent : "click",
 
			// Classes of HTML elements to use
			mainImageClass : "picture-slides-image", // Mandatory
			fadeContainerClass : "picture-slides-fade-container"
		});
	</script>
 
 
 
 
  <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}
</script>
 
</head>
 
<body>
 
<div class="container">
<h1><img src="images/header.gif" alt="Wedding Planner in Los Angeles - BeDazzle My Events" /></h1>
  <ul>
   	<li><a href="index.html" >Home </a></li>
                     <li><a href="gallery.html" >Gallery </a></li>
            <li><a href="event-planning-near-los-angeles.html" >Event Planning </a></li>
            <li><a href="wedding-planning-near-orange-county-ca" >Wedding Planning </a></li>
            <li><a href="product-catalog" >Product Catalog </a></li>
            <li><a href="blog.html" >Blog </a></li>
            <li><a href="contact-bedazzle-my-events.html" >Contact Us </a></li>
 
        </ul>
 
			<div class="picture-slides-container">
     		  <div class="picture-slides-fade-container">
				   <img class="picture-slides-image" src="about:blank" alt="This is picture 1" />
	 		  </div>
			</div> 
            <div class="content">
    	<img class="happy-people" src="images/happy-couple.jpg" alt="Couple getting married"/>
          <h3>Party Rentals</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel magna quis quam volutpat dignissim in et augue. Vivamus in sapien ligula. Vestibulum gravida vehicula luctus. Aliquam erat volutpat. Etiam facilisis pretium suscipit. Nam a ipsum et dolor tincidunt ultricies a quis augue. Mauris vulputate, lorem vel lacinia eleifend, eros urna mollis lectus, vitae suscipit nunc mi congue urna. Sed dolor turpis</p>
             <h4>Chiavari Chairs Starting at $4.75</h4>
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel magna quis quam volutpat dignissim in et augue. Vivamus in sapien ligula. Vestibulum gravida vehicula luctus. Aliquam erat volutpat. Etiam facilisis pretium suscipit. Nam a ipsum et dolor tincidunt ultricies a quis augue. Mauris vulputate, lorem vel lacinia eleifend, eros urna mollis lectus, vitae suscipit nunc mi congue urna. Sed dolor turpis</p>
 
 
 
     </div>
 
      <div class="footer">
      	<p class="footer-text">Bedazzle My Events         |          1314 W. 9TH ST. UPLAND 91786         |          (909) 263-3533    |          (949) 566-4543</p>
      		<img src="images/facebook.png" alt="click here to like bedazzle my events on facebook" align="right" />
      		<img src="images/twitter.png" alt="click here to follow bedazzle my events on twitter" align="right" />
      		<img src="images/feed.png" alt="get rss feed for bedazzle my events" align="right" />	  </div>
 
 
 
 
</div></body>
</html>

@charset "UTF-8";
/* CSS Document */
 
 
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
 
 
 
body {
	background-color: #261809;
 
	font-family:Arial, Helvetica, sans-serif;
	font-size:76%;
 
 
}
 
h1{
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center;
	background-image: url(images/header.gif);
	text-indent: -5000px;
}
#main_picture {
	clear: both;
	width: 910px;
}
 
 
ul {
	width: 240px;
	float: left;
	color: 8c7f59;
	}
li {
	background-color: 261809;
	background-repeat: no-repeat;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: 8c7f59;
	padding-top: 20px;
}
 
a:link {
	text-decoration: none;
	color: #ffffff;
}
 
 
a:visited {
	text-decoration: none;
	color:#3399CC;
 
}
a:hover {
	text-decoration: none;
	color:#003399;
	background-color: white;
}
a:active {
	text-decoration: none;
	color:#003399;
}
 
 
ul.top {
padding:0;
}
 
li.top {
	vertical-align: baseline;
	padding: 6px;
}
 
 
p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #FFFFFF;
}
.small {
	font-size: 14px;
	text-align: left;
}
 
h3 {
	float: left;
	width: 310px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 24px;
	color: 8c7f59;
 
}
h4 {
	width:310px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	color: 8c7f59;
}
 
.clear {
	clear: both;
}
.header {
	width: 890px;
	background-position: center top;
}
.container {
	width: 890px;
	margin: 0 auto;
}
 
 
 
.screenshot {
	border-top-width: 5px;
	border-right-width: 50px;
	border-bottom-width: 5px;
	border-left-width: 50px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: gray;
	border-right-color: gray;
	border-bottom-color: gray;
	border-left-color: gray;
}
.happy-people    {
	width: 240px;
	float: left;
	height: 163px;
}
.footer {
	width: 890px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 11px;
	color: #8c7f59;
	padding-top: 20px;
	clear: both;
}
.footer-text {
	float: left;
	padding-top: 40px;
	color: 8c7f59;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
}
 
 
.text-box-1 {
	width: 222px;
}
.content {
	margin-top: 20px;
	clear: both;
	position: inline;
 
}
 
 
.text-box-2 {
	width: 222px;
	clear: right;
}
.picture-slides-container {
	height: 327px;
	width: 650px;
	float: right;
}
.follow-bedazzle-my-events {
	width: 222px;
	clear: right;
}

drw285
drw285's picture
Offline
Regular
Orange County, CA
Last seen: 2 years 15 weeks ago
Orange County, CA
Timezone: GMT-7
Joined: 2010-01-21
Posts: 18
Points: 25

Figured it out. Just had to

Figured it out. Just had to add this code in H1 instead of inserting image.

h1{
	t;
	background-position:center;
	background: url(images/header.gif) no-repeat;
	text-indent: -5000px;
	width:890px;
	height:193px;
}

gary.turner
gary.turner's picture
Online
Moderator
Dallas
Last seen: 3 min 43 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9273
Points: 3279

Global css resets

I suggest you read Global resets considered harmful.

Crying I find it hard to believe I posted that brilliant treatise three years ago next week, and people are still including that foulness in their style sheets. What has that Meyer guy got that I don't? Tongue

cheers,

gary

UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

drw285
drw285's picture
Offline
Regular
Orange County, CA
Last seen: 2 years 15 weeks ago
Orange County, CA
Timezone: GMT-7
Joined: 2010-01-21
Posts: 18
Points: 25

Blindly implementing CSS reset is bad

I like Hugo's contribution, that blindly implementing a CSS reset can result in more damage than damage prevention.
I see my tragic flaw there.
Thanks for pointing it out, Gary.