I am following the instruction of my book and everything is fine, except the border. It's invisible. It doesn't show up on my webpage.
This is my external CSS file:
body {
font-family: Arial, verdana, sans-serif;
color: #665544;
padding: 10px;}
page {
border-style: solid;
border-width: medium;
border-color: red; }
page {
background-color: #efefef;
padding: inherit;}
Did I make any mistake?
Can you please help me?
Thanks
Related
First time asking question here, and actually kinda nervous! haha
Anyway, having issues with strikethrough. I use Safari on my Mac, and the line isn't displaying. Tried on Chrome, and it seems to work.
So, is there a workaround? Here's my css code I'm trying to work with
.astroTitle {
color: rgba(233,160,62,1.00);
font-family: Verdana, Tahoma, "Trebuchet MS";
font-size: 18px;
font-weight: bold;
background-color: rgba(82,4,5,0.58);
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: rgba(184,113,1,0.77);
}
.astroStrikeTitle {
text-decoration: line-through wavy rgba(108,108,255,0.75);
}
And then I'm just using span
<span class="astroStrikeTitle">some text</span>
And I get nothing.
Again, it works fine on Chrome. Just not on Safari. :/
You need to be more specific with your -webkit. Please try the following:
.astroStrikeTitle {
text-decoration-line: line-through;
-webkit-text-decoration-line: line-through;
text-decoration-color: red;
-webkit-text-decoration-color: red;
}
.astroTitle {
color: rgba(233,160,62,1.00);
font-family: Verdana, Tahoma, "Trebuchet MS";
font-size: 18px;
font-weight: bold;
background-color: rgba(82,4,5,0.58);
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: rgba(184,113,1,0.77);
}
<span class="astroStrikeTitle">some text</span>
here is the answer to your question: https://stackoverflow.com/a/51254417/4527878
also always check mdn docs for support here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
for specific to your question :
.astroStrikeTitle {
text-decoration: line-through wavy;
-webkit-text-decoration-line: line-through wavy;
color: rgba(108,108,255,0.75);
}
I want to create the h1 header as an example below. I saw this type of header at some website which I could not remember it's address right now. If I'd remember, I'd copy it from their website. Unfortunally I forgot. Here's the the PSD screen-shot:
(source: hizliresim.com)
Anyway, no matter what I've tried I still could not get the result. What I got is:
(source: hizliresim.com)
Here's my code:
div.big-header div.header-left h1 {
float: left;
color: #fff;
background: #c00000;
font: bold 35px "Open Sans";
padding: 1px 5px;
margin-bottom: 35px;
}
and here's JSFiddle
Question: How can I create the header as example above (first picture)
Try like this: Demo
Updated Demo
Update: Just added display:inline, line-height with box-decoration-break along with your code..
CSS:
h1 {
color: #fff;
background: #c00000;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
/* newly added code */
display:inline;
line-height:44px;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
Use a span inside your h1:
h1 {
float: left;
color: #fff;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
}
h1 > span {
background: #c00000;
}
And:
<h1><span>How to create a page with PHP?</span></h1>
I created a donate button and copied the exact code as provided, yet it is visually HUGE on my website. http://naomihattaway.com/about/mias-mission/
How do I get it down to a normal size?
In CSS i find this code when inspecting your donation button/image.
media="all"
input, select, textarea {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
padding: 10px;
padding: 1rem;
width: 100%;
}
By removing the "width:100%" the Button/image was normal sized then. Try this out and tell me if it helps.
Regards, Mike
Im trying to get the links in my footer white #fff however I want to keep the rest of the links on my page the color they already are. How would I do this?
#footer {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
Perhaps you should add a class to each anchor element within your footer instead of applying the colour to the footer itself:
/*Select only footer tagged elements*/
.footerLink
{
color:#fff;
}
In addition to your original CSS, the following will make your footer links white:
#footer a {
color: #FFF;
}
#footer a {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
This will style only the a elements in the div (presumably) with the id of footer.
I cannot seem to change my .CSS (the file name is loginmodule.css)
I only wanted to change the font color to black.
I have edited this in Microsoft FrontPage,notepad++, notepad and it has already change but when I look it in the browser(Firefox beta, latest patch). It didn't change at all. I know I had not made a duplicate file and I am sure it is the same file I edited and opened from a browser(Firefox beta, latest patch). Is it because of the browser or something else?
body {
color: #666666;
margin: 0px;
background: #f8f7e5 url('images/abstract-bg.jpg') no-repeat center top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: blue;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
color: #99CCFF;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}
#content {
width: 860px;
margin: 238px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
If you want to be certain the file hasn't been cached by the browser, just append a query string to the CSS file declaration.
So inside your page/template, change the <link /> attribute like so
<link rel="stylesheet" type="text/css" href="/css/loginmodule.css?v=2" />
Alternatively, hold down CTRL and press F5 inside Firefox to do a hard refresh.
Browsers typically cache the CSS. Try closing all of your browser windows then viewing the file.
Things like that usually occur from browsers. I usually delete all history and clear cacheand it works fine. But make sure you have saved and uploaded the css to the correct directory. You can also try to view it in a browser that you don't use very often.
good luck.