I have this weirdest problem that i can't solve for the second day :((
As you can see I have html and body, with height:100%, which has two children with min-height:100% (height or min-height doesn't matter right now);
Not only that doesn't work for my sidebar, the Body itself doesn't render to 100% height (as can be seen on the second screenshot).
but what really blows my mind here is that adding top:0; bottom:0; to the sidebar still doesn't stretch it,
and absolutely positioned elements are not even supposed to relate on the document flow!!! :-o
Things like this usually happen because i missed some tiny, obvious thing; I can think of at least two ways to reach the desired effect ignoring this problem, but i just need to understand what's going - what am i missing?
// Of course I tried to disable all the scripts, normalizers and other stuff - no result...
in case you need to know the #PageWrap properties:
#PageWrap {
max-width: 1400px; min-width: 835px; height: 100%;
padding: 19px 0 0 21px; margin-left: 200px;
background: linear-gradient(to right, rgba(52, 49, 221, 0.2) 0%, rgba(25, 28, 37, 0.2) 100%),
url("../img/BG_Z.png");
background-position-x: 0px, 309px;
background-size: 300px 100%, 928px 1061px;
background-repeat: no-repeat;
background-attachment: fixed;
}
Would background-size: 300px 100%, 928px 1061px; be causing the problem? try taking out 928px 1061px and see if that works
Related
I encountered such a problem, static files (pictures) are not loading in my Django project.
The most amazing thing is that I did not change anything, just yesterday, everything worked, and today the pictures are refusing to load.
If I follow a direct link to an object, the picture is and opens. However, if you register it in a CSS file, the path to the image is crossed out, and the inscription in the browser debugger "invalid property value"
This is weird, but it works. Maybe someone will be useful. The graphic files that were the background were not loaded.
The background was assigned through CSS according to this principle:
#showcase-inner {
background: url(../img/flowers.jpg) no-repeat top center fixed/cover;
position: relative;
overflow: hidden;
min-height: 350px; }
I repeat. Previously, everything worked, at what point everything went wrong, I did not follow. But when I changed CSS, the graphics started loading:
#showcase-inner {
background-size: cover cover;
background-repeat: no-repeat;
background-position: top center;
background-image: url(../img/building.jpg);
background-attachment: fixed;
position: relative;
overflow: hidden;
min-height: 350px; }
I was trying to build myself a portfolio site. When I thought I was about to finish building the basic template, the margin and media queries stuff totally drove me crazy.
Here is my temporarily hosted domain, www.kenlyxu.com/portfolio_new
I made the pages fit to whatever browser size by using
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
I'm trying to make 10px margin on all side and on every page so that I use this container.
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 100%;
width: 100%;
}
#workcontainer {
margin: 10px;
background-color: #f29e28;
width: 100%;
}
I hope the end result would be like orange background with white margins on all sides. When seeing my site on the desktop, the margin-right and margin-bottom not showing. They only show when I use width: 98.5%;
Also, the orange background color should expand according to the size of browser. On the iPhone 5 portrait view, the orange background does not extent the bottom part. I tried to use some standard media queries for it, but I don't know what values should I give to each of the mobile devices.
Try
Position:fixed;
in
# thethecontainer
now your code looks like
#thecontainer {
margin: 10px;
background-color: #f29e28;
height: 98%;
position:fixed;
width: 98.5%;
}
If I set the size of a child element in percentage, the size will be calculated relative to parent's content-box, independently from the fact that I have set its box-sizing property to border-box.
So if I have something like this:
.parent {
box-sizing: border-box;
padding: 0 100px;
width: 600px;
}
.child {
width: 50%;
}
The width of .child will be 50% of 400px (parent's width after padding has been applied). You can see an example here: JSBin
Main Question
Is there a way to make the width of a child element relative to the
parent's border-box rather than the parent's content-box?
Bonus question
While making my example I noticed a weird behavior in the calculation of the size. Setting the .parent's padding as 0 10% actually gives a padding of 68-odd pixels from each side. Why is that? Isn't 10% of 600px 60px or I am missing something?
The width property is explicitly defined as being relative to the content box and box-sizing on the parent doesn't alter this however there is a trick available. What you need is a border that doesn't consume any space and thankfully that is exactly what the outline property does.
There is one catch: The outline defaults to being outside the content box. Not to worry though because one of outline's related properties outline-offset accepts negative values which will bring our outline inside our content box!
HTML
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="outer">
<div class="inner">
TEST
</div>
</div>
</body>
</html>
CSS
.outer {
position: relative;
width: 100px;
height: 100px;
outline:20px solid red;
border:1px solid black;
outline-offset: -20px;
}
.inner {
width: 50%;
height: 100%;
outline:1px solid yellow;
position: absolute; /* required so inner is drawn _above_ the outer outline */
background-color: blue;
}
JS Bin: http://jsbin.com/efUBOsU/1/
With regards to your "bonus question" percentage widths are based on the container size, not the element size. This is true for width, padding and margin. You're getting a padding of 68px because the container is is 680px. This may seem odd but it comes in very handy when you have a rule like {width: 80%; padding: 10%;} because it guarantees your total object dimensions will be 100% of the container and not some arbitrary value based on your child elements' content.
Note: In future please ask additional questions seperately, especially when they are only marginally related to your primary question.
Sorry to bother with such a beginner's question but I simply can't get this 100% height thing to work. Here is the situation (sorry, developing locally so no link):
I have a wrapping container that contains two floating elements. I followed all steps that might resolve the 100% issue, such as:
html, body {
height: 100%;
background: url(../img/bg.png);
font-family: 'SansationRegular', Helvetica;
}
.wrap {
width: 100%;
height: 100%;
height: auto !important; (apparently this fixes the issue in Chrome)
margin:40px 0px 0px 0px;
padding:0;
}
Both floating div's (sidebar and content) have height: 100% and I also added a third div container to clear the floating elements.
Still, when I add content to the content div the sidebar does not "grow" automatically. I feel I tried everything but it won't work.
Any ideas/hints are highly appreciated at this point! :)
Many thanks in advance!
P.S. I use Twitter Bootstrap as well in case that helps to solve my problem
Here's a basic example which shows how to do what you're trying to do. You should be able to take this code and adapt it to your own code.
http://jsfiddle.net/QXZuy/1/
<div class="wrap">
<div class="sidebar"></div>
<div class="content"></div>
</div>
html, body {
height:100%;
}
.wrap {
height:100%;
width:100%;
display:table;
overflow:auto;
background:#ccc;
}
.sidebar {
display:table-cell;
width:25%;
background-color:blue;
}
.content {
display:table-cell;
width:75%;
background-color:red;
}
i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)
Picture:
here is my code for how it looks atm:
.jq_thumbnails {
background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
overflow: auto;
height: 100%;
}
Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?
You can leverage CSS3 Multiple Background Images:
.jq_thumbnails {
background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
background-position: 0 0, 0 bottom;
}
Set the background-repeat property to suit your particular scenario:
background-repeat: repeat-x, repeat-x;
This is supported in all current versions of the major browsers:
Of course you can make an outer div and an inner one that covers the background, so you can repeat-y the background ;)