• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Stuck with css coding

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2


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

Senior Monkey Moderator
Joined
Feb 6, 2007
Messages
13,817 (2.21/day)
Location
Cheeseland (Wisconsin, USA)
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2

robn

New Member
Joined
Mar 9, 2010
Messages
180 (0.04/day)
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
Column width coming from title td! :p

Edit: try some colspan="5"
 

freaksavior

To infinity ... and beyond!
Joined
Dec 11, 2006
Messages
8,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2
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
Joined
Feb 6, 2007
Messages
13,817 (2.21/day)
Location
Cheeseland (Wisconsin, USA)
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2
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
Joined
Feb 6, 2007
Messages
13,817 (2.21/day)
Location
Cheeseland (Wisconsin, USA)
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2

Kreij

Senior Monkey Moderator
Joined
Feb 6, 2007
Messages
13,817 (2.21/day)
Location
Cheeseland (Wisconsin, USA)
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2
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
11,102 (1.98/day)
Location
Wyoming
System Name Dean Machine/2020 Ryzenfall
Processor Intel 4790K/AMD Ryzen 3700X
Motherboard MSI 1150 Gaming mATX/Gigabyte AORUS ELITE B550
Cooling Cooler Master Hyper 212 LED/SilverStone AH240 AIO
Memory 16 gigs Crucial Ballistix Tactical Tracer/16 gigs G.Skill TridentZ NEO DDR4
Video Card(s) Gigabyte 1660 Super/Gigabyte GTX 1660
Storage Crucial SSD 256 and 2TB spinner/Dual Samsung 980 Pro M2 NVME 4.0
Display(s) Overlord 27" 2560 x 1440
Case Corsair Air 540
Audio Device(s) On board
Power Supply Seasonic modular 850 watt Platinum/EVGA T2-850 Titanium
Software Windows 10 Pro/Windows 10 Pro
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2
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
11,102 (1.98/day)
Location
Wyoming
System Name Dean Machine/2020 Ryzenfall
Processor Intel 4790K/AMD Ryzen 3700X
Motherboard MSI 1150 Gaming mATX/Gigabyte AORUS ELITE B550
Cooling Cooler Master Hyper 212 LED/SilverStone AH240 AIO
Memory 16 gigs Crucial Ballistix Tactical Tracer/16 gigs G.Skill TridentZ NEO DDR4
Video Card(s) Gigabyte 1660 Super/Gigabyte GTX 1660
Storage Crucial SSD 256 and 2TB spinner/Dual Samsung 980 Pro M2 NVME 4.0
Display(s) Overlord 27" 2560 x 1440
Case Corsair Air 540
Audio Device(s) On board
Power Supply Seasonic modular 850 watt Platinum/EVGA T2-850 Titanium
Software Windows 10 Pro/Windows 10 Pro
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2
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.24/day)
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
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,095 (1.28/day)
System Name ZeroUptime | M.A.S.S / MM1
Processor Xeon 2659 v3 / Xeon 2683 v4 / ARM A14
Motherboard Asus X99-E-10G WS / ASRock x99 usb 3.1 / Apple
Cooling NZXT Kraken / Noctua NH-L12 / Apple
Memory 16Gb DDR4 / 32Gb DDR4 / 16GB HBLM
Video Card(s) Powercooler ATI vega 64 / GT 7300 / ARM
Storage Samsung 970 512 Evo NVMe / A lot. / 256 + 512 External TB3
Display(s) Acer Predator X34 / Headless / Acer X34 Non predator
Case NZXT H630 |Rosewill 8bay 4u server chasiss / MMM1
Audio Device(s) Onboard / Onboard / Onboard
Power Supply Corais HX850 | Corsair TX750 / Internal 250w
Mouse g502 proteus core / Headless / g502 proteus core
Keyboard Corsair K95 Cherry Blue / Headless / K65 Cherry Red
Software Windows 10 / ESXI / Big Sur 11.2.2
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 :/
 
Top