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

Stuck with css coding

Discussion in 'Programming & Webmastering' started by freaksavior, Sep 28, 2011.

  1. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    Crunching for Team TPU
  2. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (4.93/day)
    Thanks Received:
    5,616
    Location:
    Cheeseland (Wisconsin, USA)
    I get a "Not found. You are looking for something that isn't here." at the link.
     
  3. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    Crunching for Team TPU
  4. robn

    robn New Member

    Joined:
    Mar 9, 2010
    Messages:
    180 (0.11/day)
    Thanks Received:
    67
    Location:
    UK
    Column width coming from title td! :p

    Edit: try some colspan="5"
     
    freaksavior says thanks.
  5. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    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.
     
    Crunching for Team TPU
  6. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (4.93/day)
    Thanks Received:
    5,616
    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.

    [​IMG]

    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. ;)
     
    robn and freaksavior say thanks.
  7. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    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
     
    Crunching for Team TPU
  8. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (4.93/day)
    Thanks Received:
    5,616
    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 says thanks.
  9. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
  10. Kreij

    Kreij Senior Monkey Moderator Staff Member

    Joined:
    Feb 6, 2007
    Messages:
    13,881 (4.93/day)
    Thanks Received:
    5,616
    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.
     
  11. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    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?
     
    Crunching for Team TPU
  12. stinger608

    stinger608 Dedicated TPU Cruncher & Folder

    Joined:
    Nov 11, 2008
    Messages:
    7,233 (3.33/day)
    Thanks Received:
    3,666
    Location:
    Wyoming
    Do you mean the spacing between the words, or the spacing between the lines Freak?
     
    Crunching for Team TPU More than 25k PPD
  13. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    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.
     
    Crunching for Team TPU
  14. stinger608

    stinger608 Dedicated TPU Cruncher & Folder

    Joined:
    Nov 11, 2008
    Messages:
    7,233 (3.33/day)
    Thanks Received:
    3,666
    Location:
    Wyoming
    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. :)
     
    Crunching for Team TPU More than 25k PPD
  15. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    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
     
    Crunching for Team TPU
  16. xbonez New Member

    Joined:
    Nov 29, 2010
    Messages:
    1,182 (0.83/day)
    Thanks Received:
    315
    Location:
    Philly, PA (US)
    Here you go. This is how it looks now using CSS

    [​IMG]


    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:

    [​IMG]
     
    Last edited: Oct 6, 2011
    stinger608, robn and freaksavior say thanks.
  17. freaksavior

    freaksavior To infinity ... and beyond!

    Joined:
    Dec 11, 2006
    Messages:
    8,071 (2.81/day)
    Thanks Received:
    908
    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 :/
     
    Crunching for Team TPU

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page