I'm trying to create a menu which is divided by 50% width.
this is what i've been trying so far:
http://jsbin.com/gobacewovu/1
so, as you can see, my problem is that the "search" text is invisible. I noticed this problem and created another page, using a "menu" class.
http://jsbin.com/melekitata/1
the problem is now bigger. I was even looking for a solution in this site but I have not found a solution yet, though.
does anyone can help me with that, I'm seriously stuck.
thanks.
It is because #look has fixed position, you would need to give #search position: relative; z-index: 1; to place it higher up the stacking order.
CSS
#search {
position: relative;
z-index: 1;
}
I'm not completely sure what you are trying to achieve with this layout however but if you give me some more info I can help you.
Related
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
this is what I'm trying to achieve: http://imgur.com/2OqnSIu
Three hours passed and I still can't figure it out how to do this. I've tried everything with positions and z-index but nothing works. I really don't want to use everything in a single image(border + pictures) and using it as a background because I'm trying to do a responsive website. Any ideas ? Thanks
I've tried to understand your question, but without real examples it's very difficult to uderstand:
Anyway, here's a JsFiddle which I've created which I do believe is what you need.
I do have a container with a padding, which is holding another container with a border. On top of that particular border an image is showed.
The above example is achieved by using z-index and relative positioning:
img { position: relative; z-index: 100; top: 100px; left: -30px; }
Hi and thanks for taking the time to look into my issue.
I am trying to implement a menu that looks just like this:
The main thing here is creating those triangles for either side, then positioning them underneath the menu to give it a 3d effect.
I made it work just find on the site above but I can't seem to make it work on this other project.
Here is the site I am trying to get it to work with:
Setting the the z-index: -1; put the triangles behind all of the background images including the white bg on body, where in the other site setting z-index: -1; leave the triangles just above the body bg.
I have tried setting all the bg images to z-index: -1; and the triangles to z-index: 1; and the menu to z-index: 2; but still can't make any work.
Can anyone give me some better insight on how the z-index property can be used in my particular situation?
Thank you.
Okay, I'm having trouble figuring out what exactly it is you're looking at/want, but these elements you're working with are positioned, correct? Z-index won't work if they aren't positioned as absolute, relative, or fixed.
W3Schools on Z-index
I was able to figure out my issue by using this answer:
stackoverflow.com/questions/8456575/3d-ribbon-corners-how-to-do
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.
I know this has been asked here countless amount of times, I've looked around trying to implement the given solutions.
#footer
{
min-width: 900px;
text-align: center;
position: absolute;
}
Its the very last div on the page. I'm testing it out here blog.0arrays.com (a default theme for tumblr), but the footer just won't stick to the bottom. It appears in the middle of the page. I can provide the full code if anyone wants to look at it, as it's too long to paste here.
Thanks in advance.
EDIT:
I don't really care if its sticky or not (i.e right at the bottom), I just don't want it to appear in the middle of my text, as you can see on the site.
EDIT 2:
I've posted the full code here (via pastie), arrrr.... I bet the answer is really simple, this is doing my head in. For some reason, your suggestions are not working.
No one...?
In addition to the other attributes you've set for #footer, you should also add bottom:0 to set it's position to be the bottom of the page.
EDIT: You will also need position:fixed instead of absolute
If you don't care about keeping the footer at the bottom you just have to remove position: absolute; from #posts.
If you want to make the footer stick to the bottom of page, use fixed position.
#footer {
position: fixed;
bottom: 0px;
}
I just need to use
`display: table-row;'