I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.
Related
I'm working on a couple of aspects of someone's website and I'm having a bit of an issue with getting the tabbed navigation to display properly without absolute positioning, and as it's set to absolute the text on the Details tab overruns the "footer" sometimes. (They use a random Testimonials block which pulls varied length quotes, the short quotes cause the overrunning. If it doesn't go over please just refresh)
http://goo.gl/5Iwc1r
Normally I would put this into a jsfiddle but to get the issue to display I would practically have to copy the entire css and html of the page, which wouldn't be very efficient and certainly not very clear to look through.
So, does anyone have any suggestions on the best way to approach this problem? All advice would be much appreciated.
I'm not 100% sure what you're trying to accomplish here. But I'll give it a shot...
Try adding a div underneath the tabbed navigation to act as a spacer, because of the way positioning acts upon screen real estate, this "spacer" div can keep things underneath it nice and tidy. Just set a height value to it to force the content to display where you would like it to.
Hope this helps :)
Because of the way you've structured your pages, it's not going to be easy. The content is places with a position: absolute;. This causes the content to not push down the footer, since the height isn't registered.
I think the fastest way to solve this, without having to rebuild half your website, is by using javascript. Since I see jQuery is loaded, I shall write this using jQuery.
jQuery(document).ready(function(){
setHeight();
jQuery('input[type="radio"]').on('click', function(){
setHeight();
});
});
function setHeight(){
jQuery('#wrapper').height('#wrapper > div > div').is(':visible').height());
}
This piece of code should set the div with id wrapper to the height of the currently visible div.
I haven't tested this, and it is no pretty solution, but it should work.
Good luck!
Here's my site in development: http://www.modernfuture.net/wordpress
I've been searching post after post to find a solution and I've come up empty handed. For some reason there's extra space between the bottom of the pagination and the footer. I've tried setting a max-height and/or height value on all the divs & that didn't work. I've tried adding a div wrapper around the body but that only messes up the rest of the site.
I really need some help on this and I would greatly appreciate an original response & not a link to someone else's post. I know this is a topic that's been brought up before, but I've been reading other people's posts on this matter and it's been more of a headache than helpful. Please be kind as I'm relatively new to Wordpress.
Thanks in advance.
There is a bottom:210px; defined for .wrapper section[role="main"]. Remove that style. It will work fine.
It is in line 92 of the stylesheet: http://modernfuture.net/wordpress/wp-content/themes/html5blank-master/style.css?ver=1.0
Also define a height for .header.
conditionizr this division seems to be the problem. You may want to rewrite the height, the margins and padding. Some values may seem to come from a script.
I've currently looked at every single post I can on Stackoverflow for a solution to this issue. I cannot figure it out. The website in question is http://ourcityourstory.com/. If you scroll to the bottom you'll notice about 23px of whitespace. This—to the best of my knowledge— wasn't there previously. It appears to have just shown up. Although, I could've missed it.
Anyways, I've done everything I can concerning margins, paddings, floats, overflow: hiddens, appending my "clearfix" class to elements. etc. I cannot figure out what is. Any help would be appreciated as this is truly boggling my brain.
It's because of an iframe that is generated at the very end of the document.
That frame has no visible content (just some scripts) so you can set it's position to absolute to remove the space.
You can try making it with following CSS code:
$('iframe[class^=PIN]') { position: absolute; }
I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips?
page link
Hovering the mouse over the menu using IE7 realize what I'm talking about.
There's a lot going on here, but I'll try to take a crack at it.
First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.montepage.com.br%2Finfantile%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Second, I believe IE7 does something funny with z-index. It sort of resets it's z-index based on it's parent. I know I've ran into this issue in the past. Basically, if two parent elements like this:
<div id="parent1">...</div>
<div id="parent2">...</div>
If "parent1" has a lower z-index than "parent2", all children of "parent1" will be lower than "parent2", regardless of their z-index value. What you can try to do is make sure "parent1" has a higher z-index.
From looking at your code, it seems like the parent elements are:
<div class="colorido"> <!-- the menu container -->
...
<div id="corpo"> <!-- the image promotional container that rotates -->
...
See if setting "colorido" to a higher z-index than "corpo" works. You might have to set them to "position:relative" so that it works.
It's hard for me to read that HTML and CSS, there's a lot going on here. So, I might have the wrong containers, but hopefully the idea can help you.
This page might help lead to some answers as well as some other tricks to try:
http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
Hope that helps!
I'm almost finished with a pretty big text project that I'm working on, and I need to address a problem I've been putting off: the sidenotes I'm using are occasionally running into each other and overlapping. You can see the problem here if you look for ovoce a or Euripedes.
There are probably lots of different ways of solving the problem. But I'm just not sure where to begin. Any suggestions or clever ideas would be very welcome. Thanks!
EDIT: I'm trying this again. The solution that seemed to work turned out not to work too well!
In your HTML structure, the asides belong to the same column as the main text. If you take away the asides' CSS, they will appear in their original positions, pushing the main text further down. The CSS pushes the asides to the left; position:absolute prevents the asides from taking up space in the main text's column. The layout relies heavily on position:absolute. Take the property out and all the numbering pseudo-elements in front of the paragraphs will be displaced as well.
To achieve the same effect without absolute positioning, you have to rewrite a lot of code: either introduce a 4-column (instead of 2-column) table and move the sidenotes to their own columns, or switch to a jungle of floated divs. Welcome to CSS hell.
I don't know how strict the restrictions on your project are, but here's another approach.
.sidenote {
background-color: white;
}
.sidenote:hover {
z-index: 10;
}
By setting background-color to white, the asides will be opaque. Should they overlap, the aside further down will cover the one above it. As soon as the user hovers over an aside, it will be brought on top of the nearby asides.
I searched for ovoce and found the issue. The sidenote for the text above it is too long so it overlaps. Anyway you can just style the text below it and give it a margin-top like this?
style="margin-top: 60px;"