I have 3 links in my code but only two are working probably, why?
<div id="welcome-text-2" class="welcome-text">
<p>
<b>boldtext</b><br>
text link.<br>
Texthär.<br>
TextLink.<br>
</p>
</div>
CSS:
.welcome-text {
height: 240px;
width: 360px;
background-color: #FFF;
margin-left: 40px;
position: absolute;
-webkit-box-shadow: 0px 8px 6px -5px black;
}
#welcome-text-2 {
margin-top: 400px;
}
#welcome-text-2 b {
position: absolute;
margin-left: 10px;
margin-top: -10px;
}
#welcome-text-2 p {
position: absolute;
margin-top: 10px;
margin-left: 7px;
}
.welcome-text a {
text-decoration: none;
font-weight: bold;
color: #444;
}
.welcome-text a:hover {
text-decoration: underline;
font-weight: normal;
}
the last two links work when :hover'd. But the first one doesn't. I also tried to add a link in the first row but it didn't appear.
I assume that you are beginning to learn HTML/ CSS.
The markup above works correct. Did you clear the browser-cache? There could old styles/ markup beeing cached.
http://www.wikihow.com/Clear-Your-Browser's-Cache
The Code Provided does work.
Adding onto what #ilovemondays said, Please make sure your links are updated if your stylesheet is external.
Related
I have been tasked with creating this.
I can create the box, font-awesome icon and the non-linking text using a pseudo element content, but I am unable to create the Learn More link (with a span class to include the >).
If I add text directly into the html, it will not fill the box (and spills out below it). I would also be forced to use inline styles to keep it top-aligned with the !.
We want to keep this in the CSS if at all possible. I realize that the real answer is that you can't do it, but I'm looking for a workaround to make it work.
This is the CSS I can use to place the non-linking message:
&:after {
color: #7b7b7b;
margin-top: -43px;
padding-left: 19%;
line-height: 18px;
display: flex;
font-weight: normal;
content: "You are no longer on FPC, you will now be back to your regular contract.";
#media #{$small} {
padding-left: 15%;
margin-top:-37px;
}
}
&:before {
color: #7b7b7b;
margin-left: 10px;
}
And this is the line of HTML:
<i class="fa fa-exclamation-circle"></i>; Learn more <span class="arrow-right"></span>
Does anyone have a solution to help me make this work?
Thanks
Here is a different structure & CSS if you end up going in that direction.
.message {
border: 2px solid #7b7b7b;
border-radius: 2px;
position: relative;
width: 220px;
font-size: 13px;
font-family: Arial;
background: #f7fcff;
padding: 7px 8px 5px 42px;
}
.message>.message-icon {
position: absolute;
color: #7b7b7b;
font-size: 26px;
left: 10px;
}
p {
color: #7b7b7b;
margin: 0 0 3px 0;
}
a {
color: #1464ae;
font-size: 12px;
text-decoration: none;
}
a .action-icon {
margin-left: 3px;
font-size: 10px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="message">
<span class="message-icon"><i class="fa fa-exclamation-circle"></i></span>
<p>You are no longer on FPC, you will now be back to your regular contract.</p>
<a href="">Learn More
<span class="action-icon"><i class="fa fa-chevron-right"></i></span>
</a>
</div>
Hi I'm doing a really simple navigator but I just came up into a strange problem I can't figure out where this is coming from.
My separations are not exactly till, they are created the same way..
Some are tougher than other and I don't get why.
Could it be due to the font ? I tried it with different browser and the problem is persistent...
JsFiddle There
The code is really simple :
HTML
<nav id="main-menu2">
<span class="fa fa-home"></span>
DERNIÈRES MINUTES
SÉJOURS
CROISIÈRES
CIRCUITS
FRANCE
WEEK-ENDS
VOYAGE À LA CARTE
PROMOS
</nav>
SCSS
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0.7em;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -2px;
margin-right: -2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.3em;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
I can't reproduce the bug, but I may have a solution : you're currently using borders that you don't need. Let me explain : there is a border right on Séjours and a border left on Croisières. So 2 borders, and you're currently hiding one of them.
Using font-size in em, makes your trick (margin-left / margin-right : -2px) unconsistent, because em can't really be converted into px (well it can, but it will depends on the browser calculation so you may need more than 2px to make a border go over another, maybe 1px maybe 1.5487px).
So, my solution : removes all the unecessary borders :
a {
border-left: 1px solid #fff;
}
a:last-child {
border-right: 1px solid #fff;
}
No more borders overlapping, more reliable solution.
Manage it with the font-size:
#main-menu2 {
font-size: 0;
}
#main-menu2 a {
font-size: 14.5px;
margin-left: -1px;
margin-right: 0;
}
The whole code:
$darkOrange: #ed6d00;
#main-menu2 {
background-color: $darkOrange;
width: 100%;
text-align: center;
font-size: 0;
a{
color: #fff;
text-decoration: none;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
margin-left: -1px;
padding-left: 10px;
padding-right: 10px;
font-size: 14.5px;
line-height: 1.7em;
}
.fa-home{
font-size: 23px;
position: relative;
top: 2px;
}
}
Demo: JSFiddle
It is because in your code you have some space by indent the text. Unfortunately all browsers interprete these content as white spaces and thus you have some gap between the elements.
How can I place my button in the center without any kind of "margin cheat" (for example setting margin-left: 525px;)?
HTML
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
CSS
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
margin-left: 525px;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
I've tried making it sit in the center but it didn't work out so well without me setting margin-left; 525px;, which in my case, centers the button under the text, please help me remove this "margin cheat" and do it in the right way.
The a act like text it means when you give text-align:center; to its parent, it will be placed in center of its parent.
You don't need to give margin to the a element. You can use text-align:center;.
#bannerContainer
{
text-align:center;
}
.bannerButton {
border: 2px solid #fff;
color: #fff;
font-weight: 300;
font-family: 'Raleway';
font-size: 20px;
display: inline-block;
background-color: rgb(63, 127, 191);
padding: 18px 60px 18px 50px;
margin-bottom: 50px;
margin-top: 50px;
position: relative;
}
.bannerButton:hover {
text-decoration: none;
background: #eaf;
color: #fff;
}
<div id="banner">
<div id="bannerContainer">
<h1>H1 tag</h1>
Products
</div>
</div>
If you set the position of the button to absolute, give it a set width, and add this it should center:
left: 50%; right: 50%;
Have you try this:
<center>Products</center>
I am not sure whether it is helpful to you..
I am currently customizing a wordpress theme.
Here my case, through a widget, I generate a div which has several classes :
<div class="col-lg-3 focus-box item-1">...</div>
The parent theme and bootstrap stylesheet already apply respectively properties on focus-box and col-lg-3 classes.
Well, I added to my child-theme stylesheet (which works well for many others things) this :
.item-1 { background-color: orange; }
And this does not work... nothing happen but I tried to do this in my child-theme CSS :
.col-lg-3 (or focus-box) { background-color: orange; }
.item-1 { background-color: orange; }
This way works... I really don't understand anything to what is happening here.
My Child-theme stylesheet is the last one to be load, so It should override all others, isn't it ?
If anyone has a clue, I would appreciate to get it :-)
Thanks in advance for your help.
Sommy
Thanks for your answers.
First, I already tried to use !important it didn't work, it was the same using stronger selector.
I know how to inspect code with my browser, and that's why I told you that my child-theme css was the last one to be loaded because I checked it.
The thing really weird, according to me, is that the result is different if I put col-lg-3 in my stylesheet or not.
I have similar issues with others HTML elements in my code.
To sum up :
My Child-Theme CSS is loaded after the parent-one
I checked it in my browser development tool
I also notice that the place where my CSS properties is change the result, if I put it at the end of my child-theme css it sometimes work example :
{
/* IF I PUT THE SELECTOR .focus-box .service-icon here It doesn't work */
/* SEE THE LAST ELEMENT BELOW */
.focus-box:nth-child(4n+1) .service-icon:hover {
border: 5px solid #e96656;
}
.focus-box:nth-child(4n+2) .service-icon:hover{
border: 5px solid #34d293;
}
.focus-box:nth-child(4n+3) .service-icon:hover {
border: 5px solid #3ab0e2;
}
.focus-box:nth-child(4n+4) .service-icon:hover{
border: 5px solid #f7d861;
}
.focus-box:nth-child(4n+1) .red-border-bottom:before {
background: #e96656;
}
.focus-box:nth-child(4n+2) .red-border-bottom:before {
background: #34d293;
}
.focus-box:nth-child(4n+3) .red-border-bottom:before {
background: #3ab0e2;
}
.focus-box:nth-child(4n+4) .red-border-bottom:before {
background: #f7d861;
}
.focus-box h5 {
margin-bottom: 15px;
color: #404040;
position: relative;
display: inline-block;
text-transform: uppercase;
margin-bottom: 30px;
font-weight: bold;
font-size: 17px;
float: none;
width: 100%;
background-color: rgba(224,82,6,0.2);
}
.other-focuses {
background: url(images/lines.png) repeat-x center;
margin-bottom: 25px;
}
.other-focuses .section-footer-title {
padding: 0 15px;
color: #404040;
font-weight: bold;
}
.other-focus-list {
padding-top: 5px;
margin-bottom: -17px;
}
.other-focus-list ul li {
display: inline-block;
margin-right: 50px;
padding-bottom: 15px;
text-transform: uppercase;
}
.other-focus-list ul li:last-child {
margin-right: 0;
}
.other-focus-list ul li i {
margin-right: 8px;
}
.item-dashboard {
padding: 20px 0 20px 0;
}
.focus-box p {
font-size: 14px;
color: black;
}
/* IF I PUT IT THERE THEN IT WORKS */
.focus-box .service-icon {
margin-bottom: 30px;
width: 145px;
height: 145px;
margin: auto;
border-radius: 50%;
border: 0px solid #ececec;
margin-bottom: 20px;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Focus Box HTML Code :
<div class="col-lg-3 col-sm-3 focus-box item-dashboard" data-scrollreveal="enter left after 0.15s over 1s">
<div class="service-icon">
<a href="#">
<i class="pixeden" style="background:url(#/wordpress/wp-content/uploads/2015/10/cle_main_2.png) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON-->
</a>
</div>
<!-- FOCUS HEADING -->
</div>
The question is why my child-theme CSS doesn't correctly override the parent one ? Why the place of my css element affect the result (I know the place affect if you override a property, but here it doesn't look like this...)
Thansk again for you help.
I finally overcame this issue by reviewing my style sheet loading priority and so on.
Thanks everyone.
Here is the fiddle. I am trying to style the <select> and <input id='checkbox'> using CSS. I am currently using select {background: #4a4a4a} and it works, but I cannot get any other styles to work. The checkbox style doesn't work at all when using input[type='checkbox'] {background: #4a4a4a}
HTML:
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<input type='checkbox'>
CSS:
body {
background: #252525;
}
select {
background: #4a4a4a;
border-radius: 0px;
}
input[type='checkbox'] {
background: #4a4a4a;
border-radius: 0px;
}
JS:
none
Edit
I have started a project where I am making my own not styleable form elements. For more info see this question.
Styling checkboxes
Styling checkboxes is tricky and inconsistent across browsers. Here is pure CSS approach. It takes advantage of that when label and input are connected with an id= , clicking on the label activates the input box itself. No JavaScript needed there.
HTML
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text
<span class="checkbox"></span>
</label>
CSS
Hide checkbox, style the <span> as you like. I've used a CSS sprite here.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label .checkbox {
display: inline-block;
width: 22px;
height: 19px;
vertical-align: middle;
background: url('ui-sprite.png') left -90px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
background: url('ui-sprite.png') -30px -90px no-repeat;
}
Styling select inputs
I haven't found a simple working solution for this yet.
Here is an article about a hack that seems to be on a good way.
Given how every browser has its own rules and exceptions when it comes to input element styling, I tend to use things like http://uniformjs.com/ for consistent input styling. Slows things down on pages with thousands of input elements, but otherwise quite excellent.
You cannot style all form elements. Browsers tend to not allow you to style check-boxes and select boxes (As well as drop downs, radios, file uploads etc...). The general concept I have used before is to hide the actual element and use a replacement element such as a div to display to the user. That div can be styled to look and work the way you want. The tricky part and part most often missed is you have to actually change the state of the hidden form element when the user interacts with the mock element.
This is a JQuery Plugin that will provide the above functionality. This plugin was written with the intent that the user would style the elements according to what they need. Here is an example JsFiddle that demonstrates the plugin and exposes the CSS selectors with some basic styling. Basic code below...
HTML
<form>
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<br/>
<input type='checkbox'>
</form>
JQuery
$(document).ready(function () {
$('body').styleMyForms();
});
CSS
body {
background: #252525;
}
.sf {
position: relative;
display: block;
float: left;
}
.sf-checkbox {
top: 6px;
margin-right: 5px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #444;
cursor: pointer;
background: #4a4a4a;
border-radius: 0px;
}
.sf-select {
display: block;
width: 220px;
border: 1px solid #222;
background: #4a4a4a;
border-radius: 0px;
padding: 0px 10px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sf-select-wrap {
position: relative;
clear: both;
}
.sf-select-ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #888;
width: 240px;
padding: 0px;
top: 33px;
}
.sf-select-ul li {
position: relative;
cursor: pointer;
padding: 0px 10px;
color: #333;
}
.sf-select-ul li:hover {
background: #efefef;
}
.sf-select-ul li.selected {
background: #508196;
color: #fff;
}
.sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
border-color: #222;
}
.sf-select:hover {
}
.sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus, .sf-select:focus {
background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
background: #9cb7c3;
}
.clear {
clear: both;
}
.buttonish {
display: block;
font-family:'Francois One', sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #fff;
background: #9cb7c3;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
width: 480px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px #508196;
box-shadow: 2px 2px 4px #222;
}
Think in boxes, how many boxes does a populated select seem to have when you look at it in a browser...
a lot, and they have lots of associated styles/scripts (background/colors,paddings, the functionality open/close etc.)
And actually you don't see anything of that in your code
So the code can only come from the browser
and browsers are different, all answers are correct, don't try to style it, let a JavaScript replace the elements and functionality.