Author Topic: How to resize border in HTML/CSS and center images?  (Read 3293 times)

okay, so, i took that code and changed the image to:

Code: [Select]
<center><img src="http://toontownrevolution.com/img/header.png" width="400" height="200"/></center>
and then it was centered when i tried it

center does not work with html5.

center does not work with html5.

oh ok i dont really know html, sorry lol

i know probably as much as you do :v

center does not work with html5.

nevermind, how would i put a border around it? i only know how to make a border.

nevermind, how would i put a border around it? i only know how to make a border.

add the style attribute to the image like this
Code: [Select]
style="border: 1px solid #000;"
to the image.

soo
Code: [Select]
<img src="http://toontownrevolution.com/img/header.png" style="border: 1px solid #000;" width="400" height="200"/>

replacing the color code with whatever you want.

#000 is the color code, correct?

Quote
<!DOCTYPE HTML>
<html>
<head><title>Toons Revolution</title>
<style>
</style>
</head>

<body>
<body style="background-color:lightskyblue;">

<img align="center" src="http://toontownrevolution.com/img/header.png" width="400" height="200"/>

<p style="text-align:center;">A fansite for the website <a href="toontownrevolution.com">Toontown Revolution</a></p>

</body>
</html>

"<img align="center" src="http://toontownrevolution.com/img/header.png" width="400" height="200"/>

<p style="text-align:center;">A fansite for the website <a href="toontownrevolution.com">Toontown Revolution</a></p>"

I would like to make a border between these.



You said you wanted a border between the two. You're not being very specific.

You said you wanted a border between the two. You're not being very specific.

I mean a box, like a rectangle box.

yeah, i'm pretty new to it. also, the image just completely disappeared. i don't quite understand what a stylesheet is.
Think of it this way. the .html file, the thing you're writing all the markup in, is a file that contains all the content you will see on the page, from paragraphs to images to links and so on. A Cascading Style Sheet, or .css file, is the file that changes the aesthetics of the page. Aesthetics include anything from the color of the text, to the border around a picture. Basically, anything that's not content.
The reason for writing things in a .css file as opposed to writing in a <style> tag is that if you have multiple pages that use the same CSS rules, you only have to change one .css file instead of multiple .html files because all the .html files link to the one .css file.



the image is still centered to the left.
Code: [Select]
<!DOCTYPE HTML>
<html>
<head>
  <title>Toons Revolution</title>
  <style media="screen" type="text/css">
    body{background-color: lightskyblue;}
    #intro{text-align: center;}
    #header-image{display: block; margin: 0px auto;}
  </style>
</head>

<body>
  <img src="http://toontownrevolution.com/img/header.png" width="400" height="200" id="header-image"/>

  <p id="intro">A fansite for the website <a href="toontownrevolution.com">Toontown Revolution</a></p>

</body>
</html>

Instead of putting all your css inline, meaning in each individual html tag, put it in the style tag in <head>, that's what it's there for. What I did was I put all the css into one style tag, all nice and tidy, like I said, and demonstrated a key point in CSS: id's! (and classes, but that's for later.)
If you notice in the style tag, "intro" has a '#' before it. That means it's telling the css that that thing is an id. An id is an attribute you can add in any html tag that allows you to individualize something for the css. An example may be: you have 5 <p>'s, but you only want one of them to be colored red. If you tried to do
Code: [Select]
p{color:red;}
it would color ALL the <p>'s red. So what you need to do is seperate one <p> from the rest. This is done by using id's. So, make that one <p> look like <p id="red">. Now, in the css, you can do this
Code: [Select]
#red{color:red;}and that one paragraph will be red. yay.

also this would be so much better with <div> organisation, but like i said, you're a beginner, and that's for another time.

Er, I digress. so anyway, i recommend you watch some videos or something, cuz these are all questions that can be answered fairly easily after a day or so of studying html/css.
« Last Edit: November 22, 2013, 11:17:00 PM by ChickenMaster »


I still need some more knowledge of HTML before I can learn CSS. Also, do you know about the border/box around things?

off topic but i'm trying to make a forum on my site; here's what I got



Did you search google? If not where the forget is your common sense at?
remember who you're taking to

electro doesn't know how to google