Okay, I am working on a custom parser for a personal variant of the Creole markup language, and I'm having trouble with a macro I added, which centers text.
Given the following CSS code:
.boxsection {
text-align:left;
border:1px solid #333;
padding:10px;
margin:10px;
background:1px solid #ccc;
}
and the following HTML code output by the parser:
<div class='boxsection'>
<span style='text-align:center'>
<h4>Center</h4>
<pre><<center>>Some text in the middle<</center>></pre>
This macro causes the content inside of it to be centered.
</span>
</div>
The heading and the text in the block all renders centered, but the last line does not center at all, even though it is inside of the span. I have tried changing the span to another div, with display set to inline, but that didn't work.
The only thing that does work is using the tag, but that tag is deprecated and so I'd prefer to avoid using a solution that may stop working in a future browser update.
Edit: I've uploaded a small HTML page which demonstrates the problem: http://www.wuala.com/zauber.paracelsus/Public/centering_test.html/
It is because your HTML is invalid.
You can't adding elements with default display:block into elements which are by default display:inline.
Change your span to div and it will work.
HTML
<div class='boxsection'>
<h4>Center</h4>
<pre><<center>>Some text in the middle<</center>></pre>
This macro causes the content inside of it to be centered.
</div>
CSS
.boxsection {
text-align:center;
border:1px solid #333;
padding:10px;
margin:10px;
background:1px solid #ccc;
}
http://codepen.io/Chovanec/pen/Hyxqe
Related
I have code like this
<p><span>On this day,<div class="underline-text">Sunday</div>,we, the undersigned:</span></p>
and my css
.underline-text {
display: inline-block;
border-bottom: 2px solid black;
width: auto;
}
But my problem is when i run this code, is show like this :
On this day,
`Sunday,we, the undersigned:`
What i need is like this :
`On this day,Sunday,we, the undersigned:`
How i do that way????
NOTE : I'm using bootstrap 3.
UPDATE : Works, i was stupid so i'm changing <div> to <span>. Thanks you all for the answer.
Why i got -2 vote??? Wat's wrong with my question??? I just asking simple question, and i kno i'm so stupid cause i'm using inline-block on span. But why i got minus for this???
Make this adjustment:
On this day, <span class="underline-text">Sunday</span>,we, the undersigned:
A div inside a p element is invalid HTML. The paragraph element closes before the div element begins.
Here's how the browser renders your code:
For a complete explanation of this behavior see: https://stackoverflow.com/a/41538733/3597276
<p> or <span> tags can't contain block-level elements inside them. Most browsers will split it into 2 separate paragraphs. Check this answer: https://stackoverflow.com/a/5441670/6424295
Maybe try using a<div> instead of a paragraph and get rid of the <span> tags, as I don't think they're really doing anything.
Yes. It should be like this:
.underline-text {
display:inline-block;
border-bottom: 2px solid black;
width: auto;
}
<div>
<p>
On this day,<span class="underline-text">Sunday</span>,we, the undersigned:
</p>
</div>
I am making an html page in which I have put some pictures. Now I want to put some fancy borders around it. How do I do that? My code is:
<img src="award.gif">
When I run it, it comes out perfectly. But I need a border. I use the latest version of Google Chrome. Thanks.
You can use CSS rules to set border around the image, see the below link where you can see different CSS borders and you can generate cross-browser border CSS. I like this tool very much and this tool provides an intuitive preview to see how the border will look like-
http://www.cssmatic.com/border-radius
Like this,
css:
img {
border:1px solid #021a40;
}
The "Double Border":
img {
padding:1px;
border:1px solid #021a40;
}
For multiple images, you can class in each images, and css is here,
Simple Example
Another one Example
And for more about border and border-radius refer this Link
UPDATE:
FIDDLE
You can do this by using a instead because in matters of CSS this can be more versatile.
CSS
myImage {
background:url(path to image file goes here);
border: 1px solid #000000; //black border
//some width and height values
}
HTML
<div class="myImage"></div>
HTML
<div class="divimg">
<img src="award.gif">
</div>
CSS
.divimg {
border: 1px solid red; }
There are many ways of doing that, you can create a div and put the image inside the div and then, with css, create the border.
Another simple way is this:
img {
border-style:solid;
border-width:1px;
border-color:red;
}
I'm trying to write it so that the text on my blog won't overlap. I tried putting the "white-space: nowrap" code into everywhere that had text, but it just made the words go out into the middle of the page. Here's a link to my page illustrating what I'm talking about http://schlurb.tumblr.com/post/68525778003/life-goals-marry-paris-hilton-birth-a
Here's a part of the code I'm using:
.quote {
float: right;
text-align: center;
font-size: {
text: Body font size
}
px;
line-height:20px;
text-transform:none;
margin-top:20px;
margin-bottom:20px;
width:620px;
font-family: {
font: body title
}
;
}
I think you encountered the collapse problem. This happens because of
float:right;
If really is the case you can solve it by adding
overflow:auto;
to the parent of your quote.
First of all, I'm just going to say that the bit of CSS code you've posted above does not currently apply to anything on your web page. Why? Well, the code above applies to all elements with the class name "quote". You have no HTML elements on your page with the class "quote" assigned to it.
Go through and add the quote class to the applicable elements.
Your CSS .quote{} has no corresponding e.g. <div> tag, this after looking into the pagelink you provided
I have a outer container, containing two links. They are aligning horizontally. The first one contains a div with background image and the second one is just text. The problem is the whole outer container acts as the first anchor, links to the first url while it is supposed to link nothing. Here's the simplified layout
<div id="links-block">
<div id="edit-quote-button"></div>
Preview the PDF
</div>
Here is the example JSFiddle. I am just wonder how to structure this set of elements, to prevent this problem.
Define this css
a{display:inline-block;vertical-align: top;}
#preview-pdf-link {
float: right;
margin-top: -30px; // remove this line
color: #999999;
}
Demo
here is your new html structure
<div id="links-block">
<a class="g-link" href="http://www.google.com"><div id="edit-quote-button"></div></a>
<a class="y-link" href="http://www.yahoo.com" id="preview-pdf-link">Preview the PDF</a>
<div class="clear"></div>
</div>
add this css to your css file
.g-link{
display:block;
float:left;
}
.y-link{
display:block;
}
.clear{
clear:both;
height:0px;
width:0px;
display:block;
}
hope this will work for you
It's not a great idea to have a div inside the a like that (invalid in pre-HTML5). If you set the edit-quote-button div to display: inline-block it will work better, though. Then remove the negative top margin on the Yahoo link.
What is the best way to combine a border with some text like so:
----------- sometext ------------
| |
| form |
| |
---------------------------------
As it's for a form, you should use a fieldset element.
See: http://jsfiddle.net/thirtydot/AVGsr/
METHOD:
For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:
What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.
There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div's).
The CSS and HTML is here, and JSFiddle link underneath.
FEATURES:
This method should fit all your criteria
Border text is in the place of part of the top border
Border text is central, can be placed anywhere along by modifying the CSS
Easy to change dimensions of the bordered area
CSS:
.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }
HTML:
<div class="wrapper-box">
<div class="side-border l"></div>
<div class="border-text">Border Text</div>
<div class="side-border r"></div>
<div class="box-content"></div>
</div>
EXTRA INFO:
To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.
JSFiddle Example Here
Hope this helps you out, I'll be keeping this for future reference myself :).
Define a division with border and put a heading in that division.
To make the heading overlap the top border, define a negative top-margin appropriately.
To make the line around the heading disappear define the background color of the heading same as the original background.
Here goes the code:
<div class="container" style="border: 1px solid black;">
<h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>
Very similar to this discussion: How to center the <legend> element - what to use instead of align:center attribute?
As was said there, using the tag is a pain if you want consistent results across browsers. To achieve this effect, I'd use a <h> tag or <div> instead for the legend.
Here's a example: http://jsfiddle.net/CddE7/
Tested in Firefox, Chrome and IE 7,8,9 for PC. The vertical placement of the <h3> varies slightly by IE version but only by a little (and probably could be refined for more uniformity).
Since I assume people will complain about using an <h3> instead of a <legend>, yes, it's not as semantically correct. But it works.
Supporting the previous answer, the fieldset element came in html 4 and it helps to group like items within a form and creates a set or a field of like items or you can wrap all the items contained in your form..
e.g.
<form><fieldset><legend>Name of your field/Some Text(your case)</legend>
Then you can add your labels and inputs in p tags or table, but the p tag is more preferable. At the end close your fieldset and form tags.. and add this type of code to your css
fieldset{
border: thin dashed #000;
}
You can add border to your form elements in this way..