I hava a text logo (Doop) and i add border bottom but I can not control it.
how I can make the border bottom exactly in the center of the word(Doop) .I need this border to be exactly under the 2 (o)letters.
like this image >>i WANT LIKE THIS
.nav > .nav-header > .logo {
display: inline-block;
font-size: 22px;
color: hsl(0, 0%, 0%);
padding: 10px;
width: 20%;
text-align: center;
border-bottom: 2px solid rgb(223 35 44 / 92%);
}
<div class="nav">
<input type="checkbox" id="nav-check" />
<div class="nav-header">
<div class="logo">Doop</div>
</div>
AND THIS IMAGE IS MINE
I'ts not possible with border only to control it like you want.
You could use a pseudo element, for example ::after.
With a absolute, centered position and a little adjustment it should do what u want to.
.nav > .nav-header > .logo {
display: inline-block;
font-size: 22px;
color: hsl(0, 0%, 0%);
padding: 0 10px;
width: 20%;
text-align: center;
/* added this also, for pseudo absolute positioning */
position: relative;
}
.logo a {
text-decoration: none;
}
.logo::after {
content: '';
position: absolute;
left: 4px;
right: 0;
bottom: 0;
margin: auto;
height: 2px;
width: 18px;
background-color: rgb(223 35 44 / 92%);
}
<div class="nav">
<input type="checkbox" id="nav-check" />
<div class="nav-header">
<div class="logo">Doop</div>
</div>
Related
I'm trying to create a Progress Bar. If user has completed 20%, a bar with my set colour is being created with the correct width. But for some reason, its appearing below my progress bar instead of overlapping and I have no idea why.
Bonus question: Any ideas why text is not aligned to center?
CSS:
.progress-bar {
height: 20px;
width: 126px;
background: #BABABA;
position: relative;
}
.progress-bar span {
font-size: 1.1rem;
font-weight: 600;
line-height: 15px;
text-align: center;
position: relative;
}
.progress-bar div.bar {
height: 20px;
background: #336291;
position: absolute;
}
EJS:
<td>
<div class="progress-bar">
<span><%= gamedata[i].progressPercentage %></span>
<div class="bar" style="width:<%= gamedata[i].progressPercentage %>;"></div>
</div>
</td>
You should put the correct coordinates, so append the following lines:
.progress-bar div.bar {
/* your code here */
top: 0;
left: 0;
}
Bonus answer: your text is aligned in the center but your DOM element is not. What I suggest doing is giving automatic lateral margin and treating it as a block, like so:
.progress-bar span {
font-size: 1.1rem;
font-weight: 600;
line-height: 15px;
display: block;
margin: auto;
position: relative;
}
try this code nothing big changes. Some small changes in css and HTML.
.progress-bar {
height: 20px;
width: 126px;
background: #BABABA;
position: relative;
}
.progress-bar span {
font-size: 1.1rem;
font-weight: 600;
line-height: 15px;
text-align: center;
position: relative;
}
.progress-bar div.bar {
height: 20px;
background: #336291;
position: absolute;
}
Hear is html code:
<td>
<div class="progress-bar">
<div class="bar" style="width:<%= gamedata[i].progressPercentage %>;">
<center><%= gamedata[i].progressPercentage %></center>
</div>
</div>
</td>
I am building a navigation bar that has a lot of options and special sections.
I worked with Twitter Bootstrap, but it is difficult to develop.
The nav html tag has 3 sections grouped in 3 divs (left, center, right).
I am having difficulty in centring horizontally the text and logo of the company in left div, anchors with navigation items in the right div.
I need the height of navigation bar to be set in the CSS and not the calculate the height based of the child elements.
This is the html:
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
}
.left-navbar {
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
}
.right-navbar {
float: right;
background: maroon;
height: 100%;
/* float: right;
position: absolute;
top: 50%; right: 0%;
transform: translate(-50%,-50%);
background: gold;
padding: 1.5rem; */
}
.center-navbar {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
background: gold;
padding: 1rem;
}
.left-navbar strong {
color: red;
padding: 10px 10px;
display:inline-block;
text-align: center;
vertical-align: center;
}
.left-navbar img {
width: 32px;
height: 32px;
padding: 10px 10px;
}
.navbar a {
float: right; /* Orientation of the element in the parent element */
display: block; /* All over top left right bottom it is a block - element has block/padding all over the embedded element */
color: #f2f2f2;
text-align: center;
padding: 14px 16px; /* 14px top and bottom, 16px right and left */
text-decoration: none; /* Could be underline, overline, line-through */
font-size: 17px;
}
/* Apply only for anchors inside the navbar class */
.navbar a:hover {
background: #ddd;
color: black;
}
input[type="text"]{ padding: 5px 5px; line-height: 28px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar">
<div class="left-navbar">
<strong>Company</strong>
<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/newsvine-512.png"></p>
</div>
<div class="center-navbar">
<input type="text" id="name" name="name" required height="45px;"
minlength="4" maxlength="40" size="40">
</div>
<div class="right-navbar">
Home
News
Contact
</div>
</nav>
Any working fiddle with best practices is ideal for me.
Thank you!
You can use flexbox to achieve this
.right-navbar, .left-navbar{
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen, let me know if that help!
Give .left-navbar - horizontal and vertical centering with display:flex;
.left-navbar {
display: flex;
float: left;
background: cadetblue;
width: 230px;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
Also, how do you want the right part of the navbar?
Flex-box is what you'll want to use here. Add display: flex to the .navbar and then add flex-grow: 1; to the center piece. This essentially says 'make this element span the remaining space in the flex container. Also, your height: 100% were unnecessary, so I removed them.
.navbar {
overflow: hidden; /* Clips from content if it is bigger than the parent element */
background-color: #333;
position: fixed; /* Position of the navbar is fixed */
top: 0;
width: 100%;
height: 50px;
display: flex;
}
.left-navbar {
background: cadetblue;
width: 230px;
text-align: center;
}
.right-navbar {
background: maroon;
}
.center-navbar {
background: gold;
padding: 1rem;
flex-grow: 1;
}
input[type="text"]{
padding: 5px 5px;
line-height: 28px;
width: 100%;
box-sizing: border-box;
}
I am trying to get this to happen.
what I want
So far, I don't know how to overlap one img-div with another text-div and keep white space on the top of the text-div. You will see. What I have right now is:
<div id="some">
<img src="photos/some.png">
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
With some CSS that doesn't make it very appealing: what it looks like
#some{
margin-top: 20px;
background-color: red;
}
#some img{
width: 30%;
float: left;
}
#box{
padding-top: 220px;
margin-right: 40px;
font-family: "Eusthalia";
text-align: right;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
I am wondering if my whole approach with divs is wrong. I was researching and I found that right:0; doesn't work and stuff like that. How do I get a border to overlap behind the image? How do I give it a width and a height but make it push to the right?
Do I have to make the main div width 100% and then give the img a width 30% and the colored filled in text box 70%? But how would I have the box behind the img?
Drearo, I think you're doing fine with div tags. You just may need a bit more of them to help things along.
I would suggest the divs be position: absolute with the image in one of those. The box of text needs it too. Aside from that, a little CSS would get you the positioning you want. See here:
<div id="some">
<div class="my_img">
<img src="photos/some.jpg" />
</div>
<div id="box">
<p>Proudly seeking</p>
<h2>some Cofefe</h2>
<button id="shopNow" class="button">Shop</button>
</div>
</div>
css:
#some{
margin-top: 20px;
height: 100vh;
width: 100vw;
border: 1px solid #000;
position: relative;
}
.my_img {
position: absolute;
top: 5em;
left: 5em;
z-index: 200;
}
.my_img img {
width: 200px;
}
#box{
position: absolute;
top: 10em;
left: 10em;
transition: translate( -50%, -50%);
font-family: "Eusthalia";
text-align: right;
background: red;
min-width: 60%;
padding-right: 2em;
}
#box p{
margin-right: 32%
}
h2 {
font-size: 2.6em;
}
button {
border: none;
font-family: "Eusthalia";
font-size: 15px;
background-color: #300c06;
color: #eadfc0;
padding: 2px 10px;
}
https://jsfiddle.net/5k94j73p/
Is it possible to achieve something like above image?
So far I have tried following Code.
.greyParent {
height: 19px;
border-radius: 7px;
background: rgb(196, 196, 196);
}
.greyParent > .activeSlide {
background: rgb(0, 97, 188);
border-radius: 7px;
border-right: 1px solid #fff;
float: left;
width: 20%;
height: 19px;
position: absolute;
}
.greyParent > .activeSlide:first-child {
left: 0%;
z-index: 5;
}
.greyParent > .activeSlide + .activeSlide {
left: 16%;
z-index: 4;
}
<div class="col-xs-4 col-sm-2 col-md-2">
<span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
<div class="greyParent">
<div class="activeSlide">
</div>
<div class="activeSlide">
</div>
</div>
</div>
I need to append .activeSlide div tag depending upon tab. Problem I am facing is as I append 5 .activeSlide div tags for fifth slide its not occupying entire parent div tag i.e div.greyParent. I understand that since i am doing position absolute and trying to move divs towards right, This is happening. But since i need to highlight the border of each partition i had to use position absolute. Can someone help me on this? Is there any solution for this?
You can use :before and :after pseudo elements to create this shape.
Draw circle of equal width and height on left/right corners of each list item respectively.
Add box-shadow of 1px or 2px to create border-effect between cells.
Output Image:
* {box-sizing: border-box;}
ul {
display: flex;
list-style: none;
padding: 0;
margin: 20px;
}
ul li {
position: relative;
background: gray;
height: 16px;
width: 60px;
}
ul li:before,
ul li:after {
box-shadow: 2px 0 0 #fff;
border-radius: 100%;
position: absolute;
background: gray;
height: 16px;
content: '';
width: 16px;
left: -8px;
top: 0;
}
ul li:first-child:before {
box-shadow: none;
}
ul li:after {
right: -8px;
left: auto;
}
ul li.active,
ul li.active:before,
ul li.active:after {
background: blue;
z-index: 1;
}
<ul>
<li class="active"></li>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
You can simply overlap the elements and give them the right width to make sure that they will be in the right place. You should also play with the left property to make them appear where you want.
The key should be in the properties you can see here:
.greyParent > div{
width: 25%;
}
.greyParent > div:nth-child(1){
left:0%;
width: 20%;
}
.greyParent > div:nth-child(2){
left:15%;
}
I have created this small jsfiddle which you can see as an example of what I mean
Try this, it's good ))
<div class="container">
<div class="title">
1/5
</div>
<div class="progress">
<span class="active"></span><span class="active"></span><span></span><span></span><span></span>
</div>
</div>
.container {
display: flex;
}
.container .title {
padding-right: 20px;
}
.container .progress {
display: flex;
width: 250px;
}
.container .progress span {
display: block;
height: 15px;
width: 20%;
background: gray;
border: solid 1px #fff;
border-radius: 7px;
margin-right: -15px;
}
.container .progress span.active {
background: blue;
}
.container .progress span:nth-child(1) {
z-index: 40;
}
.container .progress span:nth-child(2) {
z-index: 35;
}
.container .progress span:nth-child(3) {
z-index: 25;
}
.container .progress span:nth-child(4) {
z-index: 10;
}
JSfiddle example https://jsfiddle.net/5ph3uk94/
Why don't you just use 2 blue elements and 3 grey elements, instead of one big grey parent ?
<div class="col-xs-4 col-sm-2 col-md-2">
<span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
<div class="parent">
<div class="activeSlide"></div>
<div class="activeSlide"></div>
<div class="diabledSlide"></div>
<div class="diabledSlide"></div>
<div class="diabledSlide"></div>
</div>
</div>
I have the following structure:
<div class="wrap">
<div class="menu">
<div class="item">
Menu
<div class="submenu">
<div class="submenuitem">Submenu</div>
</div>
</div>
</div>
</div>
and so far the following CSS:
div.wrap {
background: #eee;
height: 80px;
}
div.menu {
margin-left: 50px;
background: #36e;
}
div.item {
background: #d00;
color: #fff;
line-height: 40px;
padding: 0px 20px;
font-size: 16px;
display: inline-block;
margin-left: 50px;
}
div.item:hover {
background: #b00;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0%;
top: 50%;
min-width: 300px;
}
div.item:hover div.submenu {
display: inline-block;
}
div.submenuitem {
line-height: 40px;
padding: 0px 20px;
background: #b00;
color: #fff;
display: inline-block;
}
JSFiddle
The behaviour I'm after is that the width of submenuitem expands to fit its textual content, but that it can use at most the width of wrap for expanding. It should also be positioned directly under item unless the width of submenuitem will be larger than the distance from its original position to the right end of wrap. Thereafter it should expand to the left until it meets the left edge of wrap.
As you can see this succeeds perfectly when I can know the distance from submenuitem's original position to the right end of wrap by setting right: 0%; min-width: 300px; on submenuitem, but I want to do this in a way that doesn't require knowing that distance.
I have been trying to craft or find a solution to this for the past few days and have not managed to get any closer. Is it even possible with pure CSS to begin with?
Is this something you want? check this one nd let me know.
http://jsfiddle.net/zmcEC/9/
div.wrap {
width: 400px;
background: #eee;
position: relative;
height: 80px;
}
div.submenu {
display: none;
background: #0b0;
height: 40px;
position: absolute;
right: 0;
top: 40px;
left:0;
}