Hiya.
We're on our last transition of getting mostly everything away from table layout to CSS (except forms etc...which are fine) and actual tabular data.
The last thing I'm trying to get working is this:
<table style="text-align: left; margin: 0 auto; border: 1px solid #b9b9b9;">
<tr>
<td style="background-color: #f0f0f0;"> <strong>Step 1</strong> </td>
<td style="background-color: #f5f5f5;"> Step 2 </td>
</tr>
</table>
I'm trying to do it in a ul / li but I can't get the step 1 and step 2 to sit by each other.
Any ideas please?Try:
<ul style="list-style-type:none;">
<li style="border: 1px inset black;padding:0;float:left;font-weight:bold;"> Step 1 </li>
<li style="border: 1px inset black;padding:0;float:left;"> Step 2 </li>
</ul>Thank you!
That's brill.
I was missing the float.Hello again.
Even though it's looking similar I cannot quite get it to the look the same.
If you open both in a browser, you'll see the differences I mean.
Also, I changed it to a dl and dt's as I had some ul li CSS which affected the containing div.
Any ideas on how I can get it looking more similar? I hope you see what I mean by the differences in it.
Below is the code I'm currently using:
CSS:
#step dl {
margin: 0 auto;
text-align: center;
list-style-type: none;
}
#step dt {
margin: 1px;
padding: 1px;
float: left;
border: 1px solid #b9b9b9;
}
HTML:
<dl id="step">
<dt style="background-color: #f0f0f0;"> Step 1 </dt>
<dt style="background-color: #f5f5f5;"> <strong>Step 2</strong> </dt>
</dl><br />
I appreciate your help.
Any ideas?This is the closest I can get it to your table version. It could be a little simpler, but as I said, I was really trying to make it the same as your table.
css :
ul {
margin:0;
padding:0;
list-style:none;
text-align:center;
}
li {
border:1px inset black;
width:4em;
padding:2px;
float:left;
}
#step1 {
border-right:none;
}
#step2 {
border-left:none;
}
#step1 div {
background-color:#f0f0f0;
font-weight:bold;
}
#step2 div {
background-color:#f5f5f5;
}
html :
<ul>
<li id="step1"><div>Step 1</div></li>
<li id="step2"><div>Step 2</div></li>
</ul>
We're on our last transition of getting mostly everything away from table layout to CSS (except forms etc...which are fine) and actual tabular data.
The last thing I'm trying to get working is this:
<table style="text-align: left; margin: 0 auto; border: 1px solid #b9b9b9;">
<tr>
<td style="background-color: #f0f0f0;"> <strong>Step 1</strong> </td>
<td style="background-color: #f5f5f5;"> Step 2 </td>
</tr>
</table>
I'm trying to do it in a ul / li but I can't get the step 1 and step 2 to sit by each other.
Any ideas please?Try:
<ul style="list-style-type:none;">
<li style="border: 1px inset black;padding:0;float:left;font-weight:bold;"> Step 1 </li>
<li style="border: 1px inset black;padding:0;float:left;"> Step 2 </li>
</ul>Thank you!
That's brill.
I was missing the float.Hello again.
Even though it's looking similar I cannot quite get it to the look the same.
If you open both in a browser, you'll see the differences I mean.
Also, I changed it to a dl and dt's as I had some ul li CSS which affected the containing div.
Any ideas on how I can get it looking more similar? I hope you see what I mean by the differences in it.
Below is the code I'm currently using:
CSS:
#step dl {
margin: 0 auto;
text-align: center;
list-style-type: none;
}
#step dt {
margin: 1px;
padding: 1px;
float: left;
border: 1px solid #b9b9b9;
}
HTML:
<dl id="step">
<dt style="background-color: #f0f0f0;"> Step 1 </dt>
<dt style="background-color: #f5f5f5;"> <strong>Step 2</strong> </dt>
</dl><br />
I appreciate your help.
Any ideas?This is the closest I can get it to your table version. It could be a little simpler, but as I said, I was really trying to make it the same as your table.css :
ul {
margin:0;
padding:0;
list-style:none;
text-align:center;
}
li {
border:1px inset black;
width:4em;
padding:2px;
float:left;
}
#step1 {
border-right:none;
}
#step2 {
border-left:none;
}
#step1 div {
background-color:#f0f0f0;
font-weight:bold;
}
#step2 div {
background-color:#f5f5f5;
}
html :
<ul>
<li id="step1"><div>Step 1</div></li>
<li id="step2"><div>Step 2</div></li>
</ul>