Flexbox doesn't take full width [closed] - html

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
i'm trying to make a top bar with flexbox, i want to have an icon on the top-left part of the site and a nav on the right side. So i write this in css:
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
}
.barra a {
text-decoration: none;
color: black;
}
But the bar only took half the width.
The HTML looks like this
<body>
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
<a href="#">Productos<a>
<a href="#">Servicios<a>
<a href="#">Contacto<a>
</nav>
</div>
</body>
I tried with "Width: 100%; in the .barra but it didn't do anything
I dont know what is wrong here, i would appreciate some help.
I'm using ruby on rails to make the site.

You're missing closing tags for your anchors.
<a>...</a>
New markup:
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
Productos
Servicios
Contacto
</nav>
</div>
https://codepen.io/koralarts/pen/wvaxERr

Your example in fact does take the full width:
Using border: 1px solid red is a good way to debug these things.
Do you perhaps have other styles that apply to .barra?
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
border: 1px solid red;
}
.barra a {
text-decoration: none;
color: black;
}
<div class=barra>
<i class="fas fa-wifi"></i>
<nav class=navegacion>
<a href="#">Productos<a>
<a href="#">Servicios<a>
<a href="#">Contacto<a>
</nav>
</div>

Remove your typos. You are not closing any anchor tag, but only creating broken HTML.
.barra {
display: flex;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
background: yellow;
}
.barra a {
text-decoration: none;
color: black;
}
i {
display: block;
}
nav {
background: red;
display:block;
}
<body>
<div class=barra>
<i class="fas fa-wifi">i</i>
<nav class=navegacion>
Productos
Servicios
Contacto
</nav>
</div>
</body>

i have modified the class names .Please use proper names which should be related to it semantically.
Some errors are in the code
1.You forgot to quote the class names
<nav class=navegacion>
You forgot to close the tags properly.
Modified code
.header {
display: flex;
justify-content: space-between;
padding-top: 20px;
font-size: 30px;
background-color: black;
color: whitesmoke;
}
.navigation a {
text-decoration: none;
color: whitesmoke;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
</head>
<body>
<div class="header">
<i class="fas fa-wifi">icon</i>
<nav class="navigation">
Productos
Servicios
Contacto
</nav>
</div>
</body>
</html>

Not sure if I got your question right but this is maybe what you are looking for, I added flex display on the <nav> and <i>, the icon tag is not visible since you didn't include font-awesome style.
.barra {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 30px;
font-size: 30px;
}
.barra nav {
text-decoration: none;
flex: 4;
border: 1px solid;
width: 95%;
}
.barra i {
flex: 1;
border: 1px solid;
}
<body>
<div class="barra">
<i class="fa fa-wifi"></i>
<nav class="navegacion">
Productos
Servicios
Contacto
</nav>
</div>
</body>

Related

Why do my buttons move up and down when I click on them?

I have two drop-down buttons where the Difficulty button will make the Duration button move to the bottom when you click on it; likewise if you click on the Duration button it will move the Difficulty button to the bottom.
What's interesting is when the Difficulty button is clicked first, then the Duration button, both will be the proper height; but if you click the Duration button first, then the Difficulty button, only the Duration button will close its contents and move to the bottom again. This is what my code looks like:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style_MP.css"/>
</head>
<body>
<div class="main_page">
<h1>Welcome to My Typing Test!</h1>
<h2>Select Your Difficulty and Duration</h2>
<div>
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
<script src="script_MP.js"></script>
</body>
</html>
CSS Code:
body{background-color:grey}
.main_page{text-align: center;}
h1{font-size: 50px;}
h2{font-size: 30px; padding-bottom: 40px;}
.difficulty , .duration{
display: inline-block;
margin: 5px;
}
/* This section is for the Difficulty Button only */
.diff-settings{
padding: 20px;
position: relative;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.diff-settings:hover, .diff-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.diff-options{
display: none;
font-size: 20px;
width: 130px;
}
.diff-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.diff-options a:hover {background-color: darkgreen;}
.show {display: block;}
/* This section is for the Duration Button only */
.duration-settings{
padding: 20px;
border: none;
box-shadow: none;
background-color: green;
color:white;
font-size: 20px;
width: 130px;
}
.duration-settings:hover, .duration-settings:focus{
background-color:darkgreen;
color:white;
cursor: pointer;
}
.duration-options{
display: none;
font-size: 20px;
width: 130px;
}
.duration-options a{
background-color: green;
color: white;
display: block;
padding: 8px;
text-decoration: none;
}
.duration-options a:hover {background-color: darkgreen;}
.show {display: block;}
What should I change in order to stop both buttons from moving to the bottom when they're clicked?
Just add this ;) :
.diff-options, .duration-options {
position: absolute;
}
When you change the display of a block it was taken into account and moved the following elements. By adding an absolute position, it is no longer taken into account for the calculation of the next element.
Making the parent div of the buttons use flex fixes the problem.
.flex{
display: flex;
justify-content: center;
}
<div class="flex">
<!--Below, the word "diff" is short for "difficulty" -->
<!--So "diff-settings" means "difficulty settings" -->
<!--"diff-options" means "difficulty options" and so on -->
<div class="difficulty">
<button onclick="myfunction01()" class="diff-settings">Difficulty</button>
<div class="diff-options" id="diff-select">
Beginner
Intermediate
Advanced
Expert
</div>
</div>
<div class="duration">
<button onclick="myfunction02()" class="duration-settings">Duration</button>
<div class="duration-options" id="duration-select">
30 Seconds
60 Seconds
120 Seconds
Custom
</div>
</div>
</div>

How to remove white spaces around the button in HTML? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created a simple HTML button, the button works fine. There is some blank/white space around it. How can I get rid of it? My question might sound silly, but for a beginner like me, I have no idea how to get rid of it.
Thank you.
You can see the white spaces, which I was talking about, in the following screenshot.
Following is the code I have for buttons.
<p>
<a class="button" href="https://facebook.com/">
<button style="background-color:#3b5998; border:none; color:white; border-radius: 3px;">Facebook</button> </a>
<a class="button" href="https://wa.me/1234567898">
<button style="background-color:green; border:none; color:white; border-radius: 3px;">WhatsApp</button>
</a>
</p>
<p>
<a href="tel:01234567890">
<input type="image" align="right" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" name="submit" width="70" height="70" alt="Call Us" value="">
</a>
</p>
I tested your code in opera, it's working as expected here.
https://i.imgur.com/HAl4Xka.png
EDIT: I've fixed the code following the suggestions made in your first post.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fb-button, .wa-button {
border:none;
color:white;
border-radius: 3px;
padding: 10px;
text-decoration: none;
}
.fb-button {
background-color:#3b5998;
}
.wa-button {
background-color:green;
}
.container {
padding: 10px;
margin: 0 auto;
max-width: 50%;
text-align: center;
}
form {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a class="fb-button" href="https://facebook.com/">Facebook</a>
<a class="wa-button" href="https://wa.me/1234567898">WhatsApp</a>
<form action="tel:01234567890" method="GET">
<input type="image" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" width="70" height="70" alt="Call Us">
</form>
</div>
</body>
</html>
<a> should not contain any other Action Elements (like <button>).
Stop using the inline style attributes. Use a proper CSS file or a <style> tag.
Don't use , use styles instead - if you want to add spacings like margins
Use flex to ease the positioning of your elements
.buttons-group {
display: flex;
align-items: center;
}
.button {
color: white;
border-radius: 3px;
padding: 0.5rem 1rem;
text-decoration: none;
}
.color-fb {
background-color: #3b5998;
}
.color-wa {
background-color: #00aa45;
}
.img-icon {
display: inline-block;
height: 3rem;
}
/* Utility classes */
.u-left-auto {
margin-left: auto;
}
<div class="buttons-group">
<a class="button color-fb" href="https://facebook.com/">Facebook</a>
<a class="button color-wa" href="https://wa.me/1234567898">WhatsApp</a>
<a class="button u-left-auto" href="tel:01234567890">
<img class="img-icon" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" alt="Call Us">
</a>
</div>

HTML items not getting positioned on the right using CSS

I am trying to align my items list to the right side of the web page. Also, I wanted to have a vertical thin separator between the left and center data structure (hierarchy) and my right list.
Right.component.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-divider">
<ul class="selection-list">
<li *ngFor="let item of getSelections()">
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button>
</li>
</ul>
</div>
Right.component.css :
.selection-list {
list-style: none;
margin-top: 5px;
margin-bottom: 10px;
line-height: 15px;
font-size: 16px;
color: #555;
padding-left: 23px;
text-transform: capitalize;
right: 0;
}
.btn {
border: none;
padding: 0;
background: none;
}
.header-divider {
border-left:1px solid #38546d;
height:30px;
position:relative;
right:20px;
top:10px;
}
Right now, it just appears below my hierarchy structure. What should I do to fix this?
I always favor the use of flexbox which is a great simple way to use all available space inside a container. This is how I would do it:
-----(Edited)-----
.flex-container {
display: flex;
height: 50px;
border: solid 1px peru;
}
.sendToRight {
margin-left: auto;
}
<div class="flex-container">
<div class="PLCheck">
fortuneSelect
</div>
<div class="sendToRight"> <!-- add class to div for manipulation -->
rightSideComp
</div>
</div>
In this example, the margin-left:auto makes your .sendToRight div move all the way to the right. You could also use justify-content: space-between; in your container element to achieve the same result.

HTML & CSS Centering Text and Image Together

I'm getting into the field of web design, and for practice purposes, I'm trying to create responsive HTML and CSS websites modeled after real websites so I only worry about the development, not the design. As of now, I'm redesigning apple.com. My problem is that in the apple.com navigation bar, the Apple logo is consistently around an inch away from the links to other parts of the site. As you resize the browser, it stays around an inch away. The problem is that on my (unfinished) version of the site, the apple logo stays fixed in one position as you resize the browser.
Here's my code:
html {
font-size: 100%;
}
body {
padding: 0;
margin: 0;
}
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
.font {
font-family: San Francisco;
}
.logo {
position: absolute;
left: 5em;
top: .5em;
}
.center {
display: inline;
text-align: center;
}
.search {
display: block;
position: fixed;
right: 1em;
top: .7em;
}
header {
list-style-type: none;
word-spacing: 40px;
background-color: #323232;
height: 2.8em;
width: 100%;
position: fixed;
opacity: .98;
}
.ul-header {
margin: .8em;
}
.li-header {
display: inline;
}
.a-header {
text-decoration: none;
color: white;
font-family: San Francisco;
font-size: 15px;
}
.iphoneximg {
display: block;
margin-left: auto;
margin-right: auto;
}
.iphone {
text-align: center;
font-size: 3em;
line-height: 0.5em;
}
.sayhello {
text-align: center;
font-size: 1.6em;
line-height: 0;
font-weight: 550;
}
#media(min-width: 1500px) {
.iphoneximg {
width: 50%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Apple</title>
<link rel="icon" href="Images/Apple.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<div class="center">
<img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
<ul class="ul-header">
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
<img src="Images/Search.png" class="search">
</ul>
</div>
</header>
<br><br><br><br><br><br><br><br><br>
<section class="iphonex">
<h1 class="font iphone">iPhone X</h1>
<p class="font sayhello">Say hello to the future.</p>
<img src="Images/iphone.png" width="76%" class="iphoneximg">
</section>
<section class="iphonex">
<h1 class="font iphone">iPhone 8</h1>
<p class="font sayhello">A new generation of iPhone.</p>
<img src="Images/generation.jpg" width="76%" class="iphoneximg">
</section>
</body>
</html>
Someone suggested this solution:
How to horizontally center a <div> in another <div>?
The problem is that I'm trying to figure out how to work with the differences between images and text to center them, so simply throwing them in a div won't work.
I've tried putting the text and the image in a div and centering it, % values, messing with the display property, and a few other things, but nothing seems to work.
I'm also a newbie web dev, so if there's anything else I should fix, feel free to let me know.
Thanks,
Lyfe
Run an inspect element on the Apple page and you'll see they place their image as another list element. You on the other hand are placing it outside your list.
Here is your code, with the Apple logo placed as the first list element:
<ul class="ul-header">
<li class="li-header"><img src="apple_logo.png" width='20px'></li>
<li class="li-header">Mac</li>
<li class="li-header">iPad</li>
<li class="li-header">iPhone</li>
<li class="li-header">Watch</li>
<li class="li-header">TV</li>
<li class="li-header">Music</li>
<li class="li-header">Support</li>
</ul>
EDIT
To ensure your apple logo aligns vertically with the other elements in your list, add this to your CSS:
#app_logo {
margin-top: -10px;
}
.center ul img {
vertical-align: middle;
}
Note I added an ID to the image. Also, your settings may be slightly different.
if we have an actual look at the CSS and HTML of the apple page this is how you do it:
html:
<ul class="ac-gn-list">
<li class="ac-gn-item ac-gn-apple">
<a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
<span class="ac-gn-link-text">Apple</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
<a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
<span class="ac-gn-link-text">Mac</span>
</a>
</li>
<li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
<a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
<span class="ac-gn-link-text">iPad</span>
</a>
</li>
... There are More...
</ul>
css:
#media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}
.ac-gn-apple{
position:absolute;
width:48px;
top:0;
left:50%;
margin-left:-24px;
text-align:center;
z-index:1
}
Comment:
I would bet the
position:absolute;
does the trick, however, I cut out allot of the webkit code. If yo ureally want to make a dynamic page/responsive page, you need to learn the Bootstrap Library, it is honestly super easy to use and to start using. Makes everything dynamic and responsive.

Mobile Versoin Line Breaks Not Working

At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}