Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
Related
Is there a practical difference between whether a left-floated element (say, and image) has display: inline-block; applied to it, as opposed to leaving the default display: block; rule applied?
In other words, what's the difference between:
<div style="float: left; display: inline-block;">text</div>
and
<div style="float: left; display: block;">text</div>
?
An answer by #thirtydot might help you... Question's link
I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.
Yes, display: block is redundant if you've specified float: left (or right).
(What would happen if you tried to
specify display:inline and float:left?
)
display: inline will not make any difference, because setting float: left forces display: block "no matter what":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.
However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.
Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,
Some examples:
If you set position: absolute, then float: none is forced.
The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.
Is there a tool that can check for
such things?
I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.
You don't have to specify a float: left and a display: inline-block for the same element, you use one or the other, not both. Float is used to float text around elements, its not the best weapon to choose when doing a layout. Go with display: block, and inline-block.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Block elements — form boxes according to the css box-model. They have width, height, padding, border, and margin and they stack vertically on top of each other.
Inline elements — don’t form boxes. They sit horizontally next to each other.
Inline-block elements — act like block elements on the inside where they form boxes. On the outside they act like inline elements sitting horizontally next to each other instead of stacking on top of each other.
A good resource: http://learnlayout.com/inline-block.html
According to SitePoint:
If you’re new to CSS layouts, you’d be forgiven for thinking that
using CSS floats in imaginative ways is the height of skill. If you
have consumed as many CSS layout tutorials as you can find, you might
suppose that mastering floats is a rite of passage. You’ll be dazzled
by the ingenuity, astounded by the complexity, and you’ll gain a sense
of achievement when you finally understand how floats work.
Don’t be fooled. You’re being brainwashed.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
When you use float: left; almost any elements behave as a block element. So there is no any difference in this particular case.
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
when inspecting elecment, I noticed the following empty span
<span class="x-tree-node-indent"></span>
in order to not having it occupy any space, I set the following style
span.x-tree-node-indent
{
left:0px;
width:0px;
height:0px;
margin:0px;
padding:0px;
}
In Chrome, I got what I wanted even without the addional styles. But in IE, I still can see a block of space over there. Any reasons? and how to fix that?
I've experienced what you're describing in IE6, 7 & 8.
You have to set the line-height to zero as well. This usually works for inline elements.
Have you tried display:none?
span.x-tree-node-indent {
display: none;
}
That should work the same everywhere but I can't check IE right now, display:none:
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.
Please note that a display of 'none' does not create an invisible box; it creates no box at all. [...]
Emphasis mine.
Here's a quick example if you want to check for yourself: http://jsfiddle.net/ambiguous/ZrzWz/
As noted, display: none will cause the item to take itself entirely out of the the layout. visibility: hidden will not; that is, if you had a 20px by 20px block, that block of space would continue to occupy the space even if it is hidden.
You can also set the display to block, border to none and whitespace
A few other items would be helpful to know - in order for anyone to answer this question with more than the display: none (which will work if all you are wanting to do is have it taken out of the space).
What version of IE are you referencing? In no way are the all the same.
What is the purpose of the span, if in fact you do not want it to be visible?
What doctype is your HTML? Depending, for IE there could be quirks mode involved, you may have the option of using an IE specific meta tag, telling it to render in IE7 mode etc.
For number two, if you are simply wanting to have have an indent as the name implies, then you can use the CSS text-indent: 10px (or whatever). If you have other reasons for it, there are options such as setting margins, padding on the containing area. In other words, semantically, why is this span there when there is no visibility and so on? Which then leads to have you tried other elements etc.
I can't reproduce it here. Here is my code:
span.x-tree-node-indent
{
left: 0px;
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
}
<BODY>
<P>left<SPAN class="x-tree-node-indent"></SPAN>right</P>
</BODY>
I see the one word "leftright" without any space inbetween in my IE9.
Depending upon what kind of behavior you want to achieve you may use the attributes display:none and visibility:hidden.
lately i've been slamming my head against my desk to solve this Problem. Didn't work out. I know it can be solved by editing the contents with some clearing elements. Sadly there is some javascript sorting beeing used and the Sourcode is being generated by CMS Components so that would be my last shot.
I'm having a few boxes beeing floated alwayes 2 in a row. The boxes have a diffrent height but equal width and are all placed in a container with static width. The link shows the source i need to reproduce the Problem. My Boxes are beeing floated left. I tried to fix this with clear: left on odd and clear: right on even elements. But that only works in ff/ie8/chrome Browsers, not ie7.
Example: http://www.i3rutus.de/ie7divfloatexample/
Anyone knows a possibility to fix this Problem by just editing the CSS not the actual XHTML? Problem appears in IE7. IE8, Chrome and FF work fine.
Any Ideas?
Thanks in advance
Here's the deal. You only need to float one of each of the pairs of boxes. Here's the amended css rules:
.even {
float: left;
clear: left;
margin-top: 0
}
.odd {
}
Demo
(Incidentally, your use of odd and even had me chasing my tail for a while ;) )
Just remove
.even {
clear: left;
}
.odd {
clear: right;
}
and it works as intented.
If you are able to include a js in the header then maybe try to use http://code.google.com/p/ie7-js/?
I played with it but given float:right screws it up, it's probably a little more complex than experimenting with float values.
-- update --
I seemed to be able to get it work in ie7 by:
remove float:left on .clear,
added float:left;margin-top:0px to .even
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.