I'm trying to display an address right aligned in the footer of my page like this:
1234 south east Main St.
Nowhere, ID 45445
(555) 555-5555
in my markup I have this:
<address>
1234 south east Main St.
Nowhere, Id 45445
(555) 555-5555
</address>
How can I get this to layout properly without inserting <br /> in each line using css?
hey try to use this use this
.address
{
white-space:pre;
text-align:right;
}
You're going to have to add extra elements in there, either <br> as you suggest, or else something like:
<address>
<div class="street">1234 south east Main St.</div>
<div class="state">Nowhere, Id 45445</div>
<div class="telnum">(555) 555-5555</div>
</address>
First it's a good practice in this case to give an id to the address. Of course if you don't use another address again, it's not necessary. Then:
address#company_address
{
white-space: pre;
text-align: right;
}
Related
I have a webpage that uses an external CSS file for rendering my web pages on my site. All of my pages pretty much follow the same format as far as the layout is concerned and I have different sections in the Site.css file for each page. For some reason, one web page is not rendering the CSS correctly. I have a div defined with an Id and it isn't recognizing the id in the div even though it is defined in the CSS file. If I use a different id then it renders according to that Id's CSS. Specifically, the background color is not being set. Here is a screen shot of the site with the CSS. As you can see from this screen shot, the <div id="Devotions"> is not picking up the CSS.
CSS Issue
If I change the Id to ChristianFormaion, the page renders as I want it and the CSS is displayed as shown in the screen shot below.
Css no Issue
In the View, Devotions appears in the dropdown when I set the Id for the div. Here is the view code:
#{
ViewBag.Title = "Devotions";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="Devotions">
<h1 class="devotions_center">DEVOTIONS</h1>
<div class="devotions_body">
<p><img src="~/images/Devotions_cross.jpg" alt="Assumption B.V.M." width="53" height="79" align="right" class="padding15" /></p>
<h2><a name="CharismaticPrayerGroup" id="CharismaticPrayerGroup"></a>Charismatic Prayer Group</h2>
<p>The Assumption Charismatic Prayer Group has been meeting every Monday evening since 1973 to offer praise, thanksgiving and petitions to our God, Father, Son and Holy Spirit. The purpose of our prayer meeting is to seek a close personal relationship with Jesus and experience the working of the Holy Spirit in our lives in a deeper way. The word “charismatic” refers to the charisms or gifts of the Holy Spirit which we prayerfully seek through praise, both verbally and in song, scripture reading, sharing of answered prayer, prophecy and petition. Some of our members have been involved for over forty years and have experienced many answers to prayer and personal transformation. We meet every Monday evening at 7:15 in the Rectory Meeting Room. If you have any questions, contact Jean Ambs at 215-355-4974.</p>
</div>
<div class="devotions_body">
<h2><a name="Exposition" id="Exposition"></a>Eucharistic Adoration</h2>
<p>Eucharistic Adoration is held every Tuesday, beginning immediately after the 8:30 a.m. Mass and concluding at 6:45 p.m. with Evening Prayer from “The Liturgy of the Hours” followed by Benediction. Stop in for a visit any time. Better still, consider signing up for a holy hour of personal prayer before the Blessed Sacrament. Bring your needs to the Lord! For more information contact Deacon Eric at 215-357-1221, ext. 24, or email deaconeric.abvm#gmail.com</p>
</div>
<div class="devotions_body">
<p><img src="~/images/Devotions_bible.jpg" alt="Assumption B.V.M." width="86" height="73" align="left" class="padding15" /></p>
<h2><a name="FaithSharing" id="FaithSharing"></a>Faith Sharing</h2>
<p>A Bible/Faith Sharing Group meets on Wednesday mornings after the 8:30 Mass in the Mary Chapel, September through May. We use the “Word Among Us” monthly publication and focus on the Scripture for the following Sunday. Come grow with us in gaining insight into readings for Mass. Everyone is invited to join our informal group. Contact Theresa Poitras at 215-357-3933 or email theresaj38#verizon.net</p>
</div>
<div class="devotions_body">
<h2><img src="~/images/Devotions_rosary.jpg" alt="Assumption B.V.M." width="172" height="89" align="right" /><a name="Rosary" id="Rosary"></a>Rosary</h2>
<p>Prayed in Church at 8:00 AM before the 8:30 AM daily Mass.</p>
<h2><a name="PrayerPhoneTree" id="PrayerPhoneTree"></a>Prayer Line</h2>
<p>A group of parishioners volunteer to pray for the special intentions of our parish. If you have a request that you would like prayers for, please call Ginger Henry at 215-357-3394.</p>
</div>
<div class="devotions_body">
<h2><a name="Miraculous" id="Miraculous"></a>Miraculous Medal Novena</h2>
<p>Prayed in Church Thursday mornings following the 8:30 AM Mass.</p>
</div>
<div class="devotions_body">
<h2><img src="~/images/Devotions_Mary.jpg" alt="Assumption B.V.M." width="84" height="96" align="right" /><a name="LegionofMary" id="LegionofMary"></a>Legion of Mary</h2>
<p>The Legion of Mary is a lay Catholic organization founded by the Servant of God, Frank Duff, in Dublin, Ireland on September 7, 1921. Long before the recognition that the laity is vital to the work of the Catholic Church after Vatican Council II, the Legion of Mary, as a lay apostolic association with the approval of the Catholic Church and the intercession of Mary Immaculate, seeks the holiness of its members as they actively invite other people to holiness by doing the works assigned them by their Spiritual Director. In our parish, Our Lady of the Assumption Praesidium, the basic unit of the Legion, meets on Thursdays at 6:45 p.m. in the Mary Chapel, which is to the right of the church vestibule as you enter our church.</p>
<p>Currently, Father Mike Davis, Spiritual Director, asks the legionaries to visit homebound parishioners, residents of nursing homes and to bring the Pilgrim Virgin Statue to parishioners’ homes as requested. The primary purpose of the Pilgrim Virgin Statue home visitation is to help families to respond to the requests of the Blessed Mother Mary during the 1917 apparitions at Fatima: to return to God, make reparation for sins and to pray the Rosary for Peace. For more information, please contact Elaine Flood at 215-962-4312 or email lainey39forever#yahoo.com</p>
</div>
</div>
Here is the CSS in the Site.css file for devotions:
/* ========================================================================================*/
/* devotions.aspx */
#Devotions {
background-color: #dee4fe;
padding: 5px;
}
.devotions_body {
padding: 5px 15px 15px 15px;
margin-left: auto;
margin-right: auto;
}
.devotions_center {
text-align: center;
}
.devotions_left {
text-align: left;
}
.devotions_right {
text-align: right;
}
.devotions_color {
color: #005bac;
color: #006699;
}
Here is the CSS for the ChristianFormation:
/* ========================================================================================*/
/* christianformation.aspx */
#ChristianFormation {
background-color: #dee4fe;
padding: 5px;
}
.christianformation {
color: #B4C1E3;
border-width: 0;
padding-right: 3px;
vertical-align: middle;
}
.christianformation_hr {
margin-bottom: 15px;
border-top: 1px solid black;
}
Any help in identifying why the Devotions CSS is not rendering is greatly appreciated.
I am trying to create a natural language style contact form using contact form 7 but can't seem to get my label and fields to align. Each one displays on a separate line, not next to each other. Have tried a few different CSS tricks but nothing has worked. Any help?
I have tried floating the fields left and right, I have tried using divs to get them on the same line.
My name is [text your-name] and I am looking for [select TypeofMortgage "Bridging Finance" "Auction Finance" "Refurbishment Finance" "Development Finance"] for a property worth £[number number-603]
The best way to reach me us by [select contact "Phone""email"] at [text phone] or you can reach me by [select contact "Phone""email"] at [text your-email]
[submit "Chat soon"]
I really need this to display as a natural language, fill in the blanks style form.
You can do this using float.
First of all Create 1 Div and inside that Create one Div for Label and another one for input field.
and then use this css.
<style>
.main-box {
display: inline-block;
width: 360px;
height: 360px;
}
#labelBox {
float: left;
}
#inputBox {
float: right;
}
</style>
I often encounter an annoying phenomenon. I select an address in the browser (Firefox):
Example from yelp.com
Copy it into my adress bar, using the !maps DuckDuckGo bang:
We immediately see the problem: house number and zip code do not get separated, and more often than not Google Maps then fails to find the address (unsurprisingly).
The code in this case is:
<address>
Hans-Sachs-Str. 8<br>80469 Munich<br>Germany
</address>
I can imagine similar code with <p> or <div> instead of address; the relevant part seems to be how <br> will be copy-pasted.
The following is also conceivable:
<tr><td>Hans-Sachs-Str. 8</td></tr>
<tr><td>80469 Munich</td></tr>
Which copies in just the same way.
So if I put an address on my website (or write a user style), how can I make addresses copy-paste in a helpful way, e.g. with a comma between the individual fields/lines?
Answers with HTML5 and CSS3 are fine, and current browsers can be required; I don't care about backwards compatibility. Answers without Javascript are preferred.
I tried br::before { content: ", "; } but that didn't work.
I could only do it with JS, you will need to inject with greasemonkey or some other extension.
var commaHtml = '<span class="insertedComma">, </span>';
document.querySelectorAll('address').forEach(function(a){
a.querySelectorAll('br').forEach(function(b){
b.insertAdjacentHTML('beforebegin', commaHtml);
});
});
.insertedComma {
color: red;
/*opacity: 0; uncomment this line to make red commas disappear*/
}
<address>
Hans-Sachs-Str. 8<br>
80469 Munich<br>
Germany
</address>
Hack #1: Include an invisible comma.
<address>
Hans-Sachs-Str. 8<span style="opacity: 0;">,</span><br>
80469 Munich
</address>
This is actually quite unintrusive since it won't even show up in the selection, only in the pasted text.
Disadvantage: can't insert this automatically into existing websites without JS. (Or can I?)
If you insert presentational content using CSS pseudo-elements (::before and ::after), you will not be able to copy that content onto the clipboard.
So, I think you will have to insert any commas using javascript and DOM manipulation.
Here is an alternative javascript approach:
var address = document.getElementsByTagName('address')[0];
var addressLines = address.querySelectorAll('.strasse, .stadt, .land');
for (var i = 0; i < (addressLines.length - 1); i++) {
var comma = document.createElement('span');
comma.classList.add('comma');
comma.textContent = ',';
address.insertBefore(comma, addressLines[i]);
address.insertBefore(addressLines[i], comma);
}
span {
display: inline-block;
float: left;
}
.comma + span {
clear: left;
}
<address>
<span class="strasse">Hans-Sachs-Str. 8</span>
<span class="stadt">80469 Munich</span>
<span class="land">Germany</span>
</address>
I have code that looks like this:
<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>
The output that I want should all be in ONE line but as it turns out the div tags displays it's content in a new line, which I don't exactly want. So the output looks like this:
Total Selected: R
##,##
When I actually want it to display like this:
Total Selected: R##,##
Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!
Use <span> instead of <div>
div is a block element, and h4 is a header meant for single line.
Style your div to be displayed as inline-block
#bankTotal { display: inline-block; }
Demo
Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.
<div> is a block element and will put a return before and after the <div>
You should use instead.
<h4 class="tableTotals">Total Selected: R<span id="bankTotal">##,##</span></h4>
Using CSS:
#bankTotal{
display:inline;
}
div displaying on a new line ?
<div id="bankTotal" style="display:inline">##,##</div>
or
<div id="bankTotal" style="float:left">##,##</div>
but better :
<span id="bankTotal" >##,##</span >
display:inline property of css for displaying the div "inline",
or u could use <span> tag instead of <div> tag ..
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.
<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>
So I want to rig up some css rules for interview transcripts. The format I have in mind looks something like this:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<p>Is it ok if I ask you a question now?</p>
<h2 class="interviewee">Bob: [00:00:03]</h2>
<p>Sure go ahead.</p>
I'd like the paragraph to be a particular colour based on the class of the preceeding heading. Is there a way to do this, as it would make the html markup significantly simpler.
You can use following-sibling combinator: +
h2.interviewer + p { /* style goes here */ }
Sure:
h2.interviewer + p {
color: red;
}
I'm not entirely sure how to do it with multiple paragraphs though. Perhaps if you encased the entire set of paragraphs in a div:
<h2 class="interviewer">Alice: [00:00:00]</h2>
<div>
<p>Is it ok if I ask you a question now?</p>
<p>More text here.</p>
</div>
<h2 class="interviewee"> class="interviewee">Bob: [00:00:03]</h2>
<div>
<p>Sure go ahead.</p>
</div>
You could then do this:
h2.interviewer + div {
color: red;
}
By the way, there are better HTML elements for displaying a conversation, like the newly introduced <dialog> tag
http://www.quackit.com/html_5/tags/html_dialog_tag.cfm
UPDATE:
The <dialog> element never made it into HTML5. It does not exist.