I have a container with 3 divs inside. I'm making use of the full page. So I'm busy, all percentage, and when I crop my screen, only the first div resizes.
Here's the code:
#topnews {
margin-left: 1%;
margin-top: 10px;
}
#topnews_bg {
background-color: #F4F4F4;
width: 30%;
height: 187px;
margin-top: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
overflow: hidden;
}
#container_djbanner {
height: 187px;
width:30%;
top:10px;
left: 31.7%;
position: absolute;
}
#container_login {
float: right;
margin-right: 1%;
height: 187px;
width: 31.7% !important;
margin-top: -187px;
background-color: green;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
<div id="topnews">
<div id="topnews_bg">
<div id="slider">
<div id="sliderContent">
<div class="sliderTopstory" style="background: url(assets/img/top3.png);height:187px;">
<div id="topnews_opacity">
<span id="topnews_info">
<b>3e bericht</b><br/>En dan hier weer iets :p
</span>
<a href="#">
<div id="topnews_button">Meer info!</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="container_djbanner">
<img src="assets/img/testdj.png" style="-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;" />
</div>
<div id="container_login">
ds
</div>
Why does only the first box resize?
The divs are resizing correctly, if the problem is that the image is not resizing you could fix it with this css:
#container_djbanner img{
max-width: 100%;
}
Check out this codepen.
*Avoid using inline css in your html (is not a good practice).
Related
This is my sample output, as you can see here that the image is half.
The second photo provided is the output i'm trying to achieve.
I don't know what seems to be the problem here, but when i remove the class, "carousel-inner" the image output is complete, but when i put it back, it shows only half image.
this is my html code and i'm using bootstrap 4
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
.customer-card-parent{
margin-top: 41px;
width: 100%;
max-width: 964px;
margin-left: auto;
margin-right: auto;
}
.customer-card{
width: 100%;
max-width: 290px;
padding: 39px 0px 35px 0px;
border-radius: 5px;
background: #fff;
}
.customer-img{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
max-width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 11px solid #fff;
background-color: #cecece;
}
.customer-img img{
width: 100%;
height: auto;
position: relative;
top: 21px;
transform: scale(1.4, 1.3);
}
.customer-txt-area .john{
font-size: 18px;
color: #696969;
margin: 0px;
padding-top: 40px;
padding-left: 15px;
padding-right: 18px;
line-height: 23px;
font-family: "MyriadPro";
}
.customer-img
{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
max-width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border: 11px solid #fff;
background-color: #cecece;
}
you have to remove "overflow: hidden;" from the above code.
Just remove overflow: hidden; from the parent element, which is ".customer-img" in your case and remember to add padding of half the size of the image to ".customer-card" parent element .
.customer-img{
position:absolute;
top: -55px;
left: 0;
right: 0;
width: 100%;
top:-55px is pushing the image out of the card and since abolute position is used, height of card doesn't consider image height so use min-height or height for card.
.customer-card{
width: 100%;
min-height:300px;
max-width: 290px;
padding: 39px 0px 35px 0px;
border-radius: 5px;
background: #fff;
}
Try this solution
Add here
<div class="row">
Extra style
<div class="row" style="margin-top: 50px">
Just now, i managed to somehow "solved" the issue here without changing any css. I just added some classes to my carousel-inner.
as you can see in this photo, i added border class to my carousel-inner class in order to see the actual "height" and "width" of my div and it shows like this.
<div class="carousel-inner border ">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
So, i tried adding some classes to my carousel-inner
<div class="carousel-inner border d-flex justify-content-center align-items-center">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<div class="customer-card">
<div class="customer-img">
<img src="assets/img/user-img/john.png" alt="customer image" class="">
</div>
<div class="customer-txt-area">
<p class="john">"With Finger Food, my birthday party was a real blast! Super finger food!"</p>
<h4><b>John Esacada</b></h4>
<small>Sydney</small>
</div>
</div>
</div>
</div>
</div>
</div>
and now it shows something like this.
I'm trying to make 2 divs centered horizontally and one under the other. Actually i did it with some trial and error but i couldn't make it resolution independent. It's looking weird with other resolutions except 1920*1080. I tried percantage but i couldn't make it. My div jumped to the left top corner. Here how my divs look like in 1920*1080 :
I know i shouldn't use this position,width and height pixels but i couldn't get this view without them. So i made it for clarity for my problem.
Here my html codes :
<body>
<div name="video-div" id="videodiv" style="position:absolute; left:320px; top:10px;">
<video id="videoPlayer" controls>
<source src="" type="video/mp4">
</video>
</div>
<div id="info-div" style="position:absolute; left:320px; top:740px;">
</div>
<div name="test2" id="div2">
<ul id="ultimes">
<li>test</li>
</ul>
</div>
<div name='test' id="div1">
<input id="datepicker" type="text" placeholder="Tarihi Seç">
<form id="form">
<button type="submit" id="listele">Listele</button>
</form>
<ul id="list1">
<li>test</li>
</ul>
<ul id="ullogs">
<li>test</li>
</ul>
</div>
</body>
Here my css codes :
#info-div{
background-color:white;
border:1px solid black;
height:200px;
width:1280px;
}
#videodiv{
width: 1280px;
height: 720px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin: auto;*/
}
#videoPlayer {
object-fit: fill; /* it's not filling the div */
}
#div1 {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
width: 25vh;
height: 100vh;
background-color: #d5f4e6;
}
#div2 {
float: right;
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
width: 25vh;
height: 100vh;
background-color: #d5f4e6;
}
body{
margin:0px;
padding:0px;
background-color: #80ced6 !important;
overflow: hidden;
}
#form {
margin-bottom: 40px;
}
If I get this correct. All you want to do is center two divs horizontally one under another (the video and the info div) with the video-div filling 100% width.
Have you tried wrapping them in another div and centering that horizontally? Doing this and giving the wrapper-div a width should work.
.wrapper-div {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1280px
}
.video-div {
width: 100%;
}
<div class="wrapper-div">
<div name="video-div" id="videodiv">
<video id="videoPlayer" controls>
<source src="" type="video/mp4">
</video>
</div>
<div id="info-div">
</div>
</div>
How do I place an image on top of a button with html and css?
<div>
<img src="photo.jpg">
<button>Text</button>
</div>
I guess it should be something like
div {
position: relative;
}
img {
position: absolute;
top: 10px;
}
but it acts a bit weird.
Is it possible to just have a normal div and then set the img to float on top of everything else in the div element?
I don't know what's your purpose exactly, if you want the image to take the whole line, make the button lay beneath, why don't set the CSS display attribute of the image to display:block;?
hello see the below one its simple with a few line code
<div style="position:relative;" >
<img src="http://www.industrydynamics.ca/images/skype_icon.png" width="100" height="100" >
<input type="button" name="" value="Button" style="position:absolute;width:80px;left:10px;top:120px;" >
</div>
You can use position: absolute with transform: translate() on img.
This calc(-100% - 1px) means
-100% or - height of element (img in this case) that you are performing transform on, so it will translate for its own height up on Y axis
-1px is for top border on div element.
div {
position: relative;
display: inline-block;
border: 1px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 1px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
Just to demonstrate if you have border of 5px then you should use -5px in calc.
div {
position: relative;
display: inline-block;
border: 5px solid black;
margin-top: 100px;
}
img {
position: absolute;
top: 0;
transform: translateY(calc(-100% - 5px));
}
<div>
<img src="http://placehold.it/50x50">
<button>Text</button>
</div>
#bottom{
background-repeat: repeat-x;
height:121px;
width: 984px;
margin-left: 20px;
margin-top: 13px;
}
#bottom .content{
width: 182px; /*328 co je 1/3 - 20margin left*/
height: 121px;
line-height: 20px;
margin-top: 0px;
margin-left: 9px;
margin-right:0px;
display:inline-block;
position:relative;
}
<div id="bottom">
<div class="content">
<img src="http://placehold.it/182x121"/>
<button>Text</button>
</div>
</div>
May be you are trying to achieve something like this.
.userIcon {
background: url('https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png') no-repeat;
height:20px;
width:20px;
background-size:20px;
top: 8px;
}
.left {
float:left;
}
.right {
float:right;
}
.clear{
clear:both;
}
.button{
padding:10px;
color: #FFF;
background-color: #0095ff;
border:1px solid #07c;
box-shadow: inset 0 1px 0 #66bfff;
}
.btnText{
margin:2px 0px 0px 10px;
}
<div>
<button class="button">
<span class="left userIcon"></span>
<span class="right btnText">Create user account</span>
<span class="clear"></span>
</button>
</div>
If you just want to make the image to come over the button, you can make the display as block
check the following snippet
div img{
display:block;
}
button{
text-align:center;
margin:40px;
padding:10px;
}
<div>
<img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png">
<button>Text</button>
</div>
Hope this helps
I'm learning html and css, but I have some troubles.
Right now I'm making a site that has a small images with different w sizes.
The point is that, when you hover on them they show up clickable elements, and I can't get the right position on them.
What I have:
What I want:
Part of code for this:
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="zoom">
</div>
<div class="all">
</div>
<div class="link">
</div>
<div class="info">
</div>
<div class="like">
</div>
</div>
CSS:
.photo img {
float:left;
width:auto;
height:auto;
}
.photo:hover {
display: block;
opacity:0.6;
}
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
http://jsfiddle.net/zzu87/
You need to add some positioning to each image if you use position: absolute. Try something like this:
.photo:hover .zoom {
position: absolute;
top: 50%;
left: 200px;
background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat: no-repeat;
width: 46px;
height: 50px;
background-position: center;
}
This should get you where you want to go. (JS fiddle)
css
.photo {
display:block;
position:absolute;
background-image: url('//placekitten.com/400/300');
background-repeat: no-repeat;
width:400px;
height:300px;
}
.photo>.container {
display:none;
}
.photo>.container>div {
display:inline;
}
.photo:hover>.container {
display:block;
margin-left: 85px;
margin-top: 200px;
}
html
<div class="photo">
<div class="container">
<div class="zoom">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="all">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="link">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="info">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
<div class="like">
<img src="//www.kolazhgostar.com/images/small-img05.png"/>
</div>
</div>
</div>
First float the parent div left and set the position to relative. Then you'll have better control over the positioning of any child elements.
.photo {
float:left;
position:relative;
}
After, padding, margin, bottom, left, right, and top can be used to achieve the specific location desired inside the parent div. Here I used left and top...
.photo:hover .zoom {
position: absolute;
background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
background-repeat:no-repeat;
width:46px;
height:50px;
background-position:center;
left:50%;
top:50%;
}
Here is the FIDDLE.
Interesting question. I solved the problem by making more div containers for the photo and its contents. Also, I worked under assumption that your photo images are 400x300. Modify the code as you like! :)
I think the interesting part about my solution is that I used only position: relative; which lifts up the hover menu above your images so it plays together nicely:
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
Thus, most of the horizontal position is accomplished using margin: 0 auto; instead of playing too much with absolute or relative position. Generally speaking, those can be avoided most of the time. It depends.
The result can be also viewed from the following: js fiddle example or from this jsfiddle example if cat images are removed sometime later.
Linking also relevant code below:
HTML:
<div class="photo-container">
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
<div class="photo">
<img src="http://placekitten.com/400/300" alt="image"/>
<div class="photo-menu">
<div class="upper-menu"></div>
<div class="lower-menu">
<div class="all"></div>
<div class="link"></div>
<div class="info"></div>
<div class="like"></div>
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0px;
padding: 0px;
}
.photo-container {
width: 800px;
}
.photo {
float: left;
width: 400px;
}
.photo, .photo-menu {
width: 400px;
height: 300px;
}
.photo:hover {
display: block;
opacity: 0.6;
}
.photo-menu {
position: relative;
left: 0px;
top: -300px;
}
.photo .photo-menu {
display: none;
}
.photo:hover .photo-menu {
display: block;
}
.photo-menu .upper-menu {
background-image: url("http://www.kolazhgostar.com/images/small-img05.png");
background-repeat: no-repeat;
background-position: center;
width: inherit;
height: 200px;
margin: 0 auto;
}
.photo-menu .lower-menu {
width: 280px;
margin: 0 auto;
height: 100px;
}
.photo-menu .lower-menu div {
min-width: 40px;
width: 24.9999%;
height: 40px;
background-repeat: no-repeat;
background-position: center;
float: left;
}
.photo-menu .lower-menu .all {
background-image: url("http://placehold.it/40/ff0000");
}
.photo-menu .lower-menu .link {
background-image: url("http://placehold.it/40/00ff00");
}
.photo-menu .lower-menu .info {
background-image: url("http://placehold.it/40/0000ff");
}
.photo-menu .lower-menu .like {
background-image: url("http://placehold.it/40/c0ff33");
}
Note: I used placehold.it to place dummy images for the icons.
Cheers.
Using nested divs, each div has a background image, I want the images side-by-side
I am trying to put stars side-by-side.
here is my html & css code
<body>
<div class="rate-stars">
<div class"star" id="s5"><pre> </pre>
<div class"star" id="s4"><pre> </pre>
<div class"star" id="s3"><pre> </pre>
<div class"star" id="s2"><pre> </pre>
<div class"star" id="s1"><pre> </pre>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
My CSS:
.star
{
background-image: url("star-off.png");
float: left;
border: 0px;
width: 20px;
height: 20px;
margin: 0px;
padding: 20px;
}
Demo
Your first problem is you're missing the = in all of your class assignments:
<div class"star"
^ missing =
With those fixed, this CSS will do it:
.star
{
background-image: url("star-off.png");
background-repeat:no-repeat;
width: 20px;
height: 20px;
margin-left:25px;
}
You can do the following :
HTML can written as :
<div id="rate-stars">
<img id="star1" src="img/star1.png">
<img id="star2" src="img/star2.png">
</div>
Css :
#star1 {
left: 20px;
position: absolute;
top: 100px;
}
#star2 {
left: 60px;
position: absolute;
top: 100px;
}
Try this css
.star
{
background-image: url("star-off.png") no-repeat top left;
border: 0px;
padding-left: 20px;
height: 20px;
margin: 0px;
}