I'm trying to make the link have a focus state around the whole .container-covid-alert div, when the link is tabbed onto, I'm sure this must be possible? The below 2 selectors are not working.
.container-covid-alert:focus {
outline: solid 3px #FFAD16;
}
.container-covid-alert a:focus {
outline: solid 3px #FFAD16;
}
.container-covid-alert {
background-color: #206497 !important;
color: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
display: block;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
font-size: 1.1rem;
}
.container-covid-alert a {
color: #FFFFFF;
}
.covid-inner {
margin: auto;
width: 1170px;
}
<a id="covid-banner-link" title="Coronavirus" class="sys_16" href="/">
<div class="container-covid-alert">
<div class="covid-inner">
<p>Coronavirus (COVID-19)updates and advice.</p>
</div>
</div>
</a>
Your hyperlink collapses as it behaves as an inline element.
The solution is to make it act like a block element with display: block;.
That way you can just add the :focus state to the hyperlink itself and make it really simple.
Also an orange focus indicator is not high enough contrast - it is only 1.86:1 and you need 3:1 as a minimum so you may want to change that.
#covid-banner-link{
display:block;
}
#covid-banner-link:focus {
outline: solid 3px #FFAD16;
}
.container-covid-alert {
background-color: #206497 !important;
color: #FFFFFF;
padding-top: 10px;
padding-bottom: 10px;
display: block;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
font-size: 1.1rem;
}
.container-covid-alert a {
color: #FFFFFF;
}
.covid-inner {
margin: auto;
width: 1170px;
}
<a id="covid-banner-link" title="Coronavirus" class="sys_16" href="/">
<div class="container-covid-alert">
<div class="covid-inner">
<p>Coronavirus (COVID-19)updates and advice.</p>
</div>
</div>
</a>
Related
I need to show my header line as well as the logo.png at the same line. Here is my try.
<div class="header">
<a>Dashboard</a>
<div>
<a href="../test.php" > <img src="../assets/images/logo.png" width="50" height="50"/> <?php echo htmlspecialchars($_SESSION["username"]); ?></a>
<i class="fa fa-toggle-left"></i> logout
</div>
</div>
I could see the png image but it has not nicely fit with the header bar. Here is the output
But I need to show Dashboard,username and the logout in a same line which goes through the middle of the image.
I will put my styles as below,
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
}
Can someone help me in this case?
Dashboard, james and logout should be in the same line,
Use align-items: center in your .header class to center everything vertically.
You can find more information about align-items here.
You set display flex in header class just you need to add a CSS property align-items: center; use the below code
.wrapper .main_content .header{
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
}
Flexbox is the right tool for this. You can easily align your items the way you need and want!
body {
margin: 0px;
}
div {
box-sizing: border-box;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
border-bottom: 1px solid black;
padding: 10px 5px;
}
.header>h4 {
margin: 0px;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
}
.user-info>img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.user-info > button {
border-radius: 5px;
background-color: white;
color: black;
border: 1px solid black;
padding: 3px 10px;
}
<div class="header">
<h4>Dashboard</h4>
<div class="user-info">
<img src="https://i.stack.imgur.com/hS58k.jpg?s=256&g=1" />
<label>James</label>
<button>Logout</button>
</div>
</div>
If I comment out my Div wrapper, the page becomes a jumbled mess, if the wrapper is not commented out, it is not a jumbled mess.
Why? My guess is that is is somehow shielded from the CSS, but I am not sure.
I am new so, I apologize in advance.
This exercise is part of the OdinProject, and is the first one I'm actually struggling with understanding.
html,
body {
height: 100%;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
/* I'll give you this one for free lol */
display: flex;
align-items: center;
justify-content: center;
}
.modal {
display: flex;
gap: 16px;
padding: 16px;
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}
.icon {
flex-shrink: 0;
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="icon">!</div>
<div class="wrapper">
<div class="header">Are you sure you want to do that?
<div class="close-button">✖</div>
</div>
<div class="text">text</div>
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
Your .modal has the display: flex property. This property applies to all direct children of the .modal element.
If you remove the .wrapper, the elements in the modal are no longer grouped together and they are treated as separate flex items. This is why they appear side to side (.icon, then .header, then .text, then .button all on the same line).
Here is a great guide on the display: flex property.
All HTML elements have default properties. A div has one: display: block;. In this case, when your wrapper div is removed, this property is removed it breaks the appearance because this default is battling the parent element's display: flex property.
Here's the default property list: https://www.w3schools.com/cssref/css_default_values.asp
As you can see in the snippet below, I have 1 div which has display property set to flex and then this div has 2 children divs which take flex:1 space ( 50% ). Each of those divs contains 1 button each.
Now the problem is this. I want the first button to be at the start of the first div ( so left side ) and the second button to be at the end of the second div ( so right side ). Currently both buttons are at the left side of their respective divs.
And while we're at it, is using flexbox the best way to create side by side divs like I've done nowadays?
.edit-btn, .submit-btn {
display: block;
color: black;
cursor: pointer;
text-align: center;
border-radius: 4px;
border: none;
padding: 8px 10px 8px 10px;
line-height: 1.2;
outline:none;
}
.flex-row {
display: flex;
margin-bottom: 10px;
}
.flex-column {
flex: 1;
}
.like, .edit {
width: 150px;
font-size: 13px;
}
.submit-btn {
background-color: #4CAF50;
}
.edit-btn {
background-color: #13aff0;
}
<div class="flex-row">
<div class="flex-column">
<button class="submit-btn like">Like</button>
</div>
<div class="flex-column">
<a class='edit-btn edit' href="#">Edit</a>
</div>
</div>
You don't need .flex-column wrappers. And use justify-content: space-between;
.edit-btn,
.submit-btn {
display: block;
color: black;
cursor: pointer;
text-align: center;
border-radius: 4px;
border: none;
padding: 8px 10px 8px 10px;
line-height: 1.2;
outline: none;
}
.flex-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.like,
.edit {
width: 150px;
font-size: 13px;
}
.submit-btn {
background-color: #4CAF50;
}
.edit-btn {
background-color: #13aff0;
}
<div class="flex-row">
<button class="submit-btn like">Like</button>
<a class='edit-btn edit' href="#">Edit</a>
</div>
I have a bunch of buttons and I want them to all be the same width without having to set a specific width, so naturally you would want the width of all buttons to take the width of the widest element, but I am having a hard time achieving this with flex as it seems it just wants them all to be 100%; I also tried it with a wrapper around the anchors but that didn't help as then the buttons were all varying widths.
CodePen: https://codepen.io/gutterboy/pen/MZWroj?editors=1100
So in that example, all the buttons should match the natural width of what the "Groundskeeping" would be.
HTML:
<div class="container">
<div class="row">
<div class="offset-md-4 col-md-4">
<div class="buttons">
Plumbing
Electrical
Groundskeeping
Construction
Cleaning
Security
Trades Assistant
General Duties
</div>
</div>
</div>
</div>
CSS:
.buttons {
display: flex;
flex-direction: column;
padding: 15px;
background-color: gray;
.btn {
display: block;
margin-bottom: 11px;
&:last-child {
padding-bottom: 21px;
}
}
}
a.btn {
display: inline-block;
text-align: center;
height: 35px;
padding: 0 20px;
min-width: 128px;
font-weight: bold;
color: #fff;
background-color: orange;
border: 2px solid #000;
white-space: nowrap;
text-decoration: none;
}
Is there any way this can be done in Flex or anything else?
You are almost good, you should use inline-flex instead of flex to have the shrink-to-fit behavior thus the biggest button will define the width of the container and all the elements are by default stretched to that width:
.container {
margin-top: 15px;
text-align:center;
}
.buttons {
display: inline-flex;
flex-direction: column;
padding: 15px;
background-color: gray;
}
.buttons .btn {
display: block;
margin-bottom: 11px;
}
.buttons .btn:last-child {
padding-bottom: 21px;
}
a.btn {
display: inline-block;
text-align: center;
height: 35px;
padding: 0 20px;
min-width: 128px;
font-weight: bold;
color: #fff;
background-color: orange;
border: 2px solid #000;
white-space: nowrap;
text-decoration: none;
}
<div class="container">
<div class="buttons">
Plumbing
Electrical
Groundskeeping
Construction
Cleaning
Security
Trades Assistant
General Duties
</div>
</div>
I have this code inside a grid.
<div class="nav__logo nav__logo--height">
<a href="http://localhost/step-asia/">
<img src="assets/image/logo-1.png" alt="Step Asia Logo">
</a>
</div>
and this is the css style
.nav__logo {
border: 1px solid #f7b5b5;
text-align: center;
}
.nav__logo a {
display: table;
color: black;
text-transform: capitalize;
text-decoration: none;
}
.nav__logo--height {
height: 19px;
display: inline-block;
width: 100%;
}
.nav__logo img {
margin: 0 auto;
}
I tried using position property but its not the solution, there's a problem using it when resizing the screen. text-align doesn't works also since it's an image.
The DIV above is inside a grid column.
Can you give an idea. Revising the code is acceptable, just need idea.
use flex layout for container element
.nav__logo{
border: 1px solid #f7b5b5;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items:center;
align-content: center;
}
.nav__logo--height {
height: 19px;
width: 100%;
}
.nav__logo>a {
display: block;
color: black;
text-transform: capitalize;
text-decoration: none;
}
.nav__logo>img {
display: block;
}
Hello hope it helps use the below code I used css justify-content: center; to move the navigation logo center
.nav__logo {
border: 1px solid #f7b5b5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
<html>
<body>
<div class="nav__logo nav__logo--height">
<a href="http://localhost/step-asia/">
<img src="http://quesa.sourceforge.net/other/files/logo_small.jpg" alt="Step Asia Logo">
</a>
</div>
</body
</html>
The issue is caused by
.nav__logo a {
display: table;
you want to change that to display: inline; or display:block; or display: inline-block
pretty much "table" is the only value that wont do what you want it to do.
Add a text-align:center in your a tag so that the image will be in center.
.nav__logo a {
display: table;
color: black;
text-transform: capitalize;
text-decoration: none;
text-align:center;
}
Here is an example Jsfiddle
To center the image remove display: table; from a tag or make it display: inline-block;
.nav__logo {
border: 1px solid #f7b5b5;
text-align: center;
}
.nav__logo a {
color: black;
text-transform: capitalize;
text-decoration: none;
}
.nav__logo--height {
height: 19px;
display: inline-block;
width: 100%;
}
.nav__logo img {
margin: 0 auto;
<html>
<head>
<style>
.nav__logo {
border: 1px solid #f7b5b5;
position: absolute;
top: calc(50% - 96px);/*image height*/
left: calc(50% - 284px);/*image width*/
}
</style>
</head>
<body>
<div class="nav__logo nav__logo--height">
<a href="http://localhost/step-asia/">
<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png" alt="Step Asia Logo">
</a>
</div>
</body>
</html>