I am new to CSS and I know there is a better/easier solution with Flexbox but I'm trying to understand the basics of CSS.
Therefore I am trying to align the header items:
a logo image with a text on the left side - text should be vertically aligned in the middle
a nav menu on the right aligned with the text on the left side.
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid blue;
}
.logo a {
color: black;
text-decoration: none;
}
.logo img {
height: 100px;
width: 100px;
}
nav a {
color: black;
text-decoration: none;
}
header {
background-color: #D5D4D4;
}
header .logo {
border: 2px solid yellow;
display: inline-block;
margin: 0 10px;
vertical-align: middle;
}
header nav {
border: 3px solid red;
display: inline-block;
}
<body>
<header>
<div class="logo">
<a href="/">
<img src="" alt="brand logo (100X100 px)" class="logo">
<span>brand name</span>
</a>
</div>
<nav>
Products
About
Contact
Free Trial
Free Trial
</nav>
</header>
<div class="content">
Page content
</div>
</body>
I have 2 questions:
Why are the nav a items vertically aligned? I apply vertical-align: middle only to the header .logo box.
How to I move the nav to the right? (if I use float then vertical-align will not work. Any clean, pure CSS solution is fine.
nav a is currently a child-element of header. So by applying vertical-align: middle to the header, it will inherently also affect nav a. By moving nav outside of header-tags, it will not inherent the applied CSS code.
To align the nav-items to the right without the use of Flexbox, you can use for example: position: relative and alter the position manually with the use of left: XX% of right: XX%. These two attributes mean: what percentage you want to move away from that direction. For example, by using left: 100% you are moving to affected items 100% away from the left-side of the window.
In my code snippet, i also added a solution of applying text below of an image with the use of figure and figcaption in HTML, by putting img and figcaption inside of figure. This way, CSS doesn't have to be applied to align the text for the logo.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid blue;
}
.logo a {
color: black;
text-decoration: none;
}
.logo img {
height: 100px;
width: 100px;
}
nav a {
color: black;
text-decoration: none;
position: relative;
left: 56%;
}
header {
background-color: #D5D4D4;
}
header .logo {
border: 2px solid yellow;
display: inline-block;
margin: 0 10px;
vertical-align: middle;
}
header nav {
border: 3px solid red;
display: inline-block;
}
<body>
<header>
<div class="logo">
<a href="/">
<figure>
<img src="" alt="brand logo (100X100 px)" class="logo">
<figcaption>brand name</figcaption>
</figure>
</a>
</div>
</header>
<nav>
Products
About
Contact
Free Trial
Free Trial
</nav>
<div class="content">
Page content
</div>
</body>
I don't quite understand what you mean by
a logo image with a text on the left side - text should be vertically aligned in the middle
because the brand logo and name actually already vertically aligned, so it's better if you provide your own brand logo. Or do you mean "horizontally" aligned?
As your second question about the nav, try to use flex.
Here's my best attempt to answer your question:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid blue;
}
.logo a {
color: black;
text-decoration: none;
}
.logo img {
width: 100px;
}
nav a {
color: black;
text-decoration: none;
display: flex;
flex-direction: row;
}
header {
background-color: #D5D4D4;
}
header .logo {
border: 2px solid yellow;
display: inline-block;
margin: 0 10px;
vertical-align: middle;
}
header nav {
border: 3px solid red;
display: inline-block;
}
.column{
column-count:2;
}
<body>
<header>
<div class="column">
<div class="logo">
<a href="/">
<img src="https://images.unsplash.com/photo-1549924231-f129b911e442?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=870&q=80" alt="brand logo (100X100 px)" class="logo">
<span>brand name</span>
</a>
</div>
<nav>
Products
About
Contact
Free Trial
Free Trial
</nav>
</div>
</header>
<div class="content">
Page content
</div>
</body>
User Taroti has explained your question #1 (the vertical-align: middle gets inherited to all other elements within the header block, and besides, wouldn't that be necessary? If you want to align the logo to be vertically centered in the header, then it will of course depend on relative positioning with all the contents of the header). For #2, moving the nav to the right, you may likely want the nav to remain in the header block, so you could instead add left margin ("margin-left") to it, thus pushing it if you will to the right (by inserting X amount of margin in between it and whatever preceding inline element, in this case the logo block (inline)).
From trial and error (using chrome dev tools) I found a value of 14% to work rather nicely across all likely ranges of screen sizes - from as small as phones to 2,000px-width+ screen. This is why it is much better to use percentage (i.e., relative value) than explicit (i.e., an explicitly defined number of px) for scaling reasons depending on the end-users screen size in pixel dimensions...
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 1px solid blue;
}
.logo a {
color: black;
text-decoration: none;
}
.logo img {
height: 100px;
width: 100px;
}
nav a {
color: black;
text-decoration: none;
}
header {
background-color: #D5D4D4;
}
header .logo {
border: 2px solid yellow;
display: inline-block;
margin: 0 10px;
vertical-align: middle;
}
header nav {
border: 3px solid red;
display: inline-block;
margin-left: 14%;
}
<body>
<header>
<div class="logo">
<a href="/">
<img src="" alt="brand logo (100X100 px)" class="logo">
<span>brand name</span>
</a>
</div>
<nav>
Products
About
Contact
Free Trial
Free Trial
</nav>
</header>
<div class="content">
Page content
</div>
</body>
Related
I'm trying to fix my website. Problem #1 I can't push the list on the header over by using margin-left or padding-left. Problem #2 the Main Header 1 and 3 are creating there own padding. My goal is to fix the padding and bring the headers closer together and get rid of this padding/margin issue.
#hlist {
top: 10px;
margin-right: 3px;
position: relative;
height: 30px;
padding-right: -12px;
}
ul#hlist {
float: right;
list-style-type: none;
margin: 0;
overflow: hidden;
}
ul#hlist li {
float: left;
}
ul#hlist li a {
font-family: 'Poppins';
color: black;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
ul#hlist li a:hover {
border-style: solid;
border-width: 1px;
border-color: gray;
color: gray;
}
.content-wrapper {
padding: 0;
}
.text-wrapper {
height: 300px;
width: 100%;
position: relative;
margin-top: -60%;
}
.text-wrapper h1 {
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 10vw;
}
.text-wrapper h3 {
margin-top: 10%;
text-shadow: 2px 2px black;
text-align: center;
color: #ffff;
font-size: 30px;
}
<div id="header">
<ul id="hlist">
<li>WHERE TO WATCH</li>
<li>ABOUT</li>
</ul>
<div id="logo-box">
<img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
</div>
</div>
</header>
<div class="content-wrapper">
<image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
<div class="text-wrapper">
<h3> The Giant </h3>
<h1> Panda </h1>
</div>
<image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>
Your body has margin: 8px set. That's why there's a gap around the edges. Set margin: 0 on the body tag. Check out this codepen I created. That solves the gap around the edges of the image.
I don't fully understand the second part of your question. Your page is spread out very wide due to the size of the image. Make the image smaller and so that it doesn't overflow and your site will look much better.
If you want to position the links in an easier way look into using Flexbox and doing something like this:
display: flex;
justify-content: flex-end;
Do that on your links and they should float right if that's what you're trying to do.
Also, look into using a CSS Reset. By default HTML elements come with certain CSS styles applied automatically. A reset will get rid of default styles so they don't interfere with what you're trying to do. Lots of HTML elements have default padding/margins that you may not realize.
just starting out on my code journey and am hoping you can shed some light here. I just can't quite figure out how to adjust my code to reflect what I'm trying to do. I've tried to use float:right but then it seems to tamper with my ability to modify margins afterwards.
I've tried to adjust padding/margin/ text-align and can't seem to get my navbar text to the position that I want. What I want is to align it right,
and then offset it from the top where it is, and then to create space between the words for presentation. I'd like to keep it as a fixed navbar with the logo and text present during scrolling, at all times.
Here's a link to jsfiddle for an example, see below for my topnav CSS code.
https://jsfiddle.net/gbr403/t1u7q3wL/
.topnav {
background-color: black;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
height: 63px;
border-bottom: 1px solid seashell;
}
You can use flexbox to align items in navbar. See example below
body {
margin: 0;
}
.navbar,
.navbar--links {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar {
background-color: #222;
padding: 13px 15px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.navbar--logo {
width: 50px;
height: 50px;
}
.navbar--links a {
text-decoration: none;
color: #fff;
margin-left: 18px;
}
<nav class="navbar">
<img src="https://images.pexels.com/photos/258174/pexels-photo-258174.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="navbar--logo"/>
<div class="navbar--links">
Mission
Featured Tea
Locations
</div>
</nav>
Use css flex. The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
body {
background-color: black;
}
.topnav {
background-color: black;
overflow: hidden;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%;
height: 63px;
border-bottom: 1px solid seashell;
display: flex;
justify-content: space-between;
align-items:center;
}
.topnav a {
font-size: large;
font-family: sans-serif;
}
#img1 {
}
#logoid{
height: 50px;
width: 150px;
padding: 10px;
}
<body>
<header>
<div class="image1">
<img id="img1" src="">
</div>
<div class="topnav">
<div class="navlogo">
<img id="logoid" src="https://via.placeholder.com/150">
</div>
<div>
Mission
Featured Tea
Locations
</div>
</div>
</header>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1111<br/><br/><br/><br/><br/><br/>2222
</body>
I'm having some issues with styling the top bar for a website. I want all of the anchor tags to be equally distributed throughout the entirety of the screen. There are four anchor tags, so I thought that by making the width of each tag 25%, they would each take up a quarter of the block. They should theoretically all be in one line, but the very last one gets moved down. I have no clue what's causing this to happen and hope I'll be able to get some help. Thank you!
html code:
<div class="navbar">
Home
Lessons
Contact
Login
</div>
CSS code:
* {
margin-left:0;
margin-right:0;
margin-bottom:0;
margin-top:0;
}
html, body {
height:100%;
width:100%;
}
.navbar {
background-color: #555;
overflow: auto;
}
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
text-align: center; /* If you want the text to be centered */
}
It is the padding defined in .navbar a that causes the offset. You can add a box-sizing: border-box to the rule to avoid this effect (content will shrink instead of container expanding to fit the padding). Or, better i think, use flexbox :
.navbar {
background-color: #555;
overflow: auto;
display: flex
}
.navbar a {
flex: 1;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
text-align: center; /* If you want the text to be centered */
}
The display: flex will initialize flexbox on navbar container and the flex: 1 in anchor will tell browser to give equal width to all elements.
A quick fiddle to explain (case 1 & 2 can be easily fixed with box-sizing) :
.container {
width: 200px;
border: 1px solid #000;
}
.item-no-flex {
width: 25%;
padding: 3px;
border: 1px dashed #000;
float: left;
}
.item-ib {
width: 25%;
padding: 3px;
border: 1px dashed #000;
display: inline-block
}
.container-flex {
width: 200px;
display: flex;
border: 1px solid #000
}
.item-flex {
width: 25%;
padding: 3px;
flex: 1;
border: 1px dashed #000;
}
<p>Float</p>
<div class="container">
<div class="item-no-flex">1</div>
<div class="item-no-flex">2</div>
<div class="item-no-flex">3</div>
<div class="item-no-flex">4</div>
</div>
<p style="clear:both">Inline-block</p>
<div class="container">
<div class="item-ib">1</div>
<div class="item-ib">2</div>
<div class="item-ib">3</div>
<div class="item-ib">4</div>
</div>
<p style="clear:both">Flexbox</p>
<div class="container-flex">
<div class="item-flex">1</div>
<div class="item-flex">2</div>
<div class="item-flex">3</div>
<div class="item-flex">4</div>
</div>
Try simplifying your code and using flexbox.
HTML:
<div class="navbar">
Home
Lessons
Contact
Login
</div>
CSS:
.navbar {
display: flex;
justify-content: space-around;
}
This should distribute the links equally across the page with space around each link, regardless of screen width.
I've trying to make my header staying in the middle of the page, doesn't matter what windows-size I'm at.
I've tried using Bootstrap.
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<h1 class=" section-title ">StackOverflow</h1>
</div>
</div>
Also, this CSS.
.section-title {
margin-left:auto;
margin-right;auto;
}
Then as soon as I shrink my windows down, my header keep going back to the left.
How do I stop that ? What is the best way to do that ?
My Fiddle is here - if you need it.
You should replace ; with :. Also to dead centre:
html, body {height: 100%; width: 100%;}
h1 {text-align: center; display: inline-block; vertical-align: middle;}
.center {position: absolute; top: 0; left: 0; right: 0; left: 0; text-align: center; border: 1px solid #ccc; height: 100%; width: 100%; vertical-align: middle;}
<div class="center">
<h1>Centered</h1>
</div>
If you just need to center the text.
h1 {
text-align: center;
border: 1px solid red;
}
<h1>Hello</h1>
If you also want to center the element itself.
h1 {
display: table;
margin: 0 auto;
border: 1px solid red;
}
<h1>Hello</h1>
Watch the border differences between the two demos.
I need a div to be positioned at the top inside its containing div, and leave unused space below itself. The default behavior seems to be the opposite, e.g. the contained div falls down to the floor of its containing div and leaves unused space above itself.
I assume that's quite a trivial thing to do, but I don't even know how to search for the solution on Google (tried "div float top", "div gravity" and some other meaningless searches...)
Here is my html code:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And relevant css:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
}
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
}
.bonustext {
display: inline-block;
width: 70%;
}
The resulting layout is ok except the logo div (the one containing the img tag) that occupies the lower part of its containing div free space, while I need it to "fight" gravity and stay with its top edge hooked to the container top edge.
Thanks in advance for any help.
Here is a slight modification using float instead of inline-block.
Seems to work OK:
<div class="bonus">
<div class="bonusbookmakerlogo">
<a rel="nofollow" href="http://..." target="_blank"><img src="/img/box.png" alt="blah" title="blah"/></a>
</div>
<div class="bonustext">
<span>Bonus description.</span>
</div>
<div class="bonusdivider"></div>
</div>
And CSS:
.bonus {
font-size: 90%;
text-align: justify;
margin: 1em 2em;
height: 100px;
border: 10px solid red; /* test */
}
.bonusdivider {
margin: 1em 0 1em 0;
border: none;
height: 1px;
color: #999999;
background-color: #999999;
clear: both;
}
.bonusbookmakerlogo {
float: left;
width: 20%;
}
.bonustext {
float: left;
width: 70%;
}
The answer by #Marius George works and I think it is the cleanest possible solution, but here his a different one I've found meanwhile:
.bonusbookmakerlogo {
display: inline-block;
width: 20%;
vertical-align: top;
}