I have this table:
<table border="0" cellpadding="0" cellspacing="0" height="24" width="760" background="../imgs/menuLine.jpg">
<tr align="center">
<td height="2" colspan="11" bgcolor="#ffffff"><img width="1" src=http://www.webdeveloper.com/forum/archive/index.php/"../iamges/pix.gif"></td>
</tr>
<tr align="left" valign="middle">
<td class="menuLines" style="padding-left: 21px;">text text text</td>
</tr>
<tr align="center">
<td height="2" colspan="11" bgcolor="#ffffff"><img width="1" src=http://www.webdeveloper.com/forum/archive/index.php/"iamges/pix.gif"></td>
</tr>
</table>
How can I make the same thing in CSS using DIV...Could you provide the pictures, or URLs to the pictures? Right now all I see is just some indented text, so I'm not sure how it's supposed to look.<html><head>
<style type="text/css">
#frame {
background:#fff url(../imgs/menuLine.jpg);
/* the image will tile if not the same size as the div. ie 760px wide */
padding-left:21px;
width:760px; height:24px;
border-top:1px solid #000; border-bottom:1px solid #000;
/* replaces ../iamges/pix.gif */
}
</style>
</head>
<body>
<!-- NOTE:
The valign="middle" presents a problem with CSS
The class="menuLines" could be included in the #frame definition
-->
<div id="frame" class="menuLines">text text text</div>
</body>
</html>This is how I needed it:
#frame {
background:#ffffffurl(../imgs/menuLine.jpg);
padding-left: 21px;
width: 760px; height: 24px;
border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
}
It's working great, Thank a lot man!
A few questions.
1) Why you had there #000 insted of #000000?
2) What's the # sign stands for?
3) The only thing that left to do is to get all what's inside the DIV to be aligned to the middle. How can I do it?
Thanks again!1) the format for hex is #RRGGBB so if the rr, gg, bb is the same (0 for all three in this example) then u only have to put it once. so if it was #99bb77 u would only have to put #9b7. i think this is how it is
2) # is just to say that it is hex code
3) text-align: center; i believe is what u wantI'm getting the text in the middle but Horizontalwise and I want it in the middle Verticalwise.
What is hex code?
Thanks for the other info!Originally posted by weee
I'm getting the text in the middle but Horizontalwise and I want it in the middle Verticalwise.
What is hex code?
Thanks for the other info!
hex is just a coding for color
for vertical alignment add margin: auto; so it would be:
#frame {
background:#ffffffurl(../imgs/menuLine.jpg);
padding-left: 21px;
width: 760px; height: 24px;
border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
margin: auto;
}It doesn't work - margin: auto;IE doesn't support margin: auto...
Howcome you're not surprised?
Vertical-align... no use either for a div.
If it's one line of text going in set line-height. If you don't mind the box expanding, use padding-top and padding-bottom to center it. If the box needs to remain one height, and it's more than one line...
Although somebody somewhere has completed an investigation into this and found some useful things I can't locate it at the moment.thanks
<table border="0" cellpadding="0" cellspacing="0" height="24" width="760" background="../imgs/menuLine.jpg">
<tr align="center">
<td height="2" colspan="11" bgcolor="#ffffff"><img width="1" src=http://www.webdeveloper.com/forum/archive/index.php/"../iamges/pix.gif"></td>
</tr>
<tr align="left" valign="middle">
<td class="menuLines" style="padding-left: 21px;">text text text</td>
</tr>
<tr align="center">
<td height="2" colspan="11" bgcolor="#ffffff"><img width="1" src=http://www.webdeveloper.com/forum/archive/index.php/"iamges/pix.gif"></td>
</tr>
</table>
How can I make the same thing in CSS using DIV...Could you provide the pictures, or URLs to the pictures? Right now all I see is just some indented text, so I'm not sure how it's supposed to look.<html><head>
<style type="text/css">
#frame {
background:#fff url(../imgs/menuLine.jpg);
/* the image will tile if not the same size as the div. ie 760px wide */
padding-left:21px;
width:760px; height:24px;
border-top:1px solid #000; border-bottom:1px solid #000;
/* replaces ../iamges/pix.gif */
}
</style>
</head>
<body>
<!-- NOTE:
The valign="middle" presents a problem with CSS
The class="menuLines" could be included in the #frame definition
-->
<div id="frame" class="menuLines">text text text</div>
</body>
</html>This is how I needed it:
#frame {
background:#ffffffurl(../imgs/menuLine.jpg);
padding-left: 21px;
width: 760px; height: 24px;
border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
}
It's working great, Thank a lot man!
A few questions.
1) Why you had there #000 insted of #000000?
2) What's the # sign stands for?
3) The only thing that left to do is to get all what's inside the DIV to be aligned to the middle. How can I do it?
Thanks again!1) the format for hex is #RRGGBB so if the rr, gg, bb is the same (0 for all three in this example) then u only have to put it once. so if it was #99bb77 u would only have to put #9b7. i think this is how it is
2) # is just to say that it is hex code
3) text-align: center; i believe is what u want
I'm getting the text in the middle but Horizontalwise and I want it in the middle Verticalwise.What is hex code?
Thanks for the other info!Originally posted by weee
I'm getting the text in the middle but Horizontalwise and I want it in the middle Verticalwise.
What is hex code?
Thanks for the other info!
hex is just a coding for color
for vertical alignment add margin: auto; so it would be:
#frame {
background:#ffffffurl(../imgs/menuLine.jpg);
padding-left: 21px;
width: 760px; height: 24px;
border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
margin: auto;
}It doesn't work - margin: auto;IE doesn't support margin: auto...
Howcome you're not surprised?Vertical-align... no use either for a div.
If it's one line of text going in set line-height. If you don't mind the box expanding, use padding-top and padding-bottom to center it. If the box needs to remain one height, and it's more than one line...
Although somebody somewhere has completed an investigation into this and found some useful things I can't locate it at the moment.thanks