Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Confusion with difference use of tags!


  • Please log in to reply

#1
mrsleep

mrsleep

    Member

  • Member
  • PipPip
  • 19 posts
Hey everyone. I'm having some trouble understanding how to use the different margin/padding/etc. tags. I understand HOW to use them, but I'm just not sure when it's appropiate. My layout is very standard for my page, I plan to just have a large box so to speak in the middle of the page with text (text that would be paragraphed, spaced out & including links and graphics). Similar to www.tizag.com 's layout. I'm really confused as to how to achieve this though. When I attempted to make a box in the middle of the page at first I was using margin & padding and that somehow (in Dreamweaver) was positioning the box in the center of the page where I wanted it after I played with the pixel values a little. This confused me because I thought margin and padding values defined the INSIDE of a box with a border and so on and so forth. Note that I was doing all of this under < h1 > tags. So I would have something like:

h1 {
margin: 20px 10px 20px 10px;
padding: 0px;
}

and so on and so forth. Another point of confusion for me is, why would I use the h1 tag for making a box? Should I? Why not use the p tag? Or would I want to use a div tag? I'm utterly confused. I know it's a confusing mesh of questions but if you have any questions you can ask me to clear things up let me know, I'll answer back quickly. Thanks a lot!
  • 0

Advertisements


#2
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
:tazz: Bump
  • 0

#3
the_gh0st

the_gh0st

    Member

  • Member
  • PipPip
  • 49 posts
By box do you mean table?


If you want indented paragraphs, then you should add the following CSS to your page:
p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }


I don't entirely understand what you mean by 'boxes'. Do you want rounded corners?

Edited by the_gh0st, 15 February 2006 - 10:14 PM.

  • 0

#4
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
That's part of the confusion, I think that's what I may need to use! I really don't know how to achieve it, but yes I'd assume it's a table.
  • 0

#5
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,678 posts
tizag.com is using tables for the layout. you can use the same principle using only CSS if you want.

To do that you need the <div id="">and the </div> in your primary html page. if you are wanting the solid border then in your css you would have somthing like this
#content{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 180px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 4px;
	border-top: solid 1px #000000
	border-left: solid 1px #000000;
	border-right: solid 1px #000000;
	border-bottom: solid 1px #000000
}


If you are wanting rounded corners then you need to make a image for the corner using a program like paint shop pro, illustrator, fireworks etc... Then save it as a gif for example top_left_corner.gif, then put this code in the html of your page.
In the code below I am using a curled corner only for the top of my content area. but this should give a little help on that.
<div id="content">
<img alt="" src="top_left_corner.gif" height="6" width="6" id="tl" /> <img alt="" src="top_right_corner.gif" height="6" width="6" id="tr" />
<p>blah blah blah</p>
</div>
Here is the CSS code for the image part.
#tl {
	position:absolute;
	top: -1px;
	left: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
}

#tr {
	position:absolute;
	top: -1px;
	right: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;
This is only an example, don't feel bad about experimenting to get the look you want. With Dreamweaver you have quite an arsenal of valuable tools to use. If you aren't all that familiar with dreamweaver then I would recommend reading some tutorials on it. You can find them at the macromedia web site as well as pixel2life.com and others are available too, do a google for them there are tons of them out there.
  • 0

#6
StudentBusiness12

StudentBusiness12

    Member

  • Member
  • PipPip
  • 70 posts
What happens when you want to use a photoshop made layout?
  • 0

#7
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,678 posts
your question is a little vague. Can you give a little more info on what you are trying to find out?

If you are meaning making a web page with Photoshop, There are tutorials for that also. www.pixel2life.com has tutorials for almost everything. check it out maybe you can find your answer there.
  • 0

#8
mrsleep

mrsleep

    Member

  • Topic Starter
  • Member
  • PipPip
  • 19 posts
Dragon, thanks a lot for those code samples, that helped out a lot. Only thing is I'm not sure what to do about the # symbol. Right now I've only been doing simple things like p tags, h1 tags, body tags, etc. How do I use the #tags? Class selector or ID or something? :/ Thanks if you can elaborate!
  • 0

#9
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,678 posts
ok, in the css, whether it's in the actual html file (internal) or a seperate(external) file, you would put the #blahblahblah.

Then in the div where you want that to take affect you would put
<div id="blahblahblah">
your content
</div>

Hope this helps. if you want a little better idea feel free to stop by my website and look at the source for the page. Here is my CSS file so you can compare where the div id are in place and how they work. any questions feel free to holler.
  • 0

#10
lil_cat_luver

lil_cat_luver

    Member

  • Member
  • PipPipPip
  • 296 posts
Also, I think the id tag can only be used once on each page. For multiple references on a single page, you would need to use class.

CSS:
div.small { 
property: value; 
}

HTML:
<div class="small"></div>

  • 0

#11
Dragon

Dragon

    All Around Computer Nut

  • Retired Staff
  • 2,678 posts

Also, I think the id tag can only be used once on each page. For multiple references on a single page, you would need to use class.

CSS:

div.small { 
property: value; 
}

HTML:
<div class="small"></div>

your right lil_cat_luver,

I should have made mention of that before. Thanks for catching that.
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP