I'm trying to achieve a look where I have all of the icons justified to the left while keeping the text centered and have the text wrap onto another line if necessary. However, I want the icon to be inline with the title. Right now it looks like this:enter image description here
I'm not sure why some of the boxes are stretching vertically and why the icons are floating on the line above the text. Also, some of the text is shifting outside of the grey boxes they are supposed to be in. How do I get every icon/title to look like the top example (ie eye glyphicon with "Look Inside This Chapter" text)?
Here is the HTML code I'm using:
<div class="text-left"><span class="glyphicon glyphicon-download">
</span> <div class="text-center">Teacher Pre-Assessment</div></div>
I also tried this code to see if that would work but I'm not having any luck:
<div style="float: left; text-align: left"><span class="glyphicon
glyphicon-download"></span> <div class="text-center"> Teacher Post-
Assessment </div></div>
In that scenario, you can set the icon position to absolute and then left:0. However, that can make the icon just go outside the .text-left div. So you need to set its position to relative, because absolute elements are positioned according to the closest ancestor that has position relative.
.text-left {
position: relative
}
.text-left .glyphicon {
position: absolute;
left: 0;
}
Then you're free to position the other elements as you want.
You could put the icons into a pseudo class, so they don't clutter up your html:
.text-center {
padding-left: 25px;
position: relative;
}
.text-center:before {
position: absolute;
content:"";
top:0;
left:0;
width: 20px;
height: 20px;
background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png) ;
background-size:100% 100% ;
}
this basically creates an absolute positioned div in .text-center , thats why .text-center needs some padding so the text doesn't run below the icon.
Example: https://jsfiddle.net/6mjscdxL/
More Details about pseudo classes: https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Related
I will be making the arrows clickable to scroll left/right in the div
I have a div which contains a bunch of elements (arrows are not included in the div for my method) as seen here
I want to align the arrows as seen in the image, however these are not responding as expected when the page is a different size due to the terrible method I have wrote.. what would be the best way to do the above?
At the moment my code looks like this:
<img src={arrowLeft} alt="Left Arrow" className="arrow"></img>
<div className="gridRow">
......content for elements here.......
</div>
<img src={arrowRight} alt="Right Arrow" className="arrow right"></img>
And the CSS:
/*Arrow images*/
.arrow {
border: 1px solid red;
position: absolute;
top: 121%;
}
.arrow.right {
left: 91.7%;
}
.arrow:hover {
cursor: pointer;
}
Thanks
Instead of giving position: absolute to the two arrows (which will make them unresponsive to screen changes), you could just wrap everything inside a div and give the div the following CSS properties:
display: flex;
align-items: center.
This way, all the elements will be in a row and vertically centered.
I have a set of divs (11 of them), 8 of them with an image and 3 of them with ':'.
all 11 boxes are inside a class "timer".
Something like this:
<div class="timer">
<div><img></div>
<div><img></div>
<div>:</div>
</div>
I added text over image by using p tags inside each div and using this code on css:
.text{
position: absolute;
left: 85px;
top: 185px;
}
But on resisizing the window, the boxes move but the text stays. How can I make the text move along with the boxes?
Missing a few things here: <div>:</div> should actually be: <div class="text">:</div> if you want to apply your CSS that's targeting .text to this div containing the :.
Also if you want the container to hold the absolutely positioned element, you need to set your timer to be relative position: .timer { position: relative; }
I have been trying to assign buttons inside a position relative container but when I do position absolute on buttons they are overlapping. I want to position my buttons on top/bottom right or top/bottom left of the square on inline-block, or position them anywhere? what position should I use or how can I achieve? since It's the buttons for social network.By the way I am trying to get a certificate from freecodecamp and I am on course of random quote generator. This is my code:
HTML
</div>
<div class="buttons">
<button class="button" id="twitter-button"><a title="Tweet this quote!" target="_blank"> tweet
<i class="fa fa-twitter"></i>
</a></button>
<button class="button" id="facebook-button"><a title="Share this quote!" target="_blank">share
<i class="fa fa-facebook"></i>
</a></button>
</div>
</div>
SCSS
.quote-box {
text-align: center;
position: relative;
border-radius: 4.5px;
border: solid black 1px;
display: table;
width: 50%;
height: 500px;
padding: 10%;
margin: 10% auto auto auto; /* center the box */
}
.quote-box .buttons .button#twitter-button, .quote-box .buttons .button#facebook-button {
top: 0;
left:0;
position:absolute;/* out of the document flow and you can move*/
float: left;
margin: 1%;
padding: 1%;
display: inline-block;
}
JsFiddle JsFiddle
So how do I position or design my buttons inside the positioned relative box? Should I just position theme absolute one by one? I think it's unprofessional and I want to look at my code at its best? i used z-index on them but they are still overlapping.
If you have a container called "Buttons", make this absolute, and leave your button elements with default position. Also, if you have class "button", you don't need to make 2 secuences like #twitter.button, #facebook.twitter.
Fiddle
.buttons{
position:absolute;
}
Remove the position:absolute and use float for the buttons.
the CSS
button {float:left;}
Also, z-index determines which elements show on-top of others. So in this case z-index would choose which button to show on top of the other.
You have your buttons inside the div with class "buttons", but that div doesn't have any height or width because the buttons have absolute position.
Therefore, each button is placed relative to the "buttons" div at (0,0).
Move the buttons out of the container or give the container some width and height.
I am making an list of products in a shop website using asp.net and html.
my Items are showing up alright, But i don't like the look of the button being misaligned depending on the prodcut name length.
i am trying to keep the details button fixed at the bottom regardless, like the box like it is on product 1,3 , and 5.
The other products' names push the text down.
these are my css in question.
#GameCatalogue
{
list-style-type:none;
}
#GameCatalogue li {
/* http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
width: 200px;
min-height: 320px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
border-radius: 7px;
}
.detailsButtom{
position: relative;
top: 25px;
/* i tried, vertical-height, alignment, position fixed, absolute, messed around with z-index, as well as moving the items in different locations through my li containter.
}
and this is my output html (for 1 item)
<li>
<div class="img">
<img alt="" src="../Images/mariou.jpg" id="Graphic1">
</div>
<div class="info">
<h3 id="Name" 1'="">SuperMario U</h3>
<p id="Descr1" data-description="Super Mario u is the latest installment of the classic mario franchise. up to 5 players simultaniously can traverse a vast world spanning over 90 unique levels.">
Super Mario u is the...</p>
<div class="price"><span class="st">Our Price:</span>
<strong id="price1">$45.99</strong>
</div><div class="actions">Details</div></div></li>
To start with, please notice that the CSS code you've posted doesn't fully match the DOM that you've posted (in the DOM you have no element with the detailsButtom class).
To achieve what you want, you need to set position: absolute for the element you want to "stick" to the bottom.
Then you need to set its container's position to be position: relative. Now you can set the coordinates of the inner element as you wish (with these attributes: left, top, right, bottom).
So, set the .detailsButtom (Should be written bottom) class likewise:
.detailsButtom {
position: absolute;
bottom: 10px;
left: 0; /* You can change these values */
}
and set the container's class to be (I assume it's the li in your CSS):
#GameCatalogue li {
position: relative;
}
Further Reading
CSS Tricks - Absolute Positioning Inside Relative Positioning
Learn CSS Positioning in Ten Steps
Use position:relative for parent elements and use position:absolute for children elemenst that we want change positioning manually. When we use the position attribute, we must be sure that uses one of these groups:
top, left attribute
top, right attribute
bottom, left attribute
bottom, right attribute
Please do not use (top, bottom) and (right, left) attribute simultaneously.
I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing