I have a grid with an image in a column of size small-12 and I want to add next to it on the right side an element, for example a div. The column must be of size small-12 so I can't set it to small-11 and add the div next to it with a size of small-1. How can I do this? Is this related to CSS pseudo elements or classes maybe?
I tried to place it with CSS and position: absolute; but it is not where I want it - like there is a minimum margin to top and side for elements so top: 0vh; won't work.
See this CodePen snippet: http://codepen.io/anon/pen/akwjgg
I'm not sure if using absolute position is good and also this breaks the responsiveness. Also the mail icon should be at top without margin-top as like as the small-12 column. So how to do it correctly?
Please reply with a way without using SASS because I'm using an online CDN where I can't control the variables.
You can set the row's style (Or in your example's case, the div with the ID '#big_column' to have position:relative; instead of position:initial; - This will allow elements within it to utilize its location and boxmodel properties for determining their own position if they're set to position:absolute;
see updated codepen:
http://codepen.io/anon/pen/JKJabd?editors=1100
relevant CSS:
#big_column {
background-color: #ccc;
position:relative; /* Position:absolute... */
height:3em; /* ... elements inside will use the...*/
padding:1em; /* ... lowest ascendant element set to Position:relative; */
}
#mail {
display:inline-block;
right:1%;
bottom:-0.25em;
position:absolute; /* Uses #big_column's box-model properties (like dimensions, location, etc. to define the appropriate/relevant properties of its own */
}
Related
I need to change the container padding. Particularly the width. I tried to find the code in style.css and found this code.
.center{ width:85%; margin:0 auto;}
I adjusted the width to 100% but it took the logo and the menu bar to the left side with itself.
I am searching for the solution to this. Also I want to apply this css code to only one page.
If you're changing the width, you're going to change how that element interacts with other elements, so changing the width is a bad idea.
You should stick to just changing the padding.
.center {
width: 85%;
margin: 0 auto;
padding: 10px; //insert whatever padding you want here
}
If this is affecting the width of the element, then try applying:
.center {
//your existing css for this selector, then:
box-sizing: border-box;
}
If you want to apply this change to one page only, your best bet is probably to add a class to the html element that you're trying to modify and target that class with your new padding.
I'm working on a grid and I am trying to figure out how to make two divs, which are display:inline-block match each other in height. Is this possible using just CSS?
For example see this JS Fiddle here. The green area I would like to be 100% of it's container, so that it matches the left container.
http://jsfiddle.net/franhaselden/kqtLkkz6/
The divs use the following grid CSS:
.grid {
vertical-align:top;
font-size:0;
box-sizing:border-box;
display:inline-block;
font-size:0%;
}
.grid.golden-small {
width:61.8%;
}
.grid.golden-large {
width:38.2%;
}
I tried explicitly stating the height of the parent container, by doing height:auto so that it would fit to the content inside it, but this didn't seem to work. See my second example here:
section {
height:auto; /* and added this */
}
.featured-post .featured-text {
height:100%; /* added this */
}
http://jsfiddle.net/franhaselden/kqtLkkz6/1/
If I where you I would make a table instead. inline positioning is very difficult to use. I would try remake it by making a parent element that contains all the elements you want to stack inline to display:table; and the child elements to display:table-cell; play around with it is my advice
Take a look at this.
Set the display of your parent element to table, .featured-post {display: table;} and the display of the child elements to table-cell, .grid {display: table-cell;} I guess this is the easiest solution (you can check here) It will work at least that you set position:absolute but I don't think that's your case.
One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of.
I have background-image in parent element and 2 sub float elements. As above description says, its (parent element)height collapses to zero whenever it has only float elements. How can I fix it? I dont want to add height or any content to parent tag. I want height of parent element to auto-increase in accordance to content of floating elements? How can I achieve it?
you have different ways to manage floatting element and include them in the flow. Parents or aside elements needs their layout to be trigger in a way, it calculates room/space used by floatting elements.
here is a few ways that you can apply to your snippet :
/* different ways to play with layout */
.outerdiv:before { /* add classname in document to be abble to relat it to css rules applied , demo purpose */
content:attr(class);
position:absolute;
margin-top:-1.2em;
background:yellow;
}
.outerdiv { /* demo purpose , we stack them */
clear:both;
margin:1em auto;
}
/* here we go ========================================= */
.clearafter:after {
content:'';
display:block;
clear:both;
}
.displayib {display:inline-block;}
.displaytb {display:table;}
.overflowh {overflow:hidden;}
.overflowa {overflow:auto;}
.overflowv {overflow:visible;} /* defaut, doesn't trigger anything */
.float {float:left;}
http://jsfiddle.net/Xq2We/1/ you can see each possibilities and see what it involves as result.
To go further and understand better you can read this : http://css-tricks.com/all-about-floats/
add
#parent{
overflow:auto;
}
or clear floats using available techniques
I've been working on a webgl game and have full-screen toggle working for chrome and firefox. And I have been using dat.gui for a control input to this game. Which is based on jQuery-ui. In fact I can't get any child element to appear after fullscreen event has been fired. The behaviour is all the children get cleared,
:-webkit-full-screen {
top:0px;
position:absolute;
width: 100% !important;
background-color:red;
}
:-moz-full-screen body {
width: 100% !important;
background-color:red;
}
:full-screen body{
width: 100% !important;
background-color:red;
}
#navi {
position:relative;
right:10px;
top:10px;
}
And these elements are used, where the canvas is dynamically created and appended to thegameCanvasDiv. While the dat.gui is appended to 'navi'.
<div id="gameCanvasDiv"></div>
<div id ="vSlider0"></div>
<div id ="vSlider1"></div>
<div id ="hSlider0"></div>
<span id="navi" ></span>
Can I use the css to control the position a jQuery ui button after fullscreen?
I'm going round in circles here, so any suggests or insight would be very welcome.
You must make sure the elements you want to be visible is children of the gameCanvasDiv element (assuming that's the element you request full-screen mode at).
This means you need to put those sliders inside of that one. You can control their position using CSS as well as using JavaScript to set their position through their properties (ie. set a class when in full-screen, a different one when not - you'll get the idea).
By using z-index and absolute/fixed positions when full-screen can help you get them at top of the canvas element.
Be aware though that if you place elements on top of the canvas the performance of the canvas element is reduced.
I have one DIV, which changes height depending on data which a user enters into it. Once they are finished, they click a button and a second DIV appears below it with all the data displayed in a table.
The second DIV is always on the page, but it's opacity is set to 0.
As the first DIV can be anywhere from 100px to 1000px in height, how can I get the second DIV to always display directly below it? Ive been playing around with margins and paddings but I just can't get the second DIV to appear dynamically in the right spot.
Preferably using CSS if thats an option.
Thanks.
You have to make sure that the CSS position property is set to relative in your divs. Something like:
HTML:
<div class="user_input_data"></div>
<div class="results hidden"></div>
CSS:
div.user_input_data
{
position: relative;
}
div.results
{
position: relative;
}
div.hidden
{
display: none;
}
div.block
{
display: block;
}
Then you'd have to remove hidden class and add block class to show your results.
if div is a block (is default) it will show in bottom of first div
<div class="firstDiv"></div>
<div class="secondDiv"></div>
if you want second div overlap first div and move by scrolling you should use CSS position property
.secondDiv{
position:fixed;
right:0;
bottom:0;
}