Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS for complete newbie :)

    Hey all...

    I used tables for everything before, because I am no html guy or CSS guy, but due to firefox displaying tables sillylike, I am trying to learn CSS slowly.

    I have an issue on this page... http://teamrabiddog.com/our-games/

    After the three buttons on the page, I want to start a new display just like the one above, right now it IS displaying the way I want it to, but I had to trick it to go to the next line or it would display the horizontal rule to the right of the third button... here is my code I used and the code I used to trick it...

    my CSS:

    .image1{ float:left; display:inline; margin-right:10px; }
    .image1a{ float:left; display:inline; margin-right:50px; }
    .textline{ clear:left; margin-bottom:2px; }

    the code for the page:

    <img class="image1" title="snagdvd" src="http://teamrabiddog.com/wp-content/uploads/2010/11/snagdvd.png" alt="" width="112" height="162" />
    <p><h2>Snag 'n Reel: A Fishing Game and an Aventure!</h2>
    Choose from over 15 lures and catch over 10 types of fish in this fishing adventure. Gain experience, complete tasks, go to tournaments and more... An addictive and fun fishing game like you have never played before.</p><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1b" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/>
    <h2 class="textline"><hr></h2><img class="image1" title="snagdvd" src="http://teamrabiddog.com/wp-content/uploads/2010/11/snagdvd.png" alt="" width="112" height="162" />
    <p><h2>Snag 'n Reel: A Fishing Game and an Aventure!</h2>
    Choose from over 15 lures and catch over 10 types of fish in this fishing adventure. Gain experience, complete tasks, go to tournaments and more... An addictive and fun fishing game like you have never played before.</p><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/>

    If you see above, I had to create the class "textline" and use it in order to drop down to the next line to start another spot for a different game.

    How can I get it to go down to the bottom and create a horizontal rule instead of creating it to the right of the last "download" button...?

    Thanks in advance!

  • #2
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    .textline {display: block;}

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MattF View Post
    .textline {display: block;}
    and then use the textline class for the wording "Snag 'n Reel: etc etc etc"?

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I tried using textline like you said, and added that class to the second "Snag 'n Reel: ...." and updated it... but it dropped to a new line and was indented.

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, I went with textline as MattF said, then I just put <p class="textline"><hr></p>

    Is that the right way to do it?

    It looks good...

  • #6
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Paragraphs should be within <p></p>, so if it's a textual paragraph...

    Drop the hr and do it in CSS with a top/bottom border or suchlike:

    http://w3schools.com/css/default.asp

    You want to get rid of the visual formatting tags and do it via CSS where it belongs. For structure use tags, for visual effects, (prettification), uses CSS.

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by MattF View Post
    Paragraphs should be within <p></p>, so if it's a textual paragraph...

    Drop the hr and do it in CSS with a top/bottom border or suchlike:

    http://w3schools.com/css/default.asp

    You want to get rid of the visual formatting tags and do it via CSS where it belongs. For structure use tags, for visual effects, (prettification), uses CSS.
    what would I be placing a border on? theres nothing there to put a border on to run across the entire bottom of the section?

    Thanks!

  • #8
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Any element, namely the one, (or more), where you want the line to display. Using the textline class as an example again:

    Code:
    .textline {
        width: 100%;
        display: block;
        border-top: 1px solid #000000;
    }
    It doesn't have to be that element, however. You can use any existing element, add a div just for the purpose etc. It really doesn't matter what. Try and use an existing element instead of throwing gratuitous stuff in there though.

  • #9
    New Coder
    Join Date
    Jun 2010
    Location
    usa
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by elan123 View Post
    Hey all...

    I used tables for everything before, because I am no html guy or CSS guy, but due to firefox displaying tables sillylike, I am trying to learn CSS slowly.

    I have an issue on this page... http://teamrabiddog.com/our-games/

    After the three buttons on the page, I want to start a new display just like the one above, right now it IS displaying the way I want it to, but I had to trick it to go to the next line or it would display the horizontal rule to the right of the third button... here is my code I used and the code I used to trick it...

    my CSS:

    .image1{ float:left; display:inline; margin-right:10px; }
    .image1a{ float:left; display:inline; margin-right:50px; }
    .textline{ clear:left; margin-bottom:2px; }

    the code for the page:

    <img class="image1" title="snagdvd" src="http://teamrabiddog.com/wp-content/uploads/2010/11/snagdvd.png" alt="" width="112" height="162" />
    <p><h2>Snag 'n Reel: A Fishing Game and an Aventure!</h2>
    Choose from over 15 lures and catch over 10 types of fish in this fishing adventure. Gain experience, complete tasks, go to tournaments and more... An addictive and fun fishing game like you have never played before.</p><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1b" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/>
    <h2 class="textline"><hr></h2><img class="image1" title="snagdvd" src="http://teamrabiddog.com/wp-content/uploads/2010/11/snagdvd.png" alt="" width="112" height="162" />
    <p><h2>Snag 'n Reel: A Fishing Game and an Aventure!</h2>
    Choose from over 15 lures and catch over 10 types of fish in this fishing adventure. Gain experience, complete tasks, go to tournaments and more... An addictive and fun fishing game like you have never played before.</p><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/><img class="image1a" src="http://teamrabiddog.com/wp-content/uploads/2010/11/download.png" width="160" height="40"/>

    If you see above, I had to create the class "textline" and use it in order to drop down to the next line to start another spot for a different game.

    How can I get it to go down to the bottom and create a horizontal rule instead of creating it to the right of the last "download" button...?

    Thanks in advance!
    Hi,
    Have you ever tried with divs instead of using table because divs play important role in SEO purpose so even if don't have idea of using div try using or learn how to use Div This is my kind request

  • #10
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe I am just too new to understand what you guys mean.

    How would YOU write that code above, instead of the way I did it... I understand learn better by examples...?

    Thanks again!

  • #11
    New Coder
    Join Date
    Nov 2004
    Posts
    55
    Thanks
    8
    Thanked 2 Times in 1 Post
    Code:
    In your style sheet:
    #someID{
         width: 735px;
         margin: auto;
    }
    #someID img{
         width: 195px;
         height: 65px;
         border: none;
         padding-left: 25px;
         padding-right: 25px;
    }
    
    
    <div id="someID">
         <img src="http://teamrabiddog.com/wp-content/uploads/2010/11/silverdownload.png" alt="Download" />
         <img src="http://teamrabiddog.com/wp-content/uploads/2010/11/silverscreenshots.png" alt="Screenshots" />
         <img src="http://teamrabiddog.com/wp-content/uploads/2010/11/silvermoreinfo.png" alt="More Info" />
    </div>
    Try this

    Edit: I completely misread your question lol. I looked at the page and automatically thought you were talking about the button that was lower than the rest. Anyways this is a good example of using css anyways so I'll leave it
    Last edited by dustywb; 11-12-2010 at 07:51 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •