I've been trying to create a feed page and I want it to be totally responsive. The layout is a score on the right with a fixed width and a link on the left which should take up the rest of the horizontal space.
The code I have so far has the link just taking up the whole line and passing underneath the score div.
This will be a problem if the link title is so long that it gets cut off by the score as I can't stop the link div's width once it collides in which case I'd like to use the text-overflow: ellipsis feature.
My code is below along with a jsfiddle link
HTML
<body>
<ul id="tracklist">
<li class="trackwrap"> <a class="tracklink" href="#">Link 1</a>
<p class="trackscore">x score</p>
</li>
</ul>
</body>
CSS
#tracklist {
margin: 0;
position: relative;
list-style-type: none;
background: white;
padding: 10px 20px 10px 20px;
}
.trackwrap {
position: relative;
margin: 0;
width: 100%;
height: 24px;
transition: 1s;
margin-bottom: 2px;
transition: 1.5s;
}
.tracklink {
background: red;
margin: 0;
display: inline;
position: absolute;
left: 3px;
width: 100%;
max-height: 24px;
font-size: 16px;
line-height: 24px;
}
.trackscore {
background: blue;
margin: 0;
display: inline;
position: absolute;
right: 52px;
font-size: 14px;
color: white;
text-align: right;
line-height: 24px;
}
http://jsfiddle.net/4Lf8v9tn/
This needs to be responsive so I'd prefer it if answers could use width: 100% for the link div
Thanks
Add a min-width on your .trackwrap like so: http://jsfiddle.net/4Lf8v9tn/1/
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 have a list component with a custom bullet defined as a before pseudoelement:
li:before {
display: inline-flex;
width: .8rem;
height: .8rem;
margin-right: 1.5rem;
margin-left: -2.9rem;
background-color: #00c878;
border-radius: .375rem;
content: "";
}
It all works fine as long as the li content doesn't overflow the container. Then, the whole content just jumps down a few pixels and leaves a weird top margin between the bullet and the content.
I have recreated it here.
I have managed to make it disappear using work-break: break-all, but that is of course not a susteinable solution.
Any tips?
So many solutions. but this one worked best
Please Set position to absolute on the pseudo element and remove margin. My solution uses positioning to get wrapped lines automatically line up correctly.
Advantages:
very compact code
works with any font size (no absolute pixel values contained)
aligns rows perfectly (no slight shift between first line and following lines)
.container {
width:170px;
border:1px solid red;
}
ul {
margin: 0;
padding: 0;
}
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position:relative;
word-break: break-all;
}
li::before {
width: 4px;
height: 4px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
left: 10px;
top: 9px;
}
<div class="container">
<div class="list unordered">
<h3 class="text-grey-150 h5 "> Branchen ETFs </h3>
<ul class="">
<li>Technologie ETF
<br>
</li>
<li style="/* word-break: break-all; */">Finanzdienstleistungen ETF</li>
<li>Gesundheitswesen ETF
<br>
</li>
<li>Immobilien ETF
<br>
</li>
<li>Industrie ETF</li>
</ul>
</div>
</div>
When doing custom pseudo-elements it's better to position them absolute and relative to the li. See example below, this has fixed your issue:
li {
padding-left: 35px;
margin-bottom: 24px;
margin-top: 0;
font-size: 16px;
line-height: 24px;
list-style-type: none;
position: relative;
}
li::before {
display: inline-flex;
width: 4px;
height: 4px;
margin-right: 15px;
margin-left: -29px;
background-color: #00c878;
border-radius: 375px;
content: "";
position: absolute;
top: 9px;
}
You can use top and left properties to re-position as per your needs.
I have a bigger HTML header containing a menu and a large picture.
I would like to place text on the image somewhere as a "title" to the page.
Whenever I try to add my <h1> tag somewhere, it positions the text above the menu and it's not what I want.
I would like to be able to position any form of tags somewhere in the picture and I am struggling to find a solution as my code is not efficient to do this.
I am starting to understand what my problem is but I cannot find a solution.
Here is a template of what's going on. I want to place the text somewhere next to my face (as weird as it sounds lol), anyone?
body {
font: 15px/1.5 Gravity, Arial;
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 800px;
background: url('../img/web_bg.jpg');
background-size: cover;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #000;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
z-index: 100;
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #fff;
z-index: 100;
}
nav ul li {
display: inline-block;
padding: 16px 40px;
;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 16px;
}
nav ul li a:hover {
background-color: #white;
border: none;
color: #000;
text-align: center;
opacity: 0.6;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
<header id="home">
<h1>MOHANAD ARAFE</h1>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">MOHANAD ARAFE</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
You are going good, cheers for that. For the problem you are facing I would suggest you to play with z-index. It is a CSS property, and defines the elements as layers. Element with greater z-index will be the top most layers, followed by the elements with lesser z-index. I would suggest you to set z-indec of image to lowest, and make the content above in another container, and set the z-index of this container to a higher range, this should solve your problem.
Here's more reference on z-index
Happy Coding.
I would suggest using grid in these kind of situations where you have to deal with position of elements. A crash course on grid will be the best option. I personally use it a lot and don't have to care about anything other than z index.
You can use position: absolute; for the h1 tag and use top value in %, and left value in %
h1{
position:absolute;
top: value in %;
left: value in %;
}
header{
position:relative;
}
Note: apply a class name for h1 and apply css for that class or else it might affect h1 tag in sub pages.
I'm trying to create a fixed/floating right aligned help button on my website that when clicked expands to take up a specificWidth by maxHeight section on the screen on the right side as a way to provide help to users.
.floating-help-section {
background-color: #fbd850;
position: fixed;
float: right;
left: 0;
right: 0;
bottom: 50px;
height: 50px;
width: 200px;
z-index: 2000; !important;
}
.help-accordion {
background-color: yellow;
color: #444444;
cursor: pointer;
padding: 10px;
width: 200px;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s
}
.help-panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
<div class="container" style="width: 100%;">
<div class="floating-help-section">
<button class="help-accordion">Help</button>
<div class="help-panel">
This is where the help content goes
</div>
</div>
</div>
The code above is a start in the right direction, it doesn't float on the right yet among a few smaller issues. My main issue is that I don't know how to force a specific uncollapsed/expanded size for my help panel to get it to expand nicely and have a good amount of space to show my content.
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;
}