First post here, I've read the guidlines so I hope I'm asking correctly.
I've been trying to get an image to fit to a div but what happens is it fits in the div but doesn't stretch to it's size.
The other thing I've been trying to do is to make that image clickable.
Is there a way to do that calling the image from css?
Here's what I've been trying.
#container {
margin-left: auto;
margin-right: auto;
margin-top:50px;
margin-bottom: 50px;
max-width: 80%;
height: 500px;
border-bottom: 50px solid #000000;
border-top: 50px solid #000000;
}
#container img {
width: 100%;
display: block;
}
<div id="container">
<img src="images/slider.jpg" alt="design" />
</div>
Also should I be using id and # or class and . ?
Having one single #container serving the purpose of containing the elements, should be fine. I have updated the way you have to ask the question. That's fine too. And for your situation, may be you should remove the border.
#container {
margin-left: auto;
margin-right: auto;
margin-top:50px;
margin-bottom: 50px;
height: 500px;
/*border-bottom: 50px solid #000000;
border-top: 50px solid #000000;*/
}
#container img {
width: 100%;
display: block;
cursor: pointer;
}
<div id="container">
<img src="http://placehold.it/400x400" alt="design" onclick="alert('Hi, you have clicked!');" />
</div>
Related
I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }
I've been looking for solutions everywhere but I can't understand how to separate the text from the iframe. Everything I tried did not work (for example, this answer).
This is a screenshot to have an idea:
this is the HTML (I used it very rarely in my life and never worked with containers before, so I'm sure the error is clearly visible to someone more skilled than me):
<div class="container">
<iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
<article>
<font face="calibri" size="30" style="background-color: powderblue;">title</font>
<h4></h4>
<font face="verdana">text</font>
</article>
</div>
This is the CSS (I was testing margin-left: 10px but 10 or 1000px won't change anything):
article {
margin-left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
I think you could solve it by setting position: relative; to your article tag. This way, you could then specify the position offset that you want it to have using the left property instead of using the margin-left property.
I mean:
article {
position: relative;
left: 10px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
body {
max-width: 100%;
}
div.container {
width: 100%;
border: 1px solid gray;
}
iframe {
float: left;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 20px;
}
If this is not exactly what you wanted, I also think that the position property, together with the left, right, top and bottom properties, seem quite suitable for your problem, so I suggest you should take a look of them.
HTML5 does not support those for iframe style, there is no way to set them through style sheet.
My question I would imagine is solved by some basic css, however I cannot seem to make it work. I simply have an larger image with text underneath. I want them to fit/scale into a fixed size of a div with a border, however I want it to be responsive in the way that I can change the div size, and it will still adjust appropriately. My problem is that the image pushes the text outside of my border div. Any help? I have a JSFiddle with a random google image for example, you can edit and repost if you'd like. Thank you.
https://jsfiddle.net/ehuwg7w2/1/
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
If You don't want to fix the height of div.a you can only use height:100%; instead of height:500px;
.a {
width: 400px;
height: 100%;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
But if you need div.a to have fixed height and want to fit the image and the text inside its height, you can do it like this:
.a {
width: 400px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
text-align: center;
padding: 5px;
display:table;
}
.a img {
width: 100%;
display:table-row;
height:100%;
}
.a p{
display:table-row;
height:1px;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
try this css
.a {
width: 400px;
height: 100%;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
Please try the following:
.a {
width: 400px;
height: auto;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img {
max-width: 100%;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
Just set height to 100% instead 500px
.a {
width: 400px;
height:100%;
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
Just set your parent div height to auto i.e .a height. Thus this automatically take your div and text inside of your div border.
.a {
width: 400px;
height: auto;/*Changed this to auto*/
border: 1px solid black;
display: block;
margin: 0 auto;
text-align: center;
padding: 5px;
}
.a img { max-width: 100%;
}
<div class="a">
<img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
<p>I want to be inside the div height, not outside!</p>
</div>
http://codepen.io/willc86/pen/hpFLe
Hey guys I have a code pen link on top so you guys can see it. I am pretty much having problems centering the middle box. How do I do that. When I do center it, the middle box seems to favor one side when I zoom out of the browser
this is my code
#box{
border: 3px solid red;
}
#space{
text-align: center;
}
#leftcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
margin-right: 20px;
}
#rightcolumn {
width: 300px; border: 1px solid red; float: right;
margin: 40px; margin-left: 20px;
}
#mcolumn {
width: 300px; border: 1px solid red; float: left; margin: 40px;
}
.clear {
clear: both;
}
and my HTML
<div id="box">
<div id="space">
<div id="leftcolumn"><p>LEFT</p></div>
<div id="rightcolumn"><p>RIGHT</p></div>
<div id="mcolumn"><p>mcolomn</p></div>
<div class="clear"></div>
</div>
</div>
Middle block sticks to one side because of the "float: left" rule. To be centered it needs no float. You can just add 'auto' horizontal margin without any float and it will work fine.
Here is modified example: http://codepen.io/anon/pen/pitod
(there's a trick with top padding for parent container to avoid problems with top margins, but you can solve that however you like)
hope it will help you, #mcolumn is centered now
#mcolumn {
width: 300px;
border: 1px solid red;
margin: 40px auto;
display: inline-block;
}
Demo
I have this set of divs in may page and I can not get the whole lot to re-size on browser window re size, I have tried to use some Jquery coding found on this site but it seems that the Divs are only resizing on width rather than on both w & H.
My image for divs is on this link:
www.beemagic.co.uk/mydiv.html
Not really sure what your after, from the looks of it you want the whole site to be able to be resized?
I come up with this very basic JSFiddle that shows that it can be done if that's really how you want it.
HTML:
<div class="wrap">
<div class="header"></div>
<div class="content">
<div class="side"></div>
<div class="slider"></div>
</div>
</div>
CSS:
.wrap {
height: 1000px;
width: 100%;
border: green 2px solid;
}
.header {
height: 19%;
width: 99.6%;
border: blue 2px solid;
margin: 5px;
}
.content {
height: 79%;
width: 99.6%;
border: red 2px solid;
margin: 5px;
}
.side {
height: 85%;
width: 20%;
border: purple 2px solid;
margin: 5px;
}
.slider {
height: 10%;
width: 99%;
border: gold 2px solid;
margin: 5px;
}
DEMO HERE