Can anyone tell me why I have white space at the top of my page:
http://wildwood-design.org/twagons.html
But not this one:
http://wildwood-design.org/index.html
I just can't spot it!
Thanks.
It's the navth under your slideshow. It's not present on the inner pages, and removing it seems to do the trick.
The navth list has no height, but it does have a margin - setting the margin to 0 removes the whitespace. Or, seeing as it's not visible to users, you could just set it to display: none; instead.
Aside: am I right in thinking you're using a WYSIWG program to generate the code? The design works, but all the inline styles are hurting my head and will make the site a pain to maintain in the long run...
Related
I am using wordpress and I can only add Custom CSS to it. I want to push it a bit more on the right side so that my text (article) width can increase.
Here is my website, http://www.defensionem.com/schwellenpflug/
http://www.defensionem.com.
Notice the side-bar on the right, which has a link for Facebook. I want my content to appear in the "middle" of the screen hence I added a bit of padding on the left. But I find I am unable to increase the width of the text.
How do I move the side-bar a bit to the right?
Yes I did try, but nothing worked.
Also, how do I hide the the paragraph tags?
http://www.defensionem.com/profile/Renaud-Mayers/
I typed that info in the Wordpress column. (I cannot make a new post for 90mins so I added it here. Sorry)
The easiest way is just to do lower the margin-right value:
.content-wrapper__inside.sidebar--true.sidebar--right .main-content__inside
{
margin-right: 180px;
}
Be aware that the styles are for a responsive site. So you might have to change it for other screen sizes as well.
it looks like you put your paragraph tags inside of the quotes:
"<p>Currently working on behalf of the Belgian Ministry of Defence, thanks to my high knowledge in WWII and other areas. Working in two WWII era fortresses still belonging to the Army.</p>"
just move them to the outside, or perhaps get rid of them altogether.
This website is built with a back-end web to print service called Zoo Printing. The client I work for does not like the original design so I've being hired to re-design it with the development team that handles the back-end. I replaced their old navigation menu with the current CSS mega navigation that's on the site. Their developers decided to keep their code on the website for back up just in case they need to roll-back to the old navigation. The issue is even though their code is commented out, it creates a huge white space between my CSS slideshow and footer. Their developers are blaming my code and will not tell me where the problem is coming from. Can one of you inspect my code and tell me what would be causing this? I've tried simply removing the white space with CSS by absolute positioning it off the page, but when i do this the footer changes on every page except the home and it also removes my CSS slide show. I can not figure out how to remove this white space without messing with my layout.
The website is Advanced Litho
body > div:nth-child(4)
This is the div that's creating the issues with the layout. So far I've tried to absolute position it off the page with no luck.
There is a div at the bottom that is making the space huge, it is right above the commented out content and right below the div with id=content. All of these boxes have a visibility of hidden which does not delete them from your page, it simply makes them invisible. All you need to do is find that div, and insert an inline style.
<div style="display: none;">(old nav)</div>
Essentially, they just hid what they were supposed to remove.
There are unordered lists inside <div class="nav_child"></div>
If you can remove them, it is best to do so, otherwise you can hide them with css and get rid of the white space:
.nav_child ul {
display: none;
}
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.
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;"
I've been working on a few sites, and for some reason, a blank bar keeps showing up at the bottom. I've tried inspecting the elements, and I get nothing that makes any sense. html and body elements are set for margin: 0 and padding: 0.
Any ideas on how to remove the blank bar at the bottom?
Thank you!
Remove the from your clearfixing divs. Even with the height:0, the space character is taking up space. One you remove it, the div will collapse properly.
Probably way off here and I'm not sure but one of the plugins you are using is placing a smiley at the bottom of the page. I think it is popular posts that does this.
Have your tried disabling the plugins one by one to see if this goes?