I'm trying to get the background image to for a link to change when the link is hovered over. Essentially, the hover image is a different colour, so I'm just trying to change the colour of an image (which is not possible in any way that I know, so I'll just swap the image).
The code to display the logo:
And the CSS:
#logo {
position: absolute;
display: block;
margin-top: 10px;
margin-left: 10px;
background: url('../img/logo.png') no-repeat;
width: 60px;
height: 60px;
}
#logo a:hover {
background: url('../img/logo-blue.png') no-repeat;
}
Is there a better way for me to display the logo that would easier facilitate this hover?
Edit (added header CSS):
#header {
height: 75px;
text-align: right;
position: relative;
}
#header h2 {
font-size: 2.5em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
padding-top: 15px;
}
Change it from #logo a:hover to #logo:hover, because your <a> element is the #logo element.
Also, a few other tips:
Indent your CSS to make it easier to tell properties apart from selectors and other rulesets.
Keep your CSS-referenced images and other assets in the same directory as the stylesheet, that way you won't need relative URIs and it keeps everything together.
Why are you using position: absolute; without a top/right/bottom/left property? What effect are you trying to achieve?
Related
I am trying to put an image at the top of the page, just below the navbar. Whether I use margin or padding CSS styles, the picture always stays at the bottom. If I try to use padding-bottom, it simply crops the picture by that number of pixels(it crops because I used "object-fit: cover;", otherwise it would stretch the image).
Here is the CSS code I used for the image in question:
#image {
bottom: 100px;
height:500px;
width:100%;
object-fit: cover;
}
Here are the CSS styles for the navbar:
.navcontainer {
height: 100vh;
width:100%;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
background-color:cadetblue;
margin-bottom: 0;
}
A peculiar thing I noticed is that the image is always one scroll away from the top of the page. Whether I am viewing the webpage on a laptop or a phone, I have to scroll exactly once to see the image.
I am unable to find the root cause of this problem.
I am trying to make my webpage look similar to this:
Picture is directly below the navbar
You can see the image is touching the navbar, and there is no gap between the navbar and the image.
EDIT:
Here is some other code that may be useful:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.navcontainer {
height: 100vh;
width:100%;
}
(.navcontainer is a div surrounding the navbar)
Below is the CSS styles for the navbar links:
nav ul li {
list-style-type: none;
display: inline-block;
padding: 10px 20px;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
font-weight: bold;
transition: ease-in-out 0.3s;
padding: 10px;
}
Any help is appreciated!
Thank you,
Kunj Parikh
The problem is that you are using the CSS property "bottom" to position the image, which sets the distance of the element from the bottom of the parent container. Instead, you should use "top" to position the image from the top of the parent container. You should also remove the "margin-bottom: 0" from the navbar CSS as it is unnecessary.
Try this:
#image {
top: 0;
height:500px;
width:100%;
object-fit: cover;
}
nav {
display: flex;
align-items: center;
justify-content: space-around;
padding-top: 30px;
padding-left: 10%;
padding-right: 10%;
background-color:cadetblue;
}
I noticed the styling for my .navcontainer class surrounding the navbar said the height of the navbar to be 100vh. I noticed that the .navcontainer class is unnecessary, and deleted the element and the styling, fixing my webpage.
I am designing a website based of this template https://templated.co/linear. The css that defines the content containers with different backgrounds looks like this:
#main
{
position: relative;
background: #fff;
}
.homepage #content
{
text-align: center;
}
.homepage #content header h2
{
}
#sidebar h2
{
display: block;
padding-bottom: 0.50em;
}
#featured
{
position: relative;
background: #f2f2f2;
text-align: center;
}
#featured h3
{
display: block;
font-weight: 300;
}
#featured .pennant
{
font-size: 4em;
}
#featured .button
{
margin-top: 1.5em;
}
I have a svg file with a pattern and a transparent background I would like to display on top of those colors, but spanning the containers without interruption. The way I have been trying to define the following in css:
#spots
{
background-image: url(../images/spots.svg) !important;
}
and then in html:
<div id="spots">
<div id="main">
Text
</div>
<div id="featured">
More Text
</div>
</div>
However the background colors of the containers that the svg is supposed to sit on top of, overrides the background image of the spots tags despite the !important flag. How would I go about getting the pattern configured the way I have described above?
I've read through several posts regarding both overlaying text over an image, AND on centering. None of the answers work for my situation. Below is both the HTML and the CSS I'm using. Frankly - the only thing I've found that will work to center my image UNDER my text is to revert to using tags! I'm frustrated to say the least.
It "should" be really simple, but it's not!
#header
{
height: 140px;
position: relative;
/*background: url('http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg');
background-color: #E7D4DE; for testing background colors*/
background-repeat: no-repeat;
background-position: center top;
font-family: Segoe Script, Lucida handwriting, brush script mt,
monotype cosira, Apple Chancery, comic Sans MS Italic;
top: 10px;
}
}
#header p
{font-size: 1.25em; font-weight: normal;}
#header .imgcenter
{
display: inline-block;
margin-left: auto;
margin-right: auto;
z-index:100;
}
.topcenter
{
position: absolute;
top: -20px;
text-align: center;
width: 100%;
font-weight: bold;
color: #0200a1;
font-size: 1.5em;
text-decoration: none;
}
.topmiddle
{
position: absolute;
top:3.5em;
text-align: center;
width: 100%;
padding: 4px;
color: #c0c0c0;
font-weight: bold;
line-height:1.1em;
}
<div id="header">
<img class="imgcenter" src="http://i105.photobucket.com/albums/m229/ayliea/ColeensDA_Avatar_zps7d63fb7c.jpg" alt="Aylissa" />
<div class="topcenter">
<p>Testing My text overlay with<br />trademark symbol and link<sup>®</sup></p>
</div>
<p class="topmiddle">Second line of text that<br />
needs centered on top of image</p> </div>
But unless I use the old-fashioned tag, I just can't seem to get the darn image to both center AND either show (sometimes it disappears!) or have the text overlay it correctly!
Can anyone help me with this issue?
P.S. I used the suggestions from here: http://www.the-art-of-web.com/css/textoverimage/ to do the overlay.
Thanks for any help.
You are just missing to add text-align: center; to your #header
and, as a note, background-repeat: no-repeat; and background-position: center top; are useless properties in your css as it would just affect any image you add as background-image. It won't do anything with a html img
Second note: you can also get rid of margin-left: auto;, margin-right: auto; and z-index:100; in your .imgcenter for a cleaner css sheet (z-index won't ever work on any element unless you add a position NOT stactic in that element, position:static is the position of every single html element by default.)
I want to place an image under each h2 (some kind of design line). When I use h2:after, the image will show, but after resize the window the image doesn't resize width so it breaks website. Can you help me? Image has 730px x 20px resolution.
What I want:
http://i60.tinypic.com/14buc0z.png
Problem with resize, content image has still width 100% = 730px:
http://i62.tinypic.com/2eywa44.png
My code:
h2 {
padding: 0;
margin: 0;
text-align: center;
text-transform: uppercase;
font-weight: bold;
color: white;
}
h2:after {
content: url(images/separator.png) center;
display: block;
}
Use background instead of pseudo element is a better choice to me.
h2 {
background: url("images/separator.png") center bottom no-repeat;
padding-bottom: 20px;
}
Like above, but you'll need adjust the values until it looks nice.
You can try to use background of the H2 itself:
h2 {
background: url(images/separator.png) center bottom no-repeat;
}
Or to use <hr /> element instead and set its background with image you want.
I have created an image to illustrate my problem:
As you can see. I have a large rounded button. it consists of 3 images. One image is on the right side, another on the left size and another one in the middle.
The left and right images are quite wide because there is a gradient going on in the button so I cannot make them just 5px wide. The problem now is, that the text inside is limited to the middle area. I would like it to stretch across the entire button.
Here are my styles:
#index-navigation ul li a {
height: 96px;
line-height: 96px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: url('/images/btn_grey#2x-right.png') right center no-repeat;
padding-right: 100px;
}
#index-navigation ul li a span.left {
background: url('/images/btn_grey#2x-left.png') left center no-repeat;
padding-left: 100px;
}
#index-navigation ul li a span.middle {
background: url('/images/btn_grey#2x-middle.png') left center repeat-x;
}
How to edit the style to be able to have the anchor take the entire width of the button? Like this:
You have to move your text to a separate span to be able to stretch it across the whole a. Just give your .left and .right the appropriate backgrounds, let the a hold the main bg - http://jsfiddle.net/JutRB/3/
a {
height: 96px;
width: 350px;
text-decoration: none;
font-weight: bold;
font-size: 1em;
color: #333;
background: beige;
border: 2px solid #000;
display: inline-block;
position: relative;
}
a span.left, a span.right {
float: left;
background: yellow;
height: 96px;
width: 100px;
display: inline-block;
}
a span.right {
float: right;
background: pink;
}
a span.text {
position: absolute;
display: block;
text-align: center;
top: 30px;
width: 100%;
}
UPDATE
Or if you want a CSS3 solution and don't care about the older IE-s then you can use the :before and :after pseudo-elements with much cleaner markup - http://jsfiddle.net/JutRB/4/
It's the sliding doors technique, falling out of favour nowadays with border-radius and graceful degradation to the old browsers getting traction in the marketplace.
The a tag in your demo does take the whole area as it wraps the inner 2 spans, you want to make sure you remove the width declaration though so it extends with the text.
If you've got a demo we could debug it a bit more specifically for you.