I have this site.
If you click past exhibition you will see images and dark gray container which is great.
I put an image to understand better what I want to do.
I do not want a fixed size ... somehow I want to be automatically
HTML + CSS:
<div class="container-left" style="width:100%;background:grey;">
<div class="contentt"></div>
<div class="imagini">
<div class="lista-sus">
<div class="gigi" style="float:left;"><img src="/wp-content/themes/wpbootstrap/images/a.png" alt="some_text"></div>
<div class="gigi"><img src="/wp-content/themes/wpbootstrap/images/b.png" alt="some_text"></div>
</div>
<div class="lista-jos">
<div class="gigi" style="float:left;"><img src="/wp-content/themes/wpbootstrap/images/c.png" alt="some_text"></div>
<div class="gigi"><img src="/wp-content/themes/wpbootstrap/images/d.png" alt="some_text"></div>
</div>
<div class="sageti">
<div style="float:left;"><img class="sageata-stanga" src="/wp-content/themes/wpbootstrap/images/butoane-1.png" alt="some_text"></div>
<div ><img class="sageata-dreapta" src="/wp-content/themes/wpbootstrap/images/butoane-4.png" alt="some_text"></div>
</div>
I tried .container-left{width:auto;}but unfortunately it does not work and do not understand why
You can help me solve this problem please?
If you want the block to filled in your container width: Add this
.gigi {
float:left;
width:50%;
}
Now if you want your image to fill up also these blocks, you have to use put this style
background-image:url('my/url');
background-size:cover;
background-position:center center;
If you try to use this method you have add a height in .gigi div because youre using a background-image now and the height is not specified
Related
I am trying to fit image in with text link to flexbox container. The problem that it's break my container and it's become look like next on small screen:
<el-container>
<el-main>
<div class="top">
<div class="download-compiler">
<div class="dmd-download">
<el-image src="http://dlang.ru/imgs/dmd_logo_128.png"></el-image>
<el-link style="color: black; font-size: 1.3em;">DMD</el-link>
</div>
</div>
<div class="code-snippets">
<div class="code-snippets-header">
Samples:
</div>
<div class="code-snippets-content"></div>
</div>
</div>
<div class="middle">
<div class="main-app-img">
</div>
</div>
</el-main>
</el-container>
Here is minimal jsfiddle.
https://jsfiddle.net/dhoc4zw5/
I'm not really sure what you're trying to achieve, but in your jsfiddle, just removing height: 20% from class .top make the image and text always stay in the pink zone.
I am trying to execute some simple container code to center an image, I cannot find it why my Container has a height of 0.
#test {
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class="container">
<div class="row">
<div class="col">
<div id="test">
</div>
</div>
</div>
</div>
Why does the container have a height of 0, and hence my image not appearing?
By default, block elements get their heights from their content. Content meaning what goes between the opening and closing tag of the element in the HTML. A background image would not be content, but can be thought of more like decoration.
You can set the height manually with css to whatever you like. Keep in mind though that an empty element is unsemantic code.
Adding a height property could fix this as mentioned by you in comments.
Another alternative that would solve the problem with varying image sizes could be to use an img tag inside #test element.
<div id="test" style="background-image: url(/my-image.jpg);">
<img src="/my-image.jpg" style="visibility: hidden;" />
</div>
This way the div takes up the height based on the image size.
<div class="text-center d-flex" style="height: 100vh">
<div class="container m-auto">
<div class="row">
<div class="col-8 mx-auto">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8 mx-auto">
<h1> I should be centered </h1>
</div>
</div>
</div>
</div>
Using margin:auto to vertically-align a div
As the second answer from the linked stackoverflow question over, it was because my parent was not of type flex.
I have added a few images on my html but it doesn't show up on the webpage. The directory path for the images are correct and the first image appeared before i added the rest. I thought it was something to do with the height so i added height on the css but still nothing.
Not sure if it helps to figure out without the images but i have pasted my codes below:
<section class="pictures">
<div class="container">
<div class="row1">
<div id="first" class="img1" style="background-image:url(images/page-1_img1.jpg);">
</div>
<div id="second" class="img2" style="background-image:url(images/page-1_img2.jpg);">
</div>
</div>
<div class="row2">
<div id="third" class="img3" style="background-image:url(images/page-1_img3.jpg);">
</div>
<div id="fourth" class="img4" style="background-image:url(images/page-1_img4.jpg);">
</div>
<div id="fifth" class="img5" style="background-image:url(images/page-1_img5.jpg);">
</div>
</div>
</div>
</section>
CSS:
.container {
height: 500px;
width:1024px;
}
Thank you.
Since you are using the images as background-images, you have to define at least a height (preferably also a width) for all their containers, i.e. #first, #second etc.
Otherwise (since they don't have any other content) those elements will have zero height, so the background-images will remain invisible
Addition: Actually, it makes more sense to use img tags instead of using the images as background-images, if you are not aiming at any special solution that requires background-images. If you insist on using background-images, you also have to define their size and no-repeat.
I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.
I'm able to align and center graphpaper and footer as needed but I'm unable to get the colorpicker div to exist next to these to. No matter what I try it ends up being below the rest of these. Is there a way to have the two divs centered vertically and then put the colorpicker div next to these two?
<div id="abstract">
<div class="graphpaper" id="graphpaper" onclick="getPosition(event)" style="width:984px; height:1100px;">
<img src="images/poster/poster-top.png" align="left"/>
<img src="images/poster/poster-left.jpg" align="left" style="margin-left:12px;"/>
<canvas id ="canvas" width = "898" height = "900"/>
<img src="images/poster/poster-right.jpg" align="right" style="margin-right:10px;"/>
</div>
<div class="footer" id="footer">
<img src="images/poster/poster-bottom.png"/>
</div>
<div class="colorpicker" id="colorpicker" style="width: 70px; clear:both;">
<img src="images/color-tab/no-color.png" id="unselected" class="unselected"/><br>
<img src="images/color-tab/color-dark.png" id="dark_image" class="darkimage"
onclick="getColor('#00ccff','images/color-tab/color-dark.png')"/><br>
<img src="images/color-tab/color-medium.png" id="med_image" class="medimage"
onclick="getColor('#000000','images/color-tab/color-medium.png')"/><br>
<img src="images/color-tab/color_light.png" id="light_image" class="lightimage"
onclick="getColor('#ff0066','images/color-tab/color_light.png')"/><br><br><br><br>
</div>
</div>
In order to do this you need to float all of your divs to the left, and give them widths that add up to 100% (ie. 40%, 40%, 20%).
This is my best guess without seeing your question as a jsfiddle
1.) Removed the Footer div and added the img to the graphpaper div
2.) set colorpicker to position:fixed; and set margin-top:300; so it would be starting in the proper place.