Can someone tell me what I'm doing wrong here? I want my background image to travel to the end of it's div and not outside of it.
'rule-btm.png' is going outside of #wrap-content.
#wrap-page{
margin:auto; <-- This is to center the content on the page
min-width:1170px;
max-width:1280px;
}
#wrap-content{
margin:0 5px; <--This is for a margin around my content
}
#tagline:after {
background: url("rule-btm.png") repeat-x;
content: "";
float: left;
height: 7px;
max-width: 1280px;
min-width: 1170px;
}
I am just curious so I'll ask. Would it be correct for me to float both #wrap-page and #wrap-content left?
<div id="tagline">
<div></div>
<div>Test</div>
<div></div>
</div>
EDIT:
I noticed that if I remove the min/max-widths and replace it with just width, I can get the background to travel where it needs to be.
Anyone?
it's not Outside , It needs to be positioned
for example
background: url("rule-btm.png") top left repeat-x;
Related
I looked all over the internet for a solution to this problem, but I couldn't find a solution that fit my case. I am trying to make an IMG overflow on the left side of its container instead of overflowing on the right. I tried adding direction: rtl; but it did not work. Here is the pic of what I'm dealing with:
pic
Thanks in advance
A way, if you have information about your image height and width, is to set the image as a background and control its left value. You will need to set a negative value to the background-position-x, such that the overflow will appear that it is starting from left.
.img {
overflow: hidden;
background-repeat: no-repeat;
width: 400px;
height: 400px;
background-position-x: -322px;
background-image: url(https://i.stack.imgur.com/KyxiY.png);
}
<body>
<div class="img"/>
</body>
Or another, if you would like to use the img tag.
.img {
position: relative;
left: -144px;
}
.container{
overflow: hidden;
}
<body>
<div class="container"><img class="img" src="https://i.stack.imgur.com/KyxiY.png"/></div>
</body>
So I'm attempting to create this effect where when the window is pulled big enough two divs align side by side but when made smaller the divs stack above each other and centred neatly.
So far I have this view.
The CSS for the DIV wrapping the image is:
div.pararight {
width:451px;
height:272px;
margin:0px auto;
position:relative;}
Titled 'Pararight' because when the screen is this wide the divs should sit by side with the image on right.
The CSS for the DIV wrapping the text is:
div.paraleft {
width:480px;
margin:0px auto;
position:relative;}
Named 'paraleft' as the text will align to the left.
It's also important to mention. I think, these 2 DIVs are wrapped in another DIV which is:
div.hitterbox {
width:100%;
margin: 0px auto;
font-family: sans-serif;
font-size: 13pt;
line-height:18pt}
Mainly because there will be multiple of these hitterbox div's down the page and it was easier to copy paste and change the HTML content, don't need to explain that though I'm asking for your help!
Finally another piece of information is that the container holding the hitterbox is another DIV which has the CSS:
div.pagecontent {
padding:10px;
font-family: sans-serif;
font-size:12pt;
position:static;
text-align:center;}
Finally the HTML for it all:
<div class="pagecontent">
<div class="hitterbox">
<div class="pararight"><img src="images/Macbook.png" width="451" height="272" alt="Mac Book"/></div>
<div class="paraleft">The Onscreen Text</div>
</div>
</div>
</div>
I put pararight above paraleft so it aligns up and down that way as you can see. The white page container of all the DIVs mentioned below is 1200px wide at the moment so enough room to sit both of these guys side by side.
What would I need to to make the text DIV move to the side of the image and the image to the right. I have used float:left, float:right in the respective DIVs but then when its shrunk down to create the stack effect they are shifted right and left respectively until the user shrinks the page down to 480px when the text will be centred but the image will still float slightly right.
What have I done wrong here? :o
I would use display: inline-block, then add text-align: center in the parent element.
JSFiddle: http://jsfiddle.net/gW8r2/1
.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}
.parent > div {
display: inline-block;
}
.a {
width: 100px;
height: 100px;
background: red;
}
.b {
width: 200px;
height: 100px;
background: blue;
}
This is a generalized solution. In your case, .parent would be .hitterbox, .a would be .paraleft, and .b would be .pararight.
So yet another question about vertically aligning an image within a div, but I think mine is different than the others I've found on here. I can't seem to find a solution that works for my situation.
I have a DIV that is 100% width (to it's container, which is floating left and has a set pixel width) and has a set pixel height. I have an image inside that I am positioning absolute to get it to the background of content within the DIV. The image is fluid with a width of 100%.
All works well, but I want to get the image to vertically align to the middle of the container and height is unknown.
Here is some sample code that shows what I'm trying to do:
<div class="container">
<div class="image-wrapper">
<img src="http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg"
width="100%" />
</div>
<p>Some text</p>
</div>
And some sample CSS:
.container {
width:100%;
margin-top:10px;
height:100px;
overflow:hidden;
}
.image-wrapper {
position: relative;
}
.image-wrapper > img {
position: absolute;
z-index: -1;
}
p {
text-align: center;
padding-top: 10px;
color:#fff;
font-weight: bold;
}
But the flower should show up with it's center visible within the container div.
Any thoughts? I'm trying to avoid any Javascript sizing (the outer container, not shown in this sample, is already being sized). I'm not opposed to more DIVs, tables.. whatever you got!
A jsFiddle to demo this:
http://jsfiddle.net/JonMcL/sNz9h/
Why not go for the background-image property? That allows vertical centering...
http://jsfiddle.net/urrWS/
Assuming you want to only scale the image down and not stretch it beyond its native resolution this should do the trick. A little bit of jQuery is involved but it's minimal. Essentially, this adjusts the top-margin of the IMG on the window.resize event.
HTML
<div id="container">
<img id="image" src="image.jpg"> <!-- native size is 480x300 -->
</div>
CSS
#container {
margin: auto;
width: 80%;
height: 300px;
border: 1px solid gray;
}
#image {
display: block;
width: 100%;
max-width: 480px;
margin: auto;
}
jQuery
function adjustImage() {
$("#image").css('margin-top', ($("#container").height() - $("#image").height()) / 2);
}
$(window).load(function() {
adjustImage();
$(window).resize(function() {
adjustImage();
});
});
If I get what you need I would suggest setting the background image via css, then you can set the position correctly etc.
.container {
width:100%;
margin-top:10px;
background-image:url("http://farm5.staticflickr.com/4111/4968056789_d872094672_o.jpg");
background-repeat:no-repeat;
background-position:left center;
height:100px;
overflow:hidden;
}
http://jsfiddle.net/sNz9h/6/
I have three columns on a webpage. One at the left hand side. Other at the center and the last one at the right hand side. I want to shift the right div below the left div (and left div is an expandable div).
But the problem is that the right div and the center div have the same parent div. And the left div and the parent of right and center div have the same parent. This is what I mean to say-
<container>
<leftContainer>
<leftColumn>
<mainContent>
<rightColumn>
<centerColumn>
And I want to shift the <rightColumn> below the <leftColumn>. Is it possible ?
Also since I am working on a custom user stylesheet, I cannot change the code, I can only modify the CSS.
How do I do this ?
If you know the height of the left div, you can float: left each div and then use a negative margin-height on the centerColumn of the height of the left column.
Example: <-- click for a demo
<div id="container">
<div id="left_container">
<div id="left">left</div>
</div>
<div id="right_container">
<div id="right">right</div>
<div id="middle">middle</div>
</div>
</div>
<style type="text/css">
#container {
width: 160px;
}
#left {
float: left;
width: 80px;
height: 100px;
background-color: #eee;
}
#right {
clear: left;
float: left;
width: 80px;
height: 100px;
background-color: #ccc;
}
#middle {
float: right;
width: 80px;
height: 100px;
margin-top: -100px;
background-color: #aaa;
}
</style>
I don't believe this is possible with an "easy" fix. You can think of divs as boxes, and what you're trying to do is to keep the center column to the right of the left column while putting the right column below (which would distort the box).
There is a fix where you can make the rightColumn position absolute and set the position of the column relative to the window itself. However, I don't suggest you do this. Instead, you should probably modify the css and put the right column in the same parent div as the left column.
I've found a lot of variations to this question within SO, but it seems no matter what I try I can't get this (seemingly very simple!) thing working!
What I'm trying to do is to keep the 'centered' div in the center of the viewport and to place the 'sidebar' div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the 'centered' div.
Here's some test code on jsfiddle:
http://jsfiddle.net/6wCyr/13/
Everything I've read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results wherein the right sidebar is placed below the 'centered' div rather than beside it. That's what's shown in the link.
I've also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn't get that one going either.
Hopefully this question is as easy to solve as I think it should be! Just can't seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!
Thanks!
Live Demo
I moved div.sidebar inside div.centered.
I added position: relative to div.centered.
We're using this technique.
You don't have to declare a fixed width on div.sidebar.
CSS:
div.centered {
margin-left: auto;
margin-right: auto;
border: dashed;
width: 100px;
height: 100px;
position: relative
}
div.sidebar {
border: dotted;
position: absolute;
top: 0;
left: 100%
}
HTML:
<div class="holder">
<div class="centered">
CENTERED
<div class="sidebar">
RIGHT SIDEBAR
</div>
</div>
</div>
Try this.
http://jsfiddle.net/DOSBeats/6wCyr/16/
.holder {
margin:0 auto;
width:100px;
}
.centered {
border: dashed;
float:left;
height: 100px;
}
.sidebar {
border: dotted;
float:left;
margin-right:-100px;
width:100px;
}
If you do not set a width to your holder and center it, the sidebar will float to the edge of the window.
Try this:
HTML:
<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>
CSS:
#holder{
margin:auto;
width:500px;
}
#sidebar{
border:dotted;
float:left;
width:100px;
}
#centered{
border:dashed;
margin-left:110px;
width:380px;
}