alite so i used a tutorial from this site: http://www.webreference.com/programming/css_gallery/index.html
the problem is, when i added more images, the gallery on the right fell out of the div margins. to fix this i used overflow:auto. now when there are a lot more images, i am allowed to scroll down my div. problem is the image shown when i hover is positioned at the top part of the div. so when i scroll down too much, the image either gets cut out from the top or doesnt appear at all. so its kinda like on this page right here. if you scroll down this page far enough you wont see this post any more unless you scroll back up. is there a css code that i can use to fix this. basically what i want it a position:fixed effect in the div box with the hover thing. so how do i edit the tutorial code to do that?
The issue is with step 9 in the tutorial
#container li {
float:left;
}
An important concept to know with floats is the clear property. Because the space of the images exceed that of the containing div, the images effectively fall out of the div. There are several ways to resolve this issue. Read here for more http://css-tricks.com/all-about-floats/
1.overflow: auto; like you have already implemented
2.define a class
.clear {
clear:both;
}
and put <div class="clear"> right before the closing tag of the container
3.Use pseudo selector :after
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
change <div id="container"> ... to <div id="container" class="clearfix">
Personally, I prefer method 3, because it makes markup cleaner. Just be aware of browser compatibility for method 3.
Related
On a simple markup:
<div class="line">
<div class="content_width">Content</div>
</div>
with CSS:
.line {
background: yellow;
}
.content_width {
width: 500px;
}
yellow background is wide as a browser window, so if window width is less than 500 and you scroll to the right you can see it was cut off. How to make browser render this correctly? Test Fiddle
I think the .line should, as a parent element, take the maximum width of its children, but maybe I am wrong. I could set the width to the .line, too, but I would like to see more elegant solution, without setting additional widths, because the site is responsive and this is only an IE8 issue.
I thought first this was an IE problem, but I see now same happens in other browsers. I could not notice that because the site is responsive.
Try giving a:
display: inline-block;
To the .line class.
While I know this works, I can't point you to an official documentation why it does. Perhaps someone else can come up with an explanation + better solution.
A parent div must completely contain the contents to a child div. Due to an odd circumstance, that child div might be wider than the page view itself. Problem being, the parent div seems to always be limited to the page width, no matter what it contains.
http://jsfiddle.net/e5Lkq/1/
contains:
<div class="outer clearfix">
<div class="inner">Oversized content here.</div>
</div>
.inner{
background-color:red;
height:50px;
width:1800px;
}
.outer{
border:5px solid blue;
/* overflow:hidden; */
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
In this example, I need the outer div (with the blue border) to expand around the child's contents.
I've come across this problem before - something about a quirky rendering of the "body" style - but I've been unable to locate similar questions again this time. Setting overflow to hidden for the parent just cuts off the child element. I could always throw in a js to to resize after loading, but I'd rather avoid this. Any thoughts?
Thanks,
Jeremy
PS I see this similar item, but the answer is jquery. This might just have to be the way of it:
https://stackoverflow.com/questions/8360465/expand-parent-div-width-to-fit-children-divs-horzontal-scroll-website
What you want is similar to a shrink-wrap. http://jsfiddle.net/e5Lkq/2/
.outer { display: table }
To get old IE support, you can use inline-block (on a by-default inline element) inside a block container. See this and this (if you're really concerned about support). But I strongly encourage you to drop support (if you can). Is the extra 8% worth the effort? Also note that the percentages are different depending on the site.
floating the parent appears to work:
.outer{
border:5px solid blue;
float:left;
}
see: http://jsfiddle.net/n6WLG/
I am trying to position a Twitter and Facebook image next to my portrait on my website but in order to get the positioning correct i have to use divs. The problem is that when i add a div to the image and a link to it the div makes the image unable to be clicked and go to the link. I can't get rid of the divs because its the only way for my images to be positioned correctly. I will post a JSfiddle below with the code.
JSFiddle: http://jsfiddle.net/HeyItsProdigy/RVUhV/
Area of issue : <div id="facebook"><img src="fb.png" height="101" width="101" />
The problem isn't exactly as you describe. The issue is that your positioning is causing your Twitter element to overlap the others, which makes them un-clickable.
There's unfortunately not an easy solution. I think you're going to have to rethink your whole CSS structure, including eliminating the deprecated <center> tags to figure this one out. Good luck.
Use z-index:
#twitter {
position:relative;
bottom:290px;
left:168px;
z-index: 1;
}
#facebook {
position:relative;
top:83px;
right:168px;
z-index: 5;
}
jsfiddle
However, this type of CSS styling shouldn't be used in this manner. Using rules such as top, left, bottom, right etc should rarely be used for positioning, unless using absolute positioned elements.
You should look into using margin and padding as well as display properties for positioning your divs. Much of this code can be taken out.
I'm very sorry to tell you, but the answer is: do a modern HTML tutorial!
You should try Code Academy they have interactive course for beginners and intermediates with direct feedback. It seems you got stuck with an old HTML 3/4 book which won't do you any good.
But I also got an direkt answer for your link problem: this fiddle where you include the images as background-images and by using your classes and selectors efficiently you have to write(mostly copy+paste) very few lines if you want to add something.
You do the most with this CSS part:
.socialmedia a {
display: block; /* Because the image is probably higher than the text */
height: 50px; /* you have to set it to block and height 50px to show the image */
padding-left: 55px; /* make room for the background image(50px) and extra margin(+5px) */
padding-top: 12px; /* center in the middle of the image */
padding-bottom: 12px;
text-decoration: none;
}
Example g+:
CSS:
.g a {
background: url(logo_g_50x50.png) no-repeat;
}
HTML
<li class="g">+1 me on g+</li>
and done!
It's easier to read and even easier to maintain for later reuse or additions
I am trying to tweak a wordpress site but can't seem to get one of my parent div's backgrounds to be visible through the child divs on top. I've got the background image set for #main. The image I'm using fades to white at the bottom but, in the rendered page, I can only see about the top 23 pixels or so before the rest is blocked...I think by #primary.
The site uses a child theme based on Responsive and can currently be viewed here. I would copy/paste code for your convenience but I'm no longer certain what part of the code is responsible for what I'm (not) seeing. So I apologize in advance if this is not enough information to go on :-/
Looks to me like you have a float problem and the div#main is collapsing. Try one of the various clear-float techniques to prevent that.
For example, try #main { overflow: hidden } as a test - that will normally prevent the collapse.
Classic clear fix issue. Give #main an overflow:hidden or try the micro clear fix if any content is spilling out of the box.
#main {
background: url("http://wp.massosteopathic.org/wp-content/uploads/2013/02/headerhand-contd.jpg") no-repeat scroll 0 0 transparent;
clear: both;
overflow: hidden;
padding: 1.625em 0 0;
z-index: 1;
}
The #main div is only 24px high. This is because all child divs are floating.
add a
<div class='clear'>
with
.clear { clear: both}
just before the closing tag of your #main
I have an HTML page that for the sake of this question looks like this:
<html>
<head>
<style>
div { width: 100%; }
.success { background-color: #ccffcc; }
</style>
</head>
<body>
<div class="success">
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr>
</div>
</body>
</html>
Note the "very long line", and the background color of that div.
My problem (and I bet it is a basic one) is that the background-color stops at the edge of the screen. When I scroll out to the right to see the rest of the text, the rest of the text background is white.
Basically I want my div to behave like this:
To have the specified background color
To minimum have the same width as the screen, even if the text within is just a few words
To follow the width of the text, if it is more than the width of the screen
Optionally (and I know this is really a different, follow-up, question), if I have more than one such div, following the first, is there a way to have the two follow the width of the widest div automatically?
Did that make any sense?
Is there any way to do this?
I have set up a test page here, which, if you view this on iPhone, although a small font, shows the problem: http://www.vkarlsen.no/test/test.html
I saw the following questions listed as potential duplicates/suggestions by SO, here's what I noticed when I tried the information within:
iPad background for div blocks not spanning entire width of screen
Tried the suggested <meta ... viewport .../> tag, did not make a difference (it is present in the test page right now.)
Background color stretches accross entire width of ul
<div>s are already block elements
WebKit doesn't paint background-color for entire width of final inline list item
Tried setting the div to display: inline-block; but this did not appear to change anything
black magic:
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
The problem seems to be that block elements only scale up to 100% of their containing element, no matter how big their content is—it just overflows. However, making them inline-block elements apparently resizes their width to their actual content.
HTML:
<div id="container">
<div class="wide">
foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="wide">
bar
</div>
</div>
CSS:
.wide { min-width: 100%; display: inline-block; background-color: yellow; }
#container { display: inline-block; }
(The containerelement addresses your follow-up question to make the second div as big as the previous one, and not just the screen width.)
I also set up a JS fiddle showing my demo code.
If you run into any troubles (esp. cross-browser issues) with inline-block, looking at Block-level elements within display: inline-block might help.
.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }
You can try scroll or auto.
The inline-block display style seems to do what you want. Note that the <nobr> tag is deprecated, and should not be used. Non-breaking white space is doable in CSS. Here's how I would alter your example style rules:
div { display: inline-block; white-space: nowrap; }
.success { background-color: #ccffcc; }
Alter your stylesheet, remove the <nobr> tags from your source, and give it a try. Note that display: inline-block does not work in every browser, though it tends to only be problematic in older browsers (newer versions should support it to some degree). My personal opinion is to ignore coding for broken browsers. If your code is standards compliant, it should work in all of the major, modern browsers. Anyone still using IE6 (or earlier) deserves the pain. :-)
It is because you set the width:100% which by definition only spans the width of the screen. You want to set the min-width:100% which sets it to the width of the screen... with the ability to grow beyond that.
Also make sure you set min-width:100% for body and html.
The width is being restricted by the size of the body. If you make the width of the body larger you will see it stays on one line with the background color.
To maintain the minimum width: min-width:100%
Try this,
.success { background-color: #ccffcc; float:left;}
or try this,
.success { background-color: #ccffcc; overflow:auto;}