ansaurus

Question

html css alignment

Answer 1

+2 A:

Technically your HTML is invalid. A list is a block level element and you can't (or shouldn't) embed then in paragraphs since they should only take inline elements.

There is no Name and Age mentioned anywhere in your markup so I'm not sure what you're referring to there.

Edit: to put the image on the left and have the two labels on the right one above the other, use this markup:

<div id="container">
<img src="cat.jpg">
<ul>
  <li>Source</li>
  <li>Item Link Title</li>
</ul>
</div>

and either this CSS:

html, body, div, ul, li, img { padding: 0; margin: 0; border: 0 none; }
#container { background: yellow; overflow: hidden; float: left; }
#container img { float: left; }
#container ul { list-style-type: none; float: left; background: green; }

The float: left on the container is optional. It simply means that it isn't as wide as its container. The first line is a crude reset CSS. I'd suggest using a real CSS and a DOCTYPE always.

cletus 2010-01-18 03:12:14

thanks for the help cletus i want an image then just next to it i want source and item link title on below the other.

Josh 2010-01-18 03:17:47

Thanks Cletus ... got it.

Josh 2010-01-18 04:15:04

Answer 2

A:

You can't put an unordered list inside of a paragraph (well you can but it's not valid). I don't know exactly what you're trying to do but see if this helps:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title></title>
<style type="text/css">
    img {
        height: 10px;
        width: 20px;

    }
    ul li{


        display:inline;
    }
    ul {
        display:inline;
    }
    #container {
        margin: 10px

    }
</style>

</head>
<body>
<div id="container">

<img src="la.jpg" alt=""/> <ul><li>Source</li><li>Item Link Title</li> </ul> 
</div>
</body>
</html>

mark123 2010-01-18 03:12:44

its right but i am getting some gap between the image and source

Josh 2010-01-18 03:20:24

You'd have to zero out the padding on the UL.I don't really like the looks of this markup. I'd like to see what you're attempting before saying this is in any way correct.

mark123 2010-01-18 11:18:28

Answer 3

A:

smallest change to your code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        <title></title>
    <style>
        img {
            height: 10px;
            width: 20px;

        }
        ul li{


            display:block;
        }
        ul {
            margin: 0;
            padding-left:0;
        }
        #container {
            margin: 10px

        }
    </style>

    </head>
    <body>
    <div id="container">
    <p>
    <img src="cat.jpg"> <ul><li>Source</li><li>Item Link Title</li> </ul> </p>
    </div>
    </body>
</html>

Having said that, the other 2 are correct. lists really shouldn't be inside a paragraph if you want to be HTML strict.

CSharper 2010-01-18 03:15:38

ansaurus

tags:

views:

answers:

html css alignment

related questions