so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
I am trying to create a navbar with two "lines".
The first line would include some links and the second one a HTML select with a submit.
The code below generates the navbar like this:
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-search {
background-color: #333;
align-self: center;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
I tried to add some <br /> but it didn't do the job.
How can I put the search div right below the home link?
Add width: 100% on .navbar-search
body {margin:0;}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-search {
background-color: #333;
align-self: center;
padding: 0 15px 10px;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
If you don't want the search item to take up the full width of the navbar, you can force a line break with a "collapsed row":
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-break {
flex-basis: 100%;
height: 0;
}
.navbar-search {
background-color: #333;
align-self: center;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-break"></div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
Breaking to a new row with flexbox | Tobias Ahlin
I want to have a column of identical object center in the midle of the page. the objects id is: total-score and the container id is: results. I try to use flex but I cannot figure it out how to center it in any way. I tryed to use align-content:center and justify-content: center but they seems to dont do anything. why? I attached just the css and the html. SO does not let me attache the entire code.
#import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);
body {
font-size: 12px;
font-family: "Work Sans", sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="radio"] {
height: 1.6em;
width: 1.6em;
}
button {
font-family: "Work Sans", sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin: 20px 10px;
z-index: 3;
display: block;
font-size: 2em;
}
button:hover {
background-color: #38a;
}
.question {
font-size: 3em;
margin-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
font-size: 3em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers label {
display: block;
margin-bottom: 10px;
}
.slide {
position: static;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
.active-slide {
display: block;
z-index: 2;
}
.quiz-container {
position: static;
height: auto;
margin-top: 40px;
}
#results {
display: flex;
flex-direction: column;
justify-content: center;
width: 10%;
}
#total-score {
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
width: 100%;
height: 100%;
background: rgb(255, 0, 0);
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 140, 0, 1) 50%,
rgba(50, 205, 50, 1) 100%
);
}
#media (min-width: 500px) {
body {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div>
<h1 id="question-numer">
Intrebarea numarul:
</h1>
</div>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
</div>
<div id="results">
<div id="total-score">
</div>
<div id="total-score">
</div>
<div id="total-score">
</div>
</div>
<script src="QuizLogic.js"></script>
</div>
</body>
</html>
First, you should not use the same id in multiple elements. It should be unique. Instead of making the wrapper #results smaller, you can set it to full width and make the children .total-score smaller. Alternatively, you could wrap the children with another container and center it.
Try changing your code to the following:
body {
font-size: 12px;
font-family: "Work Sans", sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1 {
font-weight: 300;
margin: 0px;
padding: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input[type="radio"] {
height: 1.6em;
width: 1.6em;
}
button {
font-family: "Work Sans", sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin: 20px 10px;
z-index: 3;
display: block;
font-size: 2em;
}
button:hover {
background-color: #38a;
}
.question {
font-size: 3em;
margin-bottom: 10px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
font-size: 3em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.answers label {
display: block;
margin-bottom: 10px;
}
.slide {
position: static;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
display: none;
}
.active-slide {
display: block;
z-index: 2;
}
.quiz-container {
position: static;
height: auto;
margin-top: 40px;
}
#results {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.total-score {
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
width: 10%;
height: 100%;
background: rgb(255, 0, 0);
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 140, 0, 1) 50%,
rgba(50, 205, 50, 1) 100%
);
}
#media (min-width: 500px) {
body {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="QuizTransition.css">
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="container">
<div>
<h1 id="question-numer">
Intrebarea numarul:
</h1>
</div>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
</div>
<div id="results">
<div class="total-score">
a
</div>
<div class="total-score">
b
</div>
<div class="total-score">
c
</div>
</div>
<script src="QuizLogic.js"></script>
</div>
</body>
</html>
I think you need to center #result identifier.
#results {
display: flex;
align-items: center;
justify-content: center;
width: 10%;
}
#results div {
width: 100px;
height: 100px;
}
This will fix your problem. Thanks
#results {
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
width: 100%;
/* background:olive; */
}
#total-score {
padding-top: 10px; /* Add top padding */
padding-bottom: 10px; /* Add bottom padding */
width: 10%;
height: 100%;
background: rgb(255, 0, 0);
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 140, 0, 1) 50%,
rgba(50, 205, 50, 1) 100%
);
}
An element needs to be assigned position with the value of absolute, relative, fixed, or sticky in order to have z-index to function.
Flex container is the term used to refer to an element that is is assigned display: flex. If you need its descendant elements (referred to as flex items) be centered horizontally, assign the flex container justify-content: center. If you need the flex items to be stacked vertically, assign the flex container flex-direction: column or flex-flow: column {nowrap or wrap}
I revamped ... well everything because as a slider it will be very problematic should you continue with the original code. The solution to your problem (as I can best as I could tell, because the question was vague), can be found reviewing the CSS rulesets dealing with .total-score.
#import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);
:root,
body {
width: 100%;
height: 100%;
font: 300 12px/1.5 "Work Sans", sans-serif;
color: #333;
text-align: center;
background-color: #f8f6f0;
user-select: none;
}
body {
overflow-y: scroll;
overflow-x: hidden;
padding: 0;
}
input,
button {
font: inherit;
font-size: 1rem;
}
.container {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
height: 100%;
margin: 10px auto;
}
h1 {
font-weight: 300;
margin-bottom: 20px;
}
.quiz {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: spacer-between;
align-items: center;
width: 100%;
height: 100%;
}
.slide {
position: absolute;
left: 0;
top: -20px;
width: 90%;
min-height: max-content;
z-index: -1;
display: none;
}
.slide.active {
display: block;
z-index: 0;
background: #fff;
}
.slide p,
.slide ol,
.slide [type=radio] {
font-size: 1.25rem;
text-align: left;
}
.slide p {
text-indent: 30px;
margin: 0 auto;
}
.slide ol {
margin: 0 auto;
list-style-type: none;
list-style-position: outside;
}
.slide ol label::before {
content: attr(for)'. ';
}
.slide [type=radio] {
width: 1.4rem;
height: 1.4rem;
}
.slide [type=radio],
.slide label {
display: inline-block;
line-height: 18px;
height: 18px;
vertical-align: middle;
}
fieldset {
border: 0;
}
button {
font-size: 1.75rem;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 1px 5px;
cursor: pointer;
display: inline-block;
text-align: center;
}
button:hover {
background-color: #38a;
}
.next,
.prev {
position: absolute;
z-index: 1;
top: 4rem
}
.prev {
left: 0;
}
.next {
right: 35px;
}
.total-score {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 0px;
padding-bottom: 10px;
background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 140, 0, 1) 50%, rgba(50, 205, 50, 1) 100%);
color: navy;
}
.total-score output,
.total-score b {
display: inline-block;
font-size: 1.5rem;
}
.total-score label {
width: 50%;
margin-bottom: -5px;
}
.total-score b {
width: 8ch;
text-align: left;
}
.total-score output {
width: 4ch;
font-family: Consolas;
text-align: right;
}
#media (min-width: 500px) {
:root,
body {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="container">
<h1>Quiz Question <output id='number'>1</output></h1>
<fieldset class="quiz">
<button class="prev" type='button'>◀</button>
<fieldset class='slide active' data-num='1'>
<p class='question'>This is a question?</p>
<ol class='choice'>
<li><input id='a' name='pick' type='radio' value='0'> <label for='a'>This is choice A</label></li>
<li><input id='b' name='pick' type='radio' value='0'> <label for='b'>This is choice B</label></li>
<li><input id='c' name='pick' type='radio' value='1'> <label for='c'>This is choice C and is correct (value = '1')</label></li>
<li><input id='d' name='pick' type='radio' value='0'> <label for='d'>This is choice D</label></li>
</ol>
</fieldset>
<button class="next" type='button'>▶</button>
</fieldset>
<fieldset class='total-score'>
<label><b>Correct:</b> <output id="correct">0</output></label>
<label><b>Total:</b> <output id="total">0</output></label>
<label><b>Score:</b> <output id="score">0</output></label>
</fieldset>
</form>
</body>
</html>
Open in full window and resize the window the input field is not responsive so the button moves below the input which is not what i want.
.coupon {
width: 100%;
max-width: 500px;
outline: none;
margin: 0;
box-sizing: border-box;
height: 22px;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 7px 20px 7px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size:0.875;
max-width: 100%;
}
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
try with width: calc(100% - 86px);.
.coupon {
width: calc(100% - 86px);
outline: none;
margin: 0;
box-sizing: border-box;
height: 22px;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 7px 20px 7px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size:0.875;
}
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
Try like this
.flex-col {
display: flex;
display: -webkit-flex;
}
.coupon {
width: 100%;
max-width: 500px;
outline: none;
margin: 0;
box-sizing: border-box;
height: 30px;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 7px 20px 7px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size: 0.875;
max-width: 100%;
}
<div class="flex-col">
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
</div>
try adding some mediaqueries
#media(max-width: 37em){
.coupon{width: 50%;}
}
You Must Learn #media contents https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
otherwise, use Bootstrap https://www.w3schools.com/bootstrap4/
The easy way is to use bootstrap.
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 80% 20%;
justify-content: center;
align-items: center;
}
.coupon {
width: 100%;
outline: none;
margin: 0;
box-sizing: border-box;
padding: 8px 0;
}
.coupon-btn {
background: #21b85b;
border: 0;
padding: 10px 20px 10px 20px;
text-transform: uppercase;
color: #fff;
display: inline;
font-size:0.875;
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<input type="text" class="coupon input-res">
<button class="coupon-btn">Apply</button>
</div>
</body>
</html>
Wrap the elements into a .container and use display: grid
You can give column width to on the container as you want it to be! I have used percentage, instead you can use pixel.
For reference go through this link https://www.w3schools.com/css/css_grid.asp
Hope it'll solve your problem
I have two input with one button are supposed in one div. I already use inline-block for these three elements. However the button is too low in Safari but ok in Chrome and Firefox. Anyone has any idea how to fix it?
<div class="simple-search">
<div class="keywords search-element">
<label for="simple_search_key">Key</label><br>
<input placeholder="e.g. " type="text" name="simple_search[keywords]" id="simple_search_keywords">
</div>
<div class="location search-element">
<label for="simple_search_Location">Location</label><br>
<input placeholder="e.g. " type="text" name="simple_search[location]" id="simple_search_location">
</div>
<div class="actions search-element primary-button">
<input type="submit" name="commit" value="Search">
</div>
.primary-button {
background-color: lime;
box-sizing: border-box;
border-radius: 4px;
}
.primary-button :hover {
background-color: lime;
cursor: pointer;
}
.primary-button input {
background-color: transparent;
color: white !important;
}
.primary-button.disabled {
background: #ecf7e2;
pointer-events: none;
cursor: default;
}
.simple-search {
margin: 0 auto;
text-align: center;
width: 80%;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 8px;
height: 80px;
padding: 2.2em 2.5em;
}
.search-element {
display: inline-block;
margin: 10px;
line-height: 2;
width: 30%;
margin-top: -5px;
}
.search-element label {
color: white;
float: left;
}
.search-element input {
border: none;
border-radius: 4px;
color: blue;
font-size: 1.5em;
height: 30px;
margin-top: .25em;
padding: .75em;
outline: none;
width: 96%;
}
.search-element.primary-button {
height: 60px;
}
.search-element.primary-button input {
height: 52px;
}
.results {
margin: 13px;
padding: 2.2em 10.5em;
}
.results .search-result {
margin: 10px;
margin-left: 0px;
margin-bottom: 30px;
}
.results .search-result .job-title {
font-size: 3ex;
margin-bottom: 10px;
}
.results .search-result .company-name, .results .search-result .location, .results .search-result .date {
display: inline-block;
margin-right: 10px;
}
.results .search-result .company-name {
font-family: monospace;
font-size: large;
}