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;
}
Related
I want the content inside of my div to scale with the browser vertically to prevent the need for scrolling The images will be different orientations so the width will be different. I know this can be achieved horizontally with width:100%; but max-height:100%; or height:auto; both still extend past the browser window for me and I'm not sure why.
EDIT: Had a lot of additional modal code in here, and simplified it down to the html/css and switched from simple width:100% height: 100% to vh and vw.
Fiddle :https://jsfiddle.net/duckyduck/6soe8zs0/
What's happening:
How I want it to look:
<body>
<style>
.modal {
display: block;
position: fixed;
z-index: 1;
box-sizing:border-box;
left: 0;
top: 0;
height: 100%;
width:100%;
overflow:auto;
background-color:#D81E21;
}
.modal-content {
position: relative;/*modal x button */
width: auto;
height: auto;
background-color: #7E7DE1;
max-height: 50vh;
max-width:70vw;
margin: auto;
}
.mySlides{
max-height:100%;
max-width: 100%;
height:auto;
width:auto;
}
.roll-img {
display:flex;
flex-wrap:wrap;
}
.column {
flex:1;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
</style>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="mySlides">
<img src="images/5_2.jpg">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="roll-img">
<div class="column">
<img class="demo cursor" src="images/5_2.jpg">
</div>
</div> <!--roll-img-->
</div> <!--modal-content-->
</div> <!--myModal-->
</body>
As your .modal-content width is 30%. it might help
.modal-content .mySlides img {
position: relative;
width: 100%;
height: auto;
}
to fit image in 30% width of model content
Try using
min-height: 100vh;
vh refers to the viewport height.
I am able to get the desired result by applying 4 things:
max-width: 90vw; ensures that the object will never exceed 90% of the screen width.
max-height: 90vh; ensures that the object will never exceed 90% of the screen height.
width: auto; adjusts the width to maintain the original aspect ratio
height: auto; adjusts the width to maintain the original aspect ratio
With these four combined, the object will always be fully in view and you will not need to scroll the screen.
Working example:
(open in full screen and resize vertically or horizontally to see the effect)
body {
background: #131418;
margin: auto;
padding: 0;
text-align: center;
}
.adjust {
width: auto;
height: auto;
max-width: 90vw;
max-height: 90vh;
margin: 0 auto;
}
<img class="adjust" src="https://unsplash.it/3000/3000">
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! :)
I'm stuck using a specific blog layout for a Wordpress theme. I have modified it but am having issues getting a 1920px by 550px image to center and hide the overflow. At the moment, the image is just becoming stretched.
Link to the blog in question: http://goo.gl/5Id68s
Code:
.template-blog .big-preview {
padding: 0 0 0px 0;
width: 1920px;
}
.template-blog .big-preview img {
width: 100%;
height: 510px;
background-position: center center;
overflow: hidden;
}
<div class="big-preview single-big">
<a href="sample.com" title="Sample Image" class="lightbox-added">
<img width="1920" height="550" src="http://goo.gl/e9Xt8y" class="attachment-entry_without_sidebar wp-post-image">
</a>
</div>
Appreciate the assistance!
Apply the overflow and its value to .big-preview or whatever that contains the image instead. The Image can't overflow itself.
.big-preview {
overflow: hidden;
width: 100%;
height: 510px;
}
.big-preview img {
width: 100%;
height: auto;
}
<div class="big-preview single-big">
<a href="sample.com" title="Sample Image" class="lightbox-added">
<img width="1920" height="550" src="http://goo.gl/e9Xt8y" class="attachment-entry_without_sidebar wp-post-image">
</a>
</div>
Note: You can use negative values of margin property to get it to center. E.G margin-left: -100px.
You can center your header by applying margin: 0 auto; to your style
#top .fullsize .template-blog .big-preview {
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 1920px;
}
If you need to center the image, adding text-align: center; to its parent block element will center the image as images are inline elements
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'm trying to make a simple DIV layout compatible with IE, and it's giving me hell.
Here's the basic layout I'm working for:
<div id="body" style="background: blue;">
<div id="header">
HEADER
</div>
<div id="content" style="height: 88%;">
CONTENT HERE
</div>
<div id="footer">
FOOTER
</div>
</div>
I'm using CSS rounded corners on the Body div, and I have a navbar and footer info in #footer as well as a tabbed main navbar in #header.
My main problem has been making the #content div stretch vertically to fit the full page when I only have a small amount of content WITHOUT creating vertical scrollbars.
If I make #content height: 100%; the header and footer cause the page's height to go above 100% and triggers scrollbars.
Making #content's height 88% does the trick in FireFox, but there are two problems with this solution:
a) It's an ugly hack
b) It doesn't work in IE (of course).
Anyone have ideas on how to accomplish this? I assume is should be a fairly common situation for web designers out there.
There you go, try this template, it's really simple and i think it would solve your problem.
HTML:
<div id="wrapper">
<div id="header">
<div id="header_900">
<p>header</p>
</div><!--header_900-->
</div>
<div id="content">
<div id="content_900">
<p>content</p>
</div> </div>
</div><!--wrapper-->
<div id="footer">
<div id="footer_900">
<p>footer</p>
</div> </div>
CSS
body, html{
height: 100%;
}
body, p {
margin: 0; padding: 0;
}
#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
/*HEADER------------------------------------*/
#header {
width: 100%;
background: #666;
}
#header_900 {
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/*FOOTER------------------------------------*/
#footer {
width: 100%;
height: 100px;
margin: -100px auto 0 auto; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
position: relative;
background: #666;
}
#footer_900 {
width: 960px;
height: 100px;/*THIS IS THE FOOTERS HEIGHT*/
position: relative;
margin: 0 auto;
}
/*CONTENT------------------------------------*/
#content {
width: 100%;
padding-bottom: 100px; /*THIS SHOULD BE EQUAL TO THE FOOTERS HEIGHT*/
}
#content_900 {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
I don't think there is an official way to accomplish this unless you use quirks mode. If you use quirks mode (no doctype), it would look something like this:
html, body {
margin: 0;
padding: 0;
height: 100%:
}
#content {
height: 100%:
}
Maybe what you're looking for is an adapted version of something like this: http://www.alistapart.com/comments/fauxcolumns