HTML problem

mid · 15-11-2010 12:27pm #1

Maybe somebody could help with this.

I'm trying to create a basic page:
an Image at the top
Some text underneath
Then a dropdown list under that

The problem I have is the the dropdown list is aligning to the right of the image?

[PHP]
<html>
<head>
<title>Search Page</title>
<style type="text/css">
p{float:left}
</style>
</head>
<body bgcolor="#EFF582" text="black">
<img src="logo.png" alt="logo" height="136px" width="893px" border="0" />
<br />
<p>
Some text here</p>
<br /><br />
<p>
<form action="search.asp" method="post">
Category:
<select name="Category" >
<option>cat01</option>
<option>cat02</option>
<option>cat03</option>
</select>
<input type="submit" value="Submit" />
</form>
</p>
[/PHP]

fasty · 15-11-2010 12:38pm

It's because you're using float:left for p tags, I suppose.

mid · 15-11-2010 12:40pm

thanks, I got it working

I think it was because I was missing the </img> tag

fasty · 15-11-2010 12:42pm

Hah, good stuff!

jebuz · 15-11-2010 1:29pm

mid wrote: »

thanks, I got it working

I think it was because I was missing the </img> tag

No you're not, you have the image tag correct.

<img src="logo.png" alt="logo" height="136px" width="893px" border="0" />

is the same as

<img src="logo.png" alt="logo" height="136px" width="893px" border="0" ></img>

Try get into the habit of using DIV's instead of paragraphs for laying out your pages, they render vertically down the page (unless using floats), so here is how you could use them in your code using 3 div's, one for the image, one for the text below that and then another for the dropdown.

<html>
  <head>
    <title>Search Page</title>
    <style type="text/css">
    p {float:left}
    </style>
  </head>

  <body bgcolor="#EFF582" text="black">
    <div>
      <img src="logo.png" alt="logo" height="136px" width="893px" border="0" />
    </div>

    <div>Some text here</div>
    <div>
      <form action="search.asp" method="post">
        Category:
        <select name="Category" >
         <option>cat01</option>
         <option>cat02</option>
         <option>cat03</option>
        </select>
        <input type="submit" value="Submit" />
      </form>
    </div> 
  </body>
</html>

daymobrew · 15-11-2010 3:02pm

jebuz wrote: »
Try get into the habit of using DIV's instead of paragraphs for laying out your pages, they render vertically down the page (unless using floats), so here is how you could use them in your code using 3 div's, one for the image, one for the text below that and then another for the dropdown.
<html>
  <head>
    <title>Search Page</title>
    <style type="text/css">
    p {float:left}
    </style>
  </head>

  <body bgcolor="#EFF582" text="black">
    <div>
      <img src="logo.png" alt="logo" height="136px" width="893px" border="0" />
    </div>

    <div>Some text here</div>
    <div>
      <form action="search.asp" method="post">
        Category:
        <select name="Category" >
         <option>cat01</option>
         <option>cat02</option>
         <option>cat03</option>
        </select>
        <input type="submit" value="Submit" />
      </form>
    </div> 
  </body>
</html>

I disagree with "using DIV's instead of paragraphs for laying out your pages" - paragraphs will render vertically too (divs and paragraphs are both block elements).

Using a lot of unnecessary divs brings on a case of Divitius.

jebuz · 15-11-2010 3:17pm

That page pretty much echoes what I said, as in using divs for defining sections of the page, paragraphs should be used for blocks text. I didn't recommend using div's for headings or blocks of text, that I agree is unnecessary.

In the code above, I can't see the advantage of using paragraphs instead of div's, except for possibly the "some text here" part, but that could easily be a heading. I certainly wouldn't go around replacing divs with paragraphs just to avoid "divitus", you're simply encouraging p-itus

HTML problem

Comments