I need a little help with my problem. I get following effect with this code:
#navLink{
font-family: oduda_bold;
font-size: 17px;
color: #fff;
text-decoration: none;
}
#navLink:focus{
border-radius: 10px;
border-style: solid;
border-width: 0px;
background-color: #ef5e99;
}
WRONG HIGHLIGHT
and I would like to have it highlighted like this:
NICE HIGHLIGHT
Is that possible to highlight link with larger (than its textvalue) area ?
Yes. Add padding and then fiddle around with the border radius until it meets your expectations:
#navLink:focus{
padding: 10px /*here*/
border-radius: 30px;
}
You need to use padding and set your link into an inline-block.
#navLink{
display:inline-block;
padding: 10px;
}
Related
I want it to be like this:
Currently, it is like this:
So, as shown most of the background is highlighted in white but there is a small left and right section which is purple.
The code I have so far which correspond to the menu items is:
.collapsible-menu ul
li:hover:not(:last-child) {
background-color:white;
width:100%;
color: #4C27B3;
text-decoration: none;
outline:none;
}
It is probably a quick fix but I need a second pair of eyes to pinpoint the issue. Many thanks in advance.
All code can be seen here:
https://codepen.io/JoyFulCoding/pen/EzXowL
in Css
.menu-content{
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-weight: bold;
padding: 0 0 0 50px;
/* add this margin left & right to make hover white full screen*/
margin-left: -79px;
margin-right: -30px;
}
in Css
.collapsible-menu {
background-color: #4C27B3;
border: none;
box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
}
Remove Padding from this class in code
I would like to make this shape for the title.
What HTML and CSS should I use to make this shape?
For creating a shape like you asked for, you can use any html tag (in my case I used h1 tag).
I've given my tag a class .title, you can give any. To this class I've only assigned basic and required properties to achieve what you asked for, you can give any set of properties as you desire together with these.
Below I'm attaching a snippet please go through.
.title {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
border-width: 0 0 1px 5px;
border-style: solid;
border-bottom-color: #ababab;
border-left-color: #000;
}
<h1 class="title">This is my title</h1>
You can achieve this using border property (border-left & border-bottom), like:
.title {
border-left: 5px solid #444;
border-bottom: 1px solid #444;
padding-left: 15px;
line-height: 1.4;
}
<h1 class="title">This is a title</h1>
Hope this helps!
I can't figure out what is causing the uneven spacing that you see in the image http://i.imgur.com/AZoXzYf.png (can't embed images yet ... sorry)
which comes from http://playclassicsnake.com/Scores. My relevant CSS is
.page-btn { background: #19FF19; color: #FFF; border: 0; border: 3px solid transparent; }
.page-btn.cur-page { border-color: #FFF; cursor: pointer; }
.page-btn + .page-btn { margin-left: 5px; }
and I've inspected the elements to make sure there's nothing fishy. What's the deal?
You have a new line character in your HTML just after your first button:
<button class="page-btn cur-page">1</button>
<button class="page-btn">2</button><button class="page-btn">3</button>
Make it all in 1 line and it will start to work without any extra spaces:
<button class="page-btn cur-page">1</button><button class="page-btn">2</button><button class="page-btn">3</button>
Your CSS is perfectly fine and doesn't need to be altered as mentioned by others..
Hi now try to this css
#page-btns-holder {
width: 80%;
margin-top: 12px;
font-size: 0;
}
div#page-btns-holder * {
font-size: 14px;
}
.page-btn {
background: #19FF19;
color: #FFF;
border: 0;
border: 3px solid transparent;
display: inline-block;
vertical-align: top;
font-size: 14px;
}
Define your btn display inline-block and remove space to inline-block element define your patent font-size:0; and child define font-size:14px; as like this i give you example
Remove Whitespace Between Inline-Block Elements
Try to make the font-size of the parent content 0, also try setting letter-spacing to 0.
I can't figure out how to write HTML code for the picture below:
The CSS looks like this:
.borderbox {
border-style: dashed;
border-width: 2px;
border-color: #d3d3d3;
position: absolute;
height: 90%;
width: 90%;
top: 0;
left: 0;
margin: 5%;
}
h3.header-3 {
font-size: 130px;
text-align: center;
color: #00a0df;
margin: 4px auto 17px;
}
p.paragraph-text {
font-size: 20px;
text-align: center;
color: #00a0df;
text-transform: uppercase;
font-family: HelveticaNeueBold;
}
The text is <p> visa fler bästsäljare </p> <h3>+<h3>.
The code I have gotten help with so far is:
<body>
<div class="borderbox">
<h3 class="header-3">+</h3>
<p class="paragraph-text">visa fler bästsäljare</p>
</div>
</body>
The only issue is that this code does not create the image as I posted. URL to the website URL. Scroll down a bit. The browser I am testing this on is Google Chrome.
remove the
.borderbox {
height: 90%;
}
then the dashed border should work as you expected.
I think this might be a solution: http://jsfiddle.net/e7Levykn/
I don't think you can style border with one argument. You would have to use
border-style , border-color, border-width.
EDIT: Nvm about the border thing. Your css-code should work, it works in the jsfiddle. Maybe your elements in html don't have the right classes
Use css border-style property.
.selector{
border-style: dashed;
}
or like this
.selector{
border:2px dashed #F1F1F1;
}
I'm attempting to style my navigation menu design to reflect the one on timeanddate.com, as seen in this image:
To create the colors, they're using a simple bottom and left border in CSS.
I'm attempting to add a border to my <li> tags on my website sandbox, http://www.escapetech.com:8080.
I'm using the following CSS:
.anylinkcss li {
list-style-type: none;
}
.participate li {
list-style-type: square;
border-left-color: #fa514d;
}
#navigation_bar {
height: 31px;
list-style: none;
width: 1000px;
margin-top: 15px;
}
#navigation_bar li {
float: left;
padding-right: 35px;
padding-left: 10px;
margin: auto 0px;
vertical-align: middle;
}
#anylinkmenu3, #anylinkmenu4, #anylinkmenu5, #anylinkmenu6, #anylinkmenu7 {
position: absolute;
line-height: 18px;
z-index: 20;
background-color: #000;
text-align:left;
visibility: hidden;
left: 421px;
top:207px;
padding: 7px;
padding-left: 25px;
}
The #anylinkcss3 and further represent styles for the drop downs, while the #navigation_bar styles are for the whole bar. No matter where I add any border styles, none appear, even after I comment out all CSS code and just include a border on these IDs and classes.
My current menu is live at the link I posted above, I would greatly appreciate if someone could take a look and let me know why there may be any issues with borders appearing. This is my first Stack Exchange post so I hope that this was correctly formatted!
Although you set the width and color, you can not leave out the style parameter with borders.
To get the desired effect as you presented in the image - jsFiddle demo
dark background color for the <ul>
a wide border-left on the <li>
a margin-bottom: 2px as bottom border - shows ul background
and a few small tweaks like text-indent etc
Some information regarding borders
CSS borders consist of 3 parameters
border-width
border-style
border-color
You can set one value, which applies to all sides
border-width: 5px;
border-style: solid;
border-color: red;
Or with short hand border: 5px solid red; and also applies to all sides.
You can style each border side individually, as you are doing above.
border-side-width
border-side-style
border-side-color
Example:
border-left-width: 5px;
border-left-style: solid;
border-left-color: white;
Which can be accomplished also with shorthand: border-left: 5px solid white;
For more information and other border opportunities
https://developer.mozilla.org/en-US/docs/Web/CSS/border
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
ahhh... Brian you beat me to it.
I inserted border-style, and then there is "BORDER"
border: 5px solid white;
Actually the trick in his case is that border is applied to the anchor tags not the lists! Cheers! :) And yes if you apply border-color as a property you should also apply border-style and border-width :)