I'm trying to draw a linestring like this:
thin stroke but high internal
Any ideas? I've to use some complex style function?
Thank you
I'm not sure what you need. If you want to use it as a divider you could use the <hr> tag. But if you just want the box you could use a <div></div> with the following css.
div {
width: 300px;
border-top: 15px solid red;
border-bottom: 15px solid red;
background: grey;
padding: 50px;
margin: 20px;
}
Related
I am new to bootstrap and made some stuff.
but there is a specific effect of highlight a text i can't reach. i made it wrong many times - like the BG was offset or the line had no spacing and many more problems.
Can you please explain me how to do this ?
Tenter image description herehank !
edit:
Thae image is photoshop, how the final result should look
Or you could work with a border and padding like in the following demo and this fiddle.
For the unhovered link I've added a transparent border to avoid jumping on hover. You could probably also do this with margin/padding.
.styled-link {
color: #5F6065;
font-size: 2em;
padding: 15px;
border-left: 2px solid transparent;
margin: 5px;
text-decoration: underline;
}
.styled-link:hover {
color: gray;
background-color: #D1E7FE;
font-size: 2em;
border-left: 2px solid gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Highlighted link
Does this answer your question?
With the use of pseudo elements we can make a ::before element appear on hover
https://jsfiddle.net/jfe1uf50/
.cool-link {
color:red;
position:relative;
padding:0 15px;
&:hover {
color:blue;
&::before {
position:absolute;
left:-5px;
content:"";
height:100%;
width:3px;
background-color:blue;
}
}
}
Hello World!
On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}
Thanks in advance for helping me! :)
Add width: 100%; to your #navigation for a full-wdith centered menu.
Or change the display to block for a centered menu without a full-width background.
If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.
margin-bottom: 1px
Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/
Switch display: inline-block; to display: block;
I guess you need to understand something about block and inline-block elements.
Block elements , if sized and smaller than page/container can basicly; be centered with margin:auto;.
Inline-block element behaves like text and can follow text-align value.
To center your menu , you have then 2 options:
margin:auto; with a block formating, you need then just to remove your inline-block display wich does:
#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
}
or
text-align:center; from its parent if as an inline boxe. Wich would be here :
.bg-wrapper {
text-align:center;
}
If inline-block was here used to trigger some special layout , like to hold floatting elements, you could here turn display:block into display:table;.
doei
I have a div with text inside, with a line-height that is more than the height of the text. This means there is space on top and below each line of text.
There is a vertical border along the right hand side, the top of which I want to be aligned with the top of the text. I need to somehow align the text to the top of it's line.
Is this possible or can someone help me out here?
div{
border-left: 1px solid black;
line-height: 30px;
}
<div>Hello</div>
Without messing with the line-height:
div{
position: relative;
font-size: 16px;
line-height: 24px;
width: 25px;
padding: 0px 0px 0px 10px;
}
div:before {
position: absolute;
content: '';
top: 6px;
left: 0px;
bottom: 6px;
width: 0px;
border-left: 1px solid black;
}
The values top and bottom should equal (line-height - font-size) / 2 but due to different character height will need some manual nudging.
Demo: http://jsfiddle.net/NcbB7/
What I am trying to achieve is a shadow ONLY in the middle of a div. What I have now is:
<body style="background-color: #ccc;">
<div style="padding: 30px;
-webkit-box-shadow: inset 0px 0px 0px 20px #000;">
Some text in the box</div>
</body>
Which looks like (#1):
But I want to achieve (#2):
Question A: Is it possible to achieve #2 using only CSS?
Question B: If yes to Question A, how should #2 be modified to achieve the effect only on the top and the bottom, leaving the sides shadowed all the way from left to right (#3)?
Clarification: The intent is to use a 50% shadow that shows up only in the middle of a div, but I CANNOT change any HTML, only CSS. Also, The code posted here is oversimplified. There are several elements inside the div, including images. I cannot change their BG.
I have achieved your #3 using this html:
<body>
<div id="shadow">Some text in the box</div>
</body>
and this css:
body, html {
margin: 0;
padding:0;
background-color: #ccc;
}
div#shadow {
margin-top:20px;
padding: 15px 30px;
background-color: #000;
color:white;
}
you can see it here: http://jsfiddle.net/quPB5/
Edit:
Here is only the modified CSS:
<body style="background-color: #ccc;margin: 0;padding:0;"><div style="margin-top:20px;padding: 15px 30px;background-color: #000;color:white;">Some text in the box</div></body>
You can use "box-sizing" to move the padding and borders etc, inside the div and in this way - keep the div size despite changes in padding or shadow. In this case I have box-sizing on the wildcard, *
I put it on everything, but you can just put it on the elements you want as well.
Also add inset to your shadow.
HTML
<div class="box box-shadow">inset shadow</div>
CSS
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* this moves padding and borders and such inside the div instead of outside */
.box {
width: 300px;
height: 100px;
padding: .5em;
background-color: rgba(255,255,255,.1);
}
.box-shadow {
-webkit-box-shadow: inset 0px 0px 50px 5px #f06; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
box-shadow: inset 0px 0px 50px 5px #f06; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
}
HERE is a jsfiddle with it in action:
As far as your last question I'm a little unsure of what you want. shadow just on top and bottom? That would be cool... could use some pseudo elements maybe --- ? ? ?
What code do I add/ replace/ remove to change the size ofmarketbot.net
Are you talking about the global navigation menu or the slider that is on the page? The slider looks like it has a margin problem (in both I.E. 8 and Google Chrome).
I adjusted the css class named content-top to the following, so it isn't overflowing into the header:
.content-top
{
position:relative;
margin-top: 80px;
margin-bottom: 5px;
}
After I made the adjustments, it looks somewhat cleaner in the slider and header divs.
#header {
background: #FFFFFF
width: 100%;
padding: 30px 0px;
position:relative;
margin-top: 80px;
margin-bottom: 5px;
}
i didn't completely understand your question but i have tried to answer it.
you would need to edit
#header {
background: #FFFFFF
width: 100%;
padding: 20px 0px;
}