If you go to my Website that i am working on:
http://lastdeath.de/kaufmannmike/wallpaper.html
You can see 2 images (img) both inside 2 different div elements.
Something is weird there. The images have 5 bottom pixels, even if I
don't set it anyways. I've just put an img element in a class="content" and then in div id="breaker/boxer" , nothing really complicated.
But the code just don't want to work.
i can make a line code of an img, then there are no problems with these 5 pixels on the bottom. But i need to put the img in a div container.
Code:
body {
background-color: #fafafa;
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
padding-top: 80px;
}
img {
height: 100%;
width: 100%;
}
<div class="content">
<div max-height="480px" id="breaker">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg">
</div>
<div id="boxer">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg">
</div>
</div>
How to fix this?
just set your img to display:block
why? because default value of img is display:inline
so instead of this:
img {
height: 100%;
width: 100%;
}
you should have this:
img {
display:block;
height: 100%;
width: 100%;
}
Here is a working snippet based on your code taken from your site:
body {
background-color: #fafafa;
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
padding-top: 80px;
}
img {
display:block;
height: 100%;
width: 100%;
}
<div class="content">
<div max-height="480px" id="breaker">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/breaker-wallpaper_long.jpg">
</div>
<div id="boxer">
<img src="http://lastdeath.de/kaufmannmike/img/2_work/wallpaper/boxer-wallpaper_long.jpg">
</div>
</div>
Related
I'm looking to build a gantt chart with the days, months and years across the top and the tasks below them.
Here is what I have so far:
So in the image above, the scroll-x is working on everything including the blue, red and yellow divs and the grey div below them. This is to ensure that as you scroll across, the days stay with the contents of the grey div. scroll-y is only acting on the grey div with the blue campaign name div in it.
Here is the problem:
The problem is that when you move the scroll-x of parent, the scroll-y moves across the screen (so that it is sitting in the middle of the parent div). What I'm looking to do is have the scroll-x work on all of the parent's content and the scroll-y only work on the grey div but for the scroll bar to stay on the far right of the parent.
Any advice would be really appreciated and thanks in advance.
css:
.container {
position: relative;
}
.parent {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
width: 100%;
position: absolute;
}
.date {
width: 2000px;
height: 25px;
float: left;
}
.hold_content {
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 50px)
}
.content {
height: 2000px;
width: 2000px;
float:left;
}
html
<div class="container">
<div class="parent">
<div class="date"></div>
<div class="date"></div>
<div class="date"></div>
<div class="hold_content">
<div class="content"></div>
</div>
</div>
</div>
So, the scrollbar is relative to whatever it's scrolling, which, here, is the hold-content div. And, unfortunately, when that's set to its full width of 2000px, that means the scroll-y scrollbar is not visible because it's offscreen, like so:
html {
box-sizing: border-box;
font-family: sans-serif;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body,
.container,
.parent {
height: 100vh;
}
html,
body,
div {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.parent {
overflow-y: hidden;
}
.date {
height: 25px;
width: 2000px;
}
.date:nth-of-type(1) {
background: blue;
}
.date:nth-of-type(2) {
background: red;
}
.date:nth-of-type(3) {
background: yellow;
}
.hold_content {
background: silver;
height: calc(100vh - 75px);
overflow: scroll;
width: 2000px;
}
.content {
height: 2000px;
text-align: center;
width: 2000px;
}
<div class="container">
<div class="parent">
<div class="date">Year</div>
<div class="date">Month</div>
<div class="date">Date</div>
<div class="hold_content">
<div class="content">
<button>Campaign Name</button>
</div>
</div>
</div>
</div>
Not sure if that's ideal or what you were going for. If you want the scrollbar to always be connected to the window (as it is by default), you're probably better off not scrolling these individual divs and instead using position:fixed on your date divs.
Note that this solution uses both viewport units (http://caniuse.com/#feat=viewport-units) and calc (http://caniuse.com/#feat=calc). Also, my code doesn't perfectly mirror your CSS because the code you provided didn't match up with your screenshots.
I am trying to build an overlay (mouseover) on a image with dynamic height:
<div id="one-third">
<div class="over_menu">Text</div>
<div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>
CSS
.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }
Unfortunately the height of "over_menu" is too large, it shows until the whole rest of the page. How else can I fix this?
Give position: relative; to the parent, so that its boundaries are within it:
.one-third { width: 33.3333%; position: relative; }
You should move the over_menu to inside menu_bg
<div id="one-third">
<div class="menu_bg">
<div class="over_menu">Text</div>
<img src="one.jpg" class="resp-img">
</div>
</div>
Of course you should change your :hover condition as well. It would be helpful if you could add a JSFiddle to your question.
I have a div that should always be in the center of the browser. now there's an image that will always be in the middle of the browser. but problem is that a div is 960px wide and but the picture is 1263px. how do I solve the problem? what I still need is dead as soon as the browser window smaller, should come scrollbars only at 960px. I know that I could theoretically solve anything, if I image Tell css as a background-image integrate the. but that does not work, unfortunately, because I really need the img tag
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
http://jsfiddle.net/UcLnD/
Try with this:
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.header-bottom-wrapper{
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {
margin-left: -152px;
}
Im not sure what you mean by not using Css for your fix. But does the image need to stay the same size? If you want the image to resize based upon browersize add this to your Css:
.header-bottom-wrapper img {width:100%;}
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {width:100%;}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
you can use negative margin to virtually reduce space needed by image.
<div class="clipimg">
<img src="imagetoowide-1000px" />
</div>
.clipimg {
width:500px;
text-align:center;
}
clipimg img {
margin:0 -50%;
}
Tune negative margin for both right/left and text-align.
Example here centers image and clips sides
examples : http://codepen.io/gc-nomade/pen/hjyEv/
I can't make my .content-panel and #panel-design float on the right of the .content because of the header design img #searchbar-container.
I already tried using z-index with different values.
I want to place .content-panel and #panel-design on the right side of the .content while having #searchbar-container above the divs
<body>
<div class="header">
<img id="searchbar-container" src="images/searchbar1.png">
</div>
<div class="content">
<div class="sidebar"></div>
<div class="content-panel">
<div id="panel-design"></div>
<!--main content here-->
</div>
</div>
</body>
the css:
.content {
position: relative;
max-width: #width;
height: 768px;;
margin: 0 auto;
padding: 0;
}
.content-panel {
position: absolute;
float: right;
margin: 0;
padding: 0;
width: 753px;
height: 100%;
background-color: blue;
z-index: -2;
}
#panel-design{
float: right;
width: 685px;
height: 375px;
background-color: red;
z-index: -1;
}
.sidebar{
width: 285px;
height: 100%;
margin: 0;
padding: 0;
}
Can't post the whole thing. But this is what I need to achieve, basically the gray image above is the #searchbar-container and the picture of Depp is the #panel-design in front of the .content-panel.
So far this is what my page looks like:
the blue div is the .content-panel
the red div is the #panel-design
the gray img above is the #searchbar-container
.content doesn't have a background color but its size is pass the curve of #searchbar-container
So what I understand from you question is that, you want #searchbar-container to overlap your #panel-design.
one way of doing it would be to make .header div fixed, but you might not want that because then it becomes independent of the scroll.
Another way I came up with uses absolute position you can see the fiddle here
i have an absolute div inside a relative div and i want to make it of a fixed dimension. my problem is that the height is ignored.
this is my html structure:
<div id="wrap">
<div>
<h1>test</h1>
</div>
<div id="swipe">
<br/>
</div>
</div>
and this is my css:
body {
background-color: #7ECEFD;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
margin: auto;
overflow: hidden;
position: relative;
}
#swipe {
background-color: white;
position: absolute;
top:0;
left:10px;
width:100%;
height: 500px;
}
why? how can i resolve it with css? any other trick (jquery)?
http://jsfiddle.net/nkint/XQzJf/
It is 500px high, but most of it is hidden due to the overflow: hidden on #wrap. You need to either remove that or make it big enough to contain #swipe.
html, body, #wrap {
height: 100%;
}