The yellow dot "gif1" has to go inside the black box "gif" but as you can see I somehow managed to did the opposite.
How many things did I do wrong?
Livewave Preview
I already tried overflow:auto or hidden and changing the position attributes from relative to absolute and vice versa.
<html>
<head>
<body>
<center>
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
</center>
<style>
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: relative;
float: left;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
</style>
</head>
</body>
</html>
You are facing a complex situation where the float property is creating the issue. Basically the yellow "image" is wrapping around the floated element and that's why it goes out of the black box and under the blue one (the float element). To avoid this you can use absolute instead of float.
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
margin: auto;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: absolute;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
This is the way to go:
.gif{
position: relative;
}
.gif1{
position:absolute;
}
Hope it helps.
Related
Can i used relative
2 times in my css code
This is possible or is it a mistake
here is my code :
Thanks for any help
My CSS
#box1 {
width: 800px;
height: 600px;
background-color: #FF0004;
margin-right: auto;
margin-left: auto;
position: relative;
}
#box2 {
width: 380px;
height: 256px;
background-color: #A9FF00;
position: relative;
left: 7px;
top: 10px;
}
#box3 {
width: 190px;
height: 155px;
background-color: orange;
position: absolute;
left: 13px;
top: 15px;
}
My HTML
<div id="box1"><div id="box2"><div id="box3"></div></div></div>
I am making my first webpage and am having trouble positioning elements. They keep overlapping each other when I resize the browser. The title is positioned absolute, but this means it overlaps the image at the top. I cant get it into position by any other means. Can anyone help?
My question wasn't answered properly the first time.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="./new 1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="header">
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" alt="Dunc's guitar lessons in Isleworth" />
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
</div>
</div>
</body>
</html>
Thanks
Did you try something like this ? please tell me if i wrong.
Here your css code.
.wrapper {
margin: 0 auto;
max-width: 1024px;
min-width: 1024px;
min-height: 760px;
max-height: 760px;
padding-right: 15px;
padding-left: 15px;
border: 5px solid red;
}
.header img {
min-width: 77%;
max-width: 77%;
min-height: 200px;
max-height: 200px;
position: relative;
left: 23%;
}
#cont {
position: absolute;
z-index:1000;
width: 200px;
height: 200px;
border: 5px solid red;
}
#cont .header {
position: relative;
width: 200px;
height: 200px;
border: 5px solid red;
}
.top-left {
position: absolute;
top: 11px;
left: 23%;
color: teal;
font-size: 63px;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
font-family: Helvetica;
text-align: center;
}
And here your html code.
<div class="wrapper">
<div class="header">
<div id="cont">
<div class="top-left">Dunc's<br/> Guitar<br/> Lessons</div>
</div>
<img src="C:\Users\Duncan\Desktop\Coding\Images\guitar_banner.jpg" />
</div>
</div>
Hope this help you.
Good luck.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
height: 300px;
width: 300px;
margin-right: 0px;
margin-top: 0px;
}
.div3 {
height: 150px;
width: 150px;
margin-left: 0px;
margin-bottom: 0px;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
In above code I have a confusion, because in above code the margin was not affected to the inner div tags. What might be the problem?
Image of output
and what I want to do is
Desired output
No need to use margin , just use position property.
Here is the Snippet.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position: relative;
margin: 30px auto;
}
.div2 {
height: 300px;
width: 300px;
position: absolute;
top: 0;
right: 0;
}
.div3 {
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="div1">
<div class="div2">
<div class="div3"> </div>
</div>
</div>
To achieve the desired o/p with margin this should be your code
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
height: 300px;
width: 300px;
margin-left: 300px;
margin-top: 0px;
}
.div3 {
height: 150px;
width: 150px;
margin-left: 0px;
margin-top: 150px;
}
But, this would be a wrong approach, the right approach is to manipulate positioning the inner divs to left or right. This is because of the concept of box model. You learn more about box-model to better understand when to use margin-l/r/t/b and when to use positioning
Correct Code :
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position : relative;
}
.div2 {
height: 300px;
width: 300px;
position : absolute;
right : 0;
}
.div3 {
height: 150px;
width: 150px;
position : absolute;
bottom : 0;
}
You can use a combination of float and position: relative/absolute settings in the combination and with the settings shown below to achieve the desired result shown in your image.
Note: All this has nothing to do with margins.
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
}
.div2 {
float: right;
position: relative;
height: 300px;
width: 300px;
}
.div3 {
height: 150px;
width: 150px;
position: absolute;
bottom: 0;
left: 0;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
You can use position: absolute; and then in place of margin-left or margin-top use left or top or bottom
div {
border: 1px solid black;
}
.div1 {
height: 600px;
width: 600px;
position: relative;
}
.div2 {
height: 300px;
width: 300px;
right: 0px;
top: 0px;
position: absolute;
}
.div3 {
height: 150px;
width: 150px;
left: 0px;
bottom: 0px;
position: absolute;
}
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
Hope this helps
I have a round div which wraps an image and two other divs. The problem is that it is shown a grey border around this div. The problem is on all browsers chrome and firefox. I have tried putting browser css-vendor-prefixes, masks but no result.
I can not use :
img {
width: 100%;
height: 100%;
border-radius: 120px;
}
because the image is not in the correct aspect-ratio. It is in 1:1. It should be on 16:9 because it is a YouTube video frame.
<div class="video_wrap">
<div class="views">1651</div>
<img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
<div class="title">o'najr</div>
</div>
.video_wrap {
width: 240px;
height: 240px;
border-radius: 120px;
overflow: hidden;
}
.views, .title {
position: relative;
background: #fff;
height: 50px;
color: #f8008c;
text-align: center;
line-height: 50px;
}
.views {
top: 0px;
z-index: 2;
}
.title {
top: -100px;
}
.video_wrap img {
height: 100%;
position: relative;
top: -50px;
}
fiddle http://jsfiddle.net/h3198LfL/
You could remove the border-radius:120px from .video_wrap and add following to your img
img{
width:100%;
border-radius: 120px;
}
SNIPPET
.video_wrap {
width: 240px;
height: 240px;
overflow: hidden;
}
img {
width: 100%;
border-radius: 120px;
}
.views,
.title {
position: relative;
background: #fff;
height: 50px;
color: #f8008c;
text-align: center;
line-height: 50px;
}
.views {
top: 0px;
z-index: 2;
}
.title {
top: -100px;
}
.video_wrap img {
height: 100%;
position: relative;
top: -50px;
}
<div class="video_wrap">
<div class="views">1651</div>
<img src="http://img.youtube.com/vi/-NschES-8e0/hqdefault.jpg">
<div class="title">o'najr</div>
</div>
add the webkit code and others in video-wrap, as in:
.video_wrap {
width: 240px;
height: 240px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
-ms-border-radius:120px;
-o-border-radius:120px;
border-radius: 120px;
overflow: hidden;
}
to avoid the border, you can set new line of it, as in:
.video_wrap img {
border:0px;
border:none;
}
DEMo
Ii's been a while since I programmed a website and it seems that I have forgot some basic concepts about FLOAT!
Can anyone help making this (on picture) layout using 4 divs and FLOAT?
I have tried this:
<header>
<div id="fill_left"></div>
<div id="top"></div>
<div id="fill_right"></div>
<div id="bottom"></div>
</header>
And CSS:
header {
width: 100%;
height: 9em;
background-color: lightblue;
}
#fill_left{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
#top{
width:80%;
height: 50%;
background-color: lightgray;
float: left;
}
#bottom{
width:80%;
height: 50%;
background-color: lightseagreen;
float: left;
}
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
And of course they're all inside a wrapper{ width: 100%, height: 138px}
Thanks
You could do it by using an extra div to warp div-2 and div-3 by set float: left;
JSFiddle - DEMO or Full Screen View
HTML:
<div id="div-p">
<div id="div-1"></div>
<div id="div-c">
<div id="div-2"></div>
<div id="div-3"></div>
</div>
<div id="div-4"></div>
</div>
CSS:
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
}
#div-c {
width: 90%;
height: 138px;
float: left;
}
#div-1 {
width: 5%;
float: left;
height: 100%;
background: red;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
float: left;
height: 100%;
background: black;
}
Solution 2:
You could also do it by using display: inline-block; and set font-size:0px; to #div-p for remove the white-space and then set font-size: 16px; (i.e 16px = 1em) to child elements.
JSFiddle - DEMO or Full Screen View
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
font-size: 0px;
}
#div-c {
width: 90%;
height: 138px;
display: inline-block;
font-size: 16px;
}
#div-1 {
width: 5%;
display: inline-block;
height: 100%;
background: red;
font-size: 16px;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
display: inline-block;
height: 100%;
background: black;
font-size: 16px;
}
That simple Notice the order: http://jsbin.com/liqulo/1/edit
<div id="fill_left"></div>
<div id="fill_right"></div>
<div id="top"></div>
<div id="bottom"></div>
CSS:
#fill_left,
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
}
#fill_left{ float: left; }
#fill_right{ float: right; } /* and notice Float Right */
But if I were you I would do it even simpler: http://jsbin.com/liqulo/2/edit
<header>
<div class="cont" id="top"></div>
<div class="cont" id="bottom"></div>
</header>
header {
width: 100%;
height: 9em;
background-color: lightcoral;
}
.cont{
width:90%;
height: 50%;
margin:0 auto;
}