Fiddle
Try
I have applied line-height, display properties. But none of these works fine with double lined text.
.container span {
width:80px;
border-bottom: 1px solid #aaa;
text-decoration: underline;
}
.container {
width: 20%;
display: inline-block;
}
<div class="container">
<span>My Cash & Discounts</span>
(0)
</div>
I have found this.
But it's not working fine.
Ques:
Please take a look at my fiddle. How to make border-bottom to match with text-underline? How to remove the gap between that two lines?
You could insert another container:
<div class="container">
<span><span class="inner">My Cash & Discounts</span></span>
(0)
</div>
And assign a negative value for margin-bottom:
.container span
{
border-bottom: 1px solid #aaa;
text-decoration: underline;
display:inline-block;
}
.container span.inner {
border:none;
display:block;
margin-bottom:-3px;
}
.container
{
width: 20%;
display: inline-block;
}
Related
I write the same padding for 2 different div elements and it only applies to 1 of them.
I already tried applying the style to different elements, using margin, creating more divs, using width and probably more things, but can't find the solution. Also, is this a correct way of doing it? Should I use buttons instead?
HTML
<div class="login">
<div class="button1"><p class="pButton">Login to see list</p></div>
<div class="button2"><p class="pButton">Login to view profile</p></div>
</div>
CSS
.login {
text-align: center;
margin-right:2px 20px;
}
.button1 {
display: inline-block;
padding:2px 10px;
}
.button2 {
display: inline-block;
padding:2px 10px;
}
.button1, .button2 a {
background-color: #b0f4e6;
}
both div tags have same padding, and I've just found something wrong in your code.
in your CSS code,
/* It means applying background-color at .button1 and .button2 > a */
.button1, .button2 a {
background-color: #b0f4e6;
}
so, this codes would be like it
.button1, .button2{
background-color: #b0f4e6;
}
/* OR */
.button1 a, .button2 a{
background-color: #b0f4e6;
}
.login {
text-align: center;
margin-right: 2px 20px;
}
.button1 {
display: inline-block;
padding: 2px 10px;
}
.button2 {
display: inline-block;
padding: 2px 10px;
}
.button1,
.button2 {
background-color: #b0f4e6;
}
<div class="login">
<div class="button1">
<p class="pButton">Login to see list</p>
</div>
<div class="button2">
<p class="pButton">Login to view profile</p>
</div>
</div>
you can try [attribute^=value] selector. in this case , will use [class^="button"]
better u write ur code like this:
HTML
<div class="button1"><p class="pButton">Login to view List</p></div>
</div>
<div class="login">
<div class="button2"><p class="pButton">Login to see Profile</p></div>
CSS
.button1 , .button2 {
background-color: #b0f4e6;
}
.login {
text-align: center;
}
.button1 ,.button2{
display: inline-block;
}
.button1 a, .button2 a {
background-color: #b0f4e6;
padding:20px 10px;
color:black;
}
<div class="login">
<div class="button1"><p class="pButton">Login to see list</p></div>
<div class="button2"><p class="pButton">Login to view profile</p></div>
</div>
can u try this ?
that's all...
So I am creating a code compiler with two buttons:
RUN and DOWNLOAD. But instead of using <button> tags, I use <div> tags so that I can have a more variety of CSS styles for my buttons. But the problem is, when I try to make the second button by copying and pasting the same code from the RUN button, the DOWNLOAD button is underneath the RUN button when I needed them on the same line.
So, I added the display: inline; style but that just messed up everything and the styles for the div didn't work. The only styles that worked were the styles for the text in the div buttons and that centered the text to the middle of the page.
Here is the code:
.dbutton,
.button {
background-color: red;
margin-right: 300px;
box-shadow: 0px 0px 5px gray;
font-size: 20px;
color: blue;
text-align: center;
width: 100px;
height: 50px;
}
.btn-text {
margin-top: 10px;
padding-top: 12px;
}
.dbtn-text {
margin-top: 10px;
padding-top: 12px;
}
.dbutton:hover,
.button:hover {
background-color: white;
-webkit-user-select: none;
}
.dbutton:active,
.button:active {
background-color: #00ad08;
}
div {
display: inline;
}
<div class="button">
<p class="btn-text">
Run >>
</p>
</div>
<div class="dbutton">
<p class="dbtn-text">
Download ↓
</p>
</div>
If you want the full code, here is the link.
JSFIDDLE
The two divs are not styling and the text in the buttons are placed in the middle of the page. I need the two divs to be beside each other and the for the style to work. Please help me!
.btn-bar {
position:relative
/* ... */
}
.btn {
float:left;
background:red;
width:7em;
padding:11px 3px;
margin:3px;
text-align:center;
text-transform:uppercase;
box-shadow:0 0 3px 0 #000;
}
<div class="btn-bar">
<div class="btn">run</div>
<div class="btn">compile</div>
</div>
I'm trying to move the border-bottom down so more of my active-link can be seen.
.navigation a.active-link {
background-border: #red;
border-style: solid;
border-bottom: solid white;
color: black;
padding:10px;
}
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
padding-top: 10px;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
}
The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.
https://jsfiddle.net/akn5r7y5/2/
You can add the padding-bottom you need and set the anchor line-height accordingly so they don't stack
#navigation a {
line-height:26px;
}
#navigation {
padding-bottom:26px;
}
https://jsfiddle.net/akn5r7y5/3/
Adding padding-bottom to your navigation should fix your problem.
Read more about box model (paddings, margins etc.) here - https://css-tricks.com/box-sizing/
Remove your padding-top, and use line-height, must be equal to the height of the content, so it will be centered:
Your #navigation must look like this then:
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
line-height: 26px;
}
I think you're making this way harder than you need. Try to prevent using a fixed height. Also use a display: inline-block; on the anchor. This way it has a height you can actually work with. Example:
#navigation {
border-bottom: 1px solid currentColor;
}
.navigation a {
color: black;
padding: 10px;
display: inline-block;
text-decoration: none;
}
.navigation a.active-link {
background: red;
border: 1px solid black;
border-bottom: none;
}
<div class="navigation" id="navigation">
Show all
<a href="#" >title</a>
<a href="#" >title1</a>
<a href="#" >title2</a>
<a href="#" >title3</a>
<a href="#" >title4</a>
</div>
here is some clue for you.
ok forget what i just said about hr tags.
i just got what is your question, so you wanted to create a navigation with a border bottom, and a full border if you are in that page.. i suggest you to using ul li tags. its a bit comfotable, and dont use too many link if you dont have any responsive yet.
because, the whitegaps u think it's a easy task but it actually a big trouble in here. this <a></a> link should not seperated and you should type the code like this ridiculously like this
<a>link</a><a>link</a>
which mean, you should type it without a gaps in it, if only you put it in li tags, it would be easier to read like this
<li><a>link</a></li><li>
<a>link</a></li><li>
etc
so you only thinking about border inside of a, dont over think about a border in navigation div.
this is the code, have a look
.navigation a.active-link {
border: solid 1px black;
color: black;
padding:10px;
}
.navigation a{
padding:10px;
border-bottom: 1px solid black;
}
#navigation {
text-decoration: none;
padding-top: 10px;
padding-bottom:10px
}
hr{
border:solid black 1px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="navigation" id="navigation">
Show all<a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
</div>
</div>
I am trying to get my text within my border that I added as an image. I will be adding more text and would like it to show up in my border as I am writing it. Any help would be appreciated. Thanks!
li {
list-style-type: none;
display: inline-block;
font-size: 20px;
letter-spacing: 4px;
width: 150px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
border-bottom: 2px solid black;
border-top: 2px solid black;
}
a:link {
color: #008B00;
}
a:visited {
color: #008B00;
}
p {
font-size: 20px;
}
#main-border {
text-align: center;
}
.searchbutton {
font-size: 20px;
}
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
<img src="../desktop/background.gif" alt "border" height="500px" width="550px">
</div>
I could not understand your question but i think this is what you are looking for :
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
#main-border {
text-align: center;
background : url(../desktop/background.gif);
background-size : 100% 100%;
min-height : 500px;
min-width : 500px;
}
like this? obviously style to your liking
var place=document.getElementById('txtplace');
function add_text(txt){
place.innerHTML=txt;
}
#txtplace{background-color:grey;opacity:0.8;font-size:150%;position:absolute;top:100px;left:50px;}
<input type="text" id="text_to_add" onkeyup="add_text(this.value);"/>
<span id="txtplace"></span>
<img src="http://lorempixel.com/600/600" id="background">
I believe this is what you're looking to achieve (although, instead of a picture of a kitten, your image)
.THIS {
background-image: url(http://placekitten.com/g/500/500);
background-repeat: no-repeat;
height:500px;
width:500px;
}
<div id="main-border">
<p class="THIS">Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
Late answer but if you are trying to add text in the border you can absolute position it and do it like this http://jsfiddle.net/vo7jzz4m/
div{
width:250px;
height:250px;
background:url('http://placekitten.com/300/301') no-repeat;
background-size:cover;
border:10px solid transparent;
outline:1px solid green;
}
div:before{
top:0px;
position:absolute;
content:"aA";
}
I'm a developer with limited HTML/CSS design experience. I have been stuck trying to create this simple form for over an hour so I'm giving up and asking for help.
I tried doing something like this:
<ul>
<li><label>Name:</label><span class="line"> </span></li>
...
</ul>
li label {
display: inline-block;
}
li span {
display: inline-block;
width: 100%;
border-bottom: 1px solid #000;
}
I have no idea how I can express that I want the span to take up 100% of the width between the label and the containing div.
I would like the rendered HTML to look exactly like my example image. That is, the entire list item should not be underlined, only the space where the customer is to fill in the information.
Please let me know how I can achieve this. Thank you!!!
Here's a simple example of what you want to do. Basically, you give the li a bottom border, and overlap it with the label's border to cover up the black line.
li
{
border-bottom: 1px solid black;
width: 250px;
}
label
{
border-bottom: 2px solid white;
padding-right: 5px;
}
I'm not sure how cross browser the above solution is, so you might want to use a few extra directives, just in case (untested):
li
{
border-bottom: 1px solid black;
width: 250px;
}
label
{
background: white;
position: relative;
border-bottom: 2px solid white;
padding-right: 5px;
}
Cross browser solution (as far as I can tell):
Thanks to #Joseph, there's this solution to a thin line being displayed under the label.
OK I really hate answering my own question but this seems like the least-hackish way of achieving this result. I'll let the votes decide. Thanks again for all the help. I can't believe how long it took me to figure this out!
Solution using display:table-cell
li label {
display: table-cell;
}
li span {
display: table-cell;
width: 100%;
border-bottom: 1px solid #000;
}
<ul>
<li><label>Name:</label><span></span></li>
<li><label>Address:</label><span></span></li>
<li><label>City:</label><span></span></li>
<li><label>State:</label><span></span></li>
<li><label>Zip:</label><span></span></li>
</ul>
EDIT
meh... I like my adaptation of JamWaffles' answer better (comments). He should get the credit. :P
Demo
Here's a very hackish way of doing it :P
HTML
<ul>
<li><label>Name:</label></li>
<li><label>Address:</label></li>
<li><label>City:</label></li>
<li><label>State:</label></li>
<li><label>Zip:</label></li>
</ul>
CSS
li label {
margin-bottom:-1px;
display: inline-block;
border-bottom: 1px solid #fff;
padding-right:10px;
}
li {
width: 100%;
border-bottom: 1px solid #000;
}
add a class to the span that you want to have a border-bottom
example
li span.underline {
display: inline-block;
width: 100%;
border-bottom: 1px solid #000;
}
Interesting concept. I'd tackle it something like this:
<style type="text/css">
input.line {
border: 0;
border-bottom: 1px solid #000;
}
</style>
<ul><li><label for="name">Name: </label><input class="line" name="name" /></li><br />
<li><label for="address">Address: </label><input class="line" name="address" /></li><br />
<li><label for="city">City: </label><input class="line" name="city" /></li><br />
<li><label for="state">State: </label><input class="line" name="state" /></li><br />
<li><label for="zip">ZIP: </label><input class="line" name="zip" /></li></ul><br />
Edit This is code for a functional form that you can TYPE things into, I didn't realize you just wanted the underline. Either way, this solution should work for both.
Here's a solution:
html:
<ul>
<li><span class="label">Name:</span><span class="line name"></span></li>
<li><span class="label">Address:</span><span class="line address"></span></li>
<li><span class="label">City:</span><span class="line city"></span></li>
<li><span class="label">State:</span><span class="line state"></span></li>
<li><span class="label">Zip:</span><span class="line zip"></span></li>
</ul>
css:
ul {width: 300px;}
.line {
float: left;
display: inline-block;
border-bottom: 2px solid black;
margin-left: 5px;
width: 100%;
margin-top: -5px;
}
.label {
display: inline-block;
background-color: white;
margin-top: 10px;
padding-right: 5px;
}
li span {font-family: sans-serif;}
li {line-height: 1.3em;}
For future reference, this is another way to do it: http://jsfiddle.net/thirtydot/7SFDV/.
The only real difference this has (over your answer) is that it will work in IE7, which is probably not relevant to you. I have no idea if it will work with your "proprietary HTML > PDF renderer".
li {
overflow: hidden;
margin: 8px 0
}
li label {
float: left;
margin-right: 3px
}
li span {
display: block;
overflow: hidden;
border-bottom: 2px solid #000;
line-height: 1.1
}