I have a div around an image like this:
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
The result is that the div is bigger than the image. I would like to wrap it around the image giving it the same height and width (without setting dimension)
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:100%;
height:100%;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
I tried height and width 'auto' but it also doesn't work.
JsFiddle
You could add these:
img {
display: block;
}
.q {
float: left;
}
and remove:
.q {
width: 100%
height: 100%;
}
jsfiddle
I found this method the easiest,
<div style="display:inline-block">
<p style="float: left; padding-left: 20px">
<img src="Images/user.png" style="height: 200px; width: 207px" />
</p>
<h4 style="text-align: center">Client Zone</h4>
<p>So, he played with that child, the whole day long, and they were very merry.</p>
</div>
This example has text in it but, even if you take the <h4> and last <p> tag the
<div style="display:inline-block;" >
The "display:inline-block;" ensures the whole image gets wraped within the <div> tag.
Set the margin and padding of the div to zero:
div.q{
margin:0;
padding:0;
}
Here yo go
<html>
<head>
<style type="text/css">
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:300px;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
</style>
</head>
<body>
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
<body>
</html>
Related
I want to create div, where I can show multiple images like the image given below.
Problem I am facing is that when I try using position:absolute on img tag, my outer div's display:flex getting broke. Any suggestion on how to do this?
Edit:
<div className={styles.imagePart}>
<div className={styles.imageDiv}>
<img src="/main1.svg" alt="" />
</div>
<div className={styles.imageDiv}>
<img src="/main2.svg" alt="" />
</div>
<div className={styles.imageDiv}>
<img src="/main3.svg" alt="" />
</div>
<div className={styles.imageDiv}>
<img src="/main4.svg" alt="" />
</div>
</div>
Css I tried:
.imagePart {
text-align: center;
display: flex;
}
.imageDiv{
position: relative;
}
.imageDiv > img {
width: 5vw;
height: 20vw;
}
I was trying to add postion:absolute in img tag. But then every img goes to the left and overlap each other.
To use absolute positioned elements (image in your case), you may want to specify their wrapper containers with a position of relative. This makes sure that the absolute img elements align their absolute top, bottom... in relation to the wrapper relative elements.
In short, you can imagine the structure as follows:
<flex container>
<relative wrapper>
<absolute img />
</relative wrapper>
<relative wrapper>
<absolute img />
</relative wrapper>
... other elements ...
</flex container>
Below is an example using flex container and absolute images wrapped with div elements whose position is relative. (Note also that the wrapper div should have the same width as its child img)
.container {
margin-top: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
.container__img, img {
width: 5rem;
}
.container__img {
position: relative;
}
.img1 {
position: absolute;
top: -10px;
}
.img2 {
position: absolute;
top: 1.7rem;
}
.img3 {
position: absolute;
top: 5px;
}
.img4 {
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flexbox and Absolute</title>
</head>
<body>
<div class="container">
<div class="container__img">
<img class="img1" src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" alt="image 1" />
</div>
<div class="container__img">
<img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS24wvA9ozipJc5-IStQrqZIo_a3urpEZGIGA&usqp=CAU" alt="image 2" />
</div>
<div class="container__img">
<img class="img3" src="https://www.besthealthmag.ca/wp-content/uploads/2019/07/junk-food-1.gif" alt="image 3" />
</div>
<div class="container__img">
<img class="img4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhdHVJQDoKTWnLuq-pAByiBK0gcu0PGI9WYw&usqp=CAU" alt="image 4" />
</div>
</div>
</body>
</html>
Hi Man i don't know if that what you want exactly but you can achieve that effect by mask-image: ; or clip path, but i did like that effect just with some easy properties you can see the code below:
#HTML
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
</div>
#CSS
.container{
display:flex;
justify-content:center;
background-color:#333;
padding:3rem;
margin:auto;
}
.img1{background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Image_du_Maroc_3.jpg/800px-Image_du_Maroc_3.jpg") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.5rem;
border-radius: .4em 1.3em 1.5em 1em ;
overflow: hidden;
border-top-width:2px;
transform:skew(10deg,15deg);}
.img2{background:url("https://images.ctfassets.net/cnu0m8re1exe/1mRV2AKcshOa5pHKQ0Pjrb/647a4cc7da3ac5095cfc3202d70b318f/Man_Woman_Weight_Loss.jpg?w=650&h=433&fit=fill") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.2rem;
border-radius: 2em 1.3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew( 10deg,20deg);}
.img3{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSuY1_PAAD0xRobQTyv8WEyDvMaCBKCHBS2GQ&usqp=CAU") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.6rem;
border-radius: 2em .5em .3em 2em ;
overflow: hidden;
border-top-width:2px;
transform:skew( 10deg,20deg);}
.img4{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTKqXNmxNjYkI-iEVj9UhPXAVjsBdnON1NZw&usqp=CAU") no-repeat center center/cover;
width:90px;
height:250px;
margin:.8rem;
border-radius: 2em 3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew(10deg,15deg);}```
You can see the result of that & play around in codepen :
***I hope That It will Help You Thanks advance good luck***
Mahdi_Soultana[My_CodePen][1]
[1]: https://codepen.io/mahdi-soultana/pen/rNLNyyp
I am trying to have a background box behind my text and I cant get it to work. I have done this before and it worked fine, but I can't see where I have gone wrong this time. I have checked to make sure I have linked the CSS to the HTML correctly by changing the background-color, which worked.
HTML:
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
CSS:
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
The problem is not with the HTML / element ID - browsers have supported the "lenient" ID for a long time, which is why it is part of HTML5. While the HTML4 specification is different, if this was a major breaking change it wouldn't be in HTML5 - 'nough said.
The real issue the CSS selector, not the element ID. A CSS selector that begins with a number must have the number escaped.
That is, #1 is an invalid CSS selector while #\31 is valid - and matches elements with id=1.
This is a CSS parsing rule, for backwards compatibility now, and not an HTML or ID restriction. See CSS character escape sequences for gritties on escaping "odd" CSS selectors. Or see the w3c token/lexing train tracks. (For example, the selector to match id=1hello is #\31 hello, with the space - good grief!)
The corrected selector can be verified with this fiddle:
<div id=1>Hello world!</div>
#\31 {
color: blue;
font-size: 30px;
}
That being said, I avoid element IDs that are not trivial CSS selectors to avoid this extra work.
While ids can technically be numbers (in HTML5), it's got weird support in browsers because of backwards compatibility with the HTML4 spec.
ids should start with a letter for compatibility.
<div id="a1">The Online World</div>
and
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
works as expected.
Element IDs can't start with numbers. As soon as you change that, everything is good: http://jsfiddle.net/gr5956br/
body {
color: black;
background-color: black;
margin: 0;
}
#a1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
Your original version with numbers (just so you can see that's the issue):
body {
color: black;
background-color: black;
margin: 0;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="a1">The Online World</div>
<div id="a2"><p>Animation</p></div>
<div id="a3"><p>Creating an app</p></div>
<div id="a4"><p>Mini Game</p></div>
<div id="a5"><p>Gallery</p></div>
<div id="a6"><p>Be Creative</p></div>
<div id="a7"><p>About me</p></div>
</center>
</body>
You can also style the div's for less markup. And then style each link as needed. http://codepen.io/dfrierson2/pen/RNoWZe
body {
color: #fff;
background-color: pink;
margin: 0;
}
div {
width: 7%;
background: #fff;
}
#1{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="SiteIcon.ico">
<title>Navigation</title>
<link rel="stylesheet" href="CSS/style for SubNav.css">
</head>
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div id="1">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</center>
</body>
</html>
Do you mean something like this?
HTML
<body>
<h2><center><font color="orange" size="7">Navigation</font></center></h2>
<center>
<div class="background-box" >
<div id="One">The Online World</div>
<div id="2"><p>Animation</p></div>
<div id="3"><p>Creating an app</p></div>
<div id="4"><p>Mini Game</p></div>
<div id="5"><p>Gallery</p></div>
<div id="6"><p>Be Creative</p></div>
<div id="7"><p>About me</p></div>
</div>
</center>
</body
CSS
body {
color: black;
background-color: black;
margin: 0;
}
#One{
width: 7%;
margin: 50px auto 50px auto;
padding: 2%;
background-color: white;
box-shadow: 0px 0px 1px rgba(0,0,0,.90);
position: relative;
}
You shouldnt use numerical numbers for ID's. Replace with characters and you will be fine.
Fiddle
Hover effect doesn't work. Here is the fiddle: http://jsfiddle.net/6WmnF/
I don't know why. When I remove hover and change the width attribute(as an example) it works. But hover or cursor attribute doesn't work, even when used seperately. I use latest google chrome version.
CSS:
#düzenleyici{
border: 1px solid #000;
width: 550px;
height: 300px;
box-shadow: -1px 1px 4px #000;
display:inline-block;
position:relative;
z-index:-1;
}
#araclar{
width:auto;
height:50px;
background:#AAD3D4;
display:inline-block;
padding:5px 15px 5px 15px;
border-bottom:1px solid #000;
}
#araclar>div{
padding:0 5px 0 5px;
display:inline-block;
border:1px solid #606060;
margin:0 3px 5px 3px;
background:#F6F6F6;
font-family:calibri;
}
#iclik{
border: 1px solid #000;
width: 100px;
height: 267px;
box-shadow: 1px 1px 4px #000;
display:inline-block;
position:relative;
padding:33px 0 0 0;
margin:0 0 0 -5px;
z-index:1;
}
#araclar>div:hover{
cursor:pointer;
}
HTML:
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="tasarim.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div id="düzenleyici">
<div id="araclar">
<div>
Renk
</div>
<div>
Yazı Tipi
</div>
<div>
Yazı Boyutu
</div>
<div>
Kalın
</div>
<div>
İtalik
</div>
<div>
Altı Çizili
</div>
<div>
Resim Ekle
</div>
<div>
Sola Daya
</div>
<div>
Ortala
</div>
<div>
Sağa Daya
</div>
<div>
HTML Düzenleyicisi
</div>
<div>
HTML Kodu Ek
</div>
</div>
</div>
<div id="iclik">
asd
</div>
</body>
<script>
</script>
</html>
I don't know why you set a z-index property for #düzenleyici. If not needed remove it.
Just remove the z-index: -1 into the following section:
#düzenleyici {
z-index: -1;
}
Or change it to a positive value, if you need it.
You can see the problem here: http://baycity2014.weebly.com/
I'm having the weirdest issue. I set-up these divs, and everything works fine. But when I float a div to the left and the other to right, they seem to "come out" of their container div. The container div collapses, and the div below goes BELOW the parent div and BEHIND the child div.
If I remove the float: right, no problem. What's the issue?
HTML:
<div id="main-wrap2">
<div class="block2">
<div id="left_content">
{content}
</div>
<div id="right_content">
test<br/>
test<br/>
test<br/>
</div>
</div><!-- end container -->
</div><!-- end main-wrap -->
CSS:
#main-wrap2 {
width: 100%;
border: 5px solid;
}
.block2 {
margin: 0 auto;
width: 940px;
}
#left_content {
background:#ffffff;
border-radius:5px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
margin-bottom:6px;
width: 560px;
margin-top: 10px;
float: left;
}
#right_content {
width: 270px;
border: 1px solid;
margin-top: 10px;
float:right;
}
set
#main-wrap2 {
display: inline-block;
}
Try it :
make a css class .clr:{clear:both} and modify ur html code to :
<div id="main-wrap2">
<div class="block2">
<div id="left_content">
{content}
</div>
<div id="right_content">
test<br/>
test<br/>
test<br/>
</div> <div class="clr"></div>
</div><!-- end container -->
</div><!-- end main-wrap -->
Hope it will help u :)
Make their parent have:
.block2 {
overflow:auto;
}
This will allow it to resize with the children.
It's a classic clearfix issue. Explanation: http://nicolasgallagher.com/micro-clearfix-hack/
Basically it uses pseudo-elements to add a div with "clear: both;" on it so it clears.
just like Simon says,put some background to see the difference
display:inline-block;
background:aqua;
<div id="main-wrap2">
<div class="block2">
<div id="left_content">
{content}
</div>
<div id="right_content">
test<br/>
test<br/>
test<br/>
</div>
</div><!-- end container -->
</div><!-- end main-wrap -->
#main-wrap2 {
width: 940px;
border: 5px solid;
margin: 0 auto;
}
.block2 {
display: inline-table !important;
}
#left_content {
background:#ffffff;
border-radius:5px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.23);
margin-bottom:6px;
width: 560px;
margin-top: 10px;
float: left;
}
#right_content {
width: 270px;
border: 1px solid;
margin-top: 10px;
float:right;
}
I hope this works for you!
#main-wrap2 {
width: 100%;
border: 5px solid;
overflow:auto;
}
.block2 {
margin: 0 auto;
width: 940px;
overflow:auto;
}
/*use overflow:hidden; or overflow:auto; in parent div tags.. */
If you float an element, you need to make sure its parent is also floated.
I have an image which is inside a div. It appears as expected, within the div. When margin-top is added, the background for this div extends downwards. I don't want to have this behavior. How can I change this?
My code is as follows :
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
This ensures that the column with the <p> tag goes on the left side of the screen, and the column with the image goes on the right, and it resizes as you resize the window :).
How can I make this webpage go from
-----div-----------
Text Image
-----/div-----------
to
-----div------------
Text
--/div--Image----
Image illustrating what I would like :
Edit:
I originally skipped over the fact that you provided some HTML and CSS in the question, so in my original answer I just went off the image provided. Looking at the HTML and CSS you provided, the only thing you'd have to do to get the desired result is set a negative bottom margin in your CSS on the img tag. Here's a jsFiddle using your original markup with the only significant addition to the CSS being the negative bottom margin set on the img tag.
The added benefit of doing it this way is that the image will stay in the desired spot (extended slightly below the div that contains it), even when adding more lines of text to the paragraph (p) changes the height of the containing element (.page div).
CSS
.page {
width:500px;
margin:0 auto;
padding: 5px;
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
.half {
display:inline-block;
width:44%;
margin:0 2%;
}
img {
margin-bottom:-50px;
}
Original answer:
You could just position the image below the text, float the image, and set a negative top margin on the image to make it cut back into the element containing the text. This way, the image will keep sitting in the right spot, even when adding more lines of text changes the height of the containing element.
Here's a jsFiddle
HTML
<p>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>Text
<br/>
<img />
</p>
CSS
p {
width: 100%;
background-color: #ED1C24;
border-top: 3px solid black;
border-bottom: 3px solid black;
text-align: center;
}
img {
width: 100px;
height: 100px;
background-color: yellow;
border: 3px solid black;
float: right;
margin: -70px 100px;
}
I don't quite understand the question completely, but I coded what you wanted in css with your HTML untouched. Hopefully that helps. Check out the JSFiddle.
http://jsfiddle.net/bH8qA/
HTML:
<div id="content">
<div class="page">
<div class="half">
<p>Text goes here.</p>
</div>
<div class="half">
<img src="imghere.png" alt="img" />
</div>
</div>
</div>
CSS:
.page{
background-color:#cc0000;
border-top:4px solid #000;
border-bottom:4px solid #000;
width:500px;
margin:0 auto;
padding: 5px;
position:relative;
}
.half{
display:inline-block;
width:44%;
vertical-align:top;
text-align:right;
}
.half + .half{
position:absolute;
top:20px;
text-align:left;
margin-left:4%;
}
.half > img{
display:block;
height:100px;
background-color:#F5EB00;
border:4px solid #000;
}
use css and use the overflow: hidden on the parent of that div.
Something like this? http://codepen.io/pageaffairs/pen/urGnL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.page {
width:500px;
margin:0 auto;
padding: 5px;
background: red;
}
.half{
width:44%;
margin:0 2%;
}
.float {
float: right;
}
.page, img {
border: 5px solid black;
}
img {
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="content">
<div class="page">
<div class="half float">
<img src="imghere.png" alt="img" />
</div>
<div class="half">
<p>Text</p>
</div>
</div>
</div>
</body>
</html>