...

View Full Version : CSS for complete newbie :)



elan123
11-10-2010, 10:59 PM
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!

MattF
11-10-2010, 11:02 PM
.textline {display: block;}

elan123
11-10-2010, 11:05 PM
.textline {display: block;}

and then use the textline class for the wording "Snag 'n Reel: etc etc etc"?

elan123
11-10-2010, 11:08 PM
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.

elan123
11-10-2010, 11:12 PM
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...

MattF
11-10-2010, 11:21 PM
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.

elan123
11-11-2010, 12:23 AM
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!

MattF
11-11-2010, 10:07 AM
Any element, namely the one, (or more), where you want the line to display. Using the textline class as an example again:



.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.

mahesh2010
11-11-2010, 12:21 PM
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:)

elan123
11-11-2010, 04:33 PM
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!

dustywb
11-12-2010, 06:47 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum