I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
Related
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
I have a simple image gallery dynamically controlled by PHP to add and remove image thumbnails from a page. The problem I have is that I want the images to be aligned next to eachother until there is no room on that row and is forced to start another.
I have tried using float:left which worked but the containing body div with a height set to auto resized itself to not include the images. I then tried adding clear:both; to the images which fixed the body div issue but now has the images directly underneath eachother.
I've used float:left before in many cases but the containing div had a fixed height.
Does anyone have any idea on how I can fix this?
Thanks heaps :)
You have to add an empty div with "clear: both;" as the last element in the div containing the images.
If you add "clear: both;" to an image, that image will be placed on a new row because it wont allow floated elements on either side of it.
I have a main container div, where all the important content of the site is inserted, 800px wide, centered horizontally.
I need to put multiple absolute positioned divs layered below it (via z-index) and outside its width, without causing extra scrollbars to appear, and without losing the main container scrollbars (so puting overflow:hidden in a wraper won't do).
In other words, I was wondering if it's possible to create divs with different elements inside (videos, images, or text) that could be treated as backgrounds, so that the scrollbars would only appear when the window resizes below the 800px wide (width of the main container), and the rest of the divs would just bleed out (something similar to what swffit causes with an embebed flash movie).
Is there any way to do this via css or javascript?
Thanks in advance!
There is a way that requires CSS only. I once faced similar problem with this web site I created, take a look at the source. The curves by the side are done this way.
Trick is to change positioning of main container to relative with no shift - that causes change of coordinates base, here is a link. Than use absolute positioning of the "background divs" to get them outside the main box.
To solve the overflow problem use some extra div wrapper (in my site with id graphic). To specify its width use a range - min-width equal to main box and max-width as total width including the "backgound divs". And to this wrapper set the hidden overflow.
Hope it helps.
I have a website built with divs floated to various parts of the pages to create the look I want. My problem is, when I make my browser smaller the floats all cram to the left side instead of holding their positions and simply giving a scroll bar.
All I want is for my pages to hold their form when the browser is not maximized.
I suggest you put a min-width on the div wrapping all your floating divs.
Than all your div will be floating as normally, but when the browser will be smaller you will have a scroll bar.
Yeah the code would really help, but a solution (I think) would be to wrap all your floated divs in a div that has a defined width.
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.