Hi,
I’m sure this is a very simple fix but I’m just not quite sure on how to do this.
I would like to get the text to line up on one line on this page https://bankruptcycanada.ca/bankruptcy-bc/
As it currently displays:
Trustee:
MNP Limited
#600 , 235 1st Avenue, Kamloops, British Columbia, V2C 3J4 Map
Phone:
1-888-389-0158
How I want it to display:
Trustee: MNP Limited
#600 , 235 1st Avenue, Kamloops, British Columbia, V2C 3J4 Map
Phone: 1-888-389-0158
Both Trustee: and Phone: are unstyled text while MNP Limited has a style of trusteename and the phone number (1-888-389-0158) has a style of trusteephone
The HTML code is:
Trustee:
<p class="trusteename">MNP Limited</p>
#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4 <a href="https://bankruptcycanada.ca/mnp-kamloops/">Map</a>
<p style="text-align: left;">Phone:</p>
<p class="trusteephone">1-888-389-0158</p>
The CSS Code is:
.trusteename {font-family:Raleway;font-weight:400;line-height:1.67;font-size:15px;color:#033F6D;}
.trusteephone {font-family:Raleway;font-weight:400;line-height:1.67;font-size:19px;color:#A93000;}
Thank you very much in advance))
Ray.H
September 24, 2016, 2:56am
2
Hi imaginex1a,
It sounds like you just need to nest your styled text in a <span>
, then you can style it as desired and it will be on the same line as your unstyled text.
Then move your class to the span as shown below…
<p>Trustee: <span class="trusteename">MNP Limited</span></p>
<p>Phone: <span class="trusteephone">1-888-389-0158</span></p>
@imaginex1a , could you please format your code so we can see it properly?
Either highlight the code and select the </>
icon or place three backticks (`) on the line before the code and tgree backticks on the line after tthe code.
Ray.H
September 25, 2016, 2:46am
4
Hi @imaginex1a ,
After a closer look at the html in question (on the page you linked too) I would say that your content could qualify for being marked up as a definition list
.
In doing so, the <dt>
and <dl>
tags would give you the styling hooks you need with minimal classes needed. It would also help to clean up the <h4>, <hr> and <strong>
tags that appear to be used for their visual appearance.
Here’s an example of your content in a <dl>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Definition List - Test Page</title>
<style>
.wrap {
width:80%;
min-width:300px;
max-width:800px;
margin:0 auto;
}
dl {
margin:30px 0;
padding:0 10px 20px;
overflow:hidden;
border-top:2px solid #bbb; /*this replaces the <hr>*/
background:#F5F5F5;
}
dt {
float:left;
clear:both;
margin:20px 0 0 0;
font-size: 1em;
font-weight:600;
}
dt:after {
content: ": ";
}
dd {
float:left;
margin:20px 0 0 20px;
font-size: 1em;
}
dt:first-of-type,
dd:first-of-type { /*this replaces the h4 headings and eliminates need for class*/
font-size:1.2em;
font-weight:600;
}
dt:first-of-type:after {content:'\00A0'}/*reset colon with and make the first dt&dl appear as one heading*/
dd:first-of-type {margin-left:0;}
dd a {
text-decoration:none;
font-weight:600;
color: #568fbf;
}
.name, .phone {
font-family: Raleway;
font-weight: 600;
/*line-height: 1.67;*/
color: #033F6D;
}
.phone {color: #A93000;} /*reset from above color*/
</style>
</head>
<body>
<div class="wrap">
<h1>Definition List</h1>
<dl>
<dt>Bankruptcy</dt>
<dd>100 Mile House Trustee</dd>
<dt>Trustee</dt>
<dd class="name">MNP Limited</dd>
<dt>Address</dt>
<dd>#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4</dd>
<dt>Phone</dt>
<dd class="phone">1-888-389-0158</dd>
<dt>Free Evaluation</dt>
<dd><a href="#">100 Mile House Bankruptcy Consultation</a></dd>
</dl>
<dl>
<dt>Bankruptcy</dt>
<dd>Abbotsford Trustee</dd>
<dt>Trustee</dt>
<dd class="name">Sands & Associates</dd>
<dt>Address</dt>
<dd>300 – 31935 South Fraser Way, Abbotsford, BC, V2T 1V5</dd>
<dt>Phone</dt>
<dd class="phone">604-210-3561</dd>
<dt>Free Evaluation</dt>
<dd><a href="#">Abbotsford Bankruptcy Consultation</a></dd>
</dl>
<dl>
<dt>Bankruptcy</dt>
<dd>100 Mile House Trustee</dd>
<dt>Trustee</dt>
<dd class="name">MNP Limited</dd>
<dt>Address</dt>
<dd>#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4</dd>
<dt>Phone</dt>
<dd class="phone">1-888-389-0158</dd>
<dt>Free Evaluation</dt>
<dd><a href="#">100 Mile House Bankruptcy Consultation</a></dd>
</dl>
<dl>
<dt>Bankruptcy</dt>
<dd>Abbotsford Trustee</dd>
<dt>Trustee</dt>
<dd class="name">Sands & Associates</dd>
<dt>Address</dt>
<dd>300 – 31935 South Fraser Way, Abbotsford, BC, V2T 1V5</dd>
<dt>Phone</dt>
<dd class="phone">604-210-3561</dd>
<dt>Free Evaluation</dt>
<dd><a href="#">Abbotsford Bankruptcy Consultation</a></dd>
</dl>
</div>
</body>
</html>
3 Likes
system
Closed
December 25, 2016, 9:46am
5
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.