I have -
<p>some text as 'intro'</p>
<h1>Big Text</h1>
<p>some text as 'outro'</p>
I have this set out on a background image, I have styled margins and fitted the text inside properly, but I want to bunch up ALL text so there is little gap - line-height would ruin it and I have tried seperate div tags but no luck - what is the best chosen css method for this?
Thanks!
If you require the use of those elements you could use negative margins:
<p>some text as 'intro'</p>
<h1 style="margin: -15px 0 -15px">Big Text</h1>
<p>some text as 'outro'</p>
A better way is probably to separate the different lines by line breaks and to style the 'header' line, like so:
<p>some text as 'intro'<br />
<span style="font-size: 200%; font-weight: bold;">Big Text</span><br />
some text as 'outro'</p>
Related
I have the following html
<html>
<body>
<p style="text-align:center;margin-bottom:0pt;margin-top:0pt;text-indent:0%;font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">
<a name="_marker_1"></a>
<a name="bananabread"></a>
<font style="font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">
<a name="bananabread"></a>Ban</font> <font style="font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">ana Bread</font>
</p>
<p style="text-align:center;margin-top:10pt;margin-bottom:0pt;text-indent:0%;font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">The Best You Ever Tasted</p>
<p style="margin-top:24pt;margin-bottom:0pt;text-indent:7.69%;font-style:italic;font-family:Times New Roman;font-size:10pt;font-weight:normal;text-transform:none;font-variant: normal;">If you don't agree that this is the best banana bread you have ever eaten well I would suggest you see your doctor</p>
<p style="margin-top:10pt;margin-bottom:0pt;text-indent:7.69%;font-family:Times New Roman;font-size:10pt;font-weight:normal;font-style:normal;text-transform:none;font-variant: normal;">Lots of text here describing what I am trying to capture</p>
<p style="text-align:center;margin-bottom:0pt;margin-top:0pt;text-indent:0%;font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">
<a name="_marker_2"></a>
<a name="bananapudding"></a>
<font style="font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">
<a name="bananapudding"></a>Banana</font>
<font style="font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">Pudding</font>
</p>
<p style="text-align:center;margin-top:10pt;margin-bottom:0pt;text-indent:0%;font-weight:bold;font-family:Times New Roman;font-size:10pt;font-style:normal;text-transform:none;font-variant: normal;">Creamy and Satisfying</p>
<p style="margin-top:24pt;margin-bottom:0pt;text-indent:7.69%;font-style:italic;font-family:Times New Roman;font-size:10pt;font-weight:normal;text-transform:none;font-variant: normal;">This is the same recipe your mother used when you were ten!</p>
<p style="margin-top:10pt;margin-bottom:0pt;text-indent:7.69%;font-family:Times New Roman;font-size:10pt;font-weight:normal;font-style:normal;text-transform:none;font-variant: normal;">Lots of text here describing what I am trying to capture</p>
</body>
</html>
I am trying to write an xpath expression to identify Banana Bread - my initial efforts were successful -
b_tree.xpath('.//*[starts-with(text(),"Banana Bread")]')
but I notice the error cases and upon investigation they are like the html above - another element is added inside the content I am searching for. Sometimes it is like above, a possibly unneeded font element, sometimes it is an anchor.
I worked with this answer (Related) but have not been successful
I can check for elements that have text_content() - clean up the text_content and then string match to my ultimate goal but I am hoping to learn to better apply xpath to these types of problems.
To be absolutely clear I need the text_content of the p element. But sometimes I just need the text of a font element. My existing XPATH expression works fine on the cases where there is not an intervening element. I do not know when I open the page the structure that was imposed on the document.
When the text() expression is applied to an element whose text content is interrupted by other elements, it returns a nodeset consisting of multiple text nodes, of which starts-with considers only the first. If you replace text() by ., you get the text value of the element, which is the concatenation of all text nodes, and that's what you want.
But there is still a problem with the spaces in an element like (attributes omitted, spaces are dots):
<p>
..<a></a>
..<a></a>
..<font>
....<a></a>Banana</font>
..<font>Pudding</font>
</p>
The text value of this element is _.._.._.._....Banana_..Pudding_ (underscores represent line feeds), therefore you must apply normalize-space, which normalizes this to Banana.Pudding, so that
.//*[starts-with(normalize-space(.),"Banana Pudding")]
finds this occurrence.
However, Banana Bread cannot be found, because it does not exist on the page. The element
<font>
..<a></a>Ban</font>.....<font>ana.Bread</font>
has a normalized text value of Ban.ana.Bread and you don't expect the space inside the word Banana. normalize-space removes spaces and line feeds that are invisible on the rendered page, but the two spaces in Ban.ana.Bread are both visible.
If there was no space between the two <font> elements,
.//*[starts-with(normalize-space(.),"Banana Bread")]
would detect 3 elements: the <html>, the <body> and the <p>, because "Banana Bread" are the first words in each of them. So you might better use
.//p[starts-with(normalize-space(.),"Banana Bread")]
instead.
How can I fix the width of text so that it remains splitted in two columns
<div class="container">
<div class="row">
<div class="col-lg-6"><ol id="AllMessages"></ol></div>
<div class="col-lg-6">
<h1>Last Broadcasted Message:</h1>
<h3
id="output"
class="float-left"
style="
margin-top: 35px;
border-top: 1px solid #dedbdb;
padding: 15px;
width: 120px;
"
></h3>
</div>
</div>
</div>
A few observations
It looks like the text in the image is put in without any space, this will usually break the layout - see the portion width:width:width etc.
Your Markup is also incorrect as it contains ol elements without li
Using inline styles on top of bootstrap is probably not a good idea as it breaks margins etc.
Most likely it's the text without non breaking text characters that is breaking your layout.
I'm trying to create a Tab Panel that auto adjusts to fit the width of each of the tab content boxes, & also has a Max-Width of 900px, & also stays auto centered on the screen. I can get them to work individually, but not all 3 together.
You can see at this webpage that I've got the Max-Width: 900px working & the Auto-Centering working, but not Fluid-Width Auto-Adjust (it always stays at 900px instead of reducing its width for the slimmer tab content boxes, see the tabs "WATCH THE FILM" & "SCREENINGS" specifically): http://www.shellshockeddoc.com/
Here is my CSS for the tab content group so far:
#TabbedPanels2 .TabbedPanelsContentGroup {
max-width:900px;
margin-left:auto;
margin-right:auto;
margin-top:105px;
}
& here is the HTML:
<div id="TabbedPanels2">
<h2 align="center">TAB HEADLINE 1</h2>
<p align="center">Tab Content 1. This tab contains content about 850px wide.</p>
<h2 align="center" >TAB HEADLINE 2</h2>
<p align="center">Tab Content 2. This tab contains content about 350px wide.</p>
etc
</div>
Thanks a lot in advance! I'm pretty new to CSS & appreciate all the help I can get.
I came upon strange situation. I have a List and each list item consists of span and image element. They are both inline and as long as span is empty they are next to each other, but when span has text, image acts as if it was display:block and falls underneath the span element which is not my desired effect. (I fill span with text dynamically)
<ul id="playerListInsideRoom">
<li class="playerCircleInsideRoom circleFull" seatnumber="1">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span> </span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="2">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="3">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
<li class="playerCircleInsideRoom circleEmpty" seatnumber="4">
<img src="~/Images/Lobby/successGray.png" alt="image" /><span></span></li>
</ul>
.playerCircleInsideRoom span{
position:relative;
left:50px;
}
#playerListInsideRoom img {
height:15px;
width:15px;
display:inline-block;
position:relative;
right:40px;
}
Even when I get rid of relative positions the problem is still occuring.
If the width of inline elements is larger than the allowed width of the container (your li element) then the line will break.
You could use whitespace: nowrap on the li to prevent it (though that could possibly break the rest of your layout).
<div style="display:inline;">
<textarea rows="10" cols="50"></textarea><br />
<div style="float:right;">remaining characters: 300</div>
It is not working in either firefox or IE. The text remaining characters is not within the "inline" bounds instead goes 100% out of the containing div.
what is the best way of accomplish something like this where text is aligned right in parent div with textarea before that?
Try this.
<div style="display:inline; text-align:right; float:left;">
<textarea cols="50" rows="10"></textarea><br />
remaining characters: 300
</div>