I have a sign out button in my navigation menu, but it is not staying properly inline, it's slightly off, here is my code.
HTML:
<nav class="col-sm-3" style:"height:20vh;!important">
Account
Chat
Video Chat
<form action="../Universals/signout.php" id="navigation_form">
<button>Sign Out</button>
</form>
</nav>
CSS for the Links:
#navigation a {
white-space: nowrap!important;
display: flex;
justify-content: flex-end;
margin: 25px 20px 15px;
min-width: 140px;
padding: 1px!important;
font-size: 15px;
font-weight: bold;
color: black!important;
text-decoration: none;
border: none;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer!important;
outline: none;
overflow: hidden;
text-align: right!important;
align-items: right!important;
}
CSS for the Form:
#navigation_form {
white-space: nowrap!important;
display: inline;
justify-content: flex-end;
margin: 25px 20px 15px;
min-width: 140px;
padding: 1px!important;
font-size: 15px;
font-weight: bold;
color: white!important;
text-decoration: none;
border: none;
background-color: transparent;
background-repeat: no-repeat;
cursor: pointer!important;
outline: none;
overflow: hidden;
text-align: center!important;
align-items: center!important;
}
---------------------------------------------------------------------------
---------------------------------------------------------------------------
This should work:
form {
display: inline-block;
}
Related
I am making a sidebar for my site and I want the side bar to fill the rest of the screen but also scroll separate to the right of the screen when it overflows with other elements inside. When I use 100% for the height the element only goes to the height of the last element inside of it.
I am trying to get it to fill the rest of the screen as I stated previously but it only goes to not all the way.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
margin-left: 345px;
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
Your leftmain IS taking up 100% of the space available to it, leftmain stops when it reaches . You have leftmain set to flex-direction: column;
when only the .main should have it. Also don't use the tag, it is no longer supported in HTML5 and is display: block; when it should be inline-block.
I would change just to and set display to inline-block and set a width so the leftmain has room to go past it.
I hope this solves your problem.
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
align-content: center;
background-color: #333333;
overflow: scroll;
}
#nameOfCenterDiv {
position: absolute;
left: 300px;
display: inline-block;
}
Give to the sidebar a position fixed so it always stays there wherever you scroll and and a margin-left to your content on the right (the width of the margin-left must be the same of sidebar width)
.leftmain{
position: fixed
}
.main{
margin-left: 345px;
width: 450px //remove this so it's 100%
}
You have to wrap the left sidebar and right panel within the same container.
Using the display: flex on the container, you no longer need to specify a 100% height for the left sidebar since it will automatically fill in the remaining space.
You also need to remove the margin-left rule for the right content so that it lays nicely with the sidebar.
You can optionally set a max-height of 100vh to the sidebar so that it scrolls when its content exceeds the viewport height.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.container {
display: flex;
}
.leftmain {
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div class="container">
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
</div>
I'm working on a website. For some reason, my navbar isn't being very cooperative. I have set up links to other pages on the site, and have floated them to the right. However, they don't seem to move as far right as I want them to. If I use margin-right or left, then when I resize the browser it isn't responsive. But the float property keeps it responsive even though it stays around the center of my nav. Here's my code:
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
padding: 2% 10%;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght#300&display=swap" rel="stylesheet">
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>
```
Any help is greatly appreciated
Thanks!
Try this sample, float is not a preferred way of laying out elements in a modern web. Please use flex-box;
The cause of the width to the right is caused by the padding: 2% 10%;, which I have modified.
Remove the visual backgrounds.
nav{
width:100%;
}
.navbar-wrapper{
background: blue;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
.leftside{
background: green;
width: 50%;
height: 10px;
}
.rightside{
width: 50%;
background: red;
}
.options{
background: yellow;
text-decoration: none;
width: 100%;
display: flex;
justify-content: flex-end;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline-block;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
/* Start Variables */
:root{
--aa-color: #57C324;
}
/* End Variables */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
/* Start Navbar */
.navbar-wrapper{
width: 100%;
/* padding: 2% 10%; you need to change padding to position to the right correctly */
padding: 20px 10px;;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 10px 8px #888888;
z-index: 100;
position: relative;
}
/* you don't need float
.leftside{
float: left;
width: 50%;
}
.rightside{
float: right;
width: 50%;
}*/
.rightside{
/*to position your links to the right*/
text-align: right;
}
.options{
text-decoration: none;
}
.linkhome{
font-size: 120%;
text-decoration: none;
color: var(--aa-color);
margin-right: 0%;
margin-left: 2%;
/* if you want all links in one line use inline instead*/
display: inline;
}
.linkmenu{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkabout{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkfood{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkculture{
font-size: 120%;
text-decoration: none;
color: black;
margin-right: 0%;
margin-left: 2%;
display: inline;
}
.linkmenu:hover{
color: var(--aa-color);
}
.linkabout:hover{
color: var(--aa-color);
}
.linkfood:hover{
color: var(--aa-color);
}
.linkculture:hover{
color: var(--aa-color);
}
<nav>
<div class="navbar-wrapper">
<div class="leftside">
</div>
<div class="rightside">
<div class="options">
Home
Menu
About Us
Our Food
Ethiopian Culture
</div>
</div>
</div>
</nav>
.options {
text-align: right;
}
I am running into an issue that has stumped me. I searched all over for an answer, but could not find one.
I have a container that I am making directly out of an <a> tag. Originally, my issue was that the clickable linked area exceeded outside of the border. I then removed display: block from .bigButtonLink. This resolved this issue, but then two other issues appeared. 1. The link container is not centered anymore. 2. The margin under the link is not rendering.
Does anyone see what I am doing wrong?
.sec {
margin: 60px auto;
}
.bigButtonLink {
text-decoration: none;
/*display: block;*/
text-align: center;
margin: 50px auto;
}
.bigButton {
border: 1px solid #BE1E2D;
-webkit-appearance: none;
border-radius: 2px;
box-sizing: border-box;
background: #FFF;
font-family: 'Muli', sans-serif;
color: #B82222;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 2px solid #B82222;
font-size: 2.3rem;
padding: 3rem 6rem 3rem 4.5rem;
}
#red {
background: red;
height: 200px;
width: 100%;
}
<div class="sec">
<a href="#" class="bigButtonLink bigButton">
Request Quote
</a>
</div>
<div class="sec" id="red">
</div>
Add text-align: center; to the section class and make the a selector display: inline-block; and that should center it and maintain the margin around the element as well.
.sec {
margin: 60px auto;
text-align: center;
}
.bigButtonLink {
text-decoration: none;
display: inline-block;
text-align: center;
margin: 50px auto;
}
.bigButton {
border: 1px solid #BE1E2D;
-webkit-appearance: none;
border-radius: 2px;
box-sizing: border-box;
background: #FFF;
font-family: 'Muli', sans-serif;
color: #B82222;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 2px solid #B82222;
font-size: 2.3rem;
padding: 3rem 6rem 3rem 4.5rem;
}
#red {
background: red;
height: 200px;
width: 100%;
}
<div class="sec">
<a href="#" class="bigButtonLink bigButton">
Request Quote
</a>
</div>
<div class="sec" id="red">
</div>
You have to add text-align: center' to the selector.secanddisplay: inline-blockto.bigButtonLink`. Try this code.
.sec {
margin: 60px auto;
text-align: center;
}
.bigButtonLink {
text-decoration: none;
text-align: center;
margin: 50px auto;
display: inline-block;
}
.slide{
display: block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<a class="slide"><</a>
<a class="slide">></a>
Please help me How can I add both buttons in the same row with the center align? Right now button 1 is on top and button 2 is in the footer. How can I resolve this issue?
I advise you to use flexbox, it's a very good tool to align items and make responsive web pages. You can find guides here or here, that are very clear and will give you the good practices.
.container{
display:flex;
justify-content:center;
}
.slide{
display: block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin-left: 5px;
margin-right: 5px;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<div class="container">
<a class="slide"><</a>
<a class="slide">></a>
</div>
div.arrow {
text-align: center;
}
.slide {
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
<div class="arrow">
<a class="slide"><</a>
<a class="slide">></a>
</div>
Changes in class Slide:
display: inline-block;
line-height: 30px;
padding: 0px 0px;
The elements are not in a row as they are block elements. For your requirement they'll have to be converted to inline-block types.
You should use flexboxes:
section#slider_buttons {
display: flex;
display: -webkit-flex;
justify-content: center;
}
section.button {
display: inline-flex;
display: -webkit-inline-flex;
height: 32px;
width: 32px;
cursor: pointer;
border-radius: 50%;
background-color: #2874f0;
color: white;
}
section.button a {
display: block;
text-align: center;
margin: auto; /* Important */
}
<section id="slider_buttons">
<section class="button">
<a><</a>
</section>
<section class="button">
<a>></a>
</section>
<section>
You have two options.
1) Add BootStrap or a similar framework and wrap the two links in a div with a row class.
2) Change your CSS display setting to inline-block
.slide{
display: inline-block;
font-size: 16px;
line-height: 20px;
padding: 7px 4px;
cursor: pointer;
height: 32px;
width: 32px;
margin: 5px auto;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
text-align: center;
}
Flex is the best tool to achieve this. Despite their are solutions with display block. Flex just allows you to controle it in more detail:
.slide-buttons {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
/* Clarity marker, removed when you understand the example */
background-color: rgba(0,0,0,.1);
}
.slide-buttons > a {
display: inherit;
align-items: center;
align-content: center;
justify-content: space-around;
height: 32px;
width: 32px;
margin-right: 5px;
cursor: pointer;
font-size: 16px;
line-height: 1;
background-color: #2874f0;
border-radius: 50%;
color: #fff;
}
.slide-buttons > a:last-child {
margin-right: 0;
}
#bt-slide-left:after {
content: '\276E'; /* \003C */
}
#bt-slide-right:after {
content: '\276F'; /* \003E */
}
<div class="slide-buttons">
<a id="bt-slide-left"></a>
<a id="bt-slide-right"></a>
</div>
<br>
<!-- or -->
<div class="slide-buttons">
<a><</a>
<a>></a>
</div>
I know this question has been asked a lot and I have done considerable research on this point (here on Stack Overflow and elsewhere via Google, etc.) but I cannot find an answer which handles the point I am running into.
I have a dropdown with the following code:
HTML
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
CSS
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span{
display: inline-block;
color: white;
}
I have also made a jsfiddle with the above code here.
I am trying to figure out how to get the two <span>s to be vertically centered in the dropdown.
Flexbox can do that
.dropdown {
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
display: flex;
align-items: center;
}
.dropdown .box {
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
}
.dropdown span {
display: inline-block;
color: white;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
â–¶ 1st Option:
As, in your code, you use display: inline-block for all the span elements as well as .box, you can just add vertical-align: middle to your code as follows:
.dropdown .box, .dropdown span {
vertical-align: middle;
}
jsFiddle → here.
Snippet:
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}
.dropdown span{
display: inline-block;
color: white;
}
.dropdown .box,
.dropdown span {
vertical-align: middle;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
â–¶ 2nd Option:
Another option you have is to change the display of .dropdown to display: flex and set align-items: center as shown below:
.dropdown {
display: flex;
align-items: center;
}
jsFiddle → here.
Snippet:
.dropdown{
max-height: 256px;
margin: 0px 4px;
padding: 16px;
overflow: hidden;
background-color: grey;
}
.dropdown .box{
width: 32px;
height: 32px;
padding: 5px 0px;
margin: 0px 4px;
display: inline-block;
background-color: white;
overflow: hidden;
font-size: 1em;
font-weight: bold;
text-align: center;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
vertical-align: middle;
}
.dropdown span{
display: inline-block;
color: white;
}
.dropdown {
display: flex;
align-items: center;
}
<div class="dropdown">
<div class="box">T</div>
<span class="phone-number">(999) 999-9999</span>
<span class="email">temp#temp.com</span>
</div>
Try this one out:
HTML:
<div class="dropdown">
<div class="box">T</div>
<ul data>
<li><span class="phone-number">(999) 999-999</span></li>
<li><span class="email">temp#temp.com</span></li>
</ul>
</div>
CSS:
.data li{
list-style:none;
}