I have a user managment block on my website and I'm trying to display a bit information there.
I think that nothing is better than example with pictures.
This is how the block looks now:
And this is how I want the block to look like:
Is there any good way to do that? I added those dashes manually, and this is not the way I'm looking for, I want it responsive.
Here is the block code:
<div class="account-box">
Welcome, guess. <br>
<hr>
Coins: <span style="float: right;">0</span> <br>
Points: <span style="float: right;">0</span> <br>
Total Referrals: <span style="float: right;">0</span> <br>
<hr>
Logged as [username] <span style="text-align: right;"><span class="fa fa-sign-out fa-fw"></span>Logout</span>
</div>
I recently had to do something similar. Here's what I came up with:
.entry {
display: flex;
align-items: center;
}
.entry>.spacer {
flex-grow: 1;
border-bottom: 1px dashed currentColor;
margin: 4px;
}
<div class="entry">
Label:
<ins class="spacer"></ins>
123
</div>
Adjust as needed!
Related
I want to show the English sentence and its RTL language translation like this:
When I try to achieve it using this code:
<section>
<h3>I <span style="color: #42affa;">would</span> like a cup of coffee, please.</h3>
<p style="text-align: right;" class='farsi'>«لطفا یک فنجان قهوه لطف کنید.»</p>
</section>
I get this result:
I think I need to get the end of the English text element and start the position of translation text right there!
Any suggestions would be appreciated...
Note: the English sentence aligned to the center.
UPDATE: using code below:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span>
like a cup of coffee, please.
</h3>
<p style="direction:rtl" class="farsi">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
I get this:
I would recommend using display:flex with justify-content: center on the section element. Then simply wrap the english and farsi text in a div. Align the english text to the right, and set the direction of the farsi text to rtl.
Something like this should work:
<section style="display:flex; justify-content: center;">
<div>
<h3 style="text-align:right">
I
<span style="color: #42affa;">
would
</span> like a cup of coffee, please.
</h3>
<p style="direction:rtl">
«لطفا یک فنجان قهوه لطف کنید.»
</p>
</div>
</section>
Try the below code, which will work properly.
HTML
<p>
I would like a cup of coffee, please.
<br>
<span lang="fa">«لطفا یک فنجان قهوه لطف کنید.»</span>
</p>
CSS
p {
display: inline-block;
background: #181818;
padding: 20px;
color: #fff;
font-size: 24px;
}
span[lang="fa"] {
direction: rtl;
float: right;
display: inline-block;
}
I am creating a website in html & css through Django. But I am having some difficulties. Here is my code for the buggy element of the code:
detail.html
<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">
<div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">
<div class="address">
<span class="icon-map-marker"></span>
<p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
</div>
<div class="address" >
<span class="icon-mobile-phone"></span>
<p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
</div>
<div class="address">
<span class="icon-link"></span>
<p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
</div>
<div class="address">
<span style="" class="icon-time"></span>
<p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
</div>
</div>
</div>
The code seems to work fine until I enter a new review. Then, the element jumps down and keeps jumping as a new review is added. I don't know how to fix this as I tried postion: relative, postition: absolute and position: sticky but all seem to have failed. I will put some screenshots to explain it better.
Before new Review:
After a new Review:
I have been unable to solve this problem for a long time now. I would really appreciate any help. Thank you
My code worked until now, and I don’t understand what’s happened. I’m trying to vertically align each heading, next to each other. I’d really appreciate someone giving me a hand with this, please!
<div style="width: 32%; display: inline-block; vertical-align:top; text-align:;">
<h3>Gents</h3>
<p>
<a href="barberp6.html">
<span style="color:rgb(245, 166, 208);">The</span>
<span style="color: rgb(167, 238, 220);">Baber</span>
<span style="color:rgb(188, 114, 223);">Shop</span>
</a>
</p>
</div>
You can achieve this by flexbox
Assume vertical-align is the class you gonna have
.vertical-align{
display:flex;
align-items:center;
}
I suggest that you put a <br> in between every single span element like this:
<div style="width: 32%; display: inline-block; vertical-align:top; text-align:;">
<h3>Gents</h3>
<p>
<a href="barberp6.html">
<span style="color:rgb(245, 166, 208);">The</span>
<br>
<span style="color: rgb(167, 238, 220);">Baber</span>
<br>
<span style="color:rgb(188, 114, 223);">Shop</span>
</a>
</p>
</div>
This creates a space in between every word. I can't find any other way...
I've got an anchor tag with multiple lines of text and at the beginning a span tag which includes an iconfont. Now I want to have all lines of text to be on the same intend. How can I achieve this?
HTML-Code:
<div class="controlls">
<p class="catalogue-pdf">
<span class="icon-pdf"></span> PDF download
<span class="separation-point">·</span> 82,0 kB
</p>
<p class="catalogue-link">
<span class="icon-book"></span> Stack Overflow Question Two Line Texts
</p>
</div>
Is this about what you're going for?
HTML:
<p class="catalogue-link">
<a href="http://www.google.com/" class="text-link" target="_blank">
<span class="icon-book"></span>
<span class="link-text">Stack Overflow Question Two Line Texts</span>
</a>
</p>
CSS:
.catalogue-link a {
display: flex;
align-items: flex-start;
}
.catalogue-link .link-text {
margin-top: 15px;
margin-left: 0.5rem;
}
I'm trying to emulate a tab bar with HTML.
I'd like the width of each tab to be set according to the text length (that is, no fixed width) and to word wrap in case it exceeds the screen width.
I've almost achieved it:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab'>
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
But, there's a very annoying space between the opening tab image and the closing one.
As you can see, I've tried with padding, spacing, and border, with no luck.
EDIT:
I tried replacing the spans with a small table (one row, three <td>s), but it's the same, only the space between is smaller.
Another way besides njbair's one is to add font-size: 0 to parent element.
I prefer this one because it's aesthetically better for tab designing.
Instead of this:
<div id="tabs">
<span id="mytab1">Tab 1</span><span id="mytab2">Tab 2</span><span id="mytab3">Tab 3</span>
</div>
...we can use this:
<div id="tabs" style="font-size: 0;">
<span id="mytab1">Tab 1</span>
<span id="mytab2">Tab 2</span>
<span id="mytab3">Tab 3</span>
</div>
...which looks better :)
Of course, don't forget to define your real font size for tabs.
EDIT:
There's one more way to get rid of spaces: by adding comments.
Example:
<div id="tabs">
<span id="mytab1">Tab 1</span><!--
--><span id="mytab2">Tab 2</span><!--
--><span id="mytab3">Tab 3</span>
</div>
Get rid of the newlines between the spans. Example:
<div class='tab'>
<span class='tab_left'> </span><span class='tab_middle'>very very looong</span><span class='tab_right'> </span>
</div>
Newlines are counted as a space in HTML.
Another option is to use nagative letter-spacing:-10px - that has a lighter impact on formatting.
<div id="tabs" style="letter-spacing:-10px;">
<span id="mytab1" style="letter-spacing:1px;">Tab 1</span>
<span id="mytab2" style="letter-spacing:1px;">Tab 2</span>
<span id="mytab3" style="letter-spacing:1px;">Tab 3</span>
</div>
Got this idea thanks to this answer
hard to test without the images but I added background color and display:inline to the root tabs. Please try this:
<html>
<head>
<style type="text/css">
#myTabs .tab {
float: left;
display:inline;
}
#myTabs .tab_middle {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_middle.png');
}
#myTabs .tab_left {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_left.png');
}
#myTabs .tab_right {
margin: 0;
padding: 0;
border: none;
background-image:url('images/tabs/tab_right.png');
}
</style>
</head>
<body>
<div id="myTabs">
<div class='tab' style="background-color:Red;">
<span class='tab_left'> </span>
<span class='tab_middle'>very very looong</span>
<span class='tab_right'> </span>
</div>
<div class='tab' style="background-color:Green;">
<span class='tab_left'> </span>
<span class='tab_middle'>another loooong tab</span>
<span class='tab_right'> </span>
</div>
<div style='clear:both'></div>
</div>
</body>
</html>
Tab middle, left and right also need to float left.
njbair’s response is correct.
Another option was to use a table, with the border-collapse: collapse; property.
Another gotcha: in Internet Explorer 6.0, the first approach (spans) doesn’t work as expected. When resizing the window, IE wordwraps the span, breaking the tab, while with the table approach even IE sends down the whole tab.