Web Design Forums

Narate · 09-07-2004, 18:36

I am trying to learn to hand code which at the moment consists of lots of copying and pasting. I am trying to get my head around divs and since I have never coded anything in my life it is prooving a little trickey, I was wandering if anyone could help with the doc type as Ive been looking on wc3 schools but I am unsure what I am looking for.

I'm guessing that I dont want transitional because it lets the browser do as it pleases so I should be using XML 1.1 strickt (guessing) so it validates.

can anyone give me some info please, would be much appreciated.

edit***

and wtf is this..

HTML Code:

}


div#validate {
	margin: 10px 0;
	text-align: center;
	margin-top: 80%;
}

div#validate img {
margin: 0 5px;
border-width:0px;

}

Bill Posters · 09-07-2004, 19:05

I wouldn't bother going any 'stricter' than using the XHTML 1.0 Strict DTD.
Many browsers are really ready for XHTML 1.1 and the special considerations it requires to do it 'correctly'.
The benefits also aren't particularly abundant either at this time.

XTML 1.0 Strict will offer you (as close as you can currently get to) the best of both worlds, in that it offers you access to a pre-xml mindset without alienating those who have experience of html, whether through hand-coding or simply looking at the source code in their browser or wysiwyg editor.

-

Code:

div#validate {
margin: 10px 0;
text-align: center;
margin-top: 80%;
}

div#validate img {
margin: 0 5px;
border-width: 0px;
}

The above code is css (1, 2, 3)

• div#validate - That specific code details how an x/html div tag with the id (name) of 'validate' should be styled.
An id is often added to an element when that element needs to be addressed individually in either the css of any additional javascript.

• margin: 10px 0; - It will have a forced margin (space) of 10px above and below it and 0 forced margin to the left and right.

• text-align: center; - Text within that div will be centrally aligned (as opposed to left or right)

• margin-top: 80%; - sets the amount of forced margin above the div.
(This could easily have been set as part of the earlier margin declaration.)

• div#validate img refers to any <img> tag (image) that appears within the div named validate.

• margin: 0 5px; - Forced margin of 0 above & below and 5 pixels left & right.

• border-width: 0px; - This will give the image a border-width of 0.
Setting certain attributes to 0 is a method often used to switch off characteristics that would otherwise appear on by default.
(In this instance, border: 0; would have produced the same effect and used less code to do it. Efficiency in your code is part of the point behind the development of xhtml and css.)

Narate · 09-07-2004, 19:13

Thanks Bill, your knowledge of this stuff is quite immense.

Bill Posters · 09-07-2004, 19:29

Not especially.
tbh, that's pretty rudimentary stuff.
I just make it sound more complicated than it actually is.

:cuewinkie:

Narate · 09-07-2004, 19:33

lol, well I made a background colour and a gradient work.

*feeling so proud of ones self

Narate · 09-07-2004, 20:14

ok things are going abit fubar

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tweak Resource Centre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div id="left"><img src="images/site_left_toptile.gif" width="25" height="100%"/></div>
	<div id="centre</div>
<div id"right"><img src="images/site_right_toptile.gif" width="25" height="100%"/></div>
</div>
</body>
</html>

Code:

body {

background-color:#616856;
background-image:url(images/site_background_toptile.gif);
background-repeat:repeat-x;
margin:0;
text-align:center;
height:100%;
color:#ffffff;
overflow:hidden;

}

div#container {
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;

}

div#left {

float:left;
background-image:url(images/site_left_tile.gif);
background-repeat:repeat-y;
width:25px;
height:100%;
margin:auto;

}

div#centre {

float:left;
background-color:#DDD8D0;
width:800px;
height:100%;

}

div#right{

float:left;
background-image:url(images/site_right_tile.gif);
background-repeat:repeat-y;
width:25px;
height:100%;

}

was hoping that would make my stuff align to the centre, so far no joy.

checking other resources atm*

adras · 09-07-2004, 22:20

there is some problems in the HTML code:

Quote:

I bolded the fixes...

<div class="container">
<div id="left"><img src="images/site_left_toptile.gif" width="25" height="100%"/></div>
<div id="centre"></div>
<div id="right"><img src="images/site_right_toptile.gif" width="25" height="100%"/></div>
</div>

Also in the CSS the class 'container' should really be an ID, if its is going to be used once on a page then make it an ID, if you are going to use it more than once on a page then make it a class, at least that's what I have been taught.

Also because the DocType is not XML, but only HTML then you don't need the / at the end
of the IMG tag.

To make it centered change the width of the container from 100% to 850px, becuase from what I see that is all the width you need....

Narate · 10-07-2004, 04:44

thanks, I think I starting to grasp this, although I dont get why I cant allign everything to the centre, instead of allligning it left and then trying to 'center' it.

Done those fixes although I have now lost my right tile

pixelpyro · 10-07-2004, 05:08

VeteraN,

I have also recently done my first xhtml and CSS site. I found that Textpad is really useful as you can set up macros with your most common code and just use those instead of typing everytime.

I would also make recommend TopStyle pro for the PC to really help you dig through the stylrsheet and code to see how the CSS is working/styling with your code.

It has an excellent resource library to get you started.

http://www.bradsoft.com/topstyle/index.asp

I believe the closest Mac equivalent to TopStyle is Style Master

http://www.westciv.com/style_master/

Narate · 10-07-2004, 05:43

yeh I am using topstylelite at the mo, I dont think I am putting its resources to the test more so just whacking my code in.

I actually made my page work

now just for the content

========================================

Ok so I have my page and my logo.

Im struggling with actually adding content.

Do I make a seperate div inside my centre called content?

HTML Code:

<div id="container">
<div id="left"><img src="images/site_left_toptile.gif"></div>
<div id="centre"><image src="images/site_logo.gif">[color=Blue]here somewhere[/color]</div>
<div id="right"><img src="images/site_right_toptile.gif"></div>

cam · 10-07-2004, 07:26

If you wish to do more formatting inside the 'centre' div, then yes a content div would be the most logical solution. Or even a seperate div for your logo and another for your actual 'main' (textual) content

pixelpyro · 10-07-2004, 07:39

Can i suggest that you go to cssvault.com or csszengarden.com look at some of the designs and the save the code (html file) and the .css file to your harddrive then open the css in topstyle with the preview panel displaying the html file, then alter/play with the css and see what happens to the page.

It is amazing how quickly you will begin to appreciate what can be done and how, what appears to be a very minor change can completely adjust the layout of your page.

Worked for me

Narate · 10-07-2004, 09:06

Ok next problem, as soon as I add text to a div then it changes the shape and expands it

also the text doesnt allign to the centre of the div.

Can anyone help?

Narate · 11-07-2004, 21:23

^ new prob

adras · 12-07-2004, 10:16

To centre align the text in your div, do this...

/* css file *//
.centreText {
text-align: centre;
}

----------------------------------------------------


<div id="yourID"><p class="textCentre">your text here</p></div>

I am not sure why the div is changing the shape and expands, have you specified a width for it?

09-07-2004, 18:36	#1 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	doctype I am trying to learn to hand code which at the moment consists of lots of copying and pasting. I am trying to get my head around divs and since I have never coded anything in my life it is prooving a little trickey, I was wandering if anyone could help with the doc type as Ive been looking on wc3 schools but I am unsure what I am looking for. I'm guessing that I dont want transitional because it lets the browser do as it pleases so I should be using XML 1.1 strickt (guessing) so it validates. can anyone give me some info please, would be much appreciated. edit*** and wtf is this.. HTML Code: } div#validate { margin: 10px 0; text-align: center; margin-top: 80%; } div#validate img { margin: 0 5px; border-width:0px; }

09-07-2004, 19:05	#2 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,929	I wouldn't bother going any 'stricter' than using the XHTML 1.0 Strict DTD. Many browsers are really ready for XHTML 1.1 and the special considerations it requires to do it 'correctly'. The benefits also aren't particularly abundant either at this time. XTML 1.0 Strict will offer you (as close as you can currently get to) the best of both worlds, in that it offers you access to a pre-xml mindset without alienating those who have experience of html, whether through hand-coding or simply looking at the source code in their browser or wysiwyg editor. - Code: div#validate { margin: 10px 0; text-align: center; margin-top: 80%; } div#validate img { margin: 0 5px; border-width: 0px; } The above code is css (1, 2, 3) • div#validate - That specific code details how an x/html div tag with the id (name) of 'validate' should be styled. An id is often added to an element when that element needs to be addressed individually in either the css of any additional javascript. • margin: 10px 0; - It will have a forced margin (space) of 10px above and below it and 0 forced margin to the left and right. • text-align: center; - Text within that div will be centrally aligned (as opposed to left or right) • margin-top: 80%; - sets the amount of forced margin above the div. (This could easily have been set as part of the earlier margin declaration.) • div#validate img refers to any <img> tag (image) that appears within the div named validate. • margin: 0 5px; - Forced margin of 0 above & below and 5 pixels left & right. • border-width: 0px; - This will give the image a border-width of 0. Setting certain attributes to 0 is a method often used to switch off characteristics that would otherwise appear on by default. (In this instance, border: 0; would have produced the same effect and used less code to do it. Efficiency in your code is part of the point behind the development of xhtml and css.)

10-07-2004, 04:44	#8 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	thanks, I think I starting to grasp this, although I dont get why I cant allign everything to the centre, instead of allligning it left and then trying to 'center' it. Done those fixes although I have now lost my right tile Last edited by VeteraN : 10-07-2004 at 05:06.

10-07-2004, 05:08	#9 (permalink)
pixelpyro Senior Member Join Date: May 2003 Posts: 658	VeteraN, I have also recently done my first xhtml and CSS site. I found that Textpad is really useful as you can set up macros with your most common code and just use those instead of typing everytime. I would also make recommend TopStyle pro for the PC to really help you dig through the stylrsheet and code to see how the CSS is working/styling with your code. It has an excellent resource library to get you started. http://www.bradsoft.com/topstyle/index.asp I believe the closest Mac equivalent to TopStyle is Style Master http://www.westciv.com/style_master/ __________________ feel the heat.

10-07-2004, 05:43	#10 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	yeh I am using topstylelite at the mo, I dont think I am putting its resources to the test more so just whacking my code in. I actually made my page work now just for the content ======================================== Ok so I have my page and my logo. Im struggling with actually adding content. Do I make a seperate div inside my centre called content? HTML Code: <div id="container"> <div id="left"><img src="images/site_left_toptile.gif"></div> <div id="centre"><image src="images/site_logo.gif">[color=Blue]here somewhere[/color]</div> <div id="right"><img src="images/site_right_toptile.gif"></div> Last edited by VeteraN : 10-07-2004 at 06:33.

09-07-2004, 19:13	#3 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	Thanks Bill, your knowledge of this stuff is quite immense.

09-07-2004, 19:29	#4 (permalink)
Bill Posters trouble free and loverlee Join Date: Mar 2003 Location: YooKay Posts: 2,929	Not especially. tbh, that's pretty rudimentary stuff. I just make it sound more complicated than it actually is. :cuewinkie:

09-07-2004, 19:33	#5 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	lol, well I made a background colour and a gradient work. *feeling so proud of ones self

10-07-2004, 07:26	#11 (permalink)
cam vague™ Join Date: Mar 2004 Location: Glasgow Posts: 5,331	If you wish to do more formatting inside the 'centre' div, then yes a content div would be the most logical solution. Or even a seperate div for your logo and another for your actual 'main' (textual) content __________________ Random goodness at The Blog™

10-07-2004, 07:39	#12 (permalink)
pixelpyro Senior Member Join Date: May 2003 Posts: 658	Can i suggest that you go to cssvault.com or csszengarden.com look at some of the designs and the save the code (html file) and the .css file to your harddrive then open the css in topstyle with the preview panel displaying the html file, then alter/play with the css and see what happens to the page. It is amazing how quickly you will begin to appreciate what can be done and how, what appears to be a very minor change can completely adjust the layout of your page. Worked for me __________________ feel the heat.

10-07-2004, 09:06	#13 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	Ok next problem, as soon as I add text to a div then it changes the shape and expands it also the text doesnt allign to the centre of the div. Can anyone help? Attached Thumbnails Last edited by VeteraN : 11-07-2004 at 21:22.

11-07-2004, 21:23	#14 (permalink)
Narate Royalty™ Join Date: Feb 2003 Location: Manchester (UK) Posts: 3,236	^ new prob

12-07-2004, 10:16	#15 (permalink)
adras Zły Join Date: May 2004 Location: Toronto, Canada Posts: 1,919	To centre align the text in your div, do this... /* css file *// .centreText { text-align: centre; } ---------------------------------------------------- <!-- html file --> <div id="yourID"><p class="textCentre">your text here</p></div> I am not sure why the div is changing the shape and expands, have you specified a width for it? __________________ Be Crisp (tm)

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search