Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Oct 20, 2012, 07:05 PM   #1
waloshin
macrumors 68030
 
waloshin's Avatar
 
Join Date: Oct 2008
Location: in my world.
Help me with CSS.

What is the difference between doing this:

.bg {

and

#bg {

When using <div class="bg"> .... </div>
__________________
Phantom Vision 2 Plus drone review
Nikon Film Cinematography site
2011 Mac Mini 2.3 Ghz 16 Gb Ram SSD
waloshin is offline   0 Reply With Quote
Old Oct 20, 2012, 07:08 PM   #2
jared_kipe
macrumors 68030
 
jared_kipe's Avatar
 
Join Date: Dec 2003
Location: Seattle
Send a message via AIM to jared_kipe
Quote:
Originally Posted by waloshin View Post
What is the difference between doing this:

.bg {

and

#bg {

When using <div class="bg"> .... </div>
The .bg applies to that div, and #bg does not.

. means class, and # means id.

.bg == <anything class="bg" />
#bg == <anything id="bg" />
jared_kipe is offline   0 Reply With Quote
Old Oct 20, 2012, 07:18 PM   #3
waloshin
Thread Starter
macrumors 68030
 
waloshin's Avatar
 
Join Date: Oct 2008
Location: in my world.
Quote:
Originally Posted by jared_kipe View Post
The .bg applies to that div, and #bg does not.

. means class, and # means id.

.bg == <anything class="bg" />
#bg == <anything id="bg" />
Ok thanks and what really is the difference between class and id?

And why doesn't this work:

Html:

<tr>
<table class="table1">
<th>Model</th>
<th>Specs</th>
<th>Description</th>
<th>Power</th>
<th>Operating System</th>
<th>Price</th>
</tr>
</table>

CSS:

.table1 {
border-width: 5px thin medium thick;
font: bold 12pt;
background-color:blue;
}
__________________
Phantom Vision 2 Plus drone review
Nikon Film Cinematography site
2011 Mac Mini 2.3 Ghz 16 Gb Ram SSD

Last edited by waloshin; Oct 20, 2012 at 07:24 PM.
waloshin is offline   0 Reply With Quote
Old Oct 20, 2012, 07:25 PM   #4
Dolorian
macrumors 65816
 
Dolorian's Avatar
 
Join Date: Apr 2007
Quote:
Originally Posted by waloshin View Post
Ok thanks and what really is the difference between class and id?
Within an HTML document, you can apply a class to multiple elements whereas an id can only be applied once.

When it comes to CSS, you can use a single rule to manipulate multiple objects that share the same class.

For example, if you want all images with the class "half" to be 50% the width of it's container, you just write:

.half { width: 50%; }

This single rule would affect every image with the class "half", and this class can be used any number of times you want in a single page.

An ID on the other hand is for more specific things, a single element on a page that is unique (say a container or section). It is also better reserved for jQuery/javascript plug ins. It is not for elements that repeat on a page.
__________________
MacBook Pro 13" i5 2.5GHz
Google Nexus 7 32GB
Samsung Galaxy S3
Dolorian is offline   0 Reply With Quote
Old Oct 20, 2012, 07:26 PM   #5
jared_kipe
macrumors 68030
 
jared_kipe's Avatar
 
Join Date: Dec 2003
Location: Seattle
Send a message via AIM to jared_kipe
Quote:
Originally Posted by waloshin View Post
Ok thanks and what really is the difference between class and id?
There are differences in the way they 'cascade'. Namely ID's take priority.

e.g.
Code:
<style>
    #main {width: 800px;}
    .content {width: 500px;}
</style>
<div id="main" class="content"></div>
Which of these take priority? All things equal, the last rule would count, i.e. width=500. However the width would actually come from #main and would be 800px wide.

Traditionally you can only have 1 of any given id on a page. e.g. you cannot have two different elements with #main in this document. ID's are also used for on page linking or anchoring. <a href="#main"> when clicked would cause the browser to jump or scroll to the location of that element (if it is viewable). <a href="someotherpage.html#main"> would cause the browser to goto/load that page then go to the named id (if it is viewable).

Generally when I'm working I ask myself, would there be ANY circumstances where the rules I'm writing would need to be displayed on multiple elements on the page at once (i.e. would I ever need these styles or blocks on the page more than one time?) I would use a .class. If I could say with certainty that this is a one off or structural block I would use an #ID.

Another difference comes from javascript, where one could argue that an id is easier to get a hold of thanks to the function document.getElementById('main').
jared_kipe is offline   0 Reply With Quote
Old Oct 20, 2012, 11:39 PM   #6
angelneo
macrumors 68000
 
Join Date: Jun 2004
Location: afk
Quote:
Originally Posted by waloshin View Post
And why doesn't this work:

Html:

<tr>
<table class="table1">
<th>Model</th>
<th>Specs</th>
<th>Description</th>
<th>Power</th>
<th>Operating System</th>
<th>Price</th>
</tr>
</table>

CSS:

.table1 {
border-width: 5px thin medium thick;
font: bold 12pt;
background-color:blue;
}
A couple of issues, your html is malformed. The tags are in the wrong sequence.

Also, for border declaration, it's usually
Code:
.table1 { 
border:1px solid #000; 
}
or
Code:
.table1 {
border-width:1px;
border-style:solid;
border-color:#000;
}
__________________
This is good, isn't it?
angelneo is offline   0 Reply With Quote
Old Oct 21, 2012, 02:59 AM   #7
waloshin
Thread Starter
macrumors 68030
 
waloshin's Avatar
 
Join Date: Oct 2008
Location: in my world.
I am going crazy with these tables!

What is wrong with this HTML?


Code:
	<tr> <table class="table_title"> 
		<th>Specs</th>
		<th>Description</th>
		<th>Power</th>
		<th>Operating System</th>
		<th>Price</th>
	 </table> </tr> 
	
	<table class="row">
		<td>Next Gen 1.0 (2012)</td>
		<td>(1)Intel i8 processor 12 core @3.5 GHz, 16 GBs of Ram, 2 TBs of Hard drive</td>
		<td>This is our Next Gen 1.0 Model, you can order the case in black or white</td>
		<td>More powerful then your grandmas computer.</td>
		<td>Waloshin Distro based on Linux 64 bit</td>
		<td>$6000 including tax</td>
	 <tr>
This is what it looks like:



This is what it needs to look like:



The question is where did the lines goes on my table; and why is the title of the table not aligned with the table?

I got the th to become bold,but can't figure out the rest.
__________________
Phantom Vision 2 Plus drone review
Nikon Film Cinematography site
2011 Mac Mini 2.3 Ghz 16 Gb Ram SSD
waloshin is offline   0 Reply With Quote
Old Oct 21, 2012, 09:23 AM   #8
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
You need to revise the HTML for tables, what you've posted is invalid. Tables start and end with the <table> tag, then you list each row with the <tr> tags and inside those rows you list the columns with <td> tags (or <th> for the heading row).

In your example you've got columns, inside a table, inside a row then columns inside a table with no closing <table> tag. Also your headers don't line up because you're not using the same number of columns in each row.

Here's some commented code for you to look over to achieve the desired outcome:
Code:
<html>
<head>
<style type="text/css">
table {background-color: #FFFFCC;}
.row>td {border-bottom: 1px solid #333;}
.table_title{color: #FFF;background-color: #666;}
.price {color: red;}
</style>
</head>
<body>
<!-- table starts here -->
<table cellpadding="5" cellspacing="0"> 
	<tr class="table_title"> <!-- begin the heading row -->
		<th>Model</th> <!-- Our 6 column headers are listed here-->
		<th>Specs</th>
		<th>Description</th>
		<th>Power</th>
		<th>Operating System</th>
		<th>Price</th>
	 </tr> <!-- end of heading row -->
	<tr class="row"> <!-- begin the data rows -->
		<!-- Our 6 data columns are listed below -->
		<td><strong>Next Gen 1.0 (2012)</strong></td>
		<td>(1)Intel i8 processor 12 core @3.5 GHz, 16 GBs of Ram, 2 TBs of Hard drive</td>
		<td>This is our Next Gen 1.0 Model, you can order the case in black or white</td>
		<td>More powerful then your grandmas computer.</td>
		<td>Waloshin Distro based on Linux 64 bit</td>
		<td><span class="price">$6000</span> including tax</td>
	 </tr><!-- end the first data row here -->
	 <!-- to add another data row we need to add <tr> tags and the 6 columns -->
	 <tr class="row">
	 	<td>1</td>
	 	<td>2</td>
	 	<td>3</td>
	 	<td>4</td>
	 	<td>5</td>
	 	<td>6</td>
	 </tr>
</table> <!-- table ends here -->
</body>
The comments, everything between and including the <!-- -->, can be removed. Perhaps try extending the table with more data rows and changing the styles until you're happy with how HTML tables work.
Ap0ks is offline   0 Reply With Quote
Old Oct 21, 2012, 03:27 PM   #9
waloshin
Thread Starter
macrumors 68030
 
waloshin's Avatar
 
Join Date: Oct 2008
Location: in my world.


Why the spacing in the header of the table?

Figured it out: <table cellspacing="0">
__________________
Phantom Vision 2 Plus drone review
Nikon Film Cinematography site
2011 Mac Mini 2.3 Ghz 16 Gb Ram SSD

Last edited by waloshin; Oct 21, 2012 at 03:44 PM.
waloshin is offline   0 Reply With Quote
Old Jan 1, 2013, 08:30 AM   #10
arrowmarketing
macrumors newbie
 
Join Date: Jan 2013
.bg

and

#bg


. mean start the class in CSS coding and # mean start the id in CSS coding.
arrowmarketing is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Something awry in the homepage CSS Darth.Titan Site and Forum Feedback 3 May 19, 2014 08:48 AM
No CSS on some websites. clinthorner MacBook 0 Nov 6, 2013 10:05 PM
Best way get current with HTML/CSS macmesser Web Design and Development 17 Nov 2, 2013 07:54 PM
CSS: rotate a hr and positioning mumph Web Design and Development 4 Jun 1, 2013 02:55 AM
Need Help Centering UL CSS menu screensaver400 Web Design and Development 2 Dec 27, 2012 07:28 PM

Forum Jump

All times are GMT -5. The time now is 01:37 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC