I just need a little help with my CSS:
I As you can see in here http://jsfiddle.net/5crwu/ I have some space between span and ul elements, and I can't find how to lift ul up, closer to the span. I thought margin: 0; will do this, but looks like I'm missing something.
.app-technologies {
width: 200px;
padding-left: 10px;
border: 1px solid black;
}
.app-technologies span {
position: relative;
display: block;
left: 0;
font-size: 17px;
margin: 0;
border: 1px solid black;
}
.app-technologies ul{
list-style: circle;
padding-left: 18px;
margin-top: 0;
border: 1px solid black;
}
If you don't want to remove the <br>, you can give your and NEGATIVE margin. It would be margin:0px 0px -20px 0px;
The negative bottom margin on the span will pull it up.
I just removed the BR after the SPAN, and the "position: relative" from the span styledef. No more space-between.
Related
I want the price of coffee to come at the right end of the coffee name i.e 1.80 price should come in line of Americano. Similarly 10.00 price should come in line of Macchiato.
ul {
list-style: none;
padding: 5px;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container li {
border-bottom: 1px dashed blue;
}
#container > li {
font-size: 2em;
border-bottom: 1px solid black;
}
em {
float: right;
position: relative;
bottom: 0px;
}
span {
width: 100px;
display: inline-block;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
As you can see i am using relative position, but its not working.
Can you solve this without absolute position and minimum changes to the code?
Just tell me why is relative position not working.
First you need to fix your html - the closing li for the DRINK MENU should be after the nested ul.
Then I would make use of display:table css:
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul#container {
width: 18%;
min-width: 100px;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
}
#container > li {
padding: 5px;
}
#container ul {
border-top: 1px solid black;
margin-top: 5px;
}
#container ul li {
border-bottom: 1px dashed blue;
display: table;
width: 100%;
}
#container span,
#container em {
display: table-cell;
vertical-align: bottom;
padding: 3px 0;
}
#container em {
text-align: right;
}
<ul id="container">
<li>DRINK MENU
<ul>
<li><span>Latte</span><em>2.79</em>
</li>
<li><span>Cappucino</span><em>2.99</em>
</li>
<li><span>Cafe Americano</span><em>1.80</em>
</li>
<li><span>Espresso</span><em>2.00</em>
</li>
<li><span>Carmel Macchiato</span><em>10.00</em>
</li>
</ul>
</li>
</ul>
UPDATE
As per your comments about overflow. There are a couple of ways to fix this:
Increase the min width of ul#container to something that will accommodate the longest line - in this case a width of 125px should suffice: Fiddle example
Add table-layout:fixed to your table li and add word-wrap:break-word to the span: Fiddle example
You can add a class to the <em>
HTML
<ul id="container">
<li>DRINK MENU</li>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano</span><em class="bottom">1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato</span><em class="bottom">10.00</em></li>
</ul>
</ul>
CSS:
ul{
list-style: none;
padding: 5px;
margin: 0;
}
ul#container{
width: 18%;
min-width: 200px ;
max-width: 400px;
border: 15px solid #886633;
border-radius: 5px;
background-color: orange ;
box-shadow: 4px 4px 8px rgba(0,0,0,.3);
}
#container li{
border-bottom: 1px dashed blue;
}
#container > li{
font-size: 2em;
border-bottom: 1px solid black;
}
em{
float: right;
position: relative;
bottom: 0px;
}
.bottom {
position: relative;
top:15px;
}
span{
width: 100px;
display: inline-block ;
}
DEMO
Another posible solution (maybe the best practice):
CSS:
li:nth-child(3) > em, li:nth-child(5) > em{
position: relative;
top:16px;
}
DEMO
Along with your questions, I've taken your comments into consideration in preparing this answer.
First, your HTML was invalid. The list was nested improperly so I corrected that that in my answer.
In answer to your first question...
how to position the prices at the baseline
... absolute positioning will work and will not prevent your price card from adjusting to different browsers, platforms or devices. It will be as responsive as the container it is in. Of course, you should test your code to make sure it works as intended.
Note that for position: absolute to work properly you must set the parent element to position: relative. This is because absolute positioning will move the element – in this case the em – relative to its closest positioned ancestor (which in this case should be the li). If the absolutely positioned element doesn't find a positioned ancestor, it will position the element relative to the <body>. So bottom line:
To absolutely position a child element, set the parent element to position: relative.
Here's an example using your code.
DEMO
HTML
<!-- with corrections to improperly nested list -->
<div id="container">
<h2>DRINK MENU</h2>
<ul>
<li><span>Latte</span><em>2.79</em></li>
<li><span>Cappucino</span><em>2.99</em></li>
<li><span>Cafe Americano more text more text more text more text</span>
<em>1.80</em></li>
<li><span>Espresso</span><em>2.00</em></li>
<li><span>Carmel Macchiato more text more text more text more text</span>
<em>10.00</em></li>
</ul>
</div>
CSS
/* based on your original code */
#container {
width: 200px;
border: 15px solid #886633;
background-color: orange;
box-shadow: 4px 4px 8px rgba(0, 0, 0, .3);
padding: 5px;
}
h2 {
width: 99%;
border-bottom: 1px solid black;
margin: 0;
}
ul {
list-style: none;
padding: 5px;
margin: 0;
}
#container ul li {
font-size: 1em;
font-weight: bold;
border-bottom: 1px dashed blue;
position: relative;
}
span {
width: 100px;
display: inline-block;
}
em {
position: absolute;
bottom: 0;
right: 0;
}
In answer to your second question...
Just tell me why is relative position not working.
Actually, it's working fine. In the normal flow of things, it's positioned exactly where it belongs. Your descriptions are breaking to a new line because of the margin limitation you set in your span.
That being said, the em can still be positioned with position: relative. Change the value from 0. Your prices will (as defined by your style rule) move up or down as a group, depending on whether you use positive or negative numbers.
Your CSS rule:
em {
float: right;
position: relative;
bottom: 0px;
/* test these individually:
bottom: 25px;
bottom: -25px;
right: 25px;
right: -25px */
}
For more about positioning see the position article at MDN.
I want to remove the space between tab and horizontal line displayed. Please find the fiddle http://jsfiddle.net/yy1t6w1f/ .
Sample code to create horizontal line:
div.hr {
background: #fff no-repeat scroll center;
margin-left: 15em;
margin-right: 15em;
width:50em;
height:.05em;
}
div.hr hr {
display: none;
}
The created tab's should touch the horizontal line and their should be no space between tab and div.Thanks.
Adding
hr { margin: 0; }
will do the trick. The hr tag in HTML has default margins, which are causing that space between those two elements. Note that the above code will remove all margins. If you only want the top margin removed, you can use margin-top instead of margin.
In fact, in your case, you need not use hr tag at all; you can remove it and simply add:
border-bottom: 1px solid #888888;
to your .tabDiv CSS selector; that should also serve your purpose here.
table, table td {
border-spacing: 0px;
padding: 0px;
}
hr { margin: 0; }
http://jsfiddle.net/yy1t6w1f/6/
Unless I’m misunderstanding what you are building, there is a far better way to write this.
See below:
nav a {
display: inline-block;
background-color: #efefef;
border: 1px solid #888;
border-top: 2px solid #888;
border-top-left-radius: 10px 5px;
min-width: 96px;
padding: 0 4px;
text-align: center;
font: 18px impact;
letter-spacing: 2px;
color: #3B0B17;
text-transform: uppercase;
text-decoration: none;
}
<nav>
FirstTab
SecondTab
ThirdTab
</nav>
I want to make this <hr> so it will stretch the full width, right to the edges of its parent container. I have tried adding margin-left/padding-right to overcome this but it keeps changing when resizing (responsive).
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
padding: 20px;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
<div class="article-container single-article">
<div class="article-container-inner">
<hr>
</div>
</div>
(also at http://jsfiddle.net/bh2f6/1/)
Is there a better solution for this?
Edit: I can't edit the parent container's padding as that is needed for bunch of other elements.
Your width:100%; on the <hr /> and the padding on the parent were messing things up. The <hr /> naturally stretches across the screen and doesn't need width:100%, so remove it. Then to compensate for the padding, just add the same negative margin to the <hr />.
Change your CSS to this:
.single-article hr {
margin: 30px -20px 20px;
border: 0;
border-top: 1px solid #c9c7c7;
}
See working jsFiddle demo
Something like this might work...
hr {
padding: 50px 0;
border: none;
&:before {
// full-width divider
content: "";
display: block;
position: absolute;
right: 0;
max-width: 100%;
width: 100%;
border: 1px solid grey;
}
}
http://codepen.io/achisholm/pen/ZWNwmG
HR Secret things, you must know.
When your horizontal rule (hr) leaves 15px from left and right, probably when you use with bootstrap.
<hr class="my-hr-line">
.my-hr-line {
position: relative;
left: -15px;
width: calc(100% + 30px);
height: 2px;
border: 2px solid blue;
}
Hope it will help many one.
Removing Padding should work for you
Working Example
.single-article .article-container-inner {
background: #f0eded;
border: 1px solid #c9c7c7;
margin-bottom: 20px;
}
.single-article hr {
margin-top: 30px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #c9c7c7;
width:100%
}
You mean like this?
Fiddle
just change the padding to padding: 20px 0;
Here is template:
http://jsfiddle.net/4gvy5/embedded/result/
The code:
HTML
<div class="wrapper">
<ul class="block-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
CSS
*{
margin: 0;
padding: 0;
border: none;
}
.wrapper{
width: 100%;
padding: 40px 0;
background: #e6e6e6;
}
.block-list{
list-style: none;
width: 940px;
margin: auto;
overflow: hidden;
}
.block-list li{
display: block;
float: left;
width: 298px;
margin-right: 20px;
background: #fff;
border: 1px solid #d9d9d9;
padding: 20px 0;
text-align: center;
}
.block-list li:last-child{
margin-right: 0;
}
When I resizing window make it scale more - the last child goes down. I look in element panel and understand why it happened. All border(right or left) of li block increased to 1px. That's why width of blocks becomes 301px... But in normal scale, blocks have 300px. How can I solved this problem? Help please. I'll be thanks to everyone.
EDIT
Just use box-sizing:border-box; thanks to #Cthulhu
Box-sizing DEMO
Original Answer
That is not a bug. But it's always a problem for every web developer. The solution for that is when you add a border. you should also create a negative margin.
DEMO
if your border is
border: 1px solid green;
You must make a negative margin of -1px also to avoid that kind of problem.
margin:0 20px 0 -1px;
or you can simply reduce the width of your li.
Demo
Please try this css...
.block-list li:last-child {
margin-right: 0;
margin-top: -1px;
}
I have been trying and I don't really know how to solve this:
I need to style the title of the content like this:
Now, I've been trying to have position:absolute some other stuff, but it just doesn't seem to work.
My code:
<div class="content_item">
<div class="double_line"></div>
<h2>Ce facem</h2>
</div>
css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
}
So what I wanted was to put the text over the line and a white background on the text.
fiddle: http://jsfiddle.net/Qu849/
Can you please help me?
This fiddle kinda works:
http://jsfiddle.net/Qu849/4/
Anyway I wouldn't do that code for this purpose. Consider this:
Just use a div with a background image (repeat-x) with those "borders"
Inside that div use a span, centered, and with a background:#fff;
That is just better.
EDIT
Check #drip answer to do what I described: https://stackoverflow.com/a/20070686/2600397
You need to position you h2 above your bordered div. My idea would be to make h2 display:inline-block; so you can use text-align:center; on the parent to center the child h2 and then just use position:relative; and top:-20px; on the h2 to move it up a bit
.content_item{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position:relative;
text-align:center;
margin-top:50px;
}
.content_item > h2{
text-align: center;
background-color: white;
padding:3px 15px;
font-size:14px;
display:inline-block;
position:relative;
top:-20px;
}
http://jsfiddle.net/Qu849/8/
Since the double_line div is absolutely positioned, it will be above any none positioned elements.
to put both elements on a relative plane, you need to position the h2 in the same manner (either absolute, or relative).
After that you can play with the margins or top/left properties of the elements to position them over each other.
You can do it with a backgruund image very easy.
If you are ok with using background images.
HTML:
<h2><span>Ce facem</span></h2>
CSS:
h2 {
background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center;
text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }
Demo
Or if you really prefer usin bordered element:
Then with a little tweaks in the css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position: absolute;
top: 12px;
}
.content_item>h2{
display: inline;
position: relative;
z-index: 2;
text-align: center;
padding: 0 10px;
background-color: #ffffff;
}
.content_item{
text-align: center;
position:relative;
}
Demo
Yes, Rodik is right
Try using:
.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}
You have to give position:absolute; and margin to your <h2>
Replace your <h2> style with this:
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin:-10px 41% 0px;
}
fiddle
if in doubt, you could just make the text an image with full transparent background, this makes it easier when it comes to responsive webpage layouts (different resolutions etc.)
Pure Css with No images
Ammend this in your CSS to check if it helps :
.content_item>h2{
text-align: center;
background-color: #ffffff;
display:inline-block; // makes header size equal to text width
width : 30%; //gives indented left-right white-space
position:absolute; //to overlay it on double-line
top : 0px; //position
display: table; //centre inline elements
margin : 0 auto;
margin-left : 40% //hack to center it
}
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
}
.content_item>h2{
background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
}
.content_item{
position:relative;
}
}
use this code usefull for you.
see this link http://jsfiddle.net/bipin_kumar/35T7S/1/
Here is one way of doing it:
.content_item {
position:relative;
}
.content_item > div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
XXdisplay:inline-block; /* not needed */
width:100%;
height:5px;
position: absolute;
z-index: -1;
top: 50%;
margin-top: -3px;
}
.content_item > h2 {
text-align: center;
background-color: #ffffff;
width: 200px; /* must be specified */
margin: 0 auto; /* for centering */
}
To the .double-line div, add z-index: -1 to force it to be painted under the h2 element.
Use top: 50% and a negative margin-top: -3px to vertically align the double lines (if that is what you need).
You then need to specified a width for h2 other wise it will be 100% wide and the white background will paint over the dobule-lines. Add margin: 0 auto to center the h2 within the parent container.
You do not need display: inline-block for the .double-line since the absolute positioning will force the display type to be block.
Demo at: http://jsfiddle.net/audetwebdesign/nB2a3/
You can do this without absolute positioning and without changing the HTML.
Rather than having the text-align: center on the <h2>, you can set it on the .content-item. Then use display: inline-block on the <h2> and relatively position it with a negative top value.
Like so:
.content_item>div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
}
.content_item>h2 {
background-color: #ffffff;
display: inline-block;
margin: 0;
padding: 0 40px;
position: relative;
top: -15px;
}
.content_item {
text-align: center;
}
http://jsfiddle.net/Qu849/11/
Try this, another way
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin-top:-30px;
margin-left:50%;
}
When z-index not used this type of issue, use above format.