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.
Related
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>
I have this table-style DIV code for a used vehicle sales platform:
.mainwrapper {
border: 2px solid;
display: table;
}
.itemwrapper {
display: table-row;
width: 706px;
}
.mainwrapper {
margin-bottom: 20px;
}
.item {
width: 700px;
border: 1px solid;
padding: 1em;
background-color: blue;
color: white;
}
.item:nth-child(2) {
float: left;
margin: -2px;
}
.item1 {
display: table-cell;
text-align: left;
margin-left: -30px;
}
.item1 p {
margin-top: -30px;
}
.item-price {
width: 300px;
background-color: blue;
padding: 1em;
color: white;
text-align: center;
}
.picture, .item {
display: table-cell;
border: 1px solid;
}
.picture {
width: 90px;
margin: 1px;
border: 2px solid;
}
.picture img {
height: 185px;
}
<div class="mainwrapper">
<div class="itemwrapper">
<div class="item">1992 ELDDIS PAMPEROS XLi</div>
<div class="item-price">£1,000</div>
</div>
<div class="itemwrapper">
<div class="picture"><img src="https://complianz.io/wp-content/uploads/2019/03/placeholder-300x202.jpg.webp"></div>
<div class="item1"><p>2 berth, good condition</p></div>
</div>
</div>
<div class="mainwrapper">
<div class="itemwrapper">
<div class="item">2008 SWIFT CHALLENGER 540</div>
<div class="item-price">£13,000</div>
</div>
<div class="itemwrapper">
<div class="picture"><img src="https://complianz.io/wp-content/uploads/2019/03/placeholder-300x202.jpg.webp"></div>
<div class="item1"><p>4 berth end bedroom</p></div>
</div>
</div>
What I am trying to do is ensure the class item1 is opposite the image, with the text like this if you didn't have the £ per month div and list as table:
Basically, what I am trying to fix is the text that's in class item1 opposite the image (not with all the description or colored DIV there); see the image below.
I tried margin-left and margin-top, but it won't quite put the image opposite.
This is the result of my code:
I can't quite get it to work as I'd expected, text opposite image and size of DIV in the CSS; if anyone can help, I'd much welcome this.
It works OK - no major coding errors, but isn't quite esthetically working out, and that's the basic problem.
I'm trying this as basic HTML first before attempting anything with Javascript, just to ensure it works as a standalone design.
Edit: I tried vertical-align for text, that worked, but it's fixing the gap between image div and text that's the issue. There's a large amount of space I don't know how to fix.
As the answer for the text is solved. You can change the column width by changing the css property of item. you can do it as follows. The width was 700px in your code you can reduce to get a smaller width. I changed it to 400px.
.item {
width: 400px;
border: 1px solid;
padding: 1em;
background-color: blue;
color: white;
}
I am trying to align 3 divs side by side in a navigation bar. I've spent the past 5 hours trying to figure this out and I know it's something super simple that I can't just wrap my head around.
This is where I am at right now.
If I float the align-right div the tags Join & Support stack ontop of each other.
<div id="sticky-nav">
<div class="container">
<div class="box">
<div class="align-left">
Home Listings
</div>
<div class="align-center">
<form action="/action_page.php">
<input type="text" placeholder="Search..">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
<div class="align-right">
Join Support
</div>
</div>
</div>
</div>
#sticky-nav {
overflow: hidden;
background-color: #7889D6;
position: fixed;
top: 0;
width: 100%;
}
#sticky-nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
#sticky-nav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
max-width: 300px;
width: 100%;
}
#sticky-nav button {
padding: 6px 10px;
padding-top: 1px; margin-top : 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
margin-top: 8px;
}
#sticky-nav a:hover {
background-color: #ddd;
color: black;
}
#sticky-nav a.active {
background-color: #4CAF50;
color: white;
}
.container {
display: table;
width: 100%;
}
.box {
display: table-row;
}
.align-left {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-center {
width: 33%;
text-align: justify;
display: table-cell;
padding: 10px;
}
.align-right {
width: 33%;
display: table-cell;
padding: 10px;
text-align: right;
}
EDIT: This is the layout I am trying to achieve,
I see that you're using display: table to achieve this effect. I highly recommend reading up more first before continuing with your work or project. Some layout concepts you have to know are grid and flex. In your case, we can use the flexbox concept to solve your problem.
flex basically is a method that can distribute space between items more easily. In your case, you can get what you're trying to achieve by using flex-grow and flex-basis. flex-basis defines how, initially, long/tall an item inside a flex container should be. flex-grow defines how an item inside a flex container can expand (grow) in width/height depending on the remaining space of the container.
In your case, we can simply set the flex container's width (your wrapping div) to 100%. To distribute space evenly between the items, we can set all the items' initial widths to 0. Then, distribute the remaining space of the container (which is still 100%) evenly using flex-grow to 1 for each flexbox item. However, this will make all the items similar in width. To make the center div wider, you can set the flex-grow to 2. This will make it so that the left div, center div, and right div have 25%, 50%, and 25% of the container's remaining space in width respectively. I really recommend reading further about flex to understand what I mean. After reading about flex in the above link, try visiting this and this to learn more about flex-basis and flex-grow.
Here's a working solution using flex. Again, I recommend reading more about flex so that you can use flex better.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Helvetica;
}
body,
html {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
}
#wrapper * {
padding: 30px;
text-align: center;
color: white;
}
.left-align,
.right-align {
flex-basis: 0;
flex-grow: 1;
}
.center-align {
flex-basis: 0;
flex-grow: 2;
}
.left-align {
background: #121212;
}
.center-align {
background: #232323;
}
.right-align {
background: #454545;
}
<div id="wrapper">
<div class="left-align">Some content</div>
<div class="center-align">Some content</div>
<div class="right-align">Some content</div>
</div>
I have created a simple example for your layout.
You can achieve it using flex box i.e
.box{
display: flex;
width:100%;
justify-content:space-between;
}
Here is the link: https://codesandbox.io/s/optimistic-euclid-xmv6h
Hope it answer your question.
Okay, so, I honestly don't know what I'm doing wrong. So let me just show you:
This is what I'm trying to accomplish (made in PS):
http://puu.sh/ryXC9/7d82671ee0.png
What my results are so far:
http://puu.sh/ryXST/02c9722a53.png (Obviously not successful, and as a side note, the orange box is just a placeholder, I'll fill out the form later).
The problem I'm having is first: Trying to have the width of "social-content" to be just the width and height of the held contents. Of course "main-social" is just the width of screen and height of contents. If I can accomplish the width thing with "social-content" then I'll be able to center the div with "Margin: 0 auto" but alas, I cannot figure out my dilemma. This is my relavent markup( "Follow us" bar is excluded, as its irrelevant):
.fa-facebook {
color: white;
overflow: hidden;
}
.fa-twitter {
color: white;
padding: 0.2em;
}
#main-social {
height: 8em;
}
#social-content {
height: 100%;
width: 70%;
margin: 0 auto;
margin-top: 1.4em;
}
#facebook {
float: left;
display: inline-block;
}
#facebook a {
padding: 0.2em 0.4em 0.2em 0.4em;
background-color: #3b5998;
height: 100%;
text-decoration: none;
}
#facebook a:hover {
color: white;
}
#twitter {
float: left;
display: inline-block;
}
#twitter a {
background-color: #10bbe6;
text-decoration: none;
}
#twitter a:hover {
color: white;
}
#emailForm {
float:left;
display: inline-block;
width: 25em;
margin: 0 auto;
background-color: orange;
height: 7em;
}
<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
<div id="social-content">
<div id="facebook">
</div>
<div id="emailForm">
</div>
<div id="twitter">
<a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
</div>
</div>
</div>
Also, the problem also is, It needs to be responsive, the entire site is responsive, and since I'm still new to the responsive scene, I may have not taken the best approaches to it. (Tips not needed, but greatly appreciated :) )
To get #social-content's width to be that of its content, use display: inline-block without a width defined.
If #main-social is simply a container, you can use flexbo to center #social-content within it. Add the following to #main-social:
#main-social {
display: flex;
justify-content: center; // Centers horizontally
align-items: center; // If you need to center vertically, as well
}
I'd like to fill all the fluid with white colored square.
As you see the picture, each fluid is filled with white, but it's not complete square.
I wrapped whole with div class WhiteZone, but it won't make them square.
How can I make it square?
LIVE DEMO
HTML
<div class="WhiteZone">
<div class="Box">
<div class="Left">
abcdefg<br />
opqrstu
</div>
</div>
<div class="Box">
<div class="Right">
hijklmn
</div>
</div>
</div>
CSS
div.WhiteZone{
color: #000;
background-color: #fff;
}
div.Box{
padding: 0px;
text-align: center;
float: left;
}
div.Left{
width: 300px;
padding-top: 5px;
padding-bottom: 15px;
text-align: center;
color: #000;
background-color: #fff;
clear: both;
}
div.Right{
width: 300px;
padding-top: 5px;
text-align: left;
color: #000;
background-color: #fff;
clear: both;
}
You can use display: table for this. Write like this:
div.WhiteZone {
color: #000;
background-color: #fff;
display: table;
}
div.Box {
padding: 0px;
text-align: center;
display: table-cell;
}
Check this demo.
div.WhiteZone{
color:#000000;
background-color:#ffffff;
overflow:hidden;
}
You can add overflow:hidden to your whitezone class so it will stretch to fit the height of inner floating divs. But with only that added you will get white background taking full width of your page. Like here
To avoid that, you can also add float:left to your whitezone class (like here) or set a width to it (like here)