I have a problem were I've set an image inside a box but when I run the program i see that the box doesn't contain the image.
I've tried fixing it and realized that when i take out the align = "left" attribute the problem goes away.
I don't understand why this happens or how to avoid it if someone could explain it that would be great.
You can see the result here
div.body {
background-color: blue;
padding: 15px;
height: auto;
}
<div class="body">
<img id="full" src="../Photos/controler.png" alt="altvalue" hspace="15" usemap="imgmap" align="left" />
</div>
you need to set (max-)width:100% in img, and don't use html align nor hspace, they are deprecated.
When you use align=left(used in CSS nowadays as float:left) you are taking the element out of normal DOM flow, and placing on the left side of its container, with this content will wrap around the "floated" element
div.body {
background-color: blue;
padding: 15px;
height: auto;
}
#full {
width: 100% /* or max-width */
}
<div class="body">
<img id="full" src="//lorempixel.com/1000/1000" alt="altvalue" usemap="imgmap" />
</div>
Use overflow:hidden in your div:
div.body
{
background-color:blue;
padding:15px;
height:auto;
overflow:hidden;
}
<div class = "body">
<img id = "full" src = "../Photos/controler.png" alt = "altvalue" hspace = "15" usemap = "imgmap" align = "left"/>
</div>
Assuming that you need to have align="left" in there for whatever reason that may be, you can "clear" the parent container by adding width:100%; overflow:auto;
div.body {
background-color:blue;
padding:15px;
height:auto;
width:100%;
overflow:auto;
}
the float element always destroy its child element height. So the better solution use overflow:hidden or use clearfix hack see What is clearfix? and here
Related
Greetings
I have serius problem, I need to move div in div in a div, but it doesn't work.
My question is if there couldn't be some problems with negative margins or child element of element with margin problem.
It seems negative margin is collapsing with positive margin in child element.
The margin of child element is moving parrent element.
here is fiddle
of my problem.
What I want to achieve is that:
a. Article div is overlaping main heading, I tried to avoid using absolute position, so I went for negative margin.
b. Text is margined inside of an article div. From top.
<div class="container">
<div class="main-heading"><h1>Main Heading</h1></div>
<div class="wraper">
<div class="article">
<div class="text"><p>Text</p></div>
</div>
</div>
</div>
Also here is some of problem in css:
div {
width: 100%;
}
.container {
}
.heading {
}
.wraper {
margin-top: -100px;
height: 500px;
}
.article {
margin-top: 0;
height: 200px;
}
.text {
margin-top: 120px;
height: 50px;
}
As I said, margin of text element seems to move article element from top as well. It's me or where is the problem, and what's the solution or workaraund? Preferably even without absolute position, but if you really need to use them, don't worry, but clear it somehow so it can be used as part of column and wont interact with upper/bottom content.
Thank you verry much for your time
edit: picture of what I want to achieve
That black rectangle is wrapper,
cat is article
text is text, but the margins move whole article now.
I found a related toppic on this, it happens in all mayor browsers, and there is a simple solution on that. There is a must to use overflow attribute in CSS...
I used
overflow: auto;
On parrent element, and it worked.
Based on your comment and what I think you're asking:
<div class="image">
<p>PRESTO</p>
</div>
.image {
display:block;
position:relative;
background-color:grey;
width:300px;
height:200px;
}
p {
display:none;
position:absolute;
top:0;
width:100%;
text-align:center;
color:orange;
font-size:2em;
}
.image:hover > p {
display:block;
}
FIDDLE:
https://jsfiddle.net/su5aqs3p/2/
JSFiddle link -Code
I have wasted an hour on this stupid problem. I have made projects and it worked. I deleted that code in rage.
I wanted to center an image but there was a heading above the image. So, i wrapped them in a div and gave them a id[x].
What i tried #x - margin:0 auto width:50%; margin:auto; width:50%; margin: 0 auto; width:50%; margin-left:auto; margin-right:auto; and changing positions to relative.
What worked [not wrapped in a div] -
img {
display:block;
height: 200px;
width: 200px;
margin: auto;
}
h1 {
color:blue;
text-align:center;
}
But this code had a problem as the image is clickable, the whole width of where the image was became clickable, i don't know why.
You cannot have a block element inside an inline element. The anchor that the image would be wrapped in is an inline element. When you turn the child into a block element it will make the anchor take the entire width of the line, because you don't have a width setting on the anchor.
To fix this issue, display:block; should be display:inline-block;
Use text-align: center to center the image.
#test {
text-align: center;
}
img {
display: inline-block;
height: 200px;
width: 200px;
}
h1 {
color:blue;
}
<div id="test">
<h1>Hi, I am guy!</h1>
<a href="#">
<img src="//lorempixel.com/200/200">
</a>
</div>
if I understand your problem you want to both center the header and image that are wrapped in a div. You do not want the entire area of the div clickable just the image. Below is a fiddle.
If the above is correct it seems you just need to add the a tag around the img tag and not the div itself.
<div>
<h1>Header</h1>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200" />
</div>
https://jsfiddle.net/gward90/7s45osxa/
UPDATE:
display: block will take up the width of the parent element everytime, as others have said use inline-block.
Only apply size to the img tag, and apply display to the a tag. The wrapper class with text-align: center is actually taking care of centering the img as well.
Here is the updated fiddle:
https://jsfiddle.net/gward90/7s45osxa/3/
Here is also your fiddle updated with my suggestions
https://jsfiddle.net/gward90/aLxecdk6/5/
I have a CSS
.nav {
width: 200px;
line-height: 50px;
float: left;
}
.content {
margin: 0px 0px 0px 230px;
}
.container {
border: 1px solid red;
}
And here is the HTML
<body>
<div class="container">
<div class="nav">Some text
<br>more text
<br>even more text
</div>
<div class="content">
<h1>Home</h1>
<p>Text paragraph</p>
</div>
</div>
</body>
This gives me menu on the left and the content on the right. And a red box around the content on the right, but only the half menu on the left.
But I would like to have the red box also around the complete nav-div Can anyone help?
Thanks
Teddy
Add overflow:auto to your container div's CSS:
.container {
border: 1px solid red;
overflow:auto;
}
jsFiddle example
Floating the child div removes it from the flow of the document and the container essentially collapses as if it didn't exist. Adding the overflow restores the behavior you're after.
I think this is a quick fix if you float your container it should solve the problem your having. See here http://jsfiddle.net/1540sscj/
.container {
border: 1px solid red;
float:left;
width:100%;
}
Floating an element removes it from the normal flow of the page with one side effect being that its parent's dimensions won't expand to fit it.
So, what you need to do is clear the floated item. The best way to do this, without using additional markup or using the overflow property, which may cause other issues, depending on your layout, is to use the :after pseudo class on the parent element, like so:
.nav{
width:200px;
line-height:50px;
float:left;
}
.content{
margin:0px 0px 0px 230px;
}
.container{
border:1px solid red;
}
.container::after{
clear:both;
content:"";
display:block;
height:0;
width:0;
}
<body>
<div class="container">
<div class="nav">Xalsdk fjaskldfj alskdfj asädf<br>asdf<br>asdf</div>
<div class="content">
<h1>Home</h1>
<p>Bla bla.</p>
</div>
</div>
</body>
More information on clear
More information on pseudo elements
Best way imho would be to add a div like:
<div style="clear:both;"></div>
Under your floating elements: FIDDLE
This way you don't need to use oveflow:hidden on your container that may give you problems once you have more stuff in your project.
Also you shoudn't use a margin-left for your content as the previous element is already floating left. The best practise if you want to add some margin between nav and content would be to make your content float left as well and then use margin left (the exact size you want) with respect of the nav and not with the left of the window.
Finally, if you don't want to add the clear:both div to the html you could add somethign like
.content:after {
content:'';
display:block;
clear: both;
}
it's a bit less browser (old ones) compatible but cleaner
You have to add overflow:auto to .container in your css
Check my js fiddle
Also the css that modified.
.container {
border: 1px solid red;
overflow:auto;
}
Description of property overflow from MDN
The overflow property specifies whether to clip content, render
scrollbars or just display content when it overflows its block level
container.
This is my CSS code:
#outer {
width:580px;
padding:10px;
float:left;
}
.inner {
width:560px;
padding: 10px;
background-color:#fff;
color:#666666;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
My problem is the background-color for the inner div doesn't extend to fill the entire div alongside its content. I've had this problem quite often, and my solution has usually been to specify a height for #inner, which makes the background fill #inner accordingly. However, I don't want to specify a height explicitly because it's dynamic content. What should I do to make the background-color fill the div as it extends?
Set the position of each element, with the inner element needing to be absolute, and then just tell the inner div to always fill the outer one with height: 100%. The only care that you have to take with this is that setting the position of inner to absolute will then make it ignore floats, but presumably you are taking care of that with outer.
(I changed the background color to red in this answer to make it more obvious what is going on.)
This is my CSS code:
#outer {
position: relative;
width:960px;
height: 500px;
}
.inner {
position:absolute;
height:100%;
width:400px;
background-color: red;
}
And the HTML:
<div id="outer">
<div class="inner">
... a lot of content
</div>
</div>
I couldn't replicate your issue. If you don't specify a height for '.inner', the background color should extend dynamically as '.inner' fills with content.
You might be having an issue due to a lack of a CSS reset. Each browser has a set of standard css rules it applies to all pages, unless you override these rules.
I recommend adding a CSS reset in your above all your current css.
A very basic but popular reset is by Eric Meyer, found here: http://meyerweb.com/eric/tools/css/reset/
Let me know if that helps, and if not try posting an image of what you are experiencing.
Btw, this is how your code renders for me:
The padding of the outer element will always show the background color of the outer element...
Just remove the padding there.
#outer {
width:580px;
/* padding: 10px;*/
background:red;
border:1px solid green;
}
.inner {
width:560px;
padding: 10px;
background-color:lightblue;
color:#666666;
}
I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.
CSS
#content
{
text-align: center;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.
text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.
try this
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
CSS
#content
{
text-align: center;
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
overflow: scroll;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
}
live fiddle here
You can add display:inline;margin:auto to your <div>.