on the picture u can see my problem of the text overlapping my image when the screen is less then 1400 pixels wide or so.
This is my HTML of it.
<article>
<img src="images/welkomartikel2.jpg" />
</article>
<aside>
<h2>Welkom</h2>
<p>The Text that overlaps</p>
</aside>
This is the CSS:
article {
float: left;
width: 50%;
margin: 0 auto;
height: auto;
padding: 4%;}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%;}
Overlaping text on my picture
You're floating the two elements next to each other so that they will never overlap, but the problem is that you have no code controlling how the image itself behaves. What you need to do is ensure that the image never escapes the bounds of its parent:
article img {
max-width: 100%;
max-height: 100%;
}
Hope this helps! :)
Related
I have two images one large image and a small image. The small image has to come on the right top of the large image, not on the image but beside the image.
When you scale now the small image comes over the large image but it has to be on the right top beside.
/*this is the large image*/
#afbeeldinglaptop > img{
width: 92%;
text-align: center;
max-width: 600px;
display: block;
margin: 0 auto;
}
/*this is the small image*/
.betrouwbaar{
width: 70%;
max-width: 1300px;
position: absolute;
text-align: right;
margin-top: -330px;
}
<!--This is my html-->
<div id="afbeeldinglaptop">
<img src="img/laptop.png" alt="laptop" />
<div class="betrouwbaar"><img src="img/wolkje.png" alt="wolkje" />
</div>
</div>
Has anyone an idea?
As you can see in the picture below, my logo/banner is overlapping the body of my site when I zoom in using any browser. It continues to overflow the farther you zoom in.
What would be the best way to keep the banner the same width as the body even after zooming occurs?
HTML:
<div class="container1"> <div class="header"><img src="images/banner test.jpg" alt="logo" />
CSS:
.container1 {
width: 80%;
max-width: 1260px;
min-width: 780px;
margin: 0 auto;
}
.header {
max-width: 900px;
margin: 0 auto;
}
http://i62.tinypic.com/2poum52.jpg
Thanks a lot in advance.
Add overflow to your div
.header {
max-width: 900px;
margin: 0 auto;
overflow: hidden;
}
I have a div that should always be in the center of the browser. now there's an image that will always be in the middle of the browser. but problem is that a div is 960px wide and but the picture is 1263px. how do I solve the problem? what I still need is dead as soon as the browser window smaller, should come scrollbars only at 960px. I know that I could theoretically solve anything, if I image Tell css as a background-image integrate the. but that does not work, unfortunately, because I really need the img tag
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
http://jsfiddle.net/UcLnD/
Try with this:
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.header-bottom-wrapper{
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {
margin-left: -152px;
}
Im not sure what you mean by not using Css for your fix. But does the image need to stay the same size? If you want the image to resize based upon browersize add this to your Css:
.header-bottom-wrapper img {width:100%;}
#header-bottom {
height: 1245px;
background: red;
width: 960px;
margin: 0 auto;
}
.header-bottom-wrapper {
position: relative;
width: 960px;
margin: auto;
height: 545px;
}
.header-bottom-wrapper img {width:100%;}
<div id="header-bottom">
<div class="header-bottom-wrapper">
<img src="http://dummyimage.com/1263x545/000/fff">
</div>
</div>
you can use negative margin to virtually reduce space needed by image.
<div class="clipimg">
<img src="imagetoowide-1000px" />
</div>
.clipimg {
width:500px;
text-align:center;
}
clipimg img {
margin:0 -50%;
}
Tune negative margin for both right/left and text-align.
Example here centers image and clips sides
examples : http://codepen.io/gc-nomade/pen/hjyEv/
I have an image in my website that is defined with the following CSS:
#settings_big{
border: none !important;
margin: auto 0 0 0 !important;
padding: 0 !important;
float: right;
}
Because of the float the image obviously sits on the right side of the content. The top margin causes the image to sit right beneath the lowest hanging element in the content. This looks OK, but I would really prefer that the image sit as low as possible in the browser window to somewhat frame the content. I've seen multiple examples that use fixed positioning to achieve this, and this would work, however my content has a max and min width of 960px; using a fixed position of
bottom: 0;
right: 0;
causes the image to get pushed far right outside of the content to the edge of the browser window. Is it possible to push the image to the bottom of the browser window while keeping the
float: right;
positioning? I would rather not use JavaScript or jQuery but it is an option I suppose. Thanks in advance.
New answer:
<div class="container contentCont">
<div id="content"></div>
</div>
<div class="container imageCont">
<div id="image"></div>
</div>
With CSS:
.container {
width: 200px;
margin: 0 auto;
background: #ccc;
}
.contentCont {
min-height: 600px;
}
.imageCont {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
#image {
float: right;
width: 20px;
height: 20px;
border: 4px solid red;
}
Does it right as in this JSFiddle: http://jsfiddle.net/WYX7H/1/
The following might be close to what you need.
Assuming that your page layout vaguely looks like the following HTML:
<div class="wrapper">
<p>some words...</p>
<div class="slot">
<img src="http://placehold.it/200x200">
</div>
</div>
apply the following CSS:
.wrapper {
width: 600px;
height: 600px; /* for demo only, not critical... */
margin: 0 auto;
border: 1px solid blue;
}
.slot {
text-align: right;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -301px;
width: 600px;
border: 1px dotted blue;
}
.wrapper img {
vertical-align: top;
}
See demo at: http://jsfiddle.net/audetwebdesign/6Xnxj/
If you don't know the width of the image (or you don't want to specify it),
create a wrapper that matches the width of the parent element and apply position: fixed to it.
The image can then be either floated or text-aligned to the right within the fixed block.
The fixed block can then be positioned to the left and bottom, and using margin-left
to keep it centered.
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.