# Stuck with css coding



## freaksavior (Sep 28, 2011)

That's what it should look like

This is what I have

http://www.freaksavior.com/downloads/ahorsleyHike.zip

anybody got insight on wtf I did wrong?


----------



## Kreij (Sep 28, 2011)

I get a "Not found. You are looking for something that isn't here." at the link.


----------



## freaksavior (Sep 28, 2011)

Sorry, shoulda worked

http://www.freaksavior.com/downloads/ahorsleyHike.zip

Firefox is giving a 404 safari is working. /weird


----------



## robn (Sep 28, 2011)

Column width coming from title td! 

Edit: try some colspan="5"


----------



## freaksavior (Sep 28, 2011)

naw colspan didn't work. I asked my teacher and she said it's something in my css sheet not telling the images to be aligned to the middle.


----------



## Kreij (Sep 29, 2011)

It's not in your css, all that is doing is setting up fonts, it's in the table setup in your html.






It'll cost you $1000 for the source. 


```
<!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>Hike with Mike</title>
<link href="mountain.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body background="images/tablebckg.gif">
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td colspan="5"><h1><img src="images/banner.gif" alt="banner" /></h1></td>
  </tr>
  
  
  <tr align="center">
    <td width="160" height="244"><a href="http://www.ncwaterfalls.com/dupont1.htm"><img src="images/HighFalls.jpg" width="150" height="224" alt="High Falls" /></a></td>
    
    <td width="160" height="244"><a href="http://www.ncwaterfalls.com/mingo1.htm"><img src="images/MingoFalls.jpg" width="150" height="224" alt="Mingo Falls" /></a></td>
    
    <td width="160" height="244"><a href="http://www.gowaterfalling.com/waterfalls/rainbow.shtml"><img src="images/rainbowFalls.jpg" width="150" height="224" alt="Rainbow Falls" /></a></td>
    
    <td width="160" height="244"><a href="http://www.ncwaterfalls.com/shuck_ridge1.htm"><img src="images/shuckCreekFalls.jpg" width="150" height="224" alt="Shuck Creek Falls" /></a></td>
    
    <td width="160" height="244"><a href="http://www.ncwaterfalls.com/triple_dupont1.htm"><img src="images/tripleFalls.jpg" width="150" height="224" alt="Triple Falls" /></a></td>
    
  </tr>
  <tr>
    <td align="center">High Falls</td>
    <td align="center">Mingo Falls</td>
    <td align="center">Rainbow Falls</td>
    <td align="center">Shuck Ridge Falls</td>
    <td align="center">Triple Falls</td>
  </tr>

 
  <tr>
    <td height="20" colspan="5"><hr /></td>
  </tr>
  
  <tr>
    <td height="240" colspan="5">
     <blockquote><p>Welcome to one of the most beautiful places on Earth - the mountains of western North Carolina! There are literally hundreds of waterfalls and miles and miles of hiking trails in this area - you could spend a lifetime trying to see everything. Western North Carolina is blessed to have over a million acres of national forests, national parks, state parks, and other public lands for our enjoyment and use. The Pisgah and Nantahala National Forests comprise most of this land and offer multiple uses including hiking, waterfalling, mountain biking, camping, and horseback riding. Our state parks offer the same activities and contain some of the lesser know hidden jewels. New state parks are still being developed - Gorges State Park, Chimney Rock State Park, and the new Grandfather Mountain State Park are still in their infancy stages of development. And of course there's the beautiful Blue Ridge Parkway - America's Favorite Drive.

     <p>I invite you to join me for some of the most amazing hikes into the wonders of Western North Carolina that you will experience.

     <p align="right">
     - Mountain Man Mike<br />
     555-555-5555</p></blockquote>
    </td>
  </tr>
</table>

</body>
</html>
```

robn was correct, it had to do with no colspan settings.

I'm sure you can figure out the red borders on your own.


----------



## freaksavior (Sep 29, 2011)

Hmm, i'll compare what I had and what you have. Thanks so much. I spent 7 hours on this monday night trying to get it and then a bit in between.  but thanks again


----------



## Kreij (Sep 29, 2011)

I haven't done aything with html in ages, so it took me about 15 minutes to get it working. 

Just a cheap shot, Freak, always happy to help if I can.


----------



## freaksavior (Sep 29, 2011)

Thanks again.  


http://www.freaksavior.com/school/HikeWithMike


----------



## Kreij (Sep 29, 2011)

Nice !!

I took the background image out of the table and put it in the body, so that if the user resized the browser, the background enlarges with it instead of surrounding the table with white.
Has a nicer overall ambiance IMO.


----------



## freaksavior (Oct 5, 2011)

So for my next project i'm suppose to turn the same page into a css based page and NOT use tables like the last one.

http://freaksavior.com/school/Hike with mike css/ is what I got. The text is centered but not spaced out. I spent from 1pm to 11pm working on it.  any suggestions for the text? Padding, margin, text-align etc?


----------



## stinger608 (Oct 6, 2011)

Do you mean the spacing between the words, or the spacing between the lines Freak?


----------



## freaksavior (Oct 6, 2011)

Between the actual words under the pictures.

Here is the actual document


Spoiler



<!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>Hike with Mike</title>
<link href="mountain.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>

<div id="container">
<div id="banner"><h1><img src="images/banner.gif" width="800" height="75" alt="Banner"/></h1></div>

<div id="images">
  <a href="http://www.ncwaterfalls.com/dupont1.htm" target="_blank"><img src="images/HighFalls.jpg" width="150" height="224" alt="High Falls" /></a>

  <a href="http://www.ncwaterfalls.com/mingo1.htm" target="_blank"><img src="images/MingoFalls.jpg" width="150" height="224" alt="Mingo Falls" /></a>

  <a href="http://www.gowaterfalling.com/waterfalls/rainbow.shtml" target="_blank"><img src="images/rainbowFalls.jpg" width="150" height="224" alt="Rainbow Falls" /></a>

  <a href="http://www.ncwaterfalls.com/shuck_ridge1.htm" target="_blank"><img src="images/shuckCreekFalls.jpg" width="150" height="224" alt="Shuck Creek Falls" /></a>

  <a href="http://www.ncwaterfalls.com/triple_dupont1.htm" target="_blank"><img src="images/tripleFalls.jpg" width="150" height="224" alt="Triple Falls" /></a>
  </div>

<div id="center">
High Falls
Mingo Falls
Rainbow Falls
Shuck Ridge Falls
Triple Falls
</div>

<hr/>

<blockquote><p>Welcome to one of the most beautiful places on Earth - the mountains of western North Carolina! There are literally hundreds of waterfalls and miles and miles of hiking trails in this area - you could spend a lifetime trying to see everything. Western North Carolina is blessed to have over a million acres of national forests, national parks, state parks, and other public lands for our enjoyment and use. The Pisgah and Nantahala National Forests comprise most of this land and offer multiple uses including hiking, waterfalling, mountain biking, camping, and horseback riding. Our state parks offer the same activities and contain some of the lesser know hidden jewels. New state parks are still being developed - Gorges State Park, Chimney Rock State Park, and the new Grandfather Mountain State Park are still in their infancy stages of development. And of course there's the beautiful Blue Ridge Parkway - America's Favorite Drive.

     <p>I invite you to join me for some of the most amazing hikes into the wonders of Western North Carolina that you will experience.

    <div id="right">
     - Mountain Man Mike<br />
     555-555-5555</div></blockquote>
     </div>
</body>
</html>



Here is the css



Spoiler



@charset "UTF-8";
/* CSS Document */


/*-----html tags---------*/


body 
{
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFF;
}


P
{
	color:#FFF;
	text-align:justify;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/*------- id -------*/

#container
{
	margin:0 auto;
	width:800px;
	background-image:url(http://tpucdn.com/forums//images/tablebckg.gif)
}

#banner

{
	padding-top:1px;
}

#images

{
	padding-left:20px;
}

 #right
 {
	 text-align:right;
	 padding: 0 0 10px 0;
 }


#center 
{

}



before you say "there is no coder in center", I know. I have been messing with it for a while and I erased it out of frustration.


----------



## stinger608 (Oct 6, 2011)

Okay in order to properly space your wording in css use this code.

p
{
word-spacing:30px;
}

Just insert the "word-spacing:30px;" in with:

{
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#FFF;
}

Hence;

{
margin:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
word-spacing:30px;
color:#FFF;
}

That tells it to space your words at 30 pixels between words. try that and see if that is what you need.

You can always adjust to what ever you want. If 30 is not enough use 35px, if it is too much adjust it down to 25px until  you get the happy spot.

Hope this helps.


----------



## freaksavior (Oct 6, 2011)

If I do that, it makes ALL the words spaced out and It needs to be 

High Falls         Mingo Falls       Rainbow Falls       Shuck Ridge Falls        Triple Falls 
like in the first photo  

I had actually played around with the word-spacing


----------



## xbonez (Oct 6, 2011)

Here you go. This is how it looks now using CSS







*This is the html 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>Hike with Mike</title>
		<link href="style.css" rel="stylesheet" type="text/css" />		
	</head>
	<body>
		<div class="whitespace">
		</div>
		<div id="container">
			<div id="banner">
				<h1><img src="images/banner.gif" alt="Banner"/></h1>
			</div>
			<div class="imagecontainer">
				<div id="images" class="image">
					<a href="http://www.ncwaterfalls.com/dupont1.htm" target="_blank"><img src="images/HighFalls.jpg"alt="High Falls" /></a>					
					<div class="label">
						High Falls
					</div>
				</div>
				<div id="images" class="image">
					<a href="http://www.ncwaterfalls.com/mingo1.htm" target="_blank"><img src="images/MingoFalls.jpg" alt="Mingo Falls" /></a>
					<div class="label">
						Mingo Falls
					</div>
				</div>
				<div id="images" class="image">
					<a href="http://www.gowaterfalling.com/waterfalls/rainbow.shtml" target="_blank"><img src="images/rainbowFalls.jpg" alt="Rainbow Falls" /></a>
					<div class="label">
						Rainbow Falls
					</div>
				</div>
				<div id="images" class="image">
					<a href="http://www.ncwaterfalls.com/shuck_ridge1.htm" target="_blank"><img src="images/shuckCreekFalls.jpg" alt="Shuck Creek Falls" /></a>
					<div class="label">
						Shuck Ridge Falls
					</div>
				</div>
				<div id="images" class="image">
					<a href="http://www.ncwaterfalls.com/triple_dupont1.htm" target="_blank"><img src="images/tripleFalls.jpg" alt="Triple Falls" /></a>
					<div class="label">
						Triple Falls
					</div>
				</div>								
			</div>
			<hr/>	
			<div class="bodytext">
				
				<p>Welcome to one of the most beautiful places on Earth - the mountains of western North Carolina! There are literally hundreds of waterfalls and miles and miles of hiking trails in this area - you could spend a lifetime trying to see everything. Western North Carolina is blessed to have over a million acres of national forests, national parks, state parks, and other public lands for our enjoyment and use. The Pisgah and Nantahala National Forests comprise most of this land and offer multiple uses including hiking, waterfalling, mountain biking, camping, and horseback riding. Our state parks offer the same activities and contain some of the lesser know hidden jewels. New state parks are still being developed - Gorges State Park, Chimney Rock State Park, and the new Grandfather Mountain State Park are still in their infancy stages of development. And of course there's the beautiful Blue Ridge Parkway - America's Favorite Drive.</p>

				<p>I invite you to join me for some of the most amazing hikes into the wonders of Western North Carolina that you will experience.</p>

				<div id="right">
				- Mountain Man Mike<br />
				555-555-5555
				</div>
			</div>					
		</div>
	</body>
</html>
```

*This is the CSS*


```
@charset "UTF-8";
/* CSS Document */


/*-----html tags---------*/


body 
{
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#FFF;
}


P
{
color:#FFF;
text-align:justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}

/*------- id -------*/

#container
{
	padding-top:10px;
	margin:0 auto;
	width:800px;
	background-image:url(http://tpucdn.com/forums//images/tablebckg.gif)
}

#banner
{
	margin-top:-10px;
}

#images
{
padding-left:0px;
}

#right
{
text-align:right;
padding: 0 0 10px 0;
}

.centertext 
{
	margin-top:20px;
}

.imagecontainer
{
	width:800px;
	padding-left:5px;
	padding-top:10px;

}

.image
{
	padding-left:0px;
	padding-right:10px;
	padding-bottom:15px;
	float:left;
	
}
.labelcontainer
{
	width:800px;
	padding-left:5px;
	padding-top:20px;
	float:left;
}
.label
{
	padding-top:10px;
	padding-right:10px;
	text-align:center;
}
.bodytext
{
	padding-left:40px;
	padding-right:40px;
	padding-top:5px;
}
.whitespace
{
	height:10px;
	background:white;	
}
```

*Some notes I made*

1. The HTML code you posted has an extra line of text that isn't required. Must have slipped past you:

```
<style type="text/css">
</style>
```

2. In the HTML code you posted, you don't seem to have an opening <body> tag.

3. You don't close the <p> tags in your main body of text.

4. Avoid using <blockquote>. Do as much as you can with CSS. I removed the blockquote tag. 

5. The trick of getting the images to appear in line, is to have a div 'imagecontainer' within which you have multiple divs 'image'. An 'image' div holds only one image and its info, while all 'image' divs are held under 'imagecontainer'. It is also important for the 'image' div to have this line in its CSS:


```
float:left
```

It ensures the div sticks to the left and does not take up the entire horizontal space. It only utilises as much space as it needs.

6. Place each label within a div of its own which is nested within its image div. This way, when you center the label, it centers with respect to its image, and not the whole page.

7. Padding is your friend. Use it as much as you like. Use it instead of &nbsp and <br/> s. 

8. Finally, while it is fine to start a CSS class with a #, so you only specify an id and not a class in the html code, you will have issues when multiple objects in your html want to use the same CSS. You will have to assign those objects the same id's which will cause conflicts if you ever want to apply javascript to your page.
Use well defined classes instead. In the CSS code, start them with a period.

*CSS*

```
.image
{
color:red;
padding-top:20px;
}

[B]HTML[/B]
```


```
<div id="doesntmatter" class="image">
</div>
```

The power of CSS is unleashed when you begin nesting divs. To give you an idea, this is the structure of divs in the HTML code I posted above:


----------



## freaksavior (Oct 6, 2011)

Wow! That was a super detailed answer. Thank you so much. Im trying to get the css down but sometimes i want to pull out my hair :/


----------

