This should be fairly simple but for some reason I can't get my "footer" div to be placed at the bottom of the "container" div. This pertains to the master page format so if I adjust it to look good on one page it won't on another. Can someone take a quick look and help me out?
#container {
background-color: #fafafa;
height: auto;
width: 1112px;
margin: 0 auto 0 auto;
position: relative;
}
#footer {
background-color: #fafafa;
width: 1112px;
height: 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
bottom: 0;
}
#ftr-nav {
position: absolute;
bottom: 0;
right: 0;
float: right;
padding: 15px 30px 0 0;
}
.ftr-link-home {
font: 9px #0094ff;
}
.ftr-link-admin {
font: 9px #0094ff;
}
#copy {
float: right;
padding: 0 15px 0 0;
font-size: small;
position: absolute;
right: 115px;
bottom: 0;
}
http://jsfiddle.net/Develop_er/c32Mm/2/
Add this:
html,body
{
height: 100%;
}
#container {
background-color: #fafafa;
height: 100%; /* <--- */
width: 1112px;
margin: 0 auto 0 auto;
position: relative;
}
FIDDLE
Yes. Adding height to the #container places everything right.
Related
How would I get it to work with added borders?
Left side is 21px right side is 14px.
What would I need to adjust in the code?
.tcell {
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
Code
https://jsfiddle.net/udsav90r/2/
Full Code:
html,
body {
height: 100%;
background: #000000;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
padding: 0 20px;
}
.video-wrapper {
min-width: 40%;
max-width: 789px;
margin: auto;
}
.ratio-keeper {
position: relative;
padding-top: 56.25%;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video {
border-radius: 25px;
border: 3px solid green;
}
I am having the following error when using
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: 100%;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
}
the issue is that the orange panels goes outside the screen. How can I fix this?Don't want to use fixed widths as it should be responsive
with width: inherit; to the orange block my example is working
body {
background-color: #ccc;
}
.container {
position: relative;
width: 300px;
background-color: #fff;
overflow: hidden;
padding: 50px 15px;
}
.high-secuity {
position: fixed;
top: 0;
background: #ff782f;
color: #fff;
width: inherit;
border-radius: 0;
margin-bottom: 0;
margin-left: -15px;
padding: 15px;
}
<div class="container">
<h1>Osloskolen</h1>
<div class="high-secuity">Your message</div>
</div>
I'm trying to achieve headings with border that expands outside of viewport on one side, just like on the picture below.
I've managed to code the one that is aligned to the left and border expands to the left side using code like this:
.wrapper {
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
padding: 1.5rem;
}
h2 {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0rem;
right: 9598.5rem;
background: transparent;
border:2px solid #000;
}
h2.right {
font-size: 2em; /* 32/16 */
font-weight: 200;
color: #000;
text-align: right;
position: relative;
margin: 0 -9600rem;
padding: 1.2rem 9600rem;
background: transparent;
z-index: 0;
display:block;
max-width:660px;
}
h2.right::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 9598.5rem;
right: 0rem;
background: transparent;
border:2px solid #000;
}
<section>
<div class="wrapper">
<h2>s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
<h2 class="right">s každou nehnuteľnosťou možno pohnúť najmä vo váš prospech</h2>
</div>
</section>
HTML:
CSS:
Problem is with the text that is supposed to be aligned to the right of the wrapper and expand the border to the right. My results so far look like this:
The text still begins on the left edge of the wrapper and is not 660px from the right edge of the wrapper as it is supposed to be. Any idea how to fix this? I've tried playing around with multiple variables but nothing worked.
I have played around a little with it in a fiddle: https://jsfiddle.net/38t1286m/
EDIT: I played with it some more... https://jsfiddle.net/38t1286m/4/ ;)
Basically I have simplified it, so that the HTML looks like this:
<header>
<h2>
This is my LEFT side header
</h2>
</header>
<p>
Here is some text in between...
</p>
<header class="right">
<h2>
This is my RIGHT side header
</h2>
</header>
And with the following css:
p {
width: 660px;
margin-right: auto;
margin-left: auto;
}
h2 {
border: 1px solid black;
max-width: 660px;
margin: 0;
margin-left: auto;
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
header {
position: relative;
max-width: 660px;
padding: 0;
margin: 0;
margin-right: auto;
margin-left: auto;
}
header:before {
content: " ";
width: 660px;
border: 1px solid red;
position: absolute;
left: -660px;
right: -660px;
overflow: hidden;
top: 0;
bottom: 0;
}
header.right {
text-align: right;
}
header.right:before {
left: 660px;
right: 660px;
}
That's at least how I think I would solve it. :)
You could float the second heading to the right, and then clear it using :after
h2.right {
text-align: right;
background: transparent;
z-index: 0;
float: right;
}
h2.right::after {
content: '';
clear: both;
}
codepen
<meta name="viewport" content="width=min-width, initial-scale=1.0">
#media (max-width: 455px) and (orientation: portrait) {
#border-search {
display: none;
}
#n-recentchanges {
visibility: hidden;
}
#n-randompage {
display: none;
}
/*sidebar appearance*/
#column-one {
background: none repeat scroll 0 0 #5B5B5B;
float: left;
text-align: center;
margin: 0 0 0 1%;
min-height: 149px;
padding: 10px 20px;
position: absolute;
font-size: 90%;
top: 5px;
height: 1px;
left: 6%;
width: 15%;
}
#n-home {
position: relative;
top: 0px;
left: -8px;
}
#n-sign-up {
position: relative;
top: 5px;
left: 0px;
}
#n-help {
position: relative;
top: 13px;
left: -4px;
}
#n-add-pix {
position: relative;
top: 19px;
left: 0px;
}
#column-content {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
margin: 0 1%;
padding: 10px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
#button .hidetext {
background: none repeat scroll 0 0 #5B5B5B;
display: block;
color: #99D9EA;
margin: 0 1%;
position: relative;
float: right;
border: 0px;
top: 95px;
left: 53%;
}
#ca-edit {
position: relative
}
/*edit page nav*/
.top_header {
background: none repeat scroll 0 0 #5B5B5B;
display: none;
float: right;
margin: 0 1% 40px;
padding: 30px 10px;
width: 60%;
height: 60px;
position: relative;
top: -370px;
left: -10%;
}
#p-cactions {
float: left;
display: none;
}
#p-cactions li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 35px 0 0;
text-align: left;
position: relative;
left: 10%;
}
#p-personal {
float: left;
display: none;
}
.top_header ul {
margin: 0;
padding: 0;
}
#p-cactions {
float: left;
}
#p-personal li {
float: none;
font-size: 22px;
list-style: outside none none;
margin: 0 15px 0 0;
}
#column-content #bodyContent {
color: #7b377b;
float: left;
font-size: 115%;
margin: 15px 0 15px 50px;
width: 94%;
}
#column-one h3 {
display: none;
}
#column-one ul {
margin: 0;
}
.mw-ui-vform-field {
width: 70%;
}
/*control font size*/
#column-one li {
font-size: 18px;
list-style: outside none none;
margin: 1px 0;
text-align: center;
}
/*control special page layout*/
.mw-ui-input {
width:80%;
}
#wpLoginAttempt {
width: 70%;
}
.mw-submit {
width:70%;
}
/*control search input text color and font*/
#searchInput {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 4px solid #000000;
box-shadow: none;
position: relative;
top: -60px;
text-align: center;
left: 400%;
float: right;
color: #99D9EA;
padding: 8px;
width: 92px;
z-index: 3;
}
.rectangle-box {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: block;
margin: 0 1% 40px;
position: relative;
width: 60%;
height: 130px;
left: 0%;
top: 35px;
}
.rectangle-box2 {
background: none repeat scroll 0 0 #5B5B5B;
float: right;
display: none;
margin: 0 1% 0 40px;
height: 400px;
width: 70%;
position: relative;
top: 0px;
left: -10%;
}
}
The media query I'm using only seems to be recognized by Chrome and Opera. I'm trying to get my site to resize with this media query, but when I change the browser window to that size the query doesn't take effect. What can I do to fix this? Is there a problem with my code? What could cause this to happen only in certain browsers?
Change viewport
<meta name="viewport" content="width=device-width">
As far as I have worked with media queries, I never used an and. And I'm sure the problem is caused by it. Remove it, and make it like this:
#media (min-width: 368px) {...}
The and will not come between #media and (min-width: 368px), but it will come between the two ()s ie:
#media (min-width: 368px) and (orientation: landscape) {...}
Edit:
I'm currently on mobile so sorry I can't test code. But I think the correct query is max-width, not min-width. So just replace min-width with max-width.
Mustaghees is correct. Remove that first "and".
Here's how it would look if you had an arbitrary background-color change when the browser size reaches min-width:368px:
http://codepen.io/sabaeus/pen/ZGOpPB?editors=110
The issue was fixed by changing the order of the media queries. They were blued out before in my coding panel. this went away by cutting and pasting the queries in a different order. Now the queries work in all browsers.
I try to have horizontal div to fill all the empty space of a container.
I didn't succeed to make the middle div (.element-description) to fill all empty gap (like in height: auto). (all other div have a defined height)
I tried with display:table, it near works but create some display bug in IE9.
I tried with css calc but it's not cross browser and it didn't solved all the problem.
I really don't know what to do. Maybe it's impossible in css?
css:
.element{
position: absolute;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: 500px;
background: grey;
}
.element-back {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.title {
position: relative;
overflow: hidden;
width: 100%;
height: 40px;
border: 1px solid black;
box-sizing: border-box;
line-height: 40px;
}
.element-title-separator {
position: relative;
overflow: hidden;
height: 2px;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);
}
.element-image {
position: relative;
overflow: hidden;
min-width: 100%;
height: 14.5%;
opacity: 0.8;
}
.element-image img{
position: absolute;
width: 100%;
height: auto;
margin-top: -30%;
}
.element-description {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.element-description > div{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.element.blog .element-description > div > div{
overflow: hidden;
position: absolute;
height:100%;
}
.element-read-more {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
.element-informations {
position: relative;
overflow: hidden;
min-width: 100%;
min-height: 40px;
}
fiddle without table
fiddle with display table
hope that someone can help me...
Why do you need to set position: absolute to the .element? Can't you set it to relative and use height: auto?
Is this what you're trying?
http://jsfiddle.net/jonigiuro/UuFSg/262/
.element{
position: relative;
overflow: hidden;
z-index: 100;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400px;
height: auto;
background: grey;
}
The fixed value here must be the header and footer height, and you need to set the top and bottom of your content section whit the same value of footer and header height plus the value of the border-width here (100px + 5px).
I hope it help
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:gray;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
.box{
border: 5px solid green;
}
#container{
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
min-width: 60%;
min-height: 400px;
width: 1024px;
height: 100%;
margin-left: auto;
margin-right: auto;
border: none;
bor
}
/** Test html classic page */
#header{
display:block;
overflow: visible;
width: auto;
height: 100px;
margin: 0; padding: 0;
}
#content{
position: absolute;
/** The border over lap so 5px must be add*/
top: 105px; bottom: 105px;
right: 0; left: 0;
}
#footer{
position: absolute;
overflow: visible;
height: 100px;
right: 0; left: 0; bottom: 0;
margin: 0; padding: 0;
}