I have started styling for my new websites navigation bar however my background color isn't working for it or any other Divs that I use, Div IDs are not being picked up either. My whole style seems to be messing up and this has never happened before.
Here is the code:
<div class="bar">
<img src="/img/NavBar/Logo.png">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
CSS:
body{
margin: 0;
padding: 0;
font-family: 'PT Sans', sans-serif;
font-size: 14px;
background:url("/img/Global/Background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
//*NAV BAR*//
.bar {
background-color: #0F0F0F;
width: 100%;
height: 70px;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.bar a {
padding-left: 40px;
padding-right: 40px;
text-decoration: none;
font-size: 20px;
color: #FFFFFF;
float: right;
margin-top: 20px;
}
.bar img {
margin-top: 10px;
margin-left: 20px;
}
The CSS is connected because my background image is showing, however background colours are not showing. I have tried different colours to make sure that it's not just poor contrast between the background image and the colour itself as well.
Anyone have any ideas as to what is wrong here?
The culprit is the //*NAV BAR*// comment. // isn't valid CSS comment syntax. It makes your whole CSS file invalid. Replace it with /*NAV BAR*/
Related
I've tried solutions to similar questions but can't figure out for the life of me how to get the text to show on top of my poor custom buttons in Safari! They show perfectly in Chrome and Firefox... but that won't help iOs users of course.
Any suggestions for how to get these to display with the text on top of the intended background properly?
HTML:
Register
Register
CSS:
/* Hexagon Button Style */
.dark-button,
.light-button{
position: relative;
display: block;
background: transparent;
width: 280px;
height: 48px;
line-height: 46px;
text-align: center;
font-size: 16px;
letter-spacing: 1.8px;
text-decoration: none !important;
text-transform: uppercase;
font-weight:600;
margin: 15px auto;
font-family: Orbitron, Helvetica, sans-serif;
}
.dark-button:before,
.dark-button:after,
.light-button:before,
.light-button:after{
position: absolute;
content: '';
width: 280px;
left: 0px;
height: 24px;
z-index: -1;
}
.dark-button:before,
.light-button:before{
transform: perspective(8px) rotateX(3deg);
}
.dark-button:after,
.light-button:after{
top: 24px;
transform: perspective(8px) rotateX(-3deg);
}
/* Hex Button color styles */
.dark-button{
color: #ffffff;
}
.light-button{
color: #2c2a2b;
}
.dark-button.border:before,
.dark-button.border:after {
background: #2c2a2b;
}
.light-button.border:before,
.light-button.border:after {
background: #ededed;
}
/* Hex Button hover styles */
.dark-button.border:hover:before,
.dark-button.border:hover:after,
.light-button.border:hover:before,
.light-button.border:hover:after{
background: #BDBDBD;
}
.dark-button.border:hover,
.light-button:hover{
color: #ffffff;
}
>> Here's the CodePen link
It does appear, as hinted at in the question, that the various transforms are creating the problem. A non null transform can create a new stacking context - though exactly why the different browsers treat the aggregate of transforms differently I don't know.
However, I'd like to suggest a simpler way of creating the look - using clip-path on the anchor element. This obviates the need for pseudo elements and transforms so keeps things simple as far as stacking contexts are concerned.
This snippet only has the CSS required for the green button but the principle is the same for the other buttons. And you will want to play around with the % settings on the clip path to get exactly the pointy look that you want.
/* Hexagon Button Style */
/* Green Button Style */
.green-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 48px;
line-height: 38px;
text-align: center;
font-size: 14px;
letter-spacing: 1.8px;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 600 !important;
color: #ffffff;
margin: 15px auto;
font-family: Orbitron, Helvetica, sans-serif;
clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
background-color: #4f9f45;
}
.green-button:hover {
color: #ffffff;
}
Register
Note: clip-path is not supported on IE so users may have to put up with a rectangular button if IE is still in use.
This question already has answers here:
Does height and width not apply to span?
(11 answers)
Closed 4 years ago.
I have a strange problem... I have a button, nothing special, just a button like so
<button class="btn btn--error">
Button Text
</button>
Now I wish to have a image besides my button text, I wish to do this using CSS rather than have an img tag in the button. So I use the :before pseudo element, here is my CSS (notice it is SCSS)
.btn {
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: capitalize;
text-decoration: none;
outline: 0;
margin-bottom: 2px;
padding: 0 0 0 0;
&:before {
background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
background-size: contain;
content: '';
width: 18px;
height: 18px;
}
}
the location of the image is correct however in the browser I see no background image...
However when I add to the content property to the :before pseudo element like so
&:before {
background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
background-size: contain;
content: '___';
width: 18px;
height: 18px;
}
I can now see the background image!
How can I make it so that I can see the background image without having to put text in the content property? Any help and advice is appreciated.
https://jsfiddle.net/4n1e8ksw/4/
Adding inline-block to pseudoelement. pseudoelement are by defualt inline and width and height for them is 0 if they have no content.
.btn {
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: capitalize;
text-decoration: none;
outline: 0;
margin-bottom: 2px;
padding: 30px;
&:before {
background: url("https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-512.png") no-repeat top left;
background-size: contain;
content: '';
width: 18px;
height: 18px;
display: inline-block;
}
}
The background image is covered by white area when you scroll all the way to the bottom. Cannot seem to figure out what it is. Played with each of the selectors and HTML. Would appreciate help. Please click link go to the CodePen where the code is visible.
https://codepen.io/siamazing/pen/QaGdWq
html, body{
height: 100%;
}
#body {
background-image: url(https://images.pexels.com/photos/267278/pexels-photo-267278.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
height: 100%;
font-size: 15px;}
.container-fluid {
padding-top: 20px;
padding-left: 40px;
padding-right: 40px;
height: 100%;}
h2 {
padding-left: 20px;
font-family: 'pacifico';
font-size: 22px;
color: #72777f;
}
header {
text-align: center;
font-family: 'pacifico';
}
article {
font-family: 'raleway';
background-color:rgba(255,255,255,.4);
color: #303338;
padding: 10px;
margin-top: 20px;
margin-left: 30px;}
Remove height:100% from #body
https://codepen.io/mirohristov/pen/MrbmWj
See Miro's answer, but here's some troubleshooting advice.
I added * { outline: 1px dashed red; } and saw this:
That made it easier to find the culprit element - #body and remove the height:100%; rule.
I have started developing my first website. I have run into an issue though - I can't figure out how to make a "Banner Image"!
Here is an example of what I'm trying to achieve:
Since I am a beginner in CSS, how would I make a simple version of this?
There are two ways using which you can create a banner image, the easy way and the not-so-difficult way.
The Easy Way:
Create a banner image using an image editing software like Photoshop and then use that image as a background-image on a <div>. Like this:
#bannerimage {
width: 100%;
background-image: url(http://s30.postimg.org/x0ne0p5wx/bootsrap.png);
height: 405px;
background-color: purple;
background-position: center;
}
<div id="bannerimage"></div>
The Not-So-Difficult Way:
You will need to convert the banner design into HTML and style it using CSS. For example, let's take into account that purple bootstrap banner. It has a large purple background and all the text is added on it and then styled using CSS. You can do that like this:
#header {
background: #664c8f;
height: auto;
padding: 100px 100px
}
h1 {
color: white;
font-family: Arial;
text-align: center;
}
a#download {
display: block;
text-align: center;
width: 150px;
margin: 0px auto;
padding: 20px;
color: white;
text-transform: uppercase;
font-family: Arial;
border: 1px solid #fff;
text-decoration: none;
border-radius: 10px;
}
<div id="header">
<h1>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</h1>Download
</div>
I hope this helps.
#bannerimage {
width: 100%;
background-image: url(http://s30.postimg.org/x0ne0p5wx/bootsrap.png);
height: 405px;
background-color: purple;
background-position: center;
}
<div id="bannerimage"></div>
Currently my page looks like this:
But when I scroll down, the background image of stars overlap the logo section as given below:
This is how the site header css looks like:
.site-header {
position: relative;
z-index: 1000;
/*background-attachment: fixed; */
}
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 1080px;
height: 130px;
padding: 0 20px;
text-decoration: none;
width: 100%;
}
.site-header .site-title:hover {
text-decoration: underline;
}
.site-title {
font-size: 60px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 58px 0 20px;
}
.site-description {
font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
margin: 0;
}
and this is how the star image is being formatted is currently setup:
body.page-id-72 #stars {
background: #425169 url("../images/photos/stars.gif") top center;
width: 100%;
height: 8000px;
position: fixed;
top: 300px;
z-index: 100;
}
I want the site titles background to stay white as it is shown in first image. Any help in this regard would be great
Just add this to your css. You currently don't have any background for .site-header, so when you scroll down, it takes the background of your div with the earth.
.site-header {
background: white;
z-index: 101; //you likely need to add this too, b.c you gave a z-index of 100 to the stars
}
if you don't want to change the .site-header on every page, just the one with the stars background, you can try
.page-id-72 .site-header {
background: white;
z-index: 101; //you likely need to add this too, b.c you gave a z-index of 100 to the stars
}
Try writing this at the end of the css file:-
.site-header {
background-color:#FFF;
}
If still doesn't work then try this:-
.site-header {
background-color:#FFF !important; // !important is usually not recommended.
}