PDA

View Full Version : Help with div



Kscriptz
Feb 9th, 2010, 05:15 PM
Hello all,

I have recently decided to start learning web design / development and have read books and tutorials pertaining to php, mysql, apache, html, and css. I have been playing with fireworks to create images for my website page layout / design. I'm struggling with the positioning of my header, nav, background, and footer on my web page.
It's my understanding that I would place these particular images with the div tag? As I understand css as far as styling headings and fonts, etc., I am puzzled by div, and I have yet to find a tutorial or explanation to make sense of the div tag. Any help or example would be greatly appreciated.

Thanks

ahallicks
Feb 9th, 2010, 05:35 PM
The <div> tag is shorthand for '<div>ider' and is basically used to separate a page into sections.

For example, you might have a section for the header, a section for the left side, a section for the right and one for the footer. These can be wrapped by <div> tags to highlight these areas.

Remember tho, that you have to think about semantics. That means, use the correct tag for the correct element of the page. For example, if you need a list, use a <ul> or <ol>. Likewise, if you are creating a header, use one of the <h*> tags (star representing a number from 1-6).

There is something we like to call 'divitis' tho, which you must be careful about and basically means that you are simply using too many divs on your page where you should be using more semantic markup.

Here is a standard layout for a webpage in HTML 4:



<div id="wrapper">
<div id="header">
<h1>Your Header</h1>
<p>Some more text could go here</p>
</div>
<div id="left">
<!-- The left content section (possibly a navigation) -->
</div>
<div id="right">
<!-- The right content section (possibly the main content area) -->
</div>
<div id="footer">
<!-- Your page footer -->
</div>
</div>

Kscriptz
Feb 9th, 2010, 05:51 PM
ahallicks - thank you for the information.

How would I go about specifying an image for the header? For example, the coding forums image at the top of this page? I would like to create a header in firefox that would span the width of the page. Is there a standard width that I should make this image in firefox? Also, after the image is created how could I use div(the syntax) to specify its placement as the header.

I get it, but I don't, if that makes any sense.

I think that after I get the basic use of div down pat, for the header. I should be able to grasp the concept enough for specifying the nav and footer, content, and so forth.

btw, I like that quote regarding domains and women.

ahallicks
Feb 9th, 2010, 06:33 PM
Okay, if you want a fixed image that is part of the style of the page then you will need to create an element, such as a div, that you can put the background-image on in CSS. However, if that is going to be your company logo then you could put that background-image on an <h1> tag in your header. That way you will be able to place text their too so that screen readers can read the content within. If you don't want the text to show on top of the image use text-indent.

If, however, this image is not part of the style, but part of the content then you could put it in as an image tag within the <h1>. However, doing this you will not be able to stretch the image to the width of the browser, but it will remain at a fixed width.

Remember, background-images can be repeated in CSS.

If you want to make your site stretch the width of the page then you will need to think about creating a fluid layout (that is, the site will fill the screen at all resolutions). There are some good examples of this on http://www.bonrouge.com. If you are only using a fixed width then you'd need to make your site no bigger than 950px or so (10.24x768 being the standard resolution these days).

Sorry this is a bit jumbled, I'm in a rush!

Kscriptz
Feb 9th, 2010, 07:16 PM
Does this look right? Or like it makes sense?

css

.head
{
position:absolute;
top:150px;
left:100px;
}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>
Positioning an image with absolute
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="head">
<img src="puppy07.jpg" width="800" height"1" />
</div>




</body>
</html>

Excavator
Feb 9th, 2010, 07:37 PM
Hello Kscriptz,
That code is invalid. See the links in my sig about validation.
Both the CSS and Markup validators have a "Validate by Direct Input" tab where you can copy/paste your code directly in, as opposed to giving it the url to validate a site that is already uploaded to your server.

Height 1? Is that how tall you want your header? That is one of your errors too, should have an = in there.

I'm not sure you want to start out using absolute positioning right away. It has it's uses but I don't think it's needed yet. See the pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).

Kscriptz
Feb 9th, 2010, 08:20 PM
Excavator - Thank you for the info., as well as the link on absolute positioning.

So, my pages are validated, but I am getting the following note for my html.


Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.



Here is my current code:

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>
Positioning an image with absolute
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="head">
<img src="puppy07.jpg" alt="puppyheader" width="800" height="100" />
</div>




</body>
</html>



css

.head
{
position:absolute;
top:50px;
left:100px;
}

Excavator
Feb 9th, 2010, 10:08 PM
That's just the standard warning you get when you paste code in. Once your site is uploaded for testing and you can run the validator by linking to it, that won't show up.

Good job on the valid code though!

ahallicks
Feb 10th, 2010, 10:09 AM
One thing I would note on here is that you're using a class to style the header (with the .). If your element is a singular entity and you aren't going to be using the styles for anything else you may as well make it an id (by using #header in your CSS). For example:



<div class="head">
<img src="puppy07.jpg" alt="puppyheader" width="800" height="100" />
</div>


And your CSS:



#head {
position:absolute;
top:50px;
left:100px;
}


I also agree with Excavator, in that, I don't think you'd need to absolutely position the header element. You can probably just use margins and padding to get it where you want it.