i have this page: http://www.nyccriminallawyer.com/felonymisdemeanor/
what i want to do is make the left inner box (the white one with Felony/Misdemeanor as title called .in_left) to be of 100% height of its parent (called .inner)
codes are here:
.in_left {
float: left;
width: 721px;
margin-top: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 24px;
background-color: white;
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 0px 11px -4px #000;
}
.inner {
background: #CCD7CC;
margin-top: 1px;
color: #5A5A5A;
padding: 10px;
clear: both;
overflow: hidden;
}
i have tried height: 100% and min-height as well, but it doesn't work.
Don't use float on .in_left and .in_right, use display:table-cell; on those and, most importantly, use display:table; on their container:
.inner {
display: table;
}
.in_left {
width: 229px;
/* other style */
display: table-cell;
}
.in_left {
width: 721px;
/* other style */
display: table-cell;
}
You cannot extend a child to be 100% the height of its parent, but you can make it look like it extends using the Faux Columns technique.
Setting the height of an element 100% only works if the parent elements height is somehow fixed (like height: 300px). But you can set the child element absolutely positioned (to its immediate parent) and set it's position in four directions:
.in_left {
...
position: relative;
}
.inner {
...
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Demo here: http://jsbin.com/OkIQUCi/1/
Related
I am making a website for my college course and I am having problems getting the button heights in my slide show to match up. I was wondering if anyone could give me a clue as to how to get them both to be at the same height?
This is my css for the slide show:
/=== SLIDESHOW SECTION ===/
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
position: relative;
}
#container > img
{
width: 100%;
height: 100%;
position: absolute;
}
#container > .btn
{
position: absolute;
width: 50px;
height: 50px;
border: none;
border-radius: 25px;
top: 350px;
background: #000000;
color: #ffffff;
font-size: 20px;
}
#container>#btn1:hover
{
box-shadow: 10px 0px 20px 0px #343d46 ;
}
#container>#btn2:hover
{
box-shadow: -10px 0px 20px 0px #343d46;
}
#container>#btn2
{
position: relative;
float: right;
}
picture of the problem
change your
#container>#btn2
{
position: relative;
float: right;
}
to
#container>#btn2
{
right:0;
}
Try adding this before #container>#btn2:
#container>#btn1
{
position: relative;
float: left;
}
Absolute positioning generally shouldn't be applied to classes (multiple elements).
I would remove the absolute positioning on your .btns and use flexbox on your container, like so:-
#container
{
width: 90%;
height: 700px;
border: none;
margin: 0 auto;
display: flex; /* adds flexbox to container */
align-items: center; /* vertically aligns everything in container */
justify-content: space-between; /* spaces the buttons as far away `enter code here`from each other as possible */
}
You can then add padding to your container for finer adjustments of your buttons horizontal distance from the container edge.
I'm trying to set the margins to a text, however margin-right doesn't seem to work inside message.
Why?
css:
message
{
position: fixed;
display: block;
margin-bottom: 0px;
width: 100%;
height: 40px;
background-color: rgba(26, 119, 212, 100);
line-height: 40px;
font-style: italic;
text-align: left;
overflow: hidden;
}
.messageotext
{
width: 100%;
margin-right: 0px;
}
html:
<message><span class="messageotext">prova</span></message>
I want the text to be out the screen so I can translate it by scripting language from right to left.
You have given width:100% and the parent is fixed so it will not effect
If you remove your width:100% of span you will see margin-right
so you can add text-align:right to parent which will show the effect of margin-right or you can also use float:right
Demo - fiddle
Removed browser default styles by adding
*{
margin:0;
padding:0;
}
* {
margin: 0;
padding: 0;
}
message {
position: fixed;
display: block;
margin-bottom: 0px;
width: 100%;
height: 40px;
background-color: rgba(26, 119, 212, 100);
line-height: 40px;
font-style: italic;
text-align: left;
overflow: hidden;
text-align: right;
}
.messageotext {
/* width: 100%;*/
margin-right: 100px;
}
<message><span class="messageotext">prova</span>
</message>
You can modify your class messageotext with the following code:
.messageotext {
width: 100%;
position: absolute;
left: 100%;
}
Then you can decrease the value of left property to translate it from right to left.
Try using float:right
or you can also use only right:0px if position is absolute
What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:
http://jsfiddle.net/cR9NL/
what positions should I use in this situation: absolute or relative?
html code is still the same, below is my css for you and demo:
CSS
html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; }
#container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
#container div {
height: 25%;
width: 15%;
text-align: center;
}
#container>div:hover {
height: 100%;
width: 100%;
text-align: center;
position: absolute;
z-index: 5;
}
#upper-left{
background: #77cc00;
float: left;
border: solid 3px #99ee22;
}
#upper-right{
background: #ffdd22;
float: right;
border: solid 3px #ffff44;
}
#lower-right {
position: absolute;
bottom:0;
right: 0;
background: #55bbff;
border: solid 3px #77ddff;
}
#lower-left{
position: absolute;
bottom: 0;
left: 0;
background: #ff5522;
border: solid 3px #ff7744;
}
#container>div>p {
font-family: Tahoma;
margin: 28% auto;
font-weight: 900;
color: white;
font-size: 30px;
}
DEMO
http://jsfiddle.net/bartekbielawa/cR9NL/2/
Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.
Fiddle :) :
position:absolute;
bottom:0;
right:0;
http://jsfiddle.net/cR9NL/1/
After I did some changes, my feedback div no longer centers on screen and I can't figure out why.
To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.
The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:
http://jsfiddle.net/3u3fd/
Code:
#feedback {
position: fixed;
top: 0px;
min-height: 50px;
width: 300px;
margin: 10px auto;
z-index: 9000;
font-weight: bold;
line-height: 24px;
border: solid 1px #d1d2d1;
padding: 10px;
background-color: #f7f2e7;
display: none;
border-radius: 5px;
-moz-border-radius: 5px; /* FF < 4.0 */
-webkit-border-radius: 5px; /* Rounded corners for Safari */
}
#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>
Any help appreciated!
auto margins do not work on elements with position: fixed.
Instead, you need to do this:
left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;
Where X = Y/2.
(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)
You have a fixed position set. Get rid of it and it will center just fine.
In order for margin: 0 auto; to work, the parent element must have a specified width. It can be percentage or units, but it must have it.
For this solution to work in this case, you need to remove the position: fixed; and top declaraions and add a wrapping element.
http://jsfiddle.net/3u3fd/16/
I have something like this:
<section>
<h3>Header:</h3>
<p>My text which could span over several lines.</p>
</section>
section
{
background: #5E5E5E;
overflow:hidden;
}
h3
{
background: #B31B1B;
padding: 13px;
width: 174px;
float:left;
}
p
{
margin: 13px 13px 13px 213px;
}
I want the header background to extent to the bottom of the section but when the text in the <p> tag is more than a line it doesn't.
What can I do apart from using the faux columns technique?
You could absolutely position the <h3> instead of floating it. Something like this:
section {
background: #5E5E5E;
position: relative;
overflow: hidden;
}
h3 {
background: #B31B1B;
padding: 13px;
width: 174px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
p {
margin: 13px 13px 13px 213px;
}
Live example: http://jsfiddle.net/ambiguous/cZ3rh/
Absolutely positioning the <h3> can cause trouble if the <h3> ends up being taller than the <p> as absolutely positioned elements do not contribute to their parent's height:
http://jsfiddle.net/ambiguous/NQB4n/
I can't think of a decent solution for this case right now though.
Can you apply the background to the section instead of h3?
An alternative could be to move the background to the SECTION and P tags.
section {
background: #B31B1B;
overflow:hidden;
padding: 0;
}
h3 {
padding: 13px;
width: 174px;
float:left;
}
p {
margin: 0;
background: #5E5E5E;
padding: 13px;
margin-left: 213px;
}
http://jsfiddle.net/pEfGq/
give a try to min-height = 100% in h3!
just set height of the h3 element to 100%.
h3
{
background: #B31B1B;
padding: 13px;
width: 174px;
float:left;
height: 100%;
}