I'm trying to build a website and when I try make a wrapper for an image, nothing happens. The aim is to make a section with an image I can use as a background and the wrapper hold the content in order (centered etc).
CSS
.image-wrapper {
width:150px;
margin:0 auto;
}
HTML
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div>
</section>
You have mistake in your HTML </img>
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div> </section>
Should be
<section>
<div class="image-wrapper">
<img src="img/animebreeze.jpg" alt="animeb-image">
</div>
</section>
Fiddle
Place the img tag inside the image-wrapper.
There is no closing tag for <img> tag.
CSS
.image-wrapper { margin: 0 auto; }
HTML
<section>
<div class="image-wrapper"><img src="img/animebreeze.jpg" alt="animeb-image"></div>
</section>
You can try this way as well:
CSS
.image-wrapper { background: url(img/animebreeze.jpg)no-repeat center center; }
Using a background-image in your CSS, you don't use the <img> tag now.
Related
i'm creating a HTML page with Bootstrap 4 from an image.
This is the image:
But i have no idea how to get this style with flexbox.
This is what i have done so far
html:
<section id="recursos">
<div class="container">
<h1 class="como-funciona text-center">Recursos disponíveis</h1>
<div class="text-center"><img src="img/linha.png" class="img-fluid">
<h3 class="ferramenta">Para turbinar o seu negócio no Instagram</h3>
</div>
<div class="container-center">
<div class="left">
<img src="img/icones/like.png">
<h3>teste</h3>
<p>description</p>
<img src="img/icones/comentario.png">
<h3>teste</h3>
<p>description</p>
<img src="img/icones/relatorio.png">
<h3>teste</h3>
<p>description</p>
</div>
<div class="center">
<!-- this is where i was going to put the phone image -->
</div>
<div class="right">
<!-- and here is equal to left elements -->
</div>
</div>
</div>
</section>
css
.container-center{
display:flex;
justify-content: center;
align-items: center;
}
.left{
width:33.33vw;
display: inline-grid;
}
.center{
background:gold;
width:33.33vw;
}
.right{
background:gray;
width:33.33vw;
}
Can you guys please help me solve this problem? I dont know how to place the h3 text along with the description like the image.
I'm able to do it using position absolute but i know its not the right way to do it.
Many thanks.
I don't want to provide the exact answer but, I did draw up something that may help you.
Basically, you just need to remember that you can nest flex box elements inside each other.
My problem is that I have this floated elements to the left. Every element has hidden subelement with some text. I want them to be next to each other (if there is space) like in this demo .
After I click on image then that subelement which is hidden will show up. It work fine with element which are on left side (like in demo) but I have problems with the right side. When I click on element on this side, there is plenty of white space in left side.
What can I do about it?
Here is my code:
HTML:
<div id="main">
<section>
<article class="articles">
<img src="http://ib1.keep4u.ru/b/070815/ef2714da63d5940bf5.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://theconceptartblog.com/wp-content/uploads/public_html/dev3/wp-content/uploads/07/GEARS3-imgs-05.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://blog.art21.org/wp-content/uploads/2011/08/imgs-189.jpg"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://www.klafs.com/media/klafs/imgs-700x394_49_c1_5d_64_fee67da23384276e60644482670c3f22"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtX4Yk1Sxew5RqlARZHKoSnePwp86PVCOpmfTkE9bGCL2Iffic"/>
<section class="text">
<p>*some text*</p>
</section>
</article>
<article class="articles">
<img src="http://89.152.245.33/DotNetNuke/Portals/SecureChains/Images/imgs.jpg"/>
</article>
</section>
</div>
CSS:
.articles {
position: relative;
float: left;
width: 49.8046875%;;
min-height: 100px;
}
.articles img {
height: 100px;
width: 100%;
}
#main {
font-size: 0;
}
p {
margin: 0;
font-size: 16px;
}
Thanks for your advice.
You need to specify the float of every element on the ride side. You can do this by using :nth-child(even):
.article:nth-child(even) {
float: right;
}
If you want to use more complex grid systems you need some JavaScript or use the CSS flexbox property.
If you decide to use JavaScript there are several jQuery plugins available.
My inner image should have the same height as the outer div.
My code is:
<div>
<div class="col_2_fifth">
<figure>
<img src="....." />
</figure>
</div>
<div class="col_3_fifth">
<div class="description">
<p>....</p>
</div>
</div>
</div>
But the image height is always less than its parent div height.
What can i do now? Can i fix this with jquery/js or with css?
simply write:
figure img {height:100%:}
<div>
<div class="col_2_fifth" style='width:20%'>
<figure>
<img src="123.jpg-17eqp8a.jpg" width='100%' />
</figure>
</div>
<div class="col_3_fifth">
<div class="description">
<p>....</p>
</div>
</div>
</div>
try this
You may add
img {
vertical-align: top;
}
.col_2_fifth {
padding : 0px;
margin: 0px;
}
Try this.
Try with CSS:
.col_2_fifth {
background: url(123.jpg-17eqp8a.jpg);
background-size: 100% 100%;
}
This wil set the image as background for the div with the class col_2_fifth
link in comment from Luthando Loot is best solution
Try editing the css file responsible for the col_2_fifth and col_3_fifth. That will help you in resolving the issue.
This should work:
.col_2_fifth, figure, figure img {
padding: 0;
margin: 0;
}
.col_2_fifth, figure img {
height: 100%;
}
My current output:
I want to make this kind of output:
How should I do this? I really don't have any ideas on this.
As of now here is my Html code:
<div id="Profile">
<p class="cover">
<img src="resources/default-cover.png" alt="">
</p>
<p class="profile-pic">
<img src="resources/default-male.png" alt="Male">
</p>
</div>
Firstly, your second class is in the wrong place; it should be in the opening paragraph tag, not the closing.
Secondly, try the following(assuming your class placement is correct):
.profile-pic {
margin-top: -50px;
}
HTML
<div id="Profile">
<p class="cover">
<img src="resources/default-cover.png" alt="">
</p>
<p class="profile-pic">
<img src="resources/default-male.png" alt="Male">
</p>
</div>
CSS
.profile-pic{
margin-top: -20px;
border-bottom: 40px solid white;
}
Your html is not valid with the class placed in the closing p tag.
There are many ways to do this. Here is one that cleans up your html.
I usually try to avoid using the p tag unless there are chunks of text inside it.
<div id="Profile">
<img src="resources/default-cover.png" alt="" class="cover">
<img src="resources/default-male.png" alt="Male" class="profile-pic">
</div>
Here is css to accomplish the effects. Place the size of your .profile-pic in the css.
<style type="text/css">
.cover {display:block;}
.profile-pic {position:relative; margin-top: -25px;height: 50px; width: 50px;}
</style>
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>