I have an item which contains
- an image
- text 1
- text 2
- text 3
What I want is:
_____________________________
| Image | text 1 | text 2 | text 3 |
Everything is within a <div>
So I thought:
<p class="floatleft">img</p>
<p class="floatleft">text 1</p>
etc
floatleft {
float: left;
}
But the text is aligning underneath each other and not horizontal as I intended it.
image | text 1
.........| text 2
.........| text 3
Like that.
How can I solve this one? I don't want to use tables though. Perhaps my choice of using the <p> tag for this one isn't cleaver?
3PinterI am using links...hope that is what you meant:
<html><head>
<style>
.footer {
font: 8pt Arial, sans-serif;color:#ffffff;background:#faa71b;text-align:center;padding-top:2px;padding-bottom:2px;clear:both;
}
.footer a { margin-left:6px;text-decoration: none;color: #ea4c1c;background-color: transparent;
border-color: #ea4c1c;border-bottom-width: 1px;border-left-width: 0px;border-right-width: 0px;
border-top-width: 0px;border-style: none;
}
.footer a:hover { margin-left:6px;text-decoration: none; color: #000;background-color: transparent;
border-color: #e9c62a;border-bottom-width: 1px;border-left-width: 0px;border-right-width: 0px;
border-top-width: 0px;border-style: none;
}</style></head><body>
<div class="footer"><img src=http://www.webdeveloper.com/forum/archive/index.php/"god.jpg">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.you.com/terms.html">terms of use</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.you.com/privacy.html">privacy info</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.you.com/mail.html">contact us</a></div>
</body></html>Have a width for .floatleft and it might be fixed. Or try having the 'links' inside a div.This is just picture and text:
<html><head>
<style>
.footer {
font: 8pt Arial, sans-serif;color:#ffffff;background:#faa71b;text-align:center;padding-top:2px;padding-bottom:2px;clear:both;
}
</style></head><body>
<div class="footer"><img src=http://www.webdeveloper.com/forum/archive/index.php/"god.jpg">
terms of use | privacy info | contact us</div>
</body></html>Nope that doesn't work.. adding width.. Kevey yours neither.
<div class="item">
<p class="specs">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"test.html">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.jpg" width="150" height="112"></a></p>
<p class="specs">
<h1>text 1</h1></p>
<p class="specs">
text 2</p>
</div>
CSS:
.item{
background-color: #000;
margin: 0 0px 10px 0;
padding:0;
}
.specs{
padding: 10px 0 0 10px;
margin: 0;
font-weight:bold;
float:left;
}
I was thinking: how about a display:inline? I thought that this one was only used for <li> ... so that isn't an option?
3PinterConsider starting with...
<dl>
<dt><img ...></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
</dl>
...since there seems to be a semantic relationship there.
Then style with something like...
dl, dt, dd { margin:0; }
dt, dd { float:left; width:20%; padding:0 2px; border: 1px solid black; }
NOTE: none of this was tested.
Tested version
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>webdev</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
dl, dt, dd { margin:0; }
dt, dd { float:left; width:20%; padding:0 2px; border: 1px solid black; }
dt img { display:block; }
dt { clear: both; }
</style>
</head>
<body>
<dl>
<dt><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webdeveloper.com/forum/images/buttons/reply.gif"></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
<dt><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webdeveloper.com/forum/images/buttons/reply.gif"></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
</dl>
</body>
</html>Ray326,
since my setup isn't a definition list, is it still 'allowed' to use a <dl> ?
To achieve the same result I've used <span>.
I'll try yours too.
3Pinter
- an image
- text 1
- text 2
- text 3
What I want is:
_____________________________
| Image | text 1 | text 2 | text 3 |
Everything is within a <div>
So I thought:
<p class="floatleft">img</p>
<p class="floatleft">text 1</p>
etc
floatleft {
float: left;
}
But the text is aligning underneath each other and not horizontal as I intended it.
image | text 1
.........| text 2
.........| text 3
Like that.
How can I solve this one? I don't want to use tables though. Perhaps my choice of using the <p> tag for this one isn't cleaver?
3PinterI am using links...hope that is what you meant:
<html><head>
<style>
.footer {
font: 8pt Arial, sans-serif;color:#ffffff;background:#faa71b;text-align:center;padding-top:2px;padding-bottom:2px;clear:both;
}
.footer a { margin-left:6px;text-decoration: none;color: #ea4c1c;background-color: transparent;
border-color: #ea4c1c;border-bottom-width: 1px;border-left-width: 0px;border-right-width: 0px;
border-top-width: 0px;border-style: none;
}
.footer a:hover { margin-left:6px;text-decoration: none; color: #000;background-color: transparent;
border-color: #e9c62a;border-bottom-width: 1px;border-left-width: 0px;border-right-width: 0px;
border-top-width: 0px;border-style: none;
}</style></head><body>
<div class="footer"><img src=http://www.webdeveloper.com/forum/archive/index.php/"god.jpg">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.you.com/terms.html">terms of use</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.you.com/privacy.html">privacy info</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.you.com/mail.html">contact us</a></div>
</body></html>Have a width for .floatleft and it might be fixed. Or try having the 'links' inside a div.This is just picture and text:
<html><head>
<style>
.footer {
font: 8pt Arial, sans-serif;color:#ffffff;background:#faa71b;text-align:center;padding-top:2px;padding-bottom:2px;clear:both;
}
</style></head><body>
<div class="footer"><img src=http://www.webdeveloper.com/forum/archive/index.php/"god.jpg">
terms of use | privacy info | contact us</div>
</body></html>Nope that doesn't work.. adding width.. Kevey yours neither.
<div class="item">
<p class="specs">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"test.html">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.jpg" width="150" height="112"></a></p>
<p class="specs">
<h1>text 1</h1></p>
<p class="specs">
text 2</p>
</div>
CSS:
.item{
background-color: #000;
margin: 0 0px 10px 0;
padding:0;
}
.specs{
padding: 10px 0 0 10px;
margin: 0;
font-weight:bold;
float:left;
}
I was thinking: how about a display:inline? I thought that this one was only used for <li> ... so that isn't an option?
3PinterConsider starting with...
<dl>
<dt><img ...></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
</dl>
...since there seems to be a semantic relationship there.
Then style with something like...
dl, dt, dd { margin:0; }
dt, dd { float:left; width:20%; padding:0 2px; border: 1px solid black; }
NOTE: none of this was tested.
Tested version
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>webdev</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
dl, dt, dd { margin:0; }
dt, dd { float:left; width:20%; padding:0 2px; border: 1px solid black; }
dt img { display:block; }
dt { clear: both; }
</style>
</head>
<body>
<dl>
<dt><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webdeveloper.com/forum/images/buttons/reply.gif"></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
<dt><img src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.webdeveloper.com/forum/images/buttons/reply.gif"></dt>
<dd>text 1</dd>
<dd>text 2</dd>
<dd>text 3</dd>
</dl>
</body>
</html>Ray326,
since my setup isn't a definition list, is it still 'allowed' to use a <dl> ?
To achieve the same result I've used <span>.
I'll try yours too.
3Pinter