I am curious if there's any way to correct this behavior using css only...
Notice that when you hover over the white space to the right of the menu it causes the blur of the menu items. If you hover over the white space to the left of the menu it does not blur the menu items.
I am sure that the float: left of the #centeredmenu ul rule is causing this blur. I would like to stop the blur when you hover over the white space to the right but this rule is necessary to center the menu.
I am trying to correct this page: http://www.soaringbirdstudios.com/help
As you can see in firebug I tried to add another div below the centermenu div with a style of clear both and enclosed both divs in an enclosing div but that didn't work. I just don't have enough experience to figure this one out.
Thanks.
Not sure if it will help your exact desired solution, but if you mean wanting to get rid of the floats, you can simply do the following:
Change:
.bmenu li {
display:inline-block;
/*float: left;*/ <-- can delete or comment out
list-style: none;
padding: 0;
position: relative;
/*right: 50%;*/ <-- can delete or comment out
margin: 100px 0 0;
font-size: 50px;
vertical-align:top; <--- added for making it pretty
}
Continue downwards with the following changes to get rid of floats completely:
delete <div style="clear:both;"></div>
#centeredmenu ul {
/*clear: left;*/ <-- can delete or comment out
/*float: left;*/ <-- can delete or comment out
list-style: none;
margin: 0;
padding: 0;
position: relative;
/*left: 50%;*/ <-- can delete or comment out
text-align: center;
}
#centeredmenu {
/*float: left;*/ <-- can delete or comment out
width: 100%;
overflow: hidden;
position: relative;
}
Related
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
I am using this template on my website: http://www.css3templates.co.uk/templates/CSS3_gallery_grey/index.html
jsfiddle: http://jsfiddle.net/uPw85/
What I need help with:
1) Center the menu on the page, as you can see on the link it's left aligned.
2) Still keep the text in the drop down menus aligned to the left (just as in the link above).
I've searched this page and on Google a lot before asking for help and none of the results have worked for me. I've tried just about every tip I've found but the menu still won't be centered for me, the only thing that happens is that the text in the drop down menu is centered but I want to keep it to the left.
I've tried with multiple variations of these in different places (nav, menu, li, ul) in the CSS but with no luck:
display: inline-block;
margin-left: auto;
margin-right: auto;,
margin: 0 auto;
text-align: center;
width: auto;
EDIT 2/10, 1 PM EST: I appreciate you guys trying to help but so far none of the answers you've given has helped.
Try this:
ul.sf-menu {
text-align: center;
}
ul.sf-menu li {
display: inline-block;
}
ul.sf-menu li a {
display: block;
}
ul.sf-menu ul {
text-align: left;
}
EDIT:
I've edited the JSfiddle: http://jsfiddle.net/uPw85/3/
EDIT 2:
Remove float: left in ul#nav, or just remove the id="nav" in the ul-tag in the html
In order to center the menu you need to set the width of the child div to be smaller than a set width of a parent. Additionally need to remove the float of the menu as floating an element effectively takes it out of the parent div.
Try setting the following:
ul.sf-menu {
float: none;
width: 760px;
margin: 0 auto;
}
Works when inspecting element. Another alternative would be to try the following code.
ul.sf-menu {
float: none;
display: table;
margin: 0 auto;
}
Just add:
ul#nav {
float:left;
padding-left: 80px;
}
So I'm adding a CSS drop down menu to a site however I am unable to get it to display properly.
The site in question is here > http://www.grimeforum.com/
When you hover over "news" LI, the child UL appears squashed.
I've spent the past few hours messing with positions but it either displays in the correct place but very squashed, or it floats to the left (but not squashed).
When I remove
position: relative;
from
#menu-nav li {
float: left;
position: relative;
}
it appers unsquashed, but floated to the left outside of the parent LI.
Any ideas?
Here is the fiddle - http://jsfiddle.net/sCW9A/
Remove postition:relative from line 463
Giving it a width of 175px worked for me.
Okay I got the problem. Firstly change #menu-nav li to #menu-nav>li since you don't want all li's to float left under menu-nav
secondly add this to anchors under your submenu
white-space: nowrap;
the a element must be the one with display: block and padding.
#menu-nav ul li {
padding: 0;
}
#menu-nav ul li a {
width: 100%;
padding: 0 15px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
min-width: 180px;
}
Hmm, learnt something new.
Added white-space: nowrap; to #menu-nav ul li a{and hey presto, no need for when using multiple word page titles, and no more layout issues.
Not really a fix but a workaround until I learn to code better I guess...!
Ok. This is really weird and I have spent countless hours in vain searching for anything similar. I will add code, but you'll need visuals as well, so I'll include a couple of cropped images to show you what I mean.
My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image)
Code used: #footer ul {margin:25px}
Result: No change.
HUH? So I played with it... tried several variations, but nothing worked. NOW, I did find a workaround... used padding instead of margin... but it bothered me that margin wouldn't work so I kept trying to figure out if I messed up my code somewhere.
I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.
HUH? So I did a little experiment. I created a bright border around the divs in my content and footer and ul to figure out exactly what was happening. (My content section has three divs: content (floating left); sidebar (floating right); and contentWrapper that contains both).
With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to.
So problem fixed, right? Well..... not exactly.
My previews did fine, so I went back in and deleted the borders so I can get on with the rest of the formatting. Only when I previewed again... the footer ul was right back where it started. At the very edge of the top of the footer.
I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin.
Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.
What the #$#%!? Although I know of the workaround (the padding) I am worried about compounding whatever mistake I have made and repeating constantly in the future (I have to build another website after this). If someone can figure out what I did to screw things up... it would be GREATLY appreciated.
#contentWrapper {
overflow: auto;
padding: 20px 10px;
}
#content {
float: left;
width: 660px;
}
#content h1 {
padding: 0 0 20px;
}
#content h2 {
padding: 20px 0 10px;
}
#content p {
line-height: 160%;
text-align: justify;
}
#content img {
float: left;
margin-right: 10px;
}
#content ul {
line-height: 160%;
list-style: disc outside url("../images/Bullet-artsy1.png");
margin: 0 0 10px 325px;
padding: 10px 0;
}
#content .info {
margin: 5px 0 10px 250px;
}
#rightSide {
float: right;
line-height: 140%;
padding: 0 10px;
width: 220px;
}
#rightSide h2 {
margin-top: 10px;
padding-bottom: 10px;
}
#rightSide p {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
text-align: justify;
}
#rightSide img {
display: block;
margin: 5px auto;
}
#footer {
background-image: url("../images/TCS-Footer1b-plain-230px h.png");
background-repeat: no-repeat;
clear: both;
height: 230px;
}
#footer ul {
list-style: none outside none;
margin: 25px;
text-align: center;
}
#footer ul li {
display: inline;
margin: 30px 0;
}
#footer ul li a {
color: #E8FAFF;
padding: 30px;
}
#footer p {
color: #E8FAFF;
text-align: center;
}
#footer img {
bottom: -60px;
position: relative;
right: -900px;
}
The site is not active, but I've uploaded a word doc with images showing what I am talking about. This is the link to Temp Share: http://temp-share.com/show/dPf3UCobW
Thanks in advance to everyone who can perhaps show me where I went wrong.
First, to prevent your margin from disappearing, either change the margin on the #footer ul element to padding, or add one px of padding to the #footer element.
In this fiddle, we've set the padding on the #footer to 1px and reduced the height by 2px to compensate.
FIDDLE
#footer ul {
list-style: none outside none;
padding: 40px;
text-align: center;
}
or
#footer {
background-color: #DDDDDD;
background-repeat: no-repeat;
clear: both;
color: #808080;
font-size: 12px;
height: 228px;
padding: 1px;
}
looking at the css, your padding settings on the <a> tags won't work the way you expect, since by default they are aren't block elements. Add this to the css to have them padded correctly:
#footer ul li a {
display: inline-block;
}
likewise, your ul li should be inline-block.
so ...
#footer ul li {
display: inline-block;
margin: 30px 0;
}
#footer ul li a {
display: inline-block;
color: #E8FAFF;
padding: 30px;
}
Basically, just be aware that when top and bottom margins touch, including those of parent and child elements, the largest margin is used, but the margin is pushed outside the outermost element.
I tested it using firebug and working fine. If you have problem you can add !important at the end as this
#footer > ul {
margin: 13px !important;
}
And even what you would like to do is to get some margin before and or after the ul. For this you could set margin and/or padding value to your #footer.
Hope this help!
This is for future reference. I simply wanted to add the following link to compliment Dom Day's above. I am still having difficulty conceptualizing the event but between the two links, it will help me research it until I find the equivalent to an 'adjoining/collapsing margins-for-dummies' site. www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.
I'm trying to build a horizontal menu with the last item seperated and positioned right, so that a logo finds place between the last and the second last item.
Firefox, Opera (Presto) and even the dirty ones from Redmond (9.0+) render it like I would expect. But WebKit (Chrome and Safari both render it the same) takes some space after the second last item where the last item would stay without position: absolute.
<header>Logo</header>
<nav>
<ul>
<li>Home</li>
<li>Statistics</li>
<li>Data Management</li>
<li>Market Research</li>
<li>Web & Apps</li>
<li>Contact</li>
</ul>
</nav>
I display the list as table and the list items as table-cell because I want the left part of the menu (first to second last item, left to the logo) to have a fixed width while the items take the width they need for their contents. Text could change to anything. Till there, everything is alright. But if I give the last item a display: block; position: absolute, WebKit renders that gap (white in the example).
nav ul
{
display: table;
background: white; /* that's what you see in webkit */
}
nav ul li
{
display: table-cell;
}
nav ul li:last-child
{
display: block; /* "display: none;" works like I would expect */
position: absolute;
}
Here is a Fiddle.
I'm not sure if it is a bug in WebKit, because absolute positioning an element inside a table might not be default behavior. On the other hand, display: none works like I would expect. Shouldn't the space consumption be 0 in both cases?
Does anybody know of a bug in WebKit or has anyone an idea of how to prevent that gap?
Set the penultimate element "Web & Apps" to display block instead of table-cell:
nav ul li:nth-last-child(2)
{
display: block;
}
Display block fiddle
I've pushed this answer on other people, and often got the "flexbox isn't widely supported yet" response. However, here it goes again. The reason that Webkit is misbehaving is that within its implementation of display: table, the DOM is reserving space for the semantically declared cell. The easy way to implement this would be to simply break this element out into its own object, much like you'd done with the logo.
HOWEVER...
if you want to keep these semantically grouped - And why wouldn't you, they're all content, right? - you can always use the flexbox model to overcome this.
Here's a fiddle showing its use.
Here's what we change:
nav ul
{
display: box;
display: -webkit-flex;
flex-direction: row;
-webkit-justify-content: center;
-webkit-align-items: center;
-webkit-flex-direction: row;
background: white; /* that's what you see in webkit */
empty-cells: hide;
table-layout: auto;
}
nav ul li
{
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
}
Now, your items properly cover the background, as it is no longer treating the last li as if it were a true table cell and still within the bounds of the table. Flexbox provides a flexible layout to fill available space. Often people see this as a solution for the "Holy Grail of Layout" problem, but its use expands way beyond just that.
So, if another "Flexbox isn't widely supported enough" response is incoming, I understand. But I'll keep proposing it as an answer on every one of these that I come across, because support is getting better every day.
A little CSS edited, take a look at please, if this what you want, Fiddle
body
{
position: relative;
background: #bbbbbb;
text-align: center;
color: white;
}
header
{
position: absolute;
top: 10px;
left: 630px;
width: 80px;
height: 60px;
line-height: 60px;
background: black;
text-transform: uppercase;
}
nav
{
position: absolute;
top: 20px;
left: 20px;
}
nav ul,
nav li
{
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul
{
width: 200px;
}
nav ul li a
{
display: block;
padding: 1px;
background: #0099ff;
color: white;
text-decoration: none;
}
nav ul li a:hover
{
background: black;
}
nav li{
margin-bottom: 5px;
height: 25px;
line-height:25px;
}
While using absolute, every thing related/relating to that must be absolute in term of pixels.
I have updated fiddle, as your nav + logo .header + .nav:last-child were not totaling proper.
Fiddle link : http://jsfiddle.net/3TUk8/2/
in other case you will have to do that
nav ul
{
display: table;
background: #bbbbbb; /* that's what you see in webkit and same as bg color will hide it :) */
list-style: none;
}
I hope this solve your problem :)