Newby - 2 Qs - tag & box

Dev Shed Forums Sponsor:

February 10th, 2013, 04:33 PM

Franksplace2

Registered User

Join Date: Feb 2013

Posts: 2

Time spent in forums: 30 m 20 sec
Reputation Power: 0

Newby - 2 Qs - tag & box

Q1

The header has two images (left & right) and two lines of text (h1 & h3). The left image tag says

<body.twoColFixLtHdr><div#container><div#header><p><img.fltlft> and the right is similar.

What is that <p> doing in there? I know <p> means paragraph text but the image ought to be in <div#header> not under <p>.

Q2 I had a tough time positioning the images vertically. They showed up above or half out below. Is the box model looking to position the images? How do I set border and padding to zero?

Thanks for your help

Frank

February 10th, 2013, 05:06 PM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

#1
This must be some sort of abbreviated code, probably interpreted by some script.

for instance

Code:

<div#container>

should be

Code:

<div id="container">

What the <p> is doing there, I have no idea. except that it's missing an endtag. Maybe its (mis)used for layout purposes

Where did you get this code from?

#2
Second the boxmodel doesn't do anything with positioning. Its pretty much deals with the dimensional layers of 1 object.
object+padding+border+margin (google images of the boxmodel)

To position images vertically without seeying the case I would say have a look in the properties Float and Clear (or use an unordered list (<ul>).

#3 (answer to third question)

Code:

selector{padding:0;margin:0;}

__________________
PHP Tutorial

February 12th, 2013, 02:20 PM

Franksplace2

Registered User

Join Date: Feb 2013

Posts: 2

Time spent in forums: 30 m 20 sec
Reputation Power: 0

Aeternus,

Thank you for your help.

Quote:

Originally Posted by aeternus

#1
This must be some sort of abbreviated code, probably interpreted by some script.

for instance

Code:

<div#container>

should be

Code:

<div id="container">

What the <p> is doing there, I have no idea. except that it's missing an endtag. Maybe its (mis)used for layout purposes

Where did you get this code from?

I use Dreamweaver to create the code. I could not delete the <p>

#2
Second the boxmodel doesn't do anything with positioning. Its pretty much deals with the dimensional layers of 1 object.
object+padding+border+margin (google images of the boxmodel)

I set up the header with text only. object + padding +border Then I try to insert the image which is bigger than the object+padding+margin. So either the image can't fit or the object gets bigger. The images are stuck to the top edge of Header. Could that be the cause of my problems?

To position images vertically without seeying the case I would say have a look in the properties Float and Clear (or use an unordered list (<ul>).

I am using float. What does Clear do?

#3 (answer to third question)

Code:

selector{padding:0;margin:0;}

I will try to do that using Dreamweaver.

February 12th, 2013, 02:43 PM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

If dreamweaver produces this:

Code:

<body.twoColFixLtHdr><div#container><div#header><p><img.fltlft>

and that is also outputed to the browser than that is wrong. It's invalid code , which as far as I see is used by a different program to interpret it and make it valid html.

As far as the property Clear. Did you try to google it?
I can tell that float and clear are like brother and sister, but it would be wise to google it and read about it, unless you like me to paste the w3c manual here.

Quote:

I set up the header with text only. object + padding +border Then I try to insert the image which is bigger than the object+padding+margin. So either the image can't fit or the object gets bigger. The images are stuck to the top edge of Header. Could that be the cause of my problems?

I would suggest you show us some valid html and css.
The basics look like this

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>

</html>

They all have a begin and endtag (unlike your code).

Newby - 2 Qs - tag & box

Developer Shed Advertisers and Affiliates