I have buttons inside a nav and the content of the buttons are overlapping, I wans't able to figure out what was causing it.
How can I prevent overlapping of the button contents?
body,html
{
padding: 0;
margin: 0;
}
nav
{
background-color: #e05138;
height: 82px;
width: 100%
}
button
{
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
padding: 30px;
margin: 5px;
float: right;
width: 100px;
line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<button type="button" name="Contact">Contact</button>
<button type="button" name="About Me">About Me</button>
</nav>
</body>
</html>
You want to make sure you keep your line height >= your text size.
You have the line-height at 5px and the text size is going to be using the browser default which is ~14-16px.
Try setting your line height to 1.
button{
line-height: 1;
}
Explain to me why.... if the line height is not the issue, simply changing the line height to 1 exactly how I said fixes the issue of the text laying on top of each other, which is verbatum the question.
https://jsfiddle.net/rifi2k/nh9w80j6/
The proof is in the fiddle...
Although there is little reason to set a fixed height or width on the button, there may be a requirement to have a fixed width or height on your button, and setting a line height of 5px when you don't have an equal text height is not going to do you any favors down the road when those two words do end up stacking on top of each other, which is the case with a fixed width on that button.
So pretty much in my opinion the lesson to be learned from this example is not don't fix the width or height, its don't set a 5px line height when your text height is 16px... Anyone else care to disagree...
OVERLAPPING, not WRAPPING. overlapping is a line-height issue, wrapping is a fixed width issue
you need to define the height of your buttons with "height" instead of "margin"
you can see the fixed code here:
https://codepen.io/parisotdev/pen/qLoPbg
button {
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
height: 60px; /*this was margin: 30px*/
margin: 5px;
float: right;
The reason that the button content is overlapping is because you are using a fixed width of 100px. Since there's not enough of space for the contents, naturally it's forced to push the rest of the content to a new line.
What you can do here is to not use a fixed width and let the buttons decide for their own width.
body,html
{
padding: 0;
margin: 0;
}
nav
{
background-color: #e05138;
height: 82px;
width: 100%
}
button
{
display: inline-block;
text-align: center;
background-color: white;
text-decoration: none;
border: none;
border-radius: 20px;
padding: 30px;
margin: 5px;
float: right;
/* width: 100px; */ /* COMMENTED THIS OUT */
line-height: 5px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My web Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<button type="button" name="Contact">Contact</button>
<button type="button" name="About Me">About Me As much text as needed</button>
</nav>
</body>
</html>
Related
I have div inside my button, however, the div doesn't stay inside the button.
Heres the link
https://gph.is/g/aNWBDdP
button {
font-size: 25px;
height: 40px;
min-width: auto;
padding: 5px;
text-align: left;
}
<button>
<div>Edit</div>
<div>**pencil_icon**</div>
</button>
The div is inside the button, you just limited the Button's height. Remove the height and watch the button contain the div.
button {
display: block;
font-size: 25px;
padding: 5px;
text-align: left;
}
<button>
<div>Edit</div>
<div>**pencil_icon**</div>
</button>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
button {
display: block;
font-size: 25px;
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<button>
<div>Edit</div>
<div>**pencil_icon**</div>
</button>
</body>
</html>
Per the comment of isherwood:
A block-level element has no business in a button. What's its
purpose here? Use a span instead and set it to inline-block if
necessary.
I am currently creating a company website, and I have the logo, but I am wanting to put it inside the Navigation Bar, align it so it is at the far right, but halfway down through the height of the navigation bar. I am wanting to do this using CSS.
Here is my index.html.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<img src="images/logo.png" alt="Logo" id="logo" onclick="location.replace('index.html', '_top')">
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Business
Services
Learn More
<span id="freetrial">Free Trial</span>
</div>
</div>
</body>
</html>
And here is my main.css
html, body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", sans-serif;
}
/* Navigation Bar */
#logo {
text-align: right;
float: right;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
clear: right;
text-decoration: none;
color: grey;
margin: 0 10px;
line-height: 70px;
}
#freetrial {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26 px;
float: right;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + .menu {
display: block;
background-color: white;
}
}
If you require any more explaining or anything at all in aiding you to answer my question, I will be more than happy to help you, providing it is something that I can actually answer haha.
If I was coding this, I would first put the logo inside the nav div with its own div around it. Then I would use flexbox (it is supported everywhere but IE, btw).
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Make sure to apply "display: flex;" to the parent div (the nav div, presumably). Then I would apply "align-items: center;" to the nav div. This will align all of the menu items to the middle vertically as well (not sure if you want that).
I would then use "justify-content" to the nav items. Depending on what you want done with the other items in the nav bar, you might use "flex-end" or "space-between".
If you do not want to use flexbox, you should refer to this stack overflow question after moving your image to inside the nav div: How to vertically align an image inside a div?
Then you would set "right: 0;" on the image or image div.
Also, I think you may be using floats incorrectly...
https://css-tricks.com/all-about-floats/
You seem to be using them the way it "seems" like they should work, but they can be confusing... I would get rid of your floats, it might be messing things up. Sorry, I can take a harder look if you want at a later time. Feel free to ask any questions you have!
I want 3 text boxes aligned LEFT, CENTER, RIGHT along the horizontal axis, and on the same line.
I am able to use margin-left and margin-right to set a text box in the middle, and then using position:absolute and left:0 I am able to get a text box on the left side (on the same line as the middle box).
Now the problem is the last box, the right box. Using position:absolute and right:0, positions the box on the right, but it shows one line below.
I can't figure out what I'm doing wrong, and to be honest, I have no idea how position:absolute and left:0 made the element appear on the same line as the middle element.
#sectionM,
#sectionL,
#sectionR {
width: 250px;
border: 1px outset black;
padding: 5%;
text-align: center;
}
#sectionM {
margin-left: auto;
margin-right: auto;
}
#sectionL {
position: absolute;
left: 0px;
}
#sectionR {
position: absolute;
right: 0px;
}
header {
text-align: center;
}
nav {
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Misha's Homepage</title>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
</head>
<header>
<h1>Hi!</h1>
</header>
<nav>Archive
</nav>
<article>
<section id="sectionL">
This is the left LEFT.
</section>
<section id="sectionM">
This is the mid MID.
</section>
<section id="sectionR">
This is the right RIGHT.
</section>
</article>
</html>
There are so many ways of doing it. Here is the solution of using inline-block, since it's responsive and works well on nearly all browsers.
http://jsfiddle.net/kop21mbg/
body {
text-align: center;
}
nav {
margin-bottom: 1.5em;
}
article {
font-size: 0; /*fix white space*/
}
article > section {
font-size: 16px;
display: inline-block;
width: 250px;
border: 1px outset black;
padding: 30px;
box-sizing: border-box;
}
<header>
<h1>Hi!</h1>
</header>
<nav>
Nav item
</nav>
<article>
<section>This is the left box.</section>
<section>This is the mid box.</section>
<section>This is the right box.</section>
</article>
In case you don't want it to be responsive, add the following style.
article {
width: 750px;
}
If there was no font, and nothing but block level elements, and the zoom on a page was adjusted, will anything change?
It seems that, because everything would be based on it's parents width / height (and none of those change when the browser is zoomed) then nothing would change. Is this right?
Correct. However, font-size needs to be in vw because percentages won't work.
head {
display: none;
}
* {
display: block;
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
}
.container {
background-color: #ecf0f1;
color: #130f0e;
width: 30%;
margin: 2% 0 0 1%;
padding: 3%;
}
h3 {
font-size: 3vw;
}
p {
font-size: 2vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<h3>Header Text</h3>
<p>Paragraph Text</p>
</div>
</body>
</html>
I think I got it just partly, now I have another problem I don't understand. I've got a div with id="signin" that is inside other 2 divs. Those 2 divs don't have any padding or border, and when I apply margin-top to the div with id="signin" now it doesn't create any white space above. Why is it? Can the div next to the div with id="signin" be affecting it in any way?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body {margin: 0px;}
#top-bar {
background-color: #690203;
height: 40px;
}
.fixed-width {
width: 950px;
margin: auto;
}
#logo {
float: left;
}
#logo img {
border-right: 2px solid #752124;
padding: 9px;
}
#signin {
float: left;
width: 200px;
margin-left: 15px;
margin-top: 10px;
border: 1px solid deepskyblue;
}
</style>
</head>
<body>
<div id="top-bar">
<div class="fixed-width">
<div id="logo">
<img src="images/logo.png" width="20">
</div>
<div id="signin">
<!--<img src="images/signin.png" width="13">-->
<span>test test</span>
</div>
</div>
</div>
</body>
</html>
I've started learning css recently and came across a problem I can't understand. I've got one div nested inside another, and when the outer div has a border, then using margin with inner div results in moving the inner div within the outer div, which is how I thought it should work. However, when the outer div doesn't have any border, then using margin with the inner div results in moving the outer div as well and it creates some space above it. Please, have a look and try to explain why it's like that. Thank you.
with border in #bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
border: 1px dashed black; /* border I use or don't use with the outer div */
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>
without border in #bigger
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigger {
width: 100px;
height: 100px;
background-color: deepskyblue;
}
#smaller {
margin-top: 10px;
width: 50px;
height: 50px;
background-color: deeppink;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="bigger">
<div id="smaller"></div>
</div>
</body>
</html>
This is caused by the fact that CSS uses collapsing margins.
That link will explain it far better than I will, so I'd recommend giving that a read, but to give you a short summary:
Margin in CSS is designed to be displayed outside of an element. This behaviour gets a bit murky when dealing with elements within other elements, as the margin can be considered outside of the child in both cases of whether it is within the parent or outside of the parent. It was determined that margin's would always seek to be outside of all parent elements as well, unless that parent had a style which prevented this logic from being true. For example, if the parent has a border, it now has something above it which separates the child from the outside world, meaning that the child's margin must belong inside of the parent. If not, there is no separation, so the child's margin ventures outward.
If you wanted to always have the margin inside of the parent, a better option might be to apply padding to the parent element, instead of margin to the child.