So I've been working on a website in html5 and css3, but I've ran into a problem. My wrapper is 960px, and within that wrapper I have 2 DIVs, 1 being floated left, and the size of that one is 240px, and 1 floating right, with the size being 695px. In browsers there is a zoom feature, which I assume simulates different resolutions. So when I zoom out a couple of clicks, my right floated div, expands and goes underneath my left floated div. Take a look at the screenshots:
Normal: http://puu.sh/iMCEn/eff5baff4d.png
Zoomed: http://puu.sh/iMCGQ/98145b5788.png
Here is my CSS:
* { margin:0; padding:0;}
#font-face {
font-family: reckoner;
src: url(../fonts/Reckoner.ttf);
}
#font-face {
font-family: champ;
src: url(../fonts/champ.ttf)
}
body {
background-color: #333333;
}
#wrap {
width: 960px;
margin: 150px auto 0 auto;
}
#banner {
color: #e5e5e5;
font-family: reckoner;
font-size: 65px;
text-shadow: 0px 0px 10px black;
margin-left: 10.5px;
}
#main {
height: auto;
overflow: auto;
background-color: #1a1a1a;
border: 1px solid #404040;
outline: 2px solid black;
}
#nav {
font-family: champ;
width: 240px;
float: left;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
text-decoration: none;
background: #262626;
padding: 7px;
margin: 10px;
outline: 1px solid #404040;
border: 1px solid black;
}
#nav ul li:hover {
background-color: #404040;
}
#nav ul a {
text-decoration: none;
color:#e5e5e5;
font-size:17px;
text-transform: uppercase;
text-shadow: 0px 0px 10px black;
}
#content {
float: right;
width: 695px;
min-height:500px;
background-color: #262626;
margin: 10px;
outline: 1px solid #404040;
border: 1px solid black;
}
Here is the HTML:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>AAA GAMING - TRIPLE A GAMING</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrap">
<div id="banner">AAA GAMING</div>
<div id="main">
<div id="nav">
<ul>
<li>Home</li>
<li>Donate</li>
<li>Chat</li>
<li>How To Connect</li>
<li>Application</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated! Thank you!
The zoom feature does not simulate different resolutions, a better way to do this is resizing the browser window. Zoom is notorious at breaking layouts due to rounding errors so I wouldn't fret too much over it, but in this case fixing the problem is easy.
I replicated this problem in Chrome.
Floats are often glitchy like this because if anything happens to make the stuff fitting in the remaining space beside a float, wider than the floating element, they'll get bumped down below the floating element. This is what is happening here. In general, I also avoid placing two floating elements side-by-side.
The two basic solutions are:
Make the element narrow enough that it doesn't happen
Use something besides a float (like absolute positioning)
(2) is a long-term solution I'd recommend for new layouts. But a quick solution to implement (1) in this case is to change the margin of the #content element. Under:
margin: 10px;
Add the line:
margin-left: -10px;
This fixes the problem on my browser at all zooms down to 25%. It also doesn't visibly effect the layout at all in any other way, because it doesn't affect the width of the visible part of the element itself, it only effects the width of its container which can force it to get bumped down.
It looks like your main container is changing width on the browser zoom. If you set the min-width style on it, it will stop shrinking beyond the breaking point. I set it to min-width: 965px; and that seemed to stop the breaking on zoom (at least in Chrome).
Related
I have a navgiation menu with a logotype, a correpsonding name, a vertical border as a separator, as well as the actual navigation links. While the logotype and correpsonding name seem to be properly aligned, the vertical border and the navigation links are not. Instead, they are off by 5 or so pixels (i checked in Photoshop).
My question is: How do I make sure that all the navigation elements are aligned properly, meaning that they are vertically centered within the navigation bar?
body {
margin: 0;
}
/* Limit container width to 1200px */
.container {
max-width: 1200px;
margin: 0 auto;
}
nav {
background-color: #414b55;
}
.navigation {
overflow: hidden;
}
.logotype img {
margin: 10px 10px 10px 15px;
}
.logotype p {
display: inline;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
}
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
}
.navigation a {
display: inline;
color: #ffffff;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
.item {
padding: 15px 15px;
font-size: 18px;
font-weight: 700;
}
.navigation .icon {
display: none;
}
<body>
<nav>
<div class="container">
<div class="navigation" id="script-target">
<a href="index.html" class="logotype">
<img src="img/logotype.svg" alt="logotype" height="40px" style="vertical-align: middle">
<p>Exception</p>
</a>
<div class="divider"></div>
Select
Select
Select
Select
<img src="img/icon.svg" alt="menu" height="26px">
</div>
</div>
</nav>
</body>
Update:
I changed the display properties and now all the navigation elements align properly. https://jsfiddle.net/MihkelPajunen/4zjbgLLk/4/
You can fix this by adding some padding to the bottom of the divider class:
https://jsfiddle.net/nb4o9p84/
.divider {
display: inline;
border-left: 1px solid #ffffff;
margin-left: 30px;
margin-right: 20px;
padding-bottom: 5px;
}
EDIT: Since you may want all the elements to align (not just the menu links) here is an updated fiddle with all elements aligned through margins and eliminating "inline":
https://jsfiddle.net/yLctgbcw/
.logotype img {
margin: 7px 10px 12px 15px;
}
.logotype p {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size: 24px;
margin-top: -5px;
margin-bottom: 0;
}
EDIT 2: It seems like there may be a bug in fiddle or somewhere else because the horizontal distance between the menus is off by 1px - but the distance will change depending on how wide the viewport.
If you add "margin-right: -4px;" on the .item class it will leave 1px of space between 1 of the 4 and the gap will move as you resize your window:
https://jsfiddle.net/42j3e8jp/
If you add -5px the gap disappears (but there is most likely still a 1px difference):
https://jsfiddle.net/8udb4eqn/
To be honest, this is one of those problems that no one will ever notice unless you add red backgrounds to the a to really show the issue. Personally, I would either refactor your code to use the "traditional" menu setup that is used by libraries like Bootstrap:
https://getbootstrap.com/docs/3.3/examples/navbar/
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
Or, I would just forget about the 1px difference and move on as determining the issue could take much longer than refactoring the code. I've learned that there are a lot of little quirks in CSS/HTML (especially across browsers) so unless your 1px difference is noticeable it's usually not worth the effort.
I have a horizontal menu that is made up of a series of ul's and li's. The submenus look great so I don't need to do anything with those. The primary ul looks great until you hover over the far right li.
When doing that, it looks good in Safari but the hover comes about 2 pixels short of the background on the ul in Firefox and IE and even more in Chrome. I have tried adjusting the padding to make it look good in Firefox and IE but then you still have the same issue in Chrome and in Safari, that far right li breaks down to a new line. Of course, adjusting it to look good in Chrome makes all the other browsers break to a new line. This site is using Wordpress which creates the menu dynamically so I can only change the CSS. Here is the basic idea for the code:
<html>
<head>
<style type="text/css">
#header {
margin: 0 auto;
width: 980px;
}
ul li {
font-size: 13px;
line-height: 21px;
}
#header .main-nav #menu-main-navigation {
background: #169BAC;
width: 100%
}
#header .main-nav > div ul {
width: 100%;
list-style: none;
float: left;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#header .main-nav > div ul li ul{
top: 43px;
}
#header .main-nav .menu-div>ul>li {
padding: 5px 14px;
float: left;
border-right: solid 1px #54AEC2;
}
#header .main-nav .menu-div ul li:hover {
background: #2A588D;
}
#header .main-nav .menu-div>ul>li:first-child {
padding-top: 9px;
height: 28px;
}
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 26px;
border-right: none;
}
#header .main-nav .menu-div>ul>li a{
line-height: 15px;
text-decoration: none;
color: #FFF;
padding: 0px 13px;
text-align: center;
display: inline-block;
}
</style>
<head>
<body>
<header id="header">
<nav class="main-nav">
<div class="menu-div">
<ul id="menu-main-navigation" class="menu">
<li id="menu-item-275">Home</li>
<li id="menu-item-310">For New<br />Patients</li>
<li id="menu-item-376">Cleanings &<br />Prevention</li>
<li id="menu-item-381">General<br />Dentistry</li>
<li id="menu-item-453">Restore Your<br />Smile</li>
<li id="menu-item-462">Dental Anxiety &<br />Sedation Options</li>
<li id="menu-item-463">Dentistry For<br />Kids</li>
<li id="menu-item-464">Insurance &<br />Payment Options</li>
</ul>
</div>
</nav>
</header>
</body>
You can see the site at http://riverbend.caswellwebcreations.com.
Thank you for any help that you can give me on this.
The width of the li elements is being defined by their padding and the font-size (and padding) of the a elements inside them. The font propertys are not uniform between browsers, some browsers put text bigger or smaller than others. That seems to be the problem.
If you want to stretch the li elements "cross-browser" you should define the width of the li elements via css like this:
#menu-item-275{
width: 64px;
}
#menu-item-310{
width: 77px;
}
#menu-item-376{
width: 96px;
}
#menu-item-381{
width: 82px;
}
#menu-item-453{
width: 104px;
}
#menu-item-462{
width: 131px;
}
#menu-item-463{
width: 105px;
}
#menu-item-464{
width: 132px;
}
If you sum the width of each li item (plus padding and border) you get the width of the menu container: 980px. And the browsers will take that width to render the li's.
I hope this works!
UPDATE
Just found another (and more easy) solution!: https://stackoverflow.com/a/14361778/3762078
#header .main-nav .menu-div>ul>li:last-child {
padding: 5px 20px;
border-right: none;
float: none; /* ADD THIS */
overflow: hidden; /* AND THIS */
}
'float: none'. Forces last li element to be as wide as it can (the
default block element's behavior).
'overflow: hidden'. Prevents the last li element to stretch to ul's full width.
Although this doesn't prevent the width changes to all li elements on every browser, hence making the last li's width be thinner or wider (and sometimes expanding that li's height), is a nice solution.
I'm a beginner at CSS and am trying to understand how the text in each li element in a nav menu can be centered, both vertically and horizontally.
As an example, I am looking at this particular nav menu from David Appleyard:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu</title>
<style type="text/css">
body {
padding: 50px;
}
/* The CSS Code for the menu starts here */
#menu {
font-family: Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 50px 0;
padding: 0;
list-style-type: none;
background-color: #eee;
font-size: 13px;
height: 40px;
border-top: 2px solid #eee;
border-bottom: 2px solid #ccc;
}
#menu li {
float: left;
margin: 0;
}
#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}
#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}
#menu_wrapper ul {margin-left: 12px;}
#menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
#menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}
</style>
</head>
<body>
<!-- Grey Menu -->
<div id="menu_wrapper" class="grey">
<div class="left"></div>
<ul id="menu">
<li>Home</li>
<li class="active">About</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
How is he getting his li text nicely in the middle of the li elements? Is he just playing around with padding and line-heights until he gets it perfect?
Also, on a side note, why does he set his #menu li as to display:block?
Here's the breakdown:
display: block;
He's doing this because you can give block boxes padding. This is nice because padding is included in the 'clickable' area around the link. Users are accustomed to thinking of menu items as 'buttons,' so it's nice to be able to click more than just the text.
View a JSFiddle isolating the padding on an anchor
Note: I only floated the a to keep it from extending the entire width of the iframe
Centering horizontally
The padding of the anchor elements is symmetrical, so they're appearing to be centered horizontally. The line that does this is padding: 0 20px;. Note that the fact that these block boxes don't extend the full width is because their parents are set to float left.
Here's a JSFiddle isolating this centering effect.
Note: The parents being floated left is what causes everything to appear on the same line
Centering vertical
Text is centered, by default, about the center of the line. If you're trying to center a single line within a containing element, a nifty trick is to just set the line-height to be the height of that element. In this case, the parent is set to be height: 40px so he's matching that height. The line that does what I've described here is line-height: 40px;
Here's a JSFiddle isolating the vertical centering.
Other possibilities
You'll see that I centered the a horizontally and vertically in the very first JSFiddle I posted. That's usually the method I use, but of course, there's always more than one way to do things. The best method is probably dependent on the context of your project!
Yes, it's the line-height: 40px that centers vertically. This won't look right if the text were ever to wrap.
Anchors are display: block so that padding is applied to a block-level element, rather than the default inline (try changing it to see how the appearance changes). The anchor will essentially "fill" it's container LI element, which is floated to keep things on the same line (while not "inline").
I have a problem with my pixel calculations not adding up.
I have a main div (#page) that is: 980px wide
It has a child div (#content) that is also: 980px wide
Inside the div (#content) there are two divs (#left-pane), which is 300px wide and (#right-pane), which is 676 px wide.
Both of them have a 1px border all the way around - looking across the site horizontally this should give 4px in width.
Therefore,
300px + 676px + 4px = 980px
Despite this, my div (#right-pane) moves down below the div (#left-pane). Why?
I have padding and margin set to NONE on both of them.
HTML:
<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav">
<div class="nav-button">Home</div>
<div class="nav-button">Lessons</div>
<div class="nav-button">Guides</div>
<div class="nav-button">About us</div>
</div>
<div id="content">
<div id="left-pane">
</div>
<div id="right-pane">
</div>
</div>
<div id="footer">
<div>
</div> <!-- Page closer -->
</body>
</html>
CSS:
html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: black;
}
#page {
width: 980px;
margin: 0px auto;
}
/* Top */
#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}
.logo {
float: left;
width: 130px;
height: 130px;
}
.social {
float: right;
margin-right: 40px;
}
.social li {
display: inline;
margin: 0px 10px 0px 0px;
}
/* Nav */
#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}
.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}
/* Content */
#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}
#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}
#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}
/* Footer */
#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
I'm not sure if this will work or not, but add this and see if it works.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What browser are you using to test your site?
I tossed up your code on a fiddle, and it appears just fine in my Firefox, which suggests that you're probably looking at it in IE, and possibly either in a non-standards mode, or an old version.
If that's the case, then it's due to how IE (namely, old versions), handle the box model and math. To IE, 300px + 676px + 4px > 980px . The easiest way to fix this is to reduce something that affects the width by 1-2px, and it will probably fix it.
To consider a width of a div, there are 4 comoponents you should think about
The width of the div itself (this is where your text will be for example)
The padding width (surrounding the width mentioned in point 1 above)
The width of your border (surrounding the padding)
The margin (surrounding the border)
So, if you search for CSS Box Model (some examples are here http://www.w3.org/TR/CSS2/box.html and here http://www.w3schools.com/css/css_boxmodel.asp), you will be able to see the box model that will help you with that. Also using jQuery you can retrieve the width of each section using the following methods: .width(), .innerWidth(), and .outerWidth(). Note you may need to do some calculations to finds border width, padding width, or margin width.
Read CSS documentation and jQuery documentation to have a clearer idea of how those work. Sometimes you may need to utilize jQuery to make the width calculations for you properly if you need some exact values with variable width objects.
I'd like to center a list of left-aligned items.
This is what I currently have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Shrinkwrapped List</title>
<style type="text/css">
#wrapper {
margin: auto;
width: 500px;
border: solid 1px #CCCCCC;
}
#header {
text-align: center;
font-size: 200%;
}
#content {
text-align: center;
}
#content ul {
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
border: solid 1px #666666;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Shrinkwrapped List
</div>
<div id="content">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur</li>
<li>Adipiscing elit</li>
<li>Morbi odio</li>
<li>Mi blandit vehicula</li>
</ul>
</div>
</div>
</body>
</html>
Which produces a page that looks like:
What I really want looks like this:
I can accomplish this by adding width: 200px; to #content ul but the problem is that I have a lot of lists like this and they all have various widths.
I'd like the <ul> to shrink to the content so it can be centered correctly. Or am I going about this the wrong way?
Thanks for any help you can provide.
Solution
Thanks to KennyTM and Magnar, here is the solution:
Add these four lines to #content ul's CSS rules:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
I've tested this in IE6, IE7, IE8 and Firefox 3.6. The results looks like the second image above and the list always fits to the content of the items.
Set the <ul> to use display: inline-block;. See http://jsbin.com/atizi4.
Note that inline-block is not supported (completely) for IE ≤7.
You can probably adopt my previous answer. Inline-block for IE, display:table for modern browsers. Might need to explicitly specify a list-style-type.
Edit: Since this is a list, may be able to get away with inline-block on the ul and not display:table. You need to declare in a separate rule, display:inline; after inline-block for IE.
I'd look at using CSS and putting a margin: 0 auto on the <ul> with a maximum width container.
Try this. It involves in incompatibilities, but I don't really know how older browsers handle margins and padding and all that anymore since I only work with new ones. It only involves some minor changes to your CSS.
/* I didn't style the other parts, so I'm taking them out to save space. */
#content {
margin: 0 auto;
}
#content ul {
border-top: solid 1px #666666;
border-bottom: solid 1px #666666;
text-align: left;
font-size: 150%;
list-style-type: none;
margin: 20px auto;
padding: 0px;
width: 202px;
}
#content li {
border-left: solid 1px #666666;
border-right: solid 1px #666666;
margin: 0 auto;
padding: 0;
width: 200px;
}
Edit: I want to clarify what I changed. I changed how content is aligned, but honestly, you can change that back, I don't think it has an effect.
What I originally did was set a fixed width and centered your li element, which you had no styling for. That just centered the content. The border you placed was on the ul so it was very wide, but if we placed it in the li then we would have many boxes. So, I split the border style. The reason why #content ul has a 202px width is because borders count on the outside of the width.
I hope the explanation made it clear to why it worked. Good luck! I tested this out in Google Chrome.
A solution compatible with any browser, no matter how old it is:
Center the table and put your list inside.
Example:
<table style="margin-left:auto; margin-right:auto;"><tr><td>
<ul>
<li>Line1</li>
<li>Line test 2</li>
<li>Line long for test</li>
</ul>
</td></tr></table>