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

Titanium Man · November 23, 2013, 03:17:16 AM

a fansite for a fansite
beautiful

Ad Bot · Advertisement

Spoonz · November 23, 2013, 11:51:40 AM

"how to resize boner"
brain pls!!!

Electro · November 25, 2013, 03:05:08 PM

Sorry for bump, but here's what I want my layout to be like.

I'm really determined to make this, but I don't want the entire thing sdone for me, I just don't know how to move everything like a Cartesian plane, if they have that.

Steve5452 · November 25, 2013, 03:25:50 PM

give the news a "width: 20%;" and a "float: right;" or so, and the featured video a "width: 60%;" and a "float: left;".
top links can have "margin-left: 10px; margin-right: 10px;" and have them centered.

Electro · November 25, 2013, 03:45:32 PM

http://toonsrevolution.x10.mx/Index.html

Here's what I have, so far. Also, could you give the "width" thing an example?

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;}
    p.solid{
    border-style:solid;
    border-color:#0000FF;
   }
  
  font
  {
  margin-left:5em;
  )
  
  div.news
  {
  width:20%;
  float:right;
  }
  </style>
</head>

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

<center><p><font color="#CC3300" id="intro">Forum</font></p></center>

</body>
</html>

Steve5452 · November 25, 2013, 03:55:43 PM

Give the left and right things a class attribute and add the width in the stylesheet.

So like:

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;}
    p.solid{
    border-style:solid;
    border-color:#0000FF;
   }
  
  font
  {
  margin-left:5em;
  )
  
  div.news
  {
  width:20%;
  float:right;
  }

  .left {
   width: 60%;
float: left;
}

.right {
width: 20%;
float: right;
}
  </style>
</head>

<body>
<p class="solid"><img src="http://toontownrevolution.com/img/header.png" width="400" height="200" id="header-image"/>
<center><p><font color="#CC3300" id="intro">Forum</font></p></center>

<div class="left"></div>
<div class="right"></div>

</body>
</html>

Electro · November 25, 2013, 04:00:48 PM

I don't understand, it's not working.

Steve5452 · November 25, 2013, 04:02:00 PM

Well you have to give it some color and stuff.

Electro · November 25, 2013, 04:05:32 PM

So would it use the <font> tags?

<div class="left"><font color="#FAFAD2">News goes here.</font></div>

if so, that still doesn't work.

Steve5452 · November 25, 2013, 04:11:42 PM

You should use style where possible, and I gave it some color.
<style>
left: {
color: #fafad2;
background-color: #eee;
border: 1px solid #888;
}
</style>

<div class="left">News goes here.</div>

Electro · November 25, 2013, 04:15:46 PM

wait, are you supossed to replace eee and stuff with your color? if so, not working.

Steve5452 · November 25, 2013, 04:40:17 PM

Post what you have so far.

Electro · November 25, 2013, 04:48:06 PM

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;}
    p.solid{
    border-style:solid;
    border-color:#0000FF;
   }
  
  font
  {
  margin-left:5em;
  )
  
  div.news
  {
  width:20%;
  float:right;
  }

  .left {
   width: 60%;
float: left;
}

.right {
width: 20%;
float: right;
}

left: {
color: #fafad2;
background-color: #fafad2;
border: 1px solid #F0E68C;
}




</style>
</head>

<body>
<p class="solid"><img src="http://toontownrevolution.com/img/header.png" width="400" height="200" id="header-image"/>
<center><p><font color="#CC3300" id="intro">Forum</font></p></center>

<div class="left"><font color="#FAFAD2">News goes here.</font></div>
<div class="right"></div>

</body>
</html>

Just message me on steam.

Steve5452 · November 25, 2013, 05:11:30 PM

I messed up earlier when I was typing and put left: { asdasd } instead of left { asdsad }

here, study this and learn.

Code: [Select]

<!DOCTYPE html>
<html>
<head>
	<title>Toons Revolution</title>
	<style type="text/css">
	body {background-color: lightskyblue;	}
	#intro { color: #CC3300; text-align: center; margin-left: 10px; margin-right: 10px; }
	#header-image { display: block; margin: 0px auto; }
	p.solid{
		border-style:solid;
		border-color:#0000FF;
	}

	.right {
		width: 30%;
		float: right;
		color: #CC3300;
		background-color: #fafad2;
		border: 1px solid #F0E68C;
		padding: 5px;
	}

	.left {
		float: left;
		color: #CC3300;
		width: 60%;
		background-color: #fafad2;
		border: 1px solid #F0E68C;
		padding: 5px;
	}

	</style>
</head>
<body>
	<p class="solid">
		<img src="http://toontownrevolution.com/img/header.png" width="400" height="200" id="header-image" />
		<center>
			<a id="intro">Forum</a>
			<a id="intro">News</a>
			<a id="intro">About</a>
		</center>
	</p>
	<div class="left">(featured video of the day)</div>
	<div class="right">News</div>
</body>
</html>

Electro · November 25, 2013, 05:25:39 PM

What about making the boarder around the header smaller?