Web Design

Lucifer · July 22, 2011, 08:03:10 PM

Quote from: Scotty on July 22, 2011, 04:23:11 PM
Saw this on lifehacker today, thought it was relevant and potentially useful for you:

http://www.dontfeartheinternet.com/the-basics/dont-fear-the-browser

I'm not interested in web design in the least, but that was pretty damn funny.

sayers6 · August 24, 2011, 11:12:55 AM

How do I center an image with CSS? My teacher won't tell me, cause I'm 10 steps ahead of everyone else.

igufed · August 24, 2011, 11:42:50 AM

Quote from: sayers6 on August 24, 2011, 11:12:55 AM
How do I center an image with CSS? My teacher won't tell me, cause I'm 10 steps ahead of everyone else.

Is the image in anything? Table or a div? Not sure how far along your class is or how your site layout is, but, you could put 'text-align:center;' in your css for the parent object that the image is in.

My simple example below is one way. Your site may differ depending on the layout and width of things..

Code Select


<HTML>
	<HEAD>
		<TITLE></TITLE>
	</HEAD>
	<BODY>
		<div style="width:100%;text-align:center;">
			<img src="m1.png">
		</div>
	</BODY>
</HTML>

See it live here: http://igufed.com/test/

Edit:
Not sure if you wanted an image centered vertically and horizontally..
But, this example works with fixed width/height:

Code Select


<HTML>
	<HEAD>
		<TITLE></TITLE>
	</HEAD>
	<BODY>
		<div style="background:rgb(200,200,200);width:500px;height:400px;display:table-cell;vertical-align:middle;text-align:center;">
			<img src="m1.png">
		</div>
	</BODY>
</HTML>

Live: http://igufed.com/test2/

Scotty · August 24, 2011, 05:44:09 PM

text-align is great for centering the contents of a container. In igu's examples, he's centering the contents of everything within the div container. You may have other objects within that container that you don't want centered, in which case you want to only center JUST the <img> tag. If you just want to center the <img> tag alone, you'll need to specify the margin properties in the CSS.

Code Select


<html>

  <head>
    <!-- Header stuff like title and links go here -->
  </head>

  <body>
    <div>
      <img style="display:block; margin-left:auto; margin-right:auto;" src="image.png" alt="centered-image" />
      <img style="display:block; margin-left:0; margin-right:0;" src="image.png" alt="non-centered-image" />
    </div>
  </body>

</html>

By not specifying text-align in the div container and setting the margin to auto for individual objects, the contents of the <div> container will not collectively get centered. That way, if you have more than just an image in a container, or have nested containers, you won't have all contents of the container centered or have to go through multiple contained objects and reset the text-align property if you don't want them all centered. Just another approach is all depending on your requirements.

Not sure if I made that clear, so to summarize, simply put:

If you want everything between <div> and </div> centered, use the text-align: center method that Igu posted, if you want individual objects like just the <img> tag centered, do what I did with setting it to its own block, and equalizing the margins with margin: auto.

!!!WARNING!!!: using the above code that I provided by itself will not work in IE6 (not speaking with regards to the src of the image). IE6 doesn't recognize the margin:auto method for centering UNLESS if you specify a DOCTYPE. If you aren't sure what they are, read here: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Don't sweat it if you don't understand it, they're uselessly overly-verbose, which is why HTML5 is simply going to the doctype of <!DOCTYPE html>. Give one of the doctypes provided in that link to the VERY TOP of the HTML file, directly above the line that reads <html> and you're good.

EDIT: Also, good to hear you're so ambitious about the class! If you have any coding questions, I've found http://stackoverflow.com/ invaluable. Make sure you search for your answer first before submitting a question.

sayers6 · August 25, 2011, 08:08:37 AM

Thanks guys, alot of the stuff on w3schools is so useful, but every now and then there is something I can't quite find on there. And I wanted to start using the CSS because she was having us use all the depreciated stuff like <center> and <font> and so on, and it bugged me. I can't stand stuff being incorrect xD

EDIT:@igufed, I wanted the img centered horizontally, vertically I can somewhat figure out, and I don't care about it yet. The only thing I could find on how to center it was <center>

Scotty · August 25, 2011, 08:44:28 AM

Quote from: sayers6 on August 25, 2011, 08:08:37 AM
Thanks guys, alot of the stuff on w3schools is so useful, but every now and then there is something I can't quite find on there. And I wanted to start using the CSS because she was having us use all the depreciated stuff like <center> and <font> and so on, and it bugged me. I can't stand stuff being incorrect xD

EDIT:@igufed, I wanted the img centered horizontally, vertically I can somewhat figure out, and I don't care about it yet. The only thing I could find on how to center it was <center>

Glad to see you're catching on with it! By having knowledge of <center> and <font> going away in HTML5, you're already ahead of the game from many web developers.

sayers6 · August 25, 2011, 11:52:54 AM

Next question, how do I color the text in table, with CSS?

Tuffi · August 25, 2011, 11:57:26 AM

If you want all of the table's text to be a certain color, you can just do:

Code Select


<table style="color: #whatever you want here">
    <!-- Table stuff -->
</table>

If you just want a certain row or cell's text colored, you can do:

Code Select


<table>
    <tr style="color: #for the row">
        <td style="color: #for the cell"><!-- Table stuff --></td>
    </tr>
</table>

Scotty · August 25, 2011, 07:03:07 PM

Quote from: Tuffi on August 25, 2011, 11:57:26 AM
Code Select Expand
<table> <tr style="color: #for the row"> <td style="color: #for the cell"></td> </tr> </table>

Also, if you aren't quite certain on what the different Hexadecimal color codes mean, or need a decent set of examples, Wikipedia has an excellent article on them:
http://en.wikipedia.org/wiki/Web_colors

igufed · August 25, 2011, 07:40:15 PM

For some reason, I've always used rgb(X,X,X) with integers.. Easier for me to understand/use.

Scotty · August 25, 2011, 08:15:35 PM

It's nothing more than preference. If I had to speculate, I'd guess hex color codes are still around from the "pre-css" era, and when the rgb() method was put into the spec, there was many gripes over the thought of deprecating hex color codes that they left them in. From what I understand, a majority of users still use hex color codes. I've been doing this for several years and never once used the rgb() feature, if only because I am comfortable with the hex color code format.

Forum · August 25, 2011, 10:34:50 PM

To much work into web design. But when i was interested i made one in 6th grade and was pretty popular because websites were the hip thing. Now its dead so i stopped :(

Not updated but if you want to see - http://videogate.webs.com/

sayers6 · August 26, 2011, 12:07:51 AM

From the second I learned it I've loved hexadecimal colors. I don't wanna switch to rgb. :p Not yet anyways :) and thanks Tuffi.
Question on buttons, is there an easy way to set them up, because my way of making an image and anchoring a link to it is a bit time-consuming, but with with i saw on w3schools about buttons didn't give the best explanation on how to use them. But so far my web page looks fairly nice I think, I even decided to make it a website :) just so I could get extra credit. The teachers being mean though, she knows I'm nice and like to help people, and I'm so far ahead, that she now sends the students to me for the second half of class, to slow me down.

Scotty · August 26, 2011, 12:16:37 AM

Quote from: sayers6 on August 26, 2011, 12:07:51 AM
From the second I learned it I've loved hexadecimal colors. I don't wanna switch to rgb. :p Not yet anyways :) and thanks Tuffi.
Question on buttons, is there an easy way to set them up, because my way of making an image and anchoring a link to it is a bit time-consuming, but with with i saw on w3schools about buttons didn't give the best explanation on how to use them. But so far my web page looks fairly nice I think, I even decided to make it a website :) just so I could get extra credit. The teachers being mean though, she knows I'm nice and like to help people, and I'm so far ahead, that she now sends the students to me for the second half of class, to slow me down.

What exactly are you attempting to do with the button? Can you put it into context? I'm not entirely sure why you need a button to encase an <img> objection in an <a> object. Can you post up a code sample for what you currently have and a bit more of an explanation for what you are trying to accomplish?

sayers6 · August 26, 2011, 12:30:08 AM

Currently I'm using a small image, which looks like a button, to link to another webpage, I would like to figure out how to use the button element(or whatever it's called) in html, rather than having to make an image to use for the link. Also I'd like to hide the table I'm using unless a button has been pressed.

EDIT:

Code Select

<a href="http://rockislandschools.org/risd/"><img src="Schoollink.gif" border="0"></a>
Is what I'm currently doing.

Stick Online Forums

News:

Web Design

Lucifer

sayers6

igufed

Scotty

sayers6

Scotty

sayers6

Tuffi

Scotty

igufed

Scotty

Forum

sayers6

Scotty

sayers6