• We've upgraded our forums. Please post any issues/requests in this thread.

Stuck with css coding

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#1

Kreij

Senior Monkey Moderator
Staff member
Joined
Feb 6, 2007
Messages
13,817 (3.48/day)
Likes
5,524
Location
Cheeseland (Wisconsin, USA)
Processor Intel Core 2 Quad QX9650 Extreme @ 3.0 GHz
Motherboard Asus Rampage Formula
Cooling ZeroTherm Nirvana NV120 Premium
Memory 8GB (4 x 2GB) Corsair Dominator PC2-8500
Video Card(s) 2 x Sapphire Radeon HD6970
Storage 2 x Seagate Barracuda 320GB in RAID 0
Display(s) Dell 3007WFP 30" LCD (2560 x 1600)
Case Thermaltake Armor w/ 250mm Side Fan
Audio Device(s) SupremeFX 8ch Audio
Power Supply Thermaltake Toughpower 750W Modular
Software Win8 Pro x64 / Cat 12.10
#2
I get a "Not found. You are looking for something that isn't here." at the link.
 

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#3

robn

New Member
Joined
Mar 9, 2010
Messages
180 (0.06/day)
Likes
67
Location
UK
Processor i7 920 @ 3520MHz locked on 1.04V, all features on
Motherboard Biostar T-Power x58 + ASUS U3S6 + Broadcom WiFi
Cooling Akasa Nero S on the i7 + 2 Akasa Apache case fans
Memory 24Gig Kingston HyperX DDR3
Video Card(s) XFX GTX260 216 XT
Storage 240Gig SanDisk SSD, 750Gig Spinpoint F1
Display(s) BenQ E2200HD
Case Coolermaster Elite 334
Audio Device(s) Realtek(!) with M-Audio AV40 + Wharfedale SW150
Power Supply Antec EarthWatts 650
Software Win7 64 Pro / Fedora KDE
Benchmark Scores wPrime 32M 7.265sec - 3DMark2001 57673 - Intel Linpack 50.6237 GFlops
#4
Column width coming from title td! :p

Edit: try some colspan="5"
 

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#5
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

Senior Monkey Moderator
Staff member
Joined
Feb 6, 2007
Messages
13,817 (3.48/day)
Likes
5,524
Location
Cheeseland (Wisconsin, USA)
Processor Intel Core 2 Quad QX9650 Extreme @ 3.0 GHz
Motherboard Asus Rampage Formula
Cooling ZeroTherm Nirvana NV120 Premium
Memory 8GB (4 x 2GB) Corsair Dominator PC2-8500
Video Card(s) 2 x Sapphire Radeon HD6970
Storage 2 x Seagate Barracuda 320GB in RAID 0
Display(s) Dell 3007WFP 30" LCD (2560 x 1600)
Case Thermaltake Armor w/ 250mm Side Fan
Audio Device(s) SupremeFX 8ch Audio
Power Supply Thermaltake Toughpower 750W Modular
Software Win8 Pro x64 / Cat 12.10
#6
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. :roll:

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="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

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#7
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

Senior Monkey Moderator
Staff member
Joined
Feb 6, 2007
Messages
13,817 (3.48/day)
Likes
5,524
Location
Cheeseland (Wisconsin, USA)
Processor Intel Core 2 Quad QX9650 Extreme @ 3.0 GHz
Motherboard Asus Rampage Formula
Cooling ZeroTherm Nirvana NV120 Premium
Memory 8GB (4 x 2GB) Corsair Dominator PC2-8500
Video Card(s) 2 x Sapphire Radeon HD6970
Storage 2 x Seagate Barracuda 320GB in RAID 0
Display(s) Dell 3007WFP 30" LCD (2560 x 1600)
Case Thermaltake Armor w/ 250mm Side Fan
Audio Device(s) SupremeFX 8ch Audio
Power Supply Thermaltake Toughpower 750W Modular
Software Win8 Pro x64 / Cat 12.10
#8
I haven't done aything with html in ages, so it took me about 15 minutes to get it working. :p

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

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy

Kreij

Senior Monkey Moderator
Staff member
Joined
Feb 6, 2007
Messages
13,817 (3.48/day)
Likes
5,524
Location
Cheeseland (Wisconsin, USA)
Processor Intel Core 2 Quad QX9650 Extreme @ 3.0 GHz
Motherboard Asus Rampage Formula
Cooling ZeroTherm Nirvana NV120 Premium
Memory 8GB (4 x 2GB) Corsair Dominator PC2-8500
Video Card(s) 2 x Sapphire Radeon HD6970
Storage 2 x Seagate Barracuda 320GB in RAID 0
Display(s) Dell 3007WFP 30" LCD (2560 x 1600)
Case Thermaltake Armor w/ 250mm Side Fan
Audio Device(s) SupremeFX 8ch Audio
Power Supply Thermaltake Toughpower 750W Modular
Software Win8 Pro x64 / Cat 12.10
#10
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

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#11
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

Dedicated TPU Cruncher & Folder
Joined
Nov 11, 2008
Messages
9,613 (2.89/day)
Likes
8,489
Location
Wyoming
System Name Dean Machine
Processor Intel 4790K
Motherboard MSI 1150 Gaming mATX
Cooling Corsair H100i and video card custom loop
Memory 16 gigs Crucial Ballistix Tactical Tracer
Video Card(s) Dual liquid cooled HD7970's (Thanks to Norton!!!)
Storage Crucial M4 256 gig SSD
Display(s) Overlord 27" 2560 x 1440
Case Corsair Air 540
Audio Device(s) On board
Power Supply Seasonic modular 850 watt Platinum
Software Windows 10 Pro
#12
Do you mean the spacing between the words, or the spacing between the lines Freak?
 

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#13
Between the actual words under the pictures.

Here is the actual document
<!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

@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

Dedicated TPU Cruncher & Folder
Joined
Nov 11, 2008
Messages
9,613 (2.89/day)
Likes
8,489
Location
Wyoming
System Name Dean Machine
Processor Intel 4790K
Motherboard MSI 1150 Gaming mATX
Cooling Corsair H100i and video card custom loop
Memory 16 gigs Crucial Ballistix Tactical Tracer
Video Card(s) Dual liquid cooled HD7970's (Thanks to Norton!!!)
Storage Crucial M4 256 gig SSD
Display(s) Overlord 27" 2560 x 1440
Case Corsair Air 540
Audio Device(s) On board
Power Supply Seasonic modular 850 watt Platinum
Software Windows 10 Pro
#14
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

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#15
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

New Member
Joined
Nov 29, 2010
Messages
1,182 (0.46/day)
Likes
315
Location
Philly, PA (US)
System Name Winter
Processor AMD Phenom II x4 965 BE @ 4.0Ghz
Motherboard MSI 790FX-GD70
Cooling Corsair H50 Liquid Cooling
Memory 2 x 2Gb Gskill Ripjaws 1600Mhz (7-7-7-24@1.6V)
Video Card(s) Asus GTX 470 @ Stock (Zalman VF3000 cooler)
Storage 2 x Samsung Spinpoint F3 500GB (RAID 0)
Display(s) Hanns G 28" @ 1920x1200
Case Antec 1200
Audio Device(s) Onboard -- TosLink --> Z5500
Power Supply Corsair 850TX 850W PSU
Software Win 7 64-bit Ultimate
#16
Here you go. This is how it looks now using CSS




This is the html code:

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

Code:
@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:
Code:
<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:

Code:
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
Code:
.image
{
color:red;
padding-top:20px;
}

[B]HTML[/B]
Code:
<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:

 
Last edited:

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,086 (2.01/day)
Likes
889
System Name Absolute Zero | M.A.S.S
Processor Intel i7 4770k | i7 920
Motherboard Gigabyte Z87X-UD4H | EVGA X58 FTW3 SLI
Cooling Phanteks ph-tc14pe | CM 212+ Push Pull
Memory Mushkin 16Gb at 2400Mhz | Corsair Vengence 6x8Gb=48Gb
Video Card(s) EVGA SC GTX 770 2Gb | Nvidia 7300GT
Storage Sandisk 256Gb Ultra Plus x 2 raid0 + 72.12 500Gb | Intel 320 80Gb 2x1.5Tb, 2x2Tb 2x.5Tb + 3 x6Tb
Display(s) Samsung 245BW + Asus PB278Q + Samsung 40" 650A | None
Case NZXT H630 |Rosewill 8bay 4u server chasiss
Audio Device(s) Asus Xonar HDAV + GTX770 | Onboard
Power Supply Silverstone DA800 | Rocketfish 700w aka fsp
Software Windows 7 ultimate X64 | Debian 7 wheezy
#17
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 :/