I have my wordpress theme built but there is one problem, I want to have an image behind my footer but not be part of it. In my site I have my footer image that repeats horizontally and an image behind it which is a compass. My issue is when I put the image in it acts like part of the footer and not the background (it's not my background image just on top of it). Here is a link to my blog (the code is too long to post here):
http://blog.zombiesarefierce.com/
also here is a pic of what my footer is supposed to look like (the image i'm talking about is the compass), any help would be greatly appreciated:
http://www.freeimagehosting.net/jq19y
Just put your compass image in a new division and apply z-index to all elements at that point. Z-index specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. (Negative numbers are allowed)
Check this link to know more about z-index.
Related
I'm finishing this website page, http://www.goldhairmoveis.com.br/bancos
But somehow the product alignment is broken.
All the configuration is the same for all divs and only this is broken.
The problem is that one of the images (cadeiraopop.jpg) is 1px bigger than the rest.
The reason this is a problem, is the bootstrap alignment is done using css floats. So what is happening is the element starts and the oneside of the page and floats in the direction that you have specified (in this case, starts right, floats left). It continues to float until it hits something and then it stops. There for, you will need to ensure all images are the same height (preferably the same width as well.)
You can do this by manually editing the image size, or just use a css height attribute.
I have 3 separate graphical elements; the header, the footer, and the content-background. The content background is repeatable, and my intention is to allow the page to dynamically adjust without breaking any flow of the page. I've tried to achieve this by applying the 'header image' to a div at the top of the page - the 'content-background' to the container (of both the content area and the menu), and finally the 'footer image' at the bottom of the page - outside of the container.
It seems to work well when I have very limited content on the page - however, the moment I put a of content in the content area, it just hangs out over the edge of the images and looks awful, as opposed to repeating the background and nudging the other divs down.
I don't want to introduce overflow:scroll, or anything like such - and I'm desperate to try and avoid JavaScript. I'm sure I've made a flaw somewhere in my thinking, but I'm not too sure where. I have a feeling that I need to do something regarding positioning - and changing the heights of certain divs (container, content are still defined as the base; but whatever I set it at, it either has no effect or causes the page to look bizarre).
Instead of copying-pasting the walls of texts, I've posted the address to a temporary section on my website.
It seems like you have a few issues. Setting a height on #container is a problem, and not clearing your floats of your #content and #rightbar elements is another problem. My belief is that fixing both of those things will give you the result you're expecting.
From what I understand from your question, you want your div tags to become bigger as the text gets more and more.
The solution is simple: Use min-width instead of width. it will adjust itself
I'm trying to make a thumbnail which on hover will move it's image (that's longer than the wrapper) all the way to the left using only CSS and using the img element and not a div with background-image.
The problem I have is that I don't know how could I find how much to move it given the fact that the images have different widths.
I did a demo where the left image moves correctly because I calculated how much it needs to be moved and the right image with the same CSS moving incorrectly.
It's not clear why you're restricting yourself to manipulating the img element alone and not exploring more usual background-image sprite-like hover event manipulations.
Take a look at this Codrops article and their demo's here (note there are 5 demo's in the menu).
The techniques offered don't produce the exact end result you're after, but they do include the structure for the type of events and manipulations you'd need to use.
I'm pretty sure this can be done with CSS and divs, but I can't find an example anywhere.
Its hard to answer this without seeing any code or visual of what you're trying to accomplish. Could you post a link or JSFiddle?
If you don't want your image to overlap the slider or anything, simply having it higher in the HTML markup will mean it appears above the slider div.
If you want it to overlap, one solution could be to use absolute positioning, which is the preferred method of having something overlap another element. You may want to group the image and slider in a position:relative div, with the image or image div with {position:absolute; top:0}.
Again, if you post code and more details, I could help more.
EDIT*the issue apparently comes down to the fact that, i need to use relative position on the large image, so i can adjust the top value. this causes the thumbs to be put on top of the main image. When i remove the relative positioning of the main image, the flow looks fine, but the top positioning is disregarded- i sort of need both to have the dynamic manipulation of this app im developing*
I wish I could understand why this happens like 90% of the time I go to code div layouts.
You have content in your div with a certain height, and then you have another div directly after it - and somehow it just goes right on top of the first one.
I wish I knew where the problem was, but I can't figure out what CSS is the cause.
Anyways, if you care to take a look, this is the sandbox of the issue I'm having:
the reference is changing because i keep updating it to check sorry.
http://www.drewswinson.com/DP/
I'm making a dynamic jQuery gallery viewer and the thumbs just don't want to put themselves below the image.
It happens all the time though; is there any reason content inside a div would allow subsequent divs to not be placed below the content its supposed to be filled?
You problem is the position: relative attribute on imageDiv.
It pushes the image down from where it should be. If you remove that, the static flow of the page will be used, which is what you want in this case.