Haven't done HTML/CSS in a while..

Page 1 of 1

7 Replies - 520 Views - Last Post: 17 May 2012 - 06:18 AM

#1 ILoveJava  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 369
  • Joined: 12-March 12

Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 05:25 AM

Hey guys, it's been about 4 years since I have done anything to do with HTML/CSS. And I've decided to make a little website, because me and a friend are thinking of opening up a LAN center. I've got my base design done (It looks like shit, but so what, it's only a draft). But I'm having problems with my layout, and how the .htm files get spat out by Fireworks CS5.
My first problem, is that the actual layout won't center on DreamWeaver live view, or on Opera. I've tried changing it to
<body align="center" />

But that will only align my text to center.
And the second, I haven't done this in a LONG time, and have lost my ways with changing all the <img src="... in the .htm file to a .css file with a bunch of divs to be loaded into the file.
IF anyone is able to give me any sort of help, it would be appreciated. My files are below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Original</title>
	<link rel="stylesheet" type="text/css" href="./index.css" media="all" />
	<!--[if IE]>
	<style type="text/css" media="all">.borderitem {border-style: solid;}</style>
	<![endif]-->
</head>

<body align="center" />

<div id="main">
	<div id="Div">
		<img src="images/home.gif" id="index_r2_c3" alt="" />
				<div id="Line">
		</div>
		<img src="images/about.gif" id="index_r2_c5" alt="" />
				<div id="Line2">
		</div>
		<img src="images/events.gif" id="index_r2_c7" alt="" />
				<div id="Line3">
		</div>
		<img src="images/staff.gif" id="index_r2_c9" alt="" />
				<div id="Line4">
		</div>
		<img src="images/rates.gif" id="index_r2_c11" alt="" />
				<div id="Line5">
		</div>
		<img src="images/contact.gif" id="index_r2_c13" alt="" />
				<div class="clearFloat"></div>
	</div>
	<div class="clearFloat"></div>
	<div id="Div2">
		<div class="Txt_Notice">
			
				<p class="lastNode">Notice: 
			</p>
		</div>
		<img src="images/index_r4_c3.gif" id="index_r4_c3" alt="" />
				<div class="clearFloat"></div>
	</div>
	<div class="clearFloat"></div>
	<img src="images/index_r6_c1.gif" id="index_r6_c1" alt="" />
		<div id="colwrap1">
		<img src="images/index_r6_c2.gif" id="index_r6_c2" alt="" />
        <div background-color: #99999>
				Mr Bond.
        </div>
			</div>
	<img src="images/index_r6_c15.gif" id="index_r6_c15" alt="" />
		<div class="clearFloat"></div>
	<img src="images/index_r8_c1.gif" id="index_r8_c1" alt="" />
		<div class="clearFloat"></div>
        <div align="center" />Designed by Nathan Kreider</div>
</div>
</body>
</html>


@charset "utf-8";

body {
	background-color: #fff;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
	body-align: center;
}
body * {
	font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
p {
	margin-bottom: 1.1em;
	margin-top: 0;
}
#main p.lastNode {
	margin-bottom: 0;
}
a:link img, a:visited img {
	border: none;
}
div.clearFloat {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0px;
}
li.clearFloat {
	clear: both;
}
ul.symbolList {
	display: inline;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.AbsWrap {
	position: relative;
	width: 100%;
}
.rowWrap {
	width: 100%;
}
#main {
	margin: 0 auto 0 0;
	width: 700px;
}
#Div {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #999;
	border: 1px solid #000;
	width: 698px;
	padding-top: 0px;
	height: 62px;
}
html > body #Div {
	height: auto;
	min-height: 61px;
}
#index_r2_c3 {
	margin-left: 56px;
	margin-top: 15px;
	display: inline;
	float: left;
	height: 30px;
	margin-bottom: 0;
	width: 67px;
}
#Line {
	margin-left: 5px;
	margin-top: 16px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #fff;
	border-left: 1px solid #000;
	height: 28px;
	width: 1px;
}
html > body #Line {
	height: auto;
	min-height: 28px;
}
#index_r2_c5 {
	margin-left: 3px;
	margin-top: 15px;
	display: inline;
	float: left;
	height: 30px;
	margin-bottom: 0;
	width: 89px;
}
#Line2 {
	margin-left: 4px;
	margin-top: 17px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #fff;
	border-left: 1px solid #000;
	height: 28px;
	width: 1px;
}
html > body #Line2 {
	height: auto;
	min-height: 28px;
}
#index_r2_c7 {
	margin-left: 5px;
	margin-top: 15px;
	display: inline;
	float: left;
	height: 30px;
	margin-bottom: 0;
	width: 89px;
}
#Line3 {
	margin-left: 6px;
	margin-top: 17px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #fff;
	border-left: 1px solid #000;
	height: 28px;
	width: 1px;
}
html > body #Line3 {
	height: auto;
	min-height: 28px;
}
#index_r2_c9 {
	margin-left: 11px;
	margin-top: 15px;
	display: inline;
	float: left;
	height: 30px;
	margin-bottom: 0;
	width: 73px;
}
#Line4 {
	margin-left: 15px;
	margin-top: 16px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #fff;
	border-left: 1px solid #000;
	height: 28px;
	width: 1px;
}
html > body #Line4 {
	height: auto;
	min-height: 28px;
}
#index_r2_c11 {
	margin-left: 6px;
	margin-top: 15px;
	display: inline;
	float: left;
	height: 30px;
	margin-bottom: 0;
	width: 89px;
}
#Line5 {
	margin-left: 4px;
	margin-top: 15px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #fff;
	border-left: 1px solid #000;
	height: 28px;
	width: 1px;
}
html > body #Line5 {
	height: auto;
	min-height: 28px;
}
#index_r2_c13 {
	margin-left: 10px;
	margin-top: 15px;
	display: inline;
	float: left;
	height: 30px;
	margin-bottom: 0;
	width: 90px;
}
#Div2 {
	margin-left: 0px;
	margin-top: 10px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #999;
	border: 1px solid #000;
	width: 698px;
	padding-top: 0px;
	height: 27px;
}
html > body #Div2 {
	height: auto;
	min-height: 26px;
}
.Txt_Notice {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 120%;
	text-align: center;
	color: #000;
	line-height: 120%;
	padding-bottom: 2px;
	padding-top: 1px;
	margin-left: 6px;
	margin-top: 4px;
	display: inline;
	float: left;
	margin-bottom: 0;
}
#index_r4_c3 {
	margin-left: 0px;
	margin-top: 4px;
	display: inline;
	float: left;
	height: 19px;
	margin-bottom: 0;
	width: 571px;
}
#index_r6_c1 {
	margin-left: 0px;
	margin-top: 12px;
	display: inline;
	float: left;
	height: 314px;
	margin-bottom: 0;
	width: 14px;
}
#colwrap1 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 672px;
}
#index_r6_c2 {
	margin-left: 0px;
	margin-top: 12px;
	display: inline;
	float: left;
	height: 11px;
	margin-bottom: 0;
	width: 672px;
}
#index_r7_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 303px;
	margin-bottom: 0;
	width: 672px;
}
#index_r6_c15 {
	margin-left: 0px;
	margin-top: 12px;
	display: inline;
	float: left;
	height: 314px;
	margin-bottom: 0;
	width: 14px;
}
#index_r8_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 13px;
	margin-bottom: 0;
	width: 700px;
}

And, the picture. (not allowed to upload as it's a .png, for some reason).
http://desmond.image...png&res=landing

Is This A Good Question/Topic? 0
  • +

Replies To: Haven't done HTML/CSS in a while..

#2 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 217
  • Joined: 03-March 11

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 05:41 AM

If you ever want to get good again, I suggest you get rid of Dreamweaver. Although it's a great tool for designers, it's no good when you're learning, as it causes you to cut corners and start clicking buttons when you don't know how to do something. I absolutely despise Dreamweaver, but it's a matter of preference I guess, I'm a purist when it comes to code of all forms. Notepad is your best friend :D

Also in the 'body' css, change the 'body-align' to 'text-align', this will not only align text to the center but also align all of the contents within it also. This is sufficient for IE, for other browsers you can use the CSS properties 'margin-left' and 'margin-right'.

If you wish to center them using this method you should do as follows


#exampleDivID {

     margin-right: auto;
     margin-left: auto;
     width: 'whatever size in pixels but not percentage.';

}


To define a div's ID then you simply do as follows:


<div id="exampleDivID" >Content in here.</div>


Or alternatively we could use classes, which produce the same effect as ID's.


.exampleDivID {

     margin-right: auto;
     margin-left: auto;
     width: 'whatever size in pixels but not percentage.';

}


To define a div's Class then you simply do as follows:


<div class="exampleDivID" >Content in here.</div>


Then wherever you wish to apply these attributes then you simply add the ID or Class attribute to the tag, and providing the CSS is including it will format it accordingly.

Hope this helps.
Was This Post Helpful? 0
  • +
  • -

#3 ILoveJava  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 369
  • Joined: 12-March 12

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 05:58 AM

Only reason I used DreamWeaver is because, I haven't done this in a long time, and after I sliced my layout, I had no idea on how to do anything. Haha.
But are you able to give me a few hints on how I can change the <img src=".. throughout the .htm file to a .css file, so the file looks a lot neater?
Was This Post Helpful? 0
  • +
  • -

#4 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 217
  • Joined: 03-March 11

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 06:02 AM

Oh no, I was replying regarding the problem aligning your page content. It's not actually possible to set the image displayed in an img tag via the CSS. Alternatively you could use the 'background: url('image location');' coupled with a div tag or some form of container tag to display an image dependent on a Class or ID, you would need to specify the exact size of the picture in the div's width and height CSS attributes for this to work though.
Was This Post Helpful? 1
  • +
  • -

#5 ILoveJava  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 369
  • Joined: 12-March 12

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 06:11 AM

Hm, would it be possible to re-slice it, and slice the entire content field, then slice a smaller box inside, then use the outside box as the background?
Was This Post Helpful? 0
  • +
  • -

#6 mccabec123  Icon User is offline

  • D.I.C Head

Reputation: 18
  • View blog
  • Posts: 217
  • Joined: 03-March 11

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 06:14 AM

I don't quite understand what you mean sorry. Could you rephrase that.
Was This Post Helpful? 0
  • +
  • -

#7 floppyspace  Icon User is offline

  • D.I.C Head

Reputation: 25
  • View blog
  • Posts: 187
  • Joined: 04-February 10

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 06:16 AM

View Postmccabec123, on 17 May 2012 - 09:02 PM, said:

Oh no, I was replying regarding the problem aligning your page content. It's not actually possible to set the image displayed in an img tag via the CSS. Alternatively you could use the 'background: url('image location');' coupled with a div tag or some form of container tag to display an image dependent on a Class or ID, you would need to specify the exact size of the picture in the div's width and height CSS attributes for this to work though.


mccabec123 is right it is not logical doing it this way.

If you are out of your depth with web development and not look at getting back in there ,using a blogging platform (wordpress cough*) or similar will do what your after and more, there is many themes that are set up as your example picture, you could also look at a buddypress to add more user interaction.

Dreamweaver is a great tool but...

Good luck.

I know this does not answer your specific problem but it is a solution, and will only take you a day or 2 to get it up and running.
Was This Post Helpful? 0
  • +
  • -

#8 ILoveJava  Icon User is offline

  • D.I.C Regular

Reputation: 28
  • View blog
  • Posts: 369
  • Joined: 12-March 12

Re: Haven't done HTML/CSS in a while..

Posted 17 May 2012 - 06:18 AM

Well. Where the main content box is, would I be able to slice that as one whole piece.
Then within that slice, I could slice another box, where I would put all of my content.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1