This question already has answers here:
What is a clearfix?
(10 answers)
Closed 2 years ago.
I am trying to position the elements using 'absolute' and 'relative' in CSS, I am also using 'padding' and 'margin' to position but my entire card elements is messed up. here is the code:
relative
absolute
margin
padding
.side3_style {
padding-left: 15px;
}
.side3-dp img {
position: relative;
display: inline-block;
top: 4px;
height: 40px;
width: 40px;
cursor: pointer;
border-radius: 50px;
margin-right: 15px;
float: left;
}
.side3-info {
display: inline-block;
top: 4px;
}
.side3-name {
font-family: 'Open Sans', Sans-serif;
font-size: 14px;
color: #3b3b3b;
font-weight: bold;
cursor: pointer;
}
.user3-time {
font-family: 'Open Sans', Sans-serif;
font-size: 10px;
color: #9D9D9D;
}
Screenshot
Generally speaking you have a root div 'A' where you set position: relative and then inside this div you place another div 'B' with position absolute.
<div id="A" style="position: relative"><div id="B" style="position: absolute; top: 100px;left:100px;"></div></div>
If you check the above code, you will see that div B will be placed ^ 100px top distance from div A, and < 100px left distance from div A wherever div A exists.
Moreover you have to be carefull if you use float css attribute because you cannot then position based on parent elements easily.
I hope this helps
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 created a Wordpress site and I added a blockquote element in the about section of the homepage.
I used :before and :after to insert a qoute unicode in my blockquote element but the problem is the :after pseudo quote is not responsive.
I inserted a top: 45% right: 34% temporarily and it works only for min-width: 1200px screensize.
blockquote {
display:block;
background: #fff;
padding: 20px 20px 20px 75px;
margin: 0 0 20px;
position: relative;
width: 100%;
/*Font*/
font-family: Georgia, serif;
font-style: italic;
font-size: 36px;
line-height: 1.2;
color: #242424;
}
blockquote::before{
content: "\201C";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
/*Positioning*/
position: absolute;
left: 10px;
top: -10px;
}
blockquote::after{
content: "\201D";
font-family: Georgia, serif;
font-size: 100px;
font-weight: bold;
color: #FFC107;
position: absolute;
top: 45%;
right: 34%;
}
I am not sure what you mean by "not responsive" ("responsive" isn't a very well-defined term...), but I assume you mean that the position of the inserted ::after element is only correct at a specific window size?
The opening quotation mark always appears at the same position relative to the text, but the closing mark is positioned to the edge of the <blockquote> element, not the end of the text inside it. At some window sizes, when the text wrapping leaves a large gap between the last word of the text and the edge of the element, the quotation mark is separated from the text. This is made worse because of the large font size.
In your specific case, a simple solution is to change the blockquote::after selector to blockquote p::after, and remove the top:45% and right:34% properties. The ::after element is then inserted at the end of the text, which means its position changes as the text reflows.
I was able to solve a similar issue by just adding this:
width: inherit;
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
I have a weird FIREFOX issue. If you go to http://www.aerlawgroup.com - scroll down and see the box on the right hand side (with the gavel). As you can see, the text and phone number are flushed too far to the right. If you see site in Chrome or Safari, it renders fine. I was advised to reset the .hr css tag, but that didn't work. I use Weebly, so while I can change the HTML and CSS, Weebly will insert it's own code upon publishing. Here is the code:
<div id="FREE2">FREE CASE</div>
<div class="PHONENUMBER" id="PHONE3">(800) 852 - 9851</div>
<div class="EVALUATION" id="EVAL2">EVALUATION</div>
<div class="CALLORCLICK" id="CALL2">CALL OR CLICK</div>
</div>
and
#FREE2 {
font-family: Arial, Helvetica, sans-serif;
color: #b2c8ff;
position: absolute;
top: 23px;
font-size: 22px;
left: 693px;
}
#EVAL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 42px;
font-size: 20px;
left: 693px;
}
#CALL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 65px;
left: 693px;
font-size: 17px;
}
#PHONE3 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
top: 170px;
position: absolute;
left: 824px;
margin: 0px;
padding: 0px;
font-size: 16px;
}
It isn't a good idea to use absolute positioning on the elements inside that box relative to the page. I think Chrome/Safari and Mozilla have different ideas as to what those pieces of text should be relative to. Having them relative to the box itself will remedy your problems (from what I've been messing around with in developer tools, it's fixing it).
To make left: xx and top: xx reposition the element relative to the box, simply set the positioning of its container (.bigimg) to relative.
.bigimg {
background-image: url("http://www.aerlawgroup.com/uploads/2/1/1/5/21159280/9150872_orig.jpg");
width: 282px;
height: 199px;
position: relative;
}
Now if you change your values for #FREE2 for example to make them visible
#FREE2 {
font-family: Arial,Helvetica,sans-serif;
color: rgb(178, 200, 255);
top: 30px;
font-size: 22px;
left: 20px;
position: absolute;
}
You will need to adjust the values for all elements inside the box, and then it will be consistent between browsers. These values are just an example, you'll need to find the difference between the old and the new values yourself.
If you're using position absolute, you have to set position relative to its parent element. For example, the parent element for ".PHONENUMBER" would be ".bgimg".
.bgimg {position:relative;}
.PHONENUMBER {position:absolute; top:170px; right:20px;}
So ".PHONENUMBER" will position absolute, relative to ".bgimg".
I have an infoBubble with some text and images. The right aligned image (arrow) is pushed down in Firefox (Mac) but not Safari or Opera dependent on the length of the text to the left and above. See the marker over Australia: http://www.hostelbars.com/map_test_v3_3.html
Here's the css:
.infowindow {
background-color: #000;
color: #FFF;
font-size: 18px;
font-family: Helvetica Neue, Helvetica, Arial;
text-shadow: 0 -1px 0 #000;
font-weight: bold;
position: relative;
overflow: hidden;
}
.infowindow .iwPhoto {
background-color: #F00;
position: relative;
padding-bottom: 1px;
padding-top: 2px;
padding-left: 5px;
}
.infowindow .iwName {
background-color: #0F3;
line-height: 33px;
white-space: nowrap;
position: relative;
margin-left: 115px;
margin-top: -70px;
padding-right: 5px;
padding-top: 2px;
}
.infowindow .iwCity {
background-color: #C03;
line-height: 32px;
margin-left: 115px;
padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
background-color: #0CF;
padding-right: 5px;
padding-left: 5px;
margin-top: 3px;
float: right;
}
Aside from the images I don't want the div's to have a fixed width. Would appreciate some help.
Brendon
Seems to only happen the first time, and for items with city values longer than name values. This suggests you didn't set width and height values for your img element (arrow.png), so the first time it has no idea what size it's going to be, and subsequent times it does.
What you should probably do is change it to a background image, as it's merely an iconified decorative image meaning 'next' or 'more', and thus should be in CSS's realm of style, not HTML's realm of meaning (where 'img' lives). See this list of image replacement techniques.
Otherwise, you could just apply img[src$="arrow.png"] { width: 29px; height: 29px; }, or add width and height attributes to the img element.