Positioning buttons and a logo to be spaced out equally - html
I am trying to create a header that has a logo in the centre and two buttons either side of it. I want the buttons and the logo to be evenly spaced horizontally and then in the centre of vertical space.
The image below is what I have so far, the pink is just so I can see what the header is doing.
This is my HTML:
<body>
<div id="container">
<header>
<div id="nav_left">
<button class="nav_button">About Me</button>
<button class="nav_button">Case Studies</button>
</div>
<div id="logo">
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 513 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<g transform="matrix(1.16129,0,0,1.16129,-210.521,-117.321)">
<path d="M381.924,101.027L301.667,101.027C301.667,101.027 221.281,100.584 221.411,181.284C221.54,261.984 221.411,301.669 221.411,301.669C221.411,301.669 221.825,381.773 301.667,381.926C381.51,382.078 261.539,381.926 261.539,381.926C261.539,381.926 181.26,381.643 181.282,462.182C181.304,542.722 181.282,622.696 181.282,622.696C181.282,622.696 180.9,702.907 261.539,702.952C342.178,702.998 381.924,702.952 381.924,702.952L381.924,622.696L301.667,622.696C301.667,622.696 261.724,622.03 261.539,582.567C261.354,543.104 261.539,502.311 261.539,502.311C261.539,502.311 261.628,462.192 301.667,462.182C341.707,462.173 381.924,462.182 381.924,462.182L381.924,301.669L341.796,301.669C341.796,301.669 301.478,300.882 301.667,261.541C301.857,222.2 301.667,221.412 301.667,221.412C301.667,221.412 302.065,181.256 341.796,181.284C381.526,181.312 381.924,181.284 381.924,181.284L381.924,101.027L381.924,101.027Z" style="fill:rgb(60,122,190);" />
<path d="M422.052,101.027L502.309,101.027C502.309,101.027 582.289,101.974 582.566,181.284C582.842,260.595 582.566,301.669 582.566,301.669C582.566,301.669 581.877,381.579 502.309,381.926C422.741,382.273 542.437,381.926 542.437,381.926C542.437,381.926 622.641,383.525 622.694,462.182C622.747,540.84 622.694,702.952 622.694,702.952L542.437,702.952L542.437,502.311C542.437,502.311 541.684,461.99 502.309,462.182C462.934,462.375 422.052,462.182 422.052,462.182L422.052,301.669L462.181,301.669C462.181,301.669 501.568,300.956 502.309,261.541C503.05,222.126 502.309,221.412 502.309,221.412C502.309,221.412 501.63,181.454 462.181,181.284C422.731,181.114 422.052,181.284 422.052,181.284L422.052,101.027L422.052,101.027Z" style="fill:rgb(60,122,190);" />
</g>
</svg>
</div>
<div id="nav_right">
<button class="nav_button">Contact Me</button>
<button class="nav_button">Other</button>
</div>
</header>
</div>
</body>
This is my CSS:
body {
margin: 0;
}
#container {
width: 100%;
margin: 0;
}
header {
width: 100%;
background-color: pink;
}
#logo {
height: 250px;
width: 250px;
margin: auto;
border: 0px;
padding: 0px;
}
#nav_left {
float: left;
}
#nav_right {
float: right;
}
.nav_button {
width: 150px;
float: left;
margin-left: 5%;
margin-top: 25%;
margin-bottom: 25%;
position: inherit;
}
If I get it correctly (you need 5 evenly wide collmns) you can use either bootstrap or the Flexbox. Make a row direction and grow of 1 so they are evenly wide. Then place your elements into each of it and style it so they appear in the center of the column.
To do this easily you could make your #logo have display: inline-block;, then put text-align: center; on your header to center the logo (you might want to add text-align: left; in your floating nav containers to set their text back to normal).
See demo here (fixed.... link was wrong before)
And if you wanted to use flexbox, you could simply add display: flex; and justify-content: space-between; to your header styles. Just note with flexbox that it might not be supported on older IE's and on some iOS versions
See demo here
Related
Positioning elements next to each other without float don't line up at top correctly [duplicate]
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I'm trying to position multiple divs next to each other using inline-flex, however they're not lining up on top (see screenshot). If I remove the svg however, the divs line up correctly. 🤷♂️ It also works if I use the float: right or a negative margin-top property but I want to avoid that because it's not intended for this and a bit hacky.
My code is:
.wrapper {
height: 100%;
}
.item,
form,
.input-container {
height: 100%;
display: inline-flex;
align-items: center;
}
button {
border: none;
background: #111;
height: 100%;
width: 16px;
display: inline-block;
}
.icon {
height: 16px;
width: auto;
float: left;
display: inline-block;
}
<div class="wrapper">
<div class="item">
<!-- Search form with svg image -->
<form>
<button class="k-submit" for="search" id="k-submit" type="submit" aria-label="Open searchbox">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
<path d="M54.1 49.8L40 35.7c2.8-3.6 4.4-8.2 4.4-13.1 0-12-9.7-21.7-21.7-21.7S.9 10.6.9 22.6s9.7 21.7 21.7 21.7c4.9 0 9.5-1.6 13.1-4.4L49.9 54l4.2-4.2zM6.9 22.6c0-8.7 7.1-15.7 15.7-15.7 8.7 0 15.7 7.1 15.7 15.7 0 8.7-7.1 15.7-15.7 15.7s-15.7-7-15.7-15.7z" fill="#111"></path>
</svg>
</button>
<div class="input-container">
<!-- Search input field -->
<input value="Suche" type="search">
</div>
</form>
</div>
<div class="item">
<a href="http://www.example.com">
English
</a>
</div>
</div>
I edited the screenshot for better view of the containers. It's actually the containers which are not lining up.
.wrapper {
height: 100%;
}
.item,
form,
.input-container {
height: 100%;
display: inline-flex;
align-items: center;
}
button {
border: none;
background: #111;
height: 100%;
width: 16px;
display: inline-block;
}
.icon {
height: 16px;
width: auto;
float: left;
display: inline-block;
}
.top{
vertical-align: top;
}
<div class="wrapper">
<div class="item">
<!-- Search form with svg image -->
<form>
<button class="k-submit" for="search" id="k-submit" type="submit" aria-label="Open searchbox">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
<path d="M54.1 49.8L40 35.7c2.8-3.6 4.4-8.2 4.4-13.1 0-12-9.7-21.7-21.7-21.7S.9 10.6.9 22.6s9.7 21.7 21.7 21.7c4.9 0 9.5-1.6 13.1-4.4L49.9 54l4.2-4.2zM6.9 22.6c0-8.7 7.1-15.7 15.7-15.7 8.7 0 15.7 7.1 15.7 15.7 0 8.7-7.1 15.7-15.7 15.7s-15.7-7-15.7-15.7z" fill="#111"></path>
</svg>
</button>
<div class="input-container">
<!-- Search input field -->
<input value="Suche" type="search">
</div>
</form>
</div>
<div class="item top">
<a href="http://www.example.com">
English
</a>
</div>
</div>
If you want element by lining up on top. Please use "align-items: inherit;" instead of that center. Example is:-
.item, form, .input-container {
height: 100%;
display: inline-flex;
align-items: inherit;}
Here's one solution:
Move your div with class='item' into the same parent div that your form is in.
It lined up automatically for me doing that. As you mentioned, the containers weren't lining up and that's because they didn't belong in the same parent div.
The slight difference you might see in my solution could be due to the way the browser renders the underline under the a tag for "English". That underline makes it look even lower than it is lol. If you use text-decoration: none; on your a tag, it'll line up perfectly.
.wrapper {
height: 100%;
}
.item,
form,
.input-container {
height: 100%;
display: inline-flex;
align-items: center;
}
button {
border: none;
background: #111;
height: 100%;
width: 16px;
display: inline-block;
}
.icon {
height: 16px;
width: auto;
float: left;
display: inline-block;
}
<div class="wrapper">
<div class="item">
<!-- Search form with svg image -->
<form>
<button class="k-submit" for="search" id="k-submit" type="submit" aria-label="Open searchbox">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55">
<path
d="M54.1 49.8L40 35.7c2.8-3.6 4.4-8.2 4.4-13.1 0-12-9.7-21.7-21.7-21.7S.9 10.6.9 22.6s9.7 21.7 21.7 21.7c4.9 0 9.5-1.6 13.1-4.4L49.9 54l4.2-4.2zM6.9 22.6c0-8.7 7.1-15.7 15.7-15.7 8.7 0 15.7 7.1 15.7 15.7 0 8.7-7.1 15.7-15.7 15.7s-15.7-7-15.7-15.7z"
fill="#111"></path>
</svg>
</button>
<div class="input-container">
<!-- Search input field -->
<input value="Suche" type="search">
</div>
</form>
<div class="item">
<a href="http://www.example.com">
English
</a>
</div>
</div>
</div>
Trying to align all the content within my navigation bar
I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How do I vertically center text with CSS?
I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).
Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.
CodePen
Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.
.headerLeft {
margin-left: 30px;
margin-right: 40px;
float: left;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
.headerRight {
margin-left: 30px;
margin-right: 40px;
float: right;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
verticalAlignHelper {
vertical-align: middle;
line-height: 150px;
height: 150px;
}
Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.
Prevent covered-up body content
Use JavaScript to set a padding-top on body, just larger than the top height. Like so:
$("body").css("padding-top", $("nav").height() + 25);
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
Fix vertical alignment of nav-bar images
Because I can't see the images, the following are only suggestions:
Easiest: Make the navigational bar the same height as the image (or vice versa)
Manually hard-code margins in (only if you know exact heights of everything)
Hardest but best Use JavaScript (dynamic and fun)
$(function() {
var elem = $("#img4");
elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
img {
height: 75px;
}
div.navbar {
width: 100%;
height: 100px;
background-color: lightgrey;
margin-bottom: 20px;
}
div.text {
line-height: 100px;
display: inline-block;
vertical-align: top;
}
img#img1 {
height: 100px;
}
div#div2 {
height: 75px;
}
div#text2 {
line-height: 75px;
}
img#img3 {
margin: 12.5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text">Uncentered image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
<div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
<div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
<div class="text">Centered using JS and jQuery (dynamic)</div>
</div>
How do I vertically align multiple children elements of a parent element
For my example, I'm copying the styles and structure from the new Marvel App site. I'm wanting to accomplish the way they have an element 'house' their logo and their navigation. As you can see from their source, as well as mine, there seems to be a lot of elements at play with this method. There are two things I want to know:
1.) What's causing my copied code not being able to mimic the way Marvel has it? What am I doing wrong?
2.) Can this be simplified with less, more manageable code?
My code that I copied, for practice purposes, is below along with a link to the codepen.
HTML
<div class="header-bar-wrapper headroom headroom--top" id="header">
<div class="height-100 pageWrap">
<nav class="navHeight">
<a href="#" class="float-left height-100">
<div class="display-table height-100">
<div class="display-tableCell verticalAlign-middle">
<svg version="1.1" id="Layer_1" class="display-block" width="40px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00E06A;}
</style>
<rect class="st0" width="100" height="100"/>
</svg>
</div>
</div>
</a>
<div class="navigation-links">
<div class="display-table height-100">
<div class="display-tableCell verticalAlign-middle">
<div class="breakPointM-inline breakPoint-textAlign-right">
<div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
Features
</div>
<div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
Pricing
</div
<div class="navigation-link-wrapper wrapper-one breakPointM-marginRight-m breakPointL-paddingRight-s">
Blog
</div
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
CSS
.header-bar-wrapper {
min-height: 70px;
z-index: 200;
top: 0;
left: 0;
height: 10%;
width: 100%;
display: block;
background-color: black;
}
.pageWrap:after, .breakPointM-inline:after {
content: "";
display: table;
width: 100%;
clear: both;
}
.pageWrap:before, .breakPointM-inline:before {
content: "";
display: table;
width: 100%;
}
.pageWrap {
margin-left: auto;
margin-right: auto;
}
.navHeight {
height: 100%;
}
.float-left {
float: left;
}
.height-100 {
height: 100%;
}
.width-90, .pageWrap {
width: 90%;
}
.display-block {
display: block;
}
.display-table {
display: table;
width: 100%;
}
.display-tableCell {
display: table-cell;
}
.verticalAlign-middle {
vertical-align: middle;
}
.navigation-links {
z-index: 300;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
float: right;
position: relative;
}
.breakPointM-inline {
font-size: 16px;
}
.navigation-link-wrapper {
transform: translateY(0);
margin-bottom: 0;
text-align: left;
vertical-align: middle;
display: inline-block;
position: relative;
}
.breakPointM-marginRight-m {
margin-right: 20px;
}
CodePen
I've played around a little with this, supported only HTML5 and CSS3.
Dont bother pasting into codepen or jsfiddle, test it locally on actual browser.
I've colored the green area for your logo image
You'll notice what I've done in the CSS is simply centered the anchor tags inside the list item elements using the CSS transform:translate.
and floated the list items to the right of the nav element.. let me know what you think.
HTML
<head>
<title> Alternative </title>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<div id="logo"></div>
<nav>
<ul>
<li> Home </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</header>
</body>
CSS
* {
margin:0;
padding:0;
}
html, body {
width:100%;
height:100%;
}
header {
height:15%;
position:relative;
}
#logo {
background-color:green;
width:20%;
height:100%;
float:left;
}
nav {
width:80%;
height:100%;
float:left;
}
li {
width:20%;
float:right;
height:100%;
position:relative;
list-style-type:none;
}
a {
text-decoration:none;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
Copying and pasting code directly from another website most of the time is a horrible idea, mainly for a few reasons: 1 . You don't acquire the necessary skills to tackle problems which are not solvable by copy and paste. 2.You don't gain insight on how exactly the code works, neither you can see properly which framework they are using in order to construct the given website. 3 . Regarding your question 1, if you have to copy the entire source code and you are wondering what is not right...everything you've done is wrong. 4 . In my opinion it can be done it more easily manageable code because "table" is horribly outdated. I hope my answer helped in some way.
Unexpected element behavior with css image centering
I've been trying to get this image centered in the page for a while, and for some reason margin-left: auto; margin-right: auto; weren't doing anything. So in the spirit of wildly trying everything in sight, I stumbled on the following surprisingly correct result. My question is, why on earth does setting the width to 25% work? I would have expected 100%, or 50% at least.
This fiddle shows some other widths, which apparently behave in a nonlinear fashion: http://jsfiddle.net/mo85kkvv/
(Bonus question: is there a super-obvious way to use the margin-left/right properties instead that I'm missing?)
HTML:
<body>
<div id="bcontainer">
<img src="banner.png" alt="banner" />
</div>
</body>
CSS:
body {
margin: 0;
}
#bcontainer {
width: 25%; /* why 25%?? */
height: 50px;
display: table-cell;
text-align: center;
}
I don't know a lot about HTML but I think that the proper way to define the class container is:
.container {
height: auto;
display: block;
margin:auto;
}
This is more generic. You can use the element inspector, and see how the layers change.
Is what your after ? http://jsfiddle.net/mo85kkvv/4/
HTML
<body>
<div class="container" id="one">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="two">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="three">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div><br>
<div class="container" id="four">
<img src="http://www.clker.com/cliparts/6/J/D/n/z/V/gold-scroll-banner.svg" alt="banner" />
</div>
</body>
CSS
body {
}
.container img{
width:100%;
display: inline;
text-align: center;
margin: 0 auto;
}
#one {
width: 25%;
margin: 0 auto;
}
#two {
width: 50%;
margin: 0 auto;
}
#three {
width: 75%;
margin: 0 auto;
}
#four {
width: 100%;
margin: 0 auto;
}
It all depends what you want. Do you want the wrapper to be centered with the image floating in the center, or do you want the wrapper (in this case .container) to shrink around the image and be the one that floats in the center? I have updated your fiddle with simple examples of a few options. http://jsfiddle.net/mo85kkvv/6/
How to force this div to span the height of viewport?
This jsFiddle shows the problem. I have not managed to prevent the div0 div from "collapsing" its top margin with that of its sibling, div1. (HTML below.) I want div0 to span the entire viewport vertically, and the red rect inside it to appear flush against the top left corner of the viewport. (The placement of div1 and its contents is exactly as desired, and should not be changed in any way.) I have tried to disable the collapsing of margins by putting borders around both div0 and div1, but, as the jsFiddle shows, this has made no difference. Here's the relevant HTML: <!doctype html> <body> <div id="div0"> <svg id="svg0" width="50px" height="50px"> <g> <rect x="0px" y="0px" width="50px" height="50px" style="fill:red;"></rect> </g> </svg> </div> <div id="div1"> <div id="div2"> <svg id="svg1" width="100px" height="100px"></svg> </div> </div>
Here is a solution for you. I added a .wrapper class, with a absolute position, to contain the elements and maintain elasticity in your document. I also added overflow: hidden to your div0 id to prevent the red svg rect from flowing outside of that containing div.
Here is an updated >>>JSFiddle<<<
HTML:
<div class="wrapper">
<div id="div0">
<svg id="svg0" width="50px" height="50px">
<g>
<rect x="0" y="0" width="50px" height="50px"></rect>
</g>
</svg>
</div>
<div id="div1">
<div id="div2">
<svg id="svg1" width="100px" height="100px"></svg>
</div>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
border: 1px solid blue;
}
#div0 {
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 100%;
background-color: yellow;
border: 1px solid blue;
overflow: hidden;
}
#div1 {
margin-top: 20px;
border: 1px solid green;
background: lightgray;
min-height: 27px;
display: -webkit-flex;
display: flex;
}
#div2 {
background: black;
margin: 0px auto;
}
rect {
fill: red;
}
#div0 {
height:100vh;
}
You can use the vh for viewport height.
OK, I found the solution: comment out the position:relative in the CSS for body. This is illustrated in this revision of the original fiddle. Notice that the only difference between this and the original fiddle is the commented-out line just mentioned. (I'm ashamed to say that I found this solution by blind trial-and-error; I have no idea of why the new version works and the original one didn't.)