Help with <div> tags.

#1
digitalbeef

Posted 05 November 2009 - 10:46 AM

Newbie

Members
13 posts

Right now, I am in the midst of a homework assignment, and I have a issue with "many" typos in the book. The <div> tags are not placing the information in reference to the illustrations. Does anybody know of what attributes that position the box to be used with it? I have currently height, width, and position? Right now, the result does not match the illustration (even with the walkthrough). A page displaying more information about div tags would be nice. Thx


<html xmlns="value" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>GeekJunkie</title>

    

<link rel="stylesheet" href="geekstyle.css" type="text/css" />

</head>


<body bgcolor="gray">


<div style="height:320px;width:500px;top:100;left:100;border-width:2px;border-style:dashed; border-color:black">



<!-- position:absolute;top:100;left:100;"> -->


<h2>Welcome to GeekJunkie, your online geek source. </h2>


<p>What do we have to offer? </p>


  <ul>

    <li>Gaming</li>

    <li>Software</li>

    <li>Music</li>

    <li>Video</li>

    <li>News</li>

    <li>Updates</li>

    <li>Tutorials</li>

    <li>Source code </li>

    <li>And much more</li>

  </ul>


<p>We are launching our online forum (a great way to network with others) this 

summer! Make sure you register to get all of GeekJunkie's updates and news.</p>


</div>

<!--

<div style="height:100px;width:300px;top:200;left:400;background-color:white;border-width:2px;border-style:dashed;border-color:black;">


<h2>Free Download of the Month</h2>


<p>Download info here</p>


</div>

-->

<p>

<div style="height:50px;width:500px;background-color:black;border-width:1px;border-style:solid;border-color:yellow">


<!-- position:absolute;top:470;left:100;"> -->


<span class="link">

<a href="value">about us</a> - 

<a href="value">news</a> -

<a href="value">things</a> - 

<a href="value">contact</a> -

<a href="value">guests</a>

</span>

</div>

</p>


<br />  


</body>

</html>

I just added the stylesheet. Sorry...


body {background-color: black; background-image: url('images/bg.gif'); margin-top:100px; margin-left:50px}

a {color: yellow}

a:link {font-family:Arial; font-size:10pt; color: yellow; top:470;left:100;}

a:hover {color: orange}

h2 {font-family:Arial; color: black}

p {font-family:Arial; font-size: 10pt; color: black}

li {font-weight:bold; color: yellow}

Edited by digitalbeef, 05 November 2009 - 02:42 PM.

#2
WingedPanther

Posted 05 November 2009 - 12:18 PM

A spammer's worst nightmare

Moderators
16,831 posts

We will probably need your stylesheet as well.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#3
so1i

Posted 07 November 2009 - 04:37 AM

Programming Professional

Members
312 posts

I havn't actually tried out your code, but what I can say is, I generally find it's better to define your Divs styles in the style sheet, and then give them the styles in your html with "ID" or "Class" attribut es. You can then add the extra heigh or width attributes if you need them. This (as well as just making it easier to change/update, and write the html in the first place) makes sure that the divs are the same.

Positioning Divs can vary, depending on how you want to do it. The usual attributes (that I use) are Float (get your Div in the correct position to begin with) and then use Margin to position in within the container, if needed.

A great resource for learning about this is W3Schools. (W3Schools Online Web Tutorials

Hope that helps. :)

#4
DarkLordoftheMonkeys

Posted 07 November 2009 - 12:29 PM

Programming Professional

Members
255 posts

CSS properties for positioning:

position: static, relative, fixed, absolute
Static is the default. Relative means it can be positioned with respect to the containing element. Fixed gives it an absolute position on the window. Absolute gives it an absolute position on the page.

top, bottom, left, right: an integer, can be in either pixels (px), inches (in), ems (em), centimeters (cm), or points (pt) (I think).
These are used along with relative, fixed, or static positioning to set the position with respect to the original position.

z-index: an integer >= 0
If elements overlap, this determines which ones are on top.

float: left, right, or center
A replacement for the <center> tag and align attributes in HTML.

It also may be useful to know the box model for CSS:
CSS Box Model

Hope that helps.