I'm trying to make a box with a header, a first paragraph, and a second paragraph. How can I select only the last paragraph in CSS so I can move it down, so it isn't overlapping the first paragraph? This is the code I have:
#info-box > p {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
position: absolute;
}
#info-box:nth-child(2) {
line-height: 1.3em;
font-size: 17px;
font-family: Arial;
text-align: center;
color: #979797;
margin-left: 20px;
margin-right: 20px;
margin-top: 100px;
position: absolute;
}
You're looking for :last-child
Quoting the specification:
The :last-child pseudo-class represents an element that is the last child of some other element.
Here's an example:
div {
width:100px;
height:100px;
background-color:red;
border:solid;
margin:2px;
display:inline-block;
border-width:1px;
}
div:last-child{
background-color:white;
}
Although to be fair, absolute position is rarely "the way" like Nit implied in the comments. Fixed sizes in pixel don't work too well on different screen sizes and different zooms, prefer a more logical layout. See this question on why.
CSS for last element try to use :last-child
#info-box:last-child {
}
Check here for reference CSS selector
http://www.w3schools.com/cssref/css_selectors.asp
Related
In order to solve an issue at work, I've been learning how to do paragraph numbering with css. So far, I am pleased with the results for standalone text passages. However, my requirement is to do the same in a scroll box with a vertical scrollbar.
As you can see here: http://jsfiddle.net/Lceewqj3/3/, I have gotten close by removing absolute positioning from the paragraph numbers, and adding a right margin, but I am still having a problem getting the paragraph starting left edge to be positioned correctly. My solution must work correctly for double-digit paragraph numbers as well as single, so the fixed right margin doesn't work, as you can see by scrolling down to paragraph 10. I tried adding a width property, but that didn't work either.
Note that modifying the existing passage-scrolling style is something I am not at liberty to do, so I need a solution that involves only manipulating the chapter and/or page styles.
Here is the css for the fiddle:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
//position: absolute;
margin-left: -30px;
margin-right: 14px;
color: #000;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
p {
margin-top: 10px;
font-family: 'Raleway', sans-serif;
font-size: 17px;
line-height: 22px;
font-weight: 400;
}
.passage-scrolling {
padding: 0 5%;
height: 340px;
width: 89%;
border: 2px solid #999;
overflow-y: auto;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Someone at work figured this out for me. The answer was simply to add float:left; and text-align:left; and remove the right margin from the .page p:before style. See the result here: http://jsfiddle.net/Lceewqj3/5/
Here's the final css that worked correctly:
.chapter {
counter-reset: paragraph;
padding-left: 30px;
}
.page p {
width: 75%;
}
.page p:before {
float: left;
text-align: left;
margin-left: -30px;
font-style: italic;
content: counter(paragraph);
counter-increment: paragraph;
}
I’m trying to draw a circle around the first letter of each first paragraph in an article using border-radius and padding, but because of the different widths of the characters, it will be displayed as an ellipse rather than as a circle.
Is there any possibility to set width and height of a letter to the same amount with CSS or to set the padding so that it matches together with the width the height of any character?
My current code looks like this:
p:first-of-type:first-letter{
font-size: 58px;
line-height: 1;
float: left;
margin-bottom: -4px;
background-color: rgb(44, 44, 44);
border-radius: 40px;
padding: 0 14px;
color: #fff;
}
Per #web-tiki - The ::first-letter pseudo element doesn't allow the width property. The only solution would be to use a monospace font or to use a container for the first letter. It would allow specifying a with for it an keep the circle round.
Building on web-tiki's excellent answer, you could size everything in em so it reacts to font-size changes as well.
span {
font-size: 58px;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
display: inline-block;
vertical-align: middle;
background-color: rgb(44, 44, 44);
border-radius: 50%;
color: #fff;
text-align: center;
margin-right: .1em
}
p:nth-of-type(even) span {
font-size: 24px;
}
<p><span>A</span>pple</p>
<p><span>Q</span>uestionable</p>
For those who may not want to add an extra element around each first letter, another solution would be using a svg as a background-image:
p:first-of-type:first-letter{
background-image:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSI1OCIgd2lkdGg9IjU4Ij4KICA8Y2lyY2xlIGN4ID0iMjkiIGN5ID0iMjkiIHIgPSIyOSIgc3R5bGU9ImZpbGw6IzQ0NDQ0NDtzdHJva2U6bm9uZTsiIC8+Cjwvc3ZnPgo=");
padding:0px 15px;
background-repeat:no-repeat;
background-position:center center;
}
Maybe I am trying to much but What I want to do is to put the post title above the featured image on my page. I got it to work by possitioning the text, but of course this stops my page from being a responsive page.
What I am looking for is to have text with a background colour of a certain width (so not spread from left to right) to be automatically centered and in absolute position.
Is this possible?
This is what I have until now:
<style>
.post_title
{
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
position: absolute;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
</style>
Any help would be highly appreciated, I have been looking for the answer for hours now.
Thx!
I'm not sure if I understand your question right, but you can try to put a wrapper around the .post_title, let's say div class="titlewrapper"
Apply styles something like this:
div.titlewrapper {
width:100%;
text-align:center;
}
div.titlewrapper .post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
width:auto;
background-color: #0E0EFF;
display:inline-block;
margin:auto;
padding: 3px;
border-radius: 2px;
}
Does this answer your question?
Groet, Jeroen
Could THIS work for you?
CSS:
.center_title {
margin-left:auto;
margin-right:auto;
}
.post_title {
font-family: sans-serif;
font-size: 14px;
color: #fff;
text-align:center;
background-color: #0E0EFF;
display:table;
margin:auto;
width: 40%;
padding: 3px;
border-radius: 2px;
}
HTML
<div class="center_title">
<div class="post_title">test</div>
</div>
Try not to use Positions, only if you really need to!
My aim is have the text inside this div displaying in the middle of it's container cross-browser.
If I could achieve this it would enable me to use fewer images.
http://jsfiddle.net/tMFaD/
Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the '1' is higher up on firefox).
Can this be easily done?
UPDATE: This is the small difference that i'm trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E
UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.
You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.
You can do it in a couple of ways:
.box {
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
}
.box {
width: 80px;
height: 80px;
font-size: 44px;
line-height: 80px;
font-weight: bold;
color: white;
background: pink;
text-align: center;
}
Both will produce the same results:
http://jsfiddle.net/spacebeers/s9Urm/8/
EDIT: To get the level or cross browser/cross OS precision you're after I think you're going to have to use separate style rules for some of them or just use images.
OTHER suggestion, use line-height to control vertical middle instead of padding:
.box {
display:block;
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
float: left;
line-height:80px;
width:80px;
height:80px;
}
This is my code:
<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno"><div id="yes">YES</div>
<div id="no">NO</div></div>
This is my CSS:
/* yes and no buttons */
#yes
{
float:left;
display:inline;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#yes a:visited,
#yes a:link{
color: #fff;
}
#yes:hover {
background-color: #9fd106;
cursor:pointer;
}
#no
{
float:right;
display:inline;
width:180px;
background: #999999;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #FFF;
padding-top: 10px;padding-bottom: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 0.4em;
margin-top: 0.4em;
}
#no a:visited,
#no a:link{
color: #fff;
}
#no:hover {
background-color: #f20909;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}
This is the issue:
I also have div switch to hide/show div. This is:
<!--show hide div logic-->
<style>
div#a { }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
$("#a").hide();
$("#b").show();
return false;
});
</script>
<!--//end show hide div logic-->
You can't wrap an inline element (a) around a block element (div). Use SPAN instead of DIV as span is an inline element.
Use something like this:
<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno">
<span id="yes">YES</span>
<span id="no">NO</span>
</div>
Both #yes and #no have widths of 180px so the buttons consume 360px on their own. The containing <div class="yesno"> is 400px wide so you have 40px left over. You also have three non-breaking spaces. Everything renders fine if you take the non-breaking spaces out so I'm guessing that IE is allocating more than 40px for the non-breaking spaces.
You can either make .yesno wider to accommodate how all the various browsers will render the non-breaking spaces or you can ditch the kludge and let the explicit widths on #yes, #no, and .yesno take care of keeping the buttons separated.
And yes, you should use <span> here instead of <div> as GlennG noted but that's not causing the problem here.
Or just put the buttons in a container div:
#colcontainer {
float:left;
width:100%;
}
Take that div and wrap it around your buttons.
That should do it.
Glenn is correct you cannot have a BLOCK element like a DIV inside a INLINE element such as an A tag.
Mu is to short is also correct.
Addtioanlly you should not be including
nbsp; you should be using CSS to format.
You can also remove alot of unnessasary HTML tags and CSS
For example http://jsbin.com/agojo4/5/edit
This could be refined even more but this is just a 2 minute job.