I have a div with these properties
#content {
background-image: url('img/cbg.png');
background-position: center top;
background-repeat: repeat-y;
width: 960px;
margin: auto;
padding-bottom:50px;
margin-bottom: 20px;
}
The background only shows up for 70px (I think) and then stops, then the rest of the stuff inside the div just goes on down the page like normal. If I set display:inline-block, it works correctly but uncenters my div.
If you have elements in the container which are floating, it's possible that the floats aren't properly being cleared. If this is your problem there are a bunch of work-arounds - they're called "clearfixs".
One of my favorite write-ups was here. The css they used in this example was here.
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
Well, you're doing repeat-y which means it'll only repeat vertically. If the background image is 70px, that would support the issue. Either use repeat-x or just repeat.
It wouldn't expand any longer because you have set your #content width to 960px in your browser window.
In the case of your image expanding only up to 70px, it is probably because that's the actual height of the image you've used. but mistakenly used repeat-y (repeat vertically).
Here's a simple concept in background-repeat:
If you want to repeat the image vertically, create an image that is horizontally wide.
If you want to repeat the image horizontally, create an image that is vertically tall.
Related
I am trying to place an image on my site. But the image is crossing the div border and going out and thus making the website horizontally scrollable.
I have use the float tag in css.
here is my css code
.image-2{
width: 40%;
display: block;
float: right;
padding-right: 50px;
}
my did style sheet
.about{
display: block;
width: 100%;
height: 750px;
background-image: linear-gradient(to top right, #130178, #4F35DF, #5FD0F5);
}
How can I keep the image fixed inside the div and stop it from going out and increasing the width of the site?
Use max-height:100%; max-width:100%; object-fit: contain; for the image inside the div.
add width: 100%;to the image. then image inside parent element
This website is designed for tablets, and the problem is, when the window is resized, there is a margin, or some kind of gap between the three divs and their background images (they are stacked vertically). The image is a chalkboard in three pieces. The middle div needs to be able to expand with text input while the top is static and bottom piece gets pushed down as the middle expands.
Link to site:
url no longer available
CSS for the Divs so far
.blackboard1 {
background:url(../img/chalkboardtop.png);
height: 28px;
background-size:100% auto;
background-repeat:no-repeat;
z-index:9999999;
}
.blackboard2 {
background-size:100% auto;
background:url(../img/chalkboardmiddle.png);
background-size:100% auto;
background-repeat:repeat-y;
z-index:-9999999;
padding-top:28px;
padding-bottom:35px;
overflow:visible;
}
.blackboard2 p{
color:#fff;
background-color:none;}
.blackboard3 {
background-size:100% auto;
background:url(../img/chalkboardbottom.png);
height: 28px;
background-size:100% auto;
background-repeat:no-repeat;
z-index:9999999;
}
#blackboardWrap {
background:url(../img/chalkboardmiddle.png); */
background-size:100% auto;
background-repeat:repeat-y;
}
One solution I used which i don't think is optimal, is to have the image that serves as the middle image, also serve as a fourth background that wraps around all three divs and sits behind them. This way when there are "cracks" between the divs, you can't notice as much. Using this solution it seems like it will add to loading time and also doesn't quite look right.
Gaps are because of margins:
p {
margin: 0 0 10px;
}
please remove those margins and see if gaps are still there or not.
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
Here's what I'd like to do: have a banner across the top of a website which stretches all across. On the left is a menu, and on the right a logo image; the menu floats left, the image floats right.
The problem is the resizing of the browser window. Because the image floats right, it correctly moves as the window gets smaller. However, at some point it begins to float into the menu. Here is a Fiddle that illustrates this effect with two floating images. Resize the browser window to see how the two images overlap.
Setting
body {
min-width: 800px;
}
I can now make sure that the scrollbar appears as the browser window reaches a certain minimum width. However, that doesn't hinder the right-floating image to keep moving as the browser window keeps getting smaller. I tried to change position: relative but that didn't work. I tried to use Javascript to fixate the images once the browser window reaches its min-width but that didn't seem to have an impact either. Using min-width on the DIV and making the images children of the DIV didn't work either.
My question is: how can I make sure that, starting at a certain window size, the right-floating image stays put instead of floating into the left-floating menu?
EDIT: Oh dear, I forgot to mention a rather important detail: the menu bar at the top needs to be sticky. That is why I used the position: fixed property for the DIV. The other page content is supposed to scroll under that menu and out of the window, see the modified fiddle here which is based on ntgCleaner's answer. This kind-of changes the whole thing, doesn't it! Sorry about that...
Thanks!
A couple things I changed:
I made your banner DIV a container instead of just a free floating div. Probably not necessary.
I gave that banner div a min-width:280px and made it overflow:hidden;
I made the images just float left and right, not positioned relatively or absolute (since it's in the div container now).
#banner {
left: 0px;
top: 0px;
width: 100%;
height: 60px;
background-color: lightblue;
z-index: 1;
opacity: 0.8;
overflow:hidden;
min-width:280px;
}
#left {
float:left;
margin:5px;
height:40px;
}
#right {
float:right;
margin:5px;
height:40px;
}
Here's the fiddle
EDITED FOR THE EDITED QUESTION:
You will just need to place all of your content under your header into a div, then give that div a top margin of the height of your fixed div. In this caes, it's 60px.
Add this to your HTML
<div id="content">
this <br>
is <br>
some <br>
test <br>
text <br>
</div>
then add this to your CSS
#content {
margin:60px 0px 0px 0px;
}
Here's the new fiddle
Is this what you are after? http://jsfiddle.net/9wNEx/10/
You are not using the position: fixed correctly. Fixed means 'positioned relative to the viewport or browser window', and that is exactly what you are experiencing.
I removed the position: fixed from the images, and placed them inside the div. This should keep them always on top of the page, as they are inside the div that is still positioned fixed.
Also I tweaked some of the other styling to replicate your example. Note that i removed the fixed height of the head and replaced it by a padding bottom. This way the height will follow the content whenever the screen size becomes to small and the images are forced underneath each other.
The css looks like this now:
#banner {
left: 0px;
top: 0px;
width: 100%;
padding-bottom: 15px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8;
}
#left {
float: left;
margin-left: 10px;
margin-top: 5px;
height: 40px;
}
#right {
float: right;
margin-right: 10px;
margin-top: 5px;
height: 40px;
}
I changed your HTML to put the <img> tags inside the banner, and added the min-width to the #banner since it has position: fixed. You'll still need to add min-width to the body or a container that wraps all other elements if you want there to be a min-width of the entire page.
http://jsfiddle.net/Wexcode/s8bQL/
<div id="banner">
<img id="left" src="http://www.google.com/images/srpr/logo3w.png" />
<img id="right" src="http://www.google.com/images/srpr/logo3w.png" />
</div>
#banner {
width: 100%;
min-width: 800px;
height: 60px;
background-color: lightblue;
z-index: 1;
position: fixed;
opacity: 0.8; }
#left {
float: left;
margin: 5px 0 0 10px;
height: 40px; }
#right {
float: right;
margin: 5px 10px 0 0;
height: 40px; }
When I look at your Fiddle I think your problem isn't the floats at all. position:fixed supersedes float. Those two elements aren't floating at all, they're in a fixed position (similar to an absolute position), which is why they overlap when they don't have enough room.
Take out float:left and float:right, the result will be the same. Also, top, left, bottom, and right don't work on non-positioned elements. So they are superfluous on your banner.
If you use floats, however, when there is not enough room the right image will wrap underneath the left. See http://codepen.io/morewry/pen/rjCGd. Assuming the heights on the images were set for jsfiddle testing only, all you need is:
.banner {
padding: 5px; /* don't repeat padding unnecessarily */
min-width: ??; /* to keep floats from wrapping, set one */
overflow: hidden; /* clearfix */
}
.right { float: right; } /* only need one float, don't over-complicate it with two */
I have a left column with a background image and another background image for the body so it fills the rest of the screen. I have content area to the right of the left column that will extend vertically past the browser window. With the left column set to 100% height, once I scroll down the background image for the left column will not extend past the original size of the screen. Is there a pure css way to have the left column extend past the original height of the browser window, to match the content area?
http://ophilium.com/test/test.html
html {
height: 100%;
}
body {
height: 100%;
background-image: url(../images/rightPanel.png);
background-repeat: repeat;
height: 100%;
}
#left {
background-repeat: repeat-y;
width: 207px;
padding: 10px;
float: left;
height: 100%;
background-image: url(../images/leftPanel.png);
}
#right {
height: 500px;
padding: 10px;
min-width: 773px;
float: left;
}
#container {
position: relative;
min-width: 1100px;
height: 100%;
background-repeat: repeat;
}
Add the rule background-attachment: fixed; to your body element.
please check demo http://jsfiddle.net/n9Tcv/
var right_height = jQuery('#right').height();
var left_height = jQuery('#left').height();
jQuery('#left').height(right_height);
you know how to use jQuery? if you have any doubt just reply me, i do this code like this situation
If I understand your question correctly you need to use the equal height columns technique. Googling for a solution brought me here and here. There you may find different ways to make the sidebar to be equal to the main content area. Simply choose the best one :)
When you set html and body tag height to 100%, they both set their height to inner height of the browser window which means they both have the same value and also a fixed value. And since your divs, #container and #left, are childs of and relative to body element, they set their 100% height accordingly, i.e to inner height.
Moreover, if you need an answer for the question: Then why does the div #right extend?, it is because it does not extend but overflows. And since you don't tell the body or #container or #right to set the overflow property to hidden, none of them prevents such kind of browser behavior. And in this case you assume the original window height is the height which overflow causes.