Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've uploaded my website, so you can see how it works, and also can check the CSS there. It's not fully working, but the problem is visible. http://exampleforso.uw.hu/testvertaboraink.html
My problem is that I can't click the link on the page. Anyone can help me correct my code?
I'm still new to CSS, so my code might be messy or imperfect. And sorry for the language its hungarian.
#menuwrapper {
position: absolute;
top: 212px;
right: 0;
bottom: auto; /* or just remove */
left: 0;
z-index: 1;
}
You set a top value AND a bottom value of 0, with no height. The browser will fill that space up. This means that the menu wrapper will be on top of the rest of the content, so when you think you are clicking on the link, you're actually clicking on the menu wrapper.
You should get rid of all those position absolutes, or at least get some better z-indexing going so that the "3D" representation is correct.
The problem is your header has a height of 700px and position absolute, which means it overlaps not only your link, but you whole page, So either remove the height or the position absolute.
In your styletest.css file.
From #menuwrapper Remove the property z-index:1;
And it will work perfectly.
What's happening here is, your div that contains that link is getting overlapped by the div with id=menuwrapper. And both those divs have z-index property set to 1.
Removing that from #menuwrapper should fix the problem.
You should not really play with height values as that may distort your orientation and alignment should you open that website on screen that is huge.
remove the bottom:0 rule from your #menuwrapper CSS block. this will allow the menu wrapper to assume the correct height as dictated by its contents.
This way, you don't need to declare a specific height (which would change with things like font size, etc.) or change your z-index, which allows your menu flyouts to correctly display above the page content.
Give your menuwrapper a fixed height. Something like this:
#menuwrapper {
height: 45px;
}
or remove the "z-index" that you have given to the menuwrapper.
Currently, your menuwrapper has a height of 430px and along with the z-index it makes the link, unclickable.
Update: Removing the "bottom" value is the right solution.
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
I have a question regarding my website.
I have a parallax effect going on with my website but I want the text "Clinical trials" and all the text below it to stay fixed when I scroll over it, right now it just scrolls with the page how can I fix that?
I believe this is the correct way to respond instead of adding another answer. I have had similar issues with javascript working perfectly in one browser but not another. I remember Firefox causing the 'flashing' effect. So my question to you is, have you tested it on multiple browsers?
Sorry for the original response not being anything close to what you were trying to do. I read the original post and quickly scanned the tags assigned to it. By the time you had edited the original I had already answered. I am leaving the original markup incase it helps somebody else with a html/css implementation. The html/css keeps a div visible throughout the entire page. It doesn't provide the effect of keeping it visible once the user scrolls to it's location on the page.
ORIGINAL
The text you want fixed while scrolling should be in it's own div and assigned a class in the style sheet. Use top and right to position it.
HTML:
<div class="trials-fixed">Clinical trials</div>
CSS:
.trials-fixed{
position: fixed;
top: 0;
right: 0;
width: 300px;
}
The position property is explained more here.
You may have to set the z-index of the text; explained here.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have read many different problems referring to a white margin at the top of website and I haven't found an answer to help.
http://codepen.io/WikiWookie/pen/DijrI
Here is my code. I've just started to learn html/css and I'm trying to make a navigation like bootstrap's. I'm trying to do it from scratch, so I can learn more stuff
Oh yeah, I've tried to mess with some margin elements, but to no avail. Thanks guys!
Remove margins from ul tag
ul{
margin: 0;
}
Your <ul> margin is "bleeding" through your header and creating the white space. Either set:
header ul {margin-top: 0;}
Or
header nav {overflow: hidden;}
Or similar clearfix to contain margin within header.
As a side note, when you are using codepen, you do not put in any code in the html area except for what goes between your body tags. Codepen is set up to automatically link to your css & javascript files.
As far as having the nav bar positioned at the very top, left corner of your site, you can absolutely position the element(s) like I've shown below.
header nav
{
position: absolute;
top: 0;
left: 0;
width: 100%;
}
Remember, if you absolutely position the nav bar, you need to change the positioning of the next element that follows. A good way to learn about positioning is to use the developer tools in the browser and select the area you are interested in learning about. You will be able to see all the html & css to reveal how the developer of the site built their pages. Hope this helps. Here are a couple of links that helped me when I was first starting to code.
CSS Tricks: Absolute Positioning
Explaining CSS Positioning
I have a webpage in which I want to set height of head to 60px, but somehow its inner elements overflow and thus it doesn't show right. I'm suspecting that the logo's background is somehow setting the height to be bigger than it should be. I'm specifically setting background-size: 202px 56px; and height:56px;. The original height of background image is 250x69px and it should be resized to (auto calculated)x56px (or fixed 202x56px would be ok too).
If this would be displaying right, there should be a small 'border' on the bottom which turns blue when its corresponding top element is hovered.
The styles are originally written in SCSS with help of Compass and compiled to CSS. I've also used Compass to generate sprites. I've only provided CSS files on webpage. I'm not putting any code here because it's too large (200+ lines in each file). If I have to show SCSS files, please let me know.
The webpage I'm editing can be found on this address: http://stogrebro.com/page-test/
I'm originally creating this webpage on localhost so there might be some broken links. If there is anything important missing, please let me know.
i made some tries with your page and found out that the "over-height" of your <td> elements is due to the padding for anchor elements inside <td>. You have first to put it to 0 and then to apply the other paddings for left and right you are using:
#head table td a{ padding: 0px; }
Moreover you can just set the height directly to the <div id="head"> and set it with hidden overflow (which also makes the trick but lets <td> with wrong height).
#head{ height: 60px; overflow: hidden}
The background-size works fine and doesn't make any mistake.
Hope it helps you.
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.