I am having no luck trying to align some text.
I tested with the Overflow Hidden value removed but still couldn't get it looking how I would like.
Here is a codepen page example:
http://codepen.io/anon/pen/oXrPGJ
HTML
<div>
<article>
<section>
<h2 class="colourtitle">
<img class="sideimage" src="http://placehold.it/256x256">
I'm glad I wrap, wish I was vert mid
</h2>
</section>
<article>
</div>
And the CSS
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
body {
font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
h2 {
padding-top: 1.5em !important;
overflow: hidden !important;
}
.colourtitle {
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 10px;
padding: 5px 0 0 0;
}
.sideimage {
display: inline-block;
margin-right: 0.5em;
max-width: 70px;
padding-top: 10px;
border-right-style: solid;
border-right-color: red;
border-right-width: 10px;
float: left;
}
I have Top Padding on my header tag, because on my actual page there will be many of these stacked, so just creates a nice white space.
I have set the Overflow Hidden, so that when viewed on a mobile screen the text wraps as I wish, and does not sit beneath the image.
h2 {
padding-top: 1.5em !important;
overflow: hidden !important;
}
You can see I'm using a thumb image, which has a right side border to it.
Along with an H2 tag, and that's all using a bottom side border.
But, I would like the text to be a little bit lower, so that it positions in the middle vertically, but still does the wrapping when needed on small screens.
I hope that is clear, and that someone can help me out with a snipped of code required. Thanks
Depending on your browser support requirements, you could look into flexbox.
Looking at the provided link and code, you could get the text to position in the middle vertically by using display: flex and align-items: center.
.colourtitle {
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 10px;
padding: 5px 0 0 0;
display: flex;
align-items:center;
}
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'm struggling to horizontally center three <h2> elements
#container {
margin: 0 auto;
width: 100%;
height: 3em;
}
h2 {
display: inline-block;
text-align: center;
width: 33%;
margin-left: auto;
margin-right:auto;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
I tried removing the white space by reformatting the HTML. I also tried using this site. I can't get the third element to sit inside the container.
Update: I followed jcuenod's advice. This seems to have solved the block level question of horizontal centering, but looking at the styling, I am now wondering why the headers are matching with their results. Here is what they look like now.
Shouldn't the h2's occupy the entirety of the container, given that they are centered across a container with 100% width?
The Problem
The problem is that you have widths that fill the horizontal space (mostly; 33%). But then your <h2> elements take up extra horizontal space because you add padding and border.
The Solution
Use box-sizing as follows:
box-sizing: border-box;
Explanation
MDN explains the border-box setting for box-sizing:
The width and height properties include the content, the padding and border, but not the margin.
MDN lists it as experimental but it has very good browser support.
#container {
width: 100%;
height: 3em;
}
h2 {
box-sizing: border-box;
display: inline-block;
text-align: center;
width: 33%;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
font-family: Arial;
color: Black;
font-size: 18px;
background: #FDF3E7;
padding: 10px 20px 10px 20px;
border: solid #7E8F7C 3px;
}
<div id="container">
<h2 class="header">Restaunt Name:</h2
><h2 class="header">Phone #:</h2
><h2 class="header">Star Rating:</h2>
</div>
just use display: block for <h2>
Add text-align:center; to the #container element.
Because your h2 elements are set to inline-block they don't occupy the full width of their container. That's why the centering is not working.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I'm in the very early stages of creating a simple site. I'm trying to make a nav with 4 buttons that all take up 25% width inside an 800px container div. The buttons are all set to display inline-block and are 200px wide as they should be, but the 4th element is getting pushed onto a new line. Picture of issue.
At first I thought the border of the container div was messing things up, but i added box-sizing: border-box; and it didn't fix the issue. I then changed from a border on the container div to an outline, also with no luck. Using Chrome's Inspect Element tool, I can see that each button is 200px wide, yet they still won't fit on one line. HTML and CSS of these portions are below:
HTML
<h1>Midwestern Accent</h1>
<div id="nav_div">
<div class="nav_button button_border">Home</div>
<div class="nav_button button_border">About</div>
<div class="nav_button button_border">Music</div>
<div class="nav_button">Contact</div>
</div>
CSS
#content_div {
font-family: Arial, Helvetica, sans-serif;
margin: auto;
width: 800px;
background-color: black;
color: white;
/*border-width: 5px;
border-color: white;
border-style: solid;
box-sizing: border-box; */
outline: 5px solid white;
}
#nav_div {
border-style: solid;
border-color: white;
border-width: 0px 0px 5px 0px;
width: 100%;
vertical-align: top;
}
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
font-size: 30px;
vertical-align: top;
}
Inline block elements, like inline have natural spacing after them.
This is a good article on CSS tricks which explains different methods to getting around it.
Personally, I use the -4px margin-right fix.
.nav_button {
text-align: center;
width: 25%;
display: inline-block;
margin-right: -4px;
font-size: 30px;
vertical-align: top;
}
My goal is to have a box around .toggles ("HTML, CSS, JS, Result"), and according to my instructor, we were supposed to set a border-right that would extend up and meet with the surrounding 1px black border. What is causing the space that's appearing above and below each vertical line?
JSBIN: http://jsbin.com/qipuzubure/1/
(In creating this jsbin a new problem has emerged: why is the inner div collapsing on top of itself when the window is shrunk?)
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menuBar {
width: 100%;
height: 2.5em;
display: table;
background-color: gray;
}
#logo,
#buttonDiv,
.toggles {
display: table-cell;
vertical-align: middle;
width: 33%;
}
.toggles {
width: 20% ;
}
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
padding-left: 10px;
}
.toggles {
text-align: center;
border: 1px solid black;
padding-bottom: 1px;
}
.toggles ul {
padding: 0;
}
.toggles li {
list-style: none;
display: inline;
padding: 0 5px;
border-right: 1px solid black;
}
#buttonDiv {
text-align: right;
padding-right: 10px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<ul class="toggles">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
1) The top and bottom borders are visible because you are displaying the menu using display: table.
display: table and display: table-cell are only necessary when creating tables or in exceptional circumstances.
Since you are creating a menu bar, you can use display: inline-block for some of the inner elements. This will help you correctly style your page.
2) The other issue regarding the widths is not really an error, the page is doing exactly what you're telling it to do. The middle section is keeping a width of 33%, the only way for the current content to fit within this area is to drop down.
Saying this, you can write rules to control what happens to the content in this scenario.
One thing to keep in mind when applying widths to elements is that if you then apply a left or right margin (or padding), it can throw off the width calculation and you may get a different width to what you were expecting.
The most stable way to do this is to wrap the elements in a container and set the width on that container.
Without knowing more about your example I can't give a definitive solution but one way would be to set a min-width: on the #menuBar div.
I've included a JSFiddle to demonstrate.
Your elements are only occupying that space. The 'body' has 8px margin all around so if you remove that your bar will ocupy 100% of the page.
If you want your classe toggles to occupy more than this you need to set a height value to it.
I think this is what you want:
WORKING: DEMO
Just alter the folloewing CSS:
CSS
.toggles li {
margin:0%;
list-style: none;
display: table-cell; /* Or use display:inline-block; but it will destroy vertical alignment of text*/
vertical-align: middle;
height:35px; /*ADDED : You didn't specified the height*/
padding: 0 5px;
border-right: 1px solid black;
}
I have my width for the status bar set to 100% in CSS, but yet it is still a little bit more. The rest of my page all cuts off at the right spot but you can scroll right and see my status bar sticking off. Please help! All help is appreciated!
Link to my site
CSS Code:
body{
margin: 0px;
background-color: lightgrey;
}
div.navigation{
width: 99%;
padding: 10px;
height: 25px;
background-color: black;
}
a.navigation{
color: #f5f5f5;
text-decoration: none;
font-size: 20px;
font-family: Century Gothic, sans-serif;
display: inline-block;
vertical-align: middle;
}
a.navigation:hover{
color: grey;
}
a.navigation:active{
color: darkred;
}
a.navigation:visited{
color: #f5f5f5;
}
In your CSS, you have some styles set on the navigation which are adding padding. Change the code starting at line 37 to:
div.navigation {
width:100%;
padding: 10px 0; /* Keeps the padding to the top and bottom only */
height:25px;
background-color: black;
}
Your padding is causing the browser to interpret the width of the bar as 100% of it's container width plus 20px of padding (10px left and 10px right).
You can use the CSS box-sizing: border-box; property to force the browser to render the box with the specified width and height, and place the border and padding inside the box.
div.navigation{
width: 100%;
padding: 10px;
height: 45px;
background-color: black;
box-sizing: border-box;
}
Note you will need to increase the height to 45px because the browser will not extend the height of the box for the top and bottom padding.
JS Fiddle fullscreen; code.