I'm floating the SVG's to the right. I Would like these to be the uppermost objects and push the rest of the content down. The headers and paragraph should be pushed below the centeredmenu. Please enlighten me how i could accomplish this. I'm new to all this.
In the html, the menu and SVG's come first. That's no longer true after applying the CSS. Since i'm floating the SVG's to the right it seems to free up space to the left of the SVG that the header/paragraph claims for some reason. What makes it even weirder in my head is that it bypasses the menu as well.
I don't want to have to use clear:both on paragraphs and headers and everything else below as well. Would appreciate any other helpful comments as well. Thanks!
Not sure which code to include below... The fiddle will probably be alot more useful.
http://jsfiddle.net/akLQk/2/
svg {
float:right;
}
Try adding this after all your svg content:
<div style="clear:both"></div>
It will push down all your other content. Hope it helps :)
You can also wrap the SVG and nav menus in a div, then in your CSS do this:
yourDivWrapper { overflow: auto; }
I have done so here: http://jsfiddle.net/joelisadev/StPky/
Related
I built a bottom header with a toggle for a menu on the bottom. The toggle portion is not aligning with the <span> right next to it. It's almost exactly one line-height below for some reason.
Code - https://jsfiddle.net/odvd05d8/
I tried using margin but it moves the side divs as well. I also tried to clear whitespace as most of the elements are inline, but that didn't work either.
Any suggestions would be really helpful. Thank you sincerely.
you can use as in css as may it's help you
.dropdown{
top:-20px;
}
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'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; }
Here (on Chrome 10) the footer seems to be aligning with the side bar (too far to the right) instead of center like it's supposed to be.
I didn't edit the footer's CSS. I was editing the sidebar and the index when this happened, but it's so far down the page that I didn't notice 'til later, so I have no idea what the problem is.
Any suggestions welcome! Thank you :)
Tara
UPDATE: I've checked all the DIVs are correctly closing. Some were missing in the side bar, and that's fixed the problem on the front page but not on sub pages or articles. Now there is a black line appearing at the top (under the menu) that appears to be the #footer!!. I can't understand why it's there.
you wrapper #casing contains floated elements, which are not cleared for following elements.
#casing { overflow: hidden; }
This should fix it for modern browsers. I recommend this article for better understanding and other clearing solutions.
You need to clear your floated elements by adding clear: left; to your #footer css.
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.