In my nav, I am separating my section with some text and a horizontal line. For each section this repeats. I am doing this as shown below:
.navSectionHeader {
font-size: 1em;
color: #fff;
margin-left: 5px;
margin-bottom: 10px;
font-family: "Roboto";
font-weight: 700 !important;
border-bottom: 2px solid #6c6c6c;
}
/*.navSectionHeader::after {
content: ' ';
display: block;
border: 2px solid;
border-color: #6c6c6c;
margin-left: 0px !important;
}*/
The issue is, my text is now pretty much stuck to the left of the parent div. It should be with some margin to the left while keeping the bottom border start from 0px to the left. When I try to move it with margin-left: 5px; it ends up moving the border-bottom as well. I tried this with ::after as shown in the commented bit, adding !important to the end but nothing changes. Am I doing this the wrong way? Sorry, I'm a front-end noob!
Edit: The section header is in a <span> if it makes a difference.
Use padding instead of margin.
.navSectionHeader {
padding-left: 5px;
}
An example to see difference,
div {
display: inline-block;
width: 100px;
height: 20px;
border-bottom: 1px solid black;
background: red;
color: white;
}
.padding {
padding-left: 5px;
}
.margin {
margin-left: 5px;
}
<div class="margin">margin</div><br>
<div class="padding">padding</div>
Related
How can I get the element in the attached pic?
I need a line + curve to right at top + extension.
I can use div's, span or another idea if you have.
I tried to use 2 divs with round borders. But they don't connect in a pretty way in the corner.
I assume you mean the dot in the corner. It's not particularly robust to change, and it will currently only work on a white background. However, with some SCSS and variables, it would be a lot cleaner.
The biggest issue I have with it is that the surrounding box is required to have a relative position, which might affect layout elsewhere.
.fancy {
position: relative;
padding: 12px;
border: 3px solid #ccc;
border-radius: 8px;
}
.fancy::after {
position: absolute;
bottom: -11px;
left: -11px;
content: "";
height: 14px;
width: 14px;
display: inline-block;
border: 4px solid white;
border-radius: 11px;
background-color: gray;
}
p {
font-family: Arial;
font-size: 14px;
}
<p class="fancy">
Some text
</p>
The padding around the dot is given by the border-width (4px).
The colour of the dot is defined by the background-color.
The places where 11px is used are computed by the border-width + the [height (or width) / 2] and used to keep the dot circular and in the corner.
It's a little ambiguous what you want. If you wanted the title block in there too, then add this:
.fancy {
position: relative;
padding: 12px;
border: 3px solid #ccc;
border-radius: 8px;
}
.fancy .title {
display: table;
margin-top: -2.2em;
margin-bottom: 0.2em;
padding: 6px 8px;
border: 6px solid white;
border-radius: 12px;
background-color: #99ccff;
}
p {
font-family: Arial;
font-size: 14px;
}
<p class="fancy">
<span class="title">A fancy title</span>
Some text with a fancy title.
</p>
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 am trying to create the appearance of a text chat using pure CSS. The kind of text chat where one person's texts are represented by speech bubbles on the left of the screen, and the other persons are speech bubbles on the right side of the screen.
I'm almost there, and I've created a JSFiddle example. There are two problems.
The big problem is that the bubbles with the pointer on the right side, representing the person on the right, needs to be aligned on the right side. But I can't find a way to get them to align without floating them, and if I float them, then they overlap with other bubbles and create a mess.
How do I get the class bubble-right to stick to the right side?
The second issue is that I'm using display: inline-block; which makes it so that the bubbles are only as wide as the text. I had to put white-space: pre-line; in the containing DIV in order to get the bubbles to stack properly. Unfortunately, this is creating extra space. I tried putting in line-height declarations to prevent this, but it doesn't seem to have helped.
How do I get the bubbles to stack and alternate vertically without making extra whitespace I don't need?
Here is the CSS:
.bubble-dialog {
white-space: pre-line;
line-height:0;
}
.bubble-left,
.bubble-right {
line-height: 100%;
display: inline-block;
position: relative;
padding: .25em .5em;
background: pink;
border: red solid 3px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
margin-bottom: 2em;
}
.bubble-left {
margin-right:10%;
}
.bubble-right {
margin-left:10%
}
.bubble-left:after,
.bubble-left:before,
.bubble-right:after,
.bubble-right:before {
content: "";
position: absolute;
top: 21px;
border-style: solid;
border-width: 13px 17px 13px 0;
border-color: transparent pink;
display: block;
width: 0;
}
.bubble-left:after,
.bubble-left:before {
border-width: 13px 17px 13px 0;
border-color: transparent pink;
}
.bubble-right:after,
.bubble-right:before {
border-width: 13px 0 13px 17px;
border-color: transparent pink;
}
.bubble-left:after {
left: -16px;
border-color: transparent pink;
z-index: 1;
}
.bubble-left:before {
left: -19px;
border-color: transparent red;
z-index: 0;
}
.bubble-right:after {
right:-16px;
border-color: transparent pink;
z-index: 1;
}
.bubble-right:before {
right:-19px;
border-color: transparent red;
z-index: 0;
}
I don't understand your second problem very well, but as for first problem you can add this css to your left and right classes:
I add clear:both and display:block and add float as you said, and right bubbles will stick at right side; here is a fiddle:
.bubble-left,
.bubble-right {
line-height: 100%;
display: block;
position: relative;
padding: .25em .5em;
background: pink;
border: red solid 3px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
margin-bottom: 2em;
clear: both;
max-width:50%;
}
.bubble-left {
float: left;
margin-right:10%;
}
.bubble-right {
float:right;
margin-left:10%
}
And as for your second problem, I don't know why the spaces are there, but with removing bottom margin of the <p> tag it gets OK so I add margin-bottom:0 to <p> tag;
I just created a button with a dropdown menu, you can view the demo here.
In the demo I added a black background to shopping-cart-wrapper element so you can see where the problem lies.
The problem is when you hover over the button you can keep your mouse on the black background and the dropdown menu is still visible.
I only want the dropdown menu to be visible when you hover over the button or keep your mouse on the dropdown menu.
Here is the code I have:
HTML:
<div class="shopping-cart-wrapper">
<a class="shopping-cart" href="#" alt="my-shopping-cart">My Shopping Cart (0)</a>
<div class="shopping-cart-dropdown">
<div class="empty-cart"><span>Your shopping cart is empty</span></div>
</div>
</div>
CSS:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
.shopping-cart-wrapper {
display: inline-block;
background: #000;
margin-top: 5px;
margin-left: 15px;
}
.shopping-cart {
border: 1px solid #d3d3d3;
color: #656565;
padding-right: 10px;
padding-top: 8px; padding-bottom: 8px;
padding-left: 40px;
font-weight: bold;
display: inline-block;
font-size: 13px;
text-align: right;
text-decoration: none;
box-shadow: 0px 1px 0px #f2f2f2;
background: #f8f8f8 url("http://placehold.it/32x32") no-repeat 0 0 ;
position: relative;
}
.shopping-cart:hover {
background: #fff url("images/cart-sprite.png") no-repeat 0 -29px ;
color: #202020;
border: 1px solid #c6c6c6;
box-shadow: 0px 1px 0px #e5e5e5;
}
.shopping-cart-dropdown {
opacity: 0;
display: none;
border: 1px solid #d3d3d3;
padding-bottom: 80px;
position: relative;
right: 49px;
width: 247px;
background: #f6f6f6;
font-size: 12px;
font-weight: bold;
}
.empty-cart{
background: #202020;
padding: 10px;
color: #fff;
text-align: center;
position: relative;
}
What's Going On
The problem here really isn't a problem, because everything is working as it is supposed to. When you hover over the container, the child is visible. Then the child is visible, the parent becomes larger to encompass it.
Current Selector:
To fix this, you have a couple options. The easiest would be to use a sibling selector instead of a parent. Select the a inside .shopping-cart-wrapper instead of .shopping-cart-wrapper itself, and use the + sibling selector.
We've got to be careful though, because we want the child to stay visible when the mouse is hovering over itself. When using the parent as a selector, this is automatic. With a sibling, we have to manually do this. We'll use both the sibling and the child itself as selectors.
Code
Working Example
Current:
.shopping-cart-wrapper:hover .shopping-cart-dropdown {
opacity: 1;
display: block;
}
Working:
.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
opacity: 1;
display: block;
}
Further Information
http://reference.sitepoint.com/css/adjacentsiblingselector
You can see the implementation here: http://jsfiddle.net/kqKfK/
I am trying to get everything in one line - with the span "2-up" at the far right. It would also be nice if each of the internal divs are equally spaced amongst themselves.
Edit: This is how I want it to look:
Edit 2: This is how it looks after the implementation of Kyle's suggestion. I would like for it to be aligned properly:
Edit 3: This is how it looks after Kyle's second implementation.
Float them left:
#viewbar div
{
float: left;
}
Example.
#viewbar div
{
float: left;
width: 25%;
border-right: 1px solid #000;
}
Updated example. Changed a few things in your original code too.
After your comment, try this:
#viewbar div
{
float: left;
width: 25%;
border-right: 1px solid #000;
background-image: url(path/to/file.png);
background-position: center;
}
Another example.
After you provided the full example, I came up with this, looks very much like the screenshot you posted.
Click here to see my example. I changed a lot of things, including equal heights on each div, adding margins and padding :)
Try this:
.compv-navbar {
font-weight: bold;
background: #f9f4c0;
height: 23px;
width: 220px;
border: 1px solid #c97d7d;
word-spacing: 0px;
letter-spacing: 2px;
margin: 0 auto 5px; /* top, right, bottom, left */
padding: 5px 0px 7px 0px; /* top, right, bottom, left */
text-align: center;
}
#two-up-icon {
width: 40px;
height: 17px;
float: left;
}
#two-up-icon:hover {
color: #ddd;
cursor: pointer;
}
#three-up-icon {
width: 40px;
height: 15px;
float: left;
}
#three-up-icon:hover {
color: #ddd;
cursor: pointer;
}
#four-up-icon {
width: 40px;
height: 15px;
float: left;
}
#four-up-icon:hover {
color: #ddd;
cursor: pointer;
}
.view_name {
font-family: "Helvetica", serif;
color: #f9f4c0;
font-style: normal;
font-weight: bold;
font-size: 11px;
word-spacing: 0px;
letter-spacing: 0px;
background: #1a1a1a;
padding: 1px 3px 1px 3px; /* top, right, bottom, left */
border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
float: right;
margin-right: 3px;
}
http://jsfiddle.net/kqKfK/10/
just add one more style:
.compv-navbar div { float: left; top: 0; }
One line of CSS:
#viewbar div, #viewbar span { width: 25%; float: left; }
Updated jsFiddle: http://jsfiddle.net/yahavbr/kqKfK/2/
Edit: By the way, alt is only for images, other elements should use the title attribute instead.
Edit II: if you have anything after that div, put such thing before to clear the "floatness":
<div style="clear: both;"></div>