I am building a blog and have a large header image with the goal of filling the top of the screen (unless on monitor larger than 1500px)- however the scroll bar goes far beyond the header content and displays white space.
When viewed on an Ipad it zooms out and shows the extra space on the side of the content. Why is the width significantly larger than the image?
Here is the site: http://beautyintheweeds.com/
Here is the HTML and CSS:
<?php wp_head(); ?>
</head>
<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp- content/themes/journalist/images/longtop.jpg"/></div></div>
div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}
This code worked to center the header beyond the container and my hope was that it would always fill the top of the screen unless the monitor was too large. Any ideas why it is creating extra scroll space beyond the image?
Thanks.
It's the element with class="inner" that takes up the space. It gets its size from the image inside it, but then you use relative positioning to display the image to the left of the element.
If you want to use that method to center the elements, put a div around it all, that has overflow: hidden; and no width set so that it uses the default width: auto which will make it take up all the available width.
Try this
#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
I would pull them out of the container. Move div.outer above div.container in the markup, remove all css for div.outer, div.inner then add a text-align: center; to div.outer and remove div.inner completely.
http://jsfiddle.net/pWDrD/
You will see if you increase the width of the fiddle box then the image automatically increases width without having any scroll bar. Do you understand how i did that? Let me know. If not i will explain. Simply put, when you want an image to go to 100% of the monitor then you need to put it into a container with width as 100% and margin auto, not fixed width and no position at all.
Related
I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
#decoration extend a bit outside of #wrapper. The problem is that if the browser viewport is 910px a vertical scroll bar appears.
How do I make it so that #decoration to not occupy space so the vertical scroll bar do not appear.
EDIT:
Check out this link to see what I want. Just in such a way no vertical scroll bar is there.
http://jsfiddle.net/HLqwN/
Using overflow:hidden will clip part of #decoration so that do not work.
<head>
<style>
#wrapper {
width: 900px;
position: relative;
}
#decoration {
position: absolute;
width: 542px;
height: 126px;
top: 0;
left: 660px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="decoration" src="/images/decoration.png" alt="" title="" />
<div id="content">
Some content
</div>
</div>
</body>
You could set overflow: hidden as the other answers are suggesting.
However, a "decoration" image should not be an <img>, it should be a CSS background-image.
Like this:
#wrapper {
height: 126px;
background: #ccc url(http://dummyimage.com/542x126/f0f/fff) 660px 0 no-repeat
}
See: http://jsfiddle.net/rdSJH/
if it is a decorative image, perhaps you should use it as a background image on the wrapper rather than in HTML source, you can still position it 660px left and it will not then cause a content scroll bar as it's not content.
#wrapper {
width: 900px;
position: relative;
background: url(background.png) no-repeat 660px 0;
}
[update after your clarification]
OK so you want the decoration to overlap the wrapper if there's space available to do so, like a pop-out?
is so try this, fiddle
notes: the span holding the background image should be outside the wrapper, no width on the span use your left co-ordinate and right: 0; or whatever margin from the right you might like, and still use the image as a background image. the span can sit down the bottom of your HTML out of the way
You could use overflow: hidden; on your wrapper
You might want to wrap a div around the decoration image and set overflow:hidden on that. Setting overflow:hidden on your wrapper might cause other content to be clipped depending on your layout.
If it's just a decoration you should try doing it with a background image though, then you don't have to worry about the clipping.
I have a page which is divided up into 3 divs, left center and right. I don't want to display anything in the left and right, they just frame the page.
#leftDiv
{
background-color: Gray;
width: 10%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
}
#rightDiv
{
background-color: Gray;
height: 100%;
width: 10%;
left: 90%;
top: 0px;
position: absolute;
clear:both;
}
The center div has a table, which allows the user to select how many rows to see. If they chose a large value then the body of the table went beyond the bottom of the left and right div.
To correct this I put the following code in
if ($("#leftDiv").length == 1) {
$("#leftDiv").height($("body").height() + "px");
}
if ($("#rightDiv").length == 1) {
$("#rightDiv").height($("body").height() + "px"); ;
}
this works fine until the user selects a smaller value than the page size, after selecting a larger value.
Then the left and right divs get set to less than 100%.
What i need is a way to find out what 100% is in pixels and then I can compare this to the height of the body and decide which is bigger.
Any ideas?
Thanks
John
Use margin: 0 auto
Kill your left and right columns, give your main div a width, and then center that div using an auto left and right margin. For example:
#mainDiv {
width: 80%;
margin: 0 auto;
}
Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:
#center_div {width: /* whatever */;
margin: 0 auto; /* to center in the viewport */
overflow: auto; /* or visible */
}
You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.
If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.
CSS:
#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}
Html:
...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...
(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.