I have three link <a> elements with a background but half the link isn't clickable because the background overlaps the text. Does anyone know a solution?
Here is an example of what i've done
<html>
<head>
<style>
li
{ list-style-type:none;
list-style:none;
position:relative;
height:100px;
}
#middle
{ width:350px;
background:url("images/middle.png");
left:405px;
height:250px;
padding-top:50px;
background-size:100%;
}
#left
{ left:275px;
width:240px;
height:150px;
padding:150px 60px 0 0;
background:url("images/left.png");
background-size:100%;
}
#right
{ left:580px;
width:235px;
height:150px;
padding:150px 0 0 70px;
background:url("images/right.png");
background-size:100%;
}
#test
{ height:325px;
}
.Item
{ position:absolute;
font-size:33px;
float:left;
margin:15px;
font-family: Georgia, Times, "Times New Roman", serif;
text-align:center;
}
</style>
</head>
<body>
<ul id="test">
<li id="left" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="middle" class="Item">I want to<br>have some<br>text here</strong></li>
<li id="right" class="Item">I want to<br>have some<br>text here</strong></li>
</ul>
</body>
</html>
Add a Z-Index like that :
#middle
{ width: 350px;
background: url("images/middle.png");
left: 405px;
height: 250px;
padding-top: 50px;
background-size: 100%;
z-index: 2;
}
Maybe you could merge the three pictures into one as shown in the page.Then start your layout using the new merged picture as background-image.When I want to build my website,I always draw a sketch of my website.I will treat the test div as a whole and set a background-image attribute for it.Feel sorry for my pool expression.Hope to solve your question.
Related
I am working on some side buttons for a project and would like the link the hover styles for both elements, but am not sure how to go about this. In the example below if I highlight the link name (search) it rolls over and changes to a red text and if I highlight the image, it changes to the rollover image as expected. However what I would like to achieve is to link both so when I hover over the icon the link changes to red as well and vice versa.
#linkchoice{
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#image:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover{
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
I have made a JSFiddle as well here
https://jsfiddle.net/bzsvgwp8/
Thanks
Just update your css from
#image:hover {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkname:hover {
color: #EB0307;
}
to
#linkchoice:hover #image {
background-image: url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color: #EB0307;
}
You will see the combined hover effect !
The first solution could be to use the hover on the parent div:
#linkchoice {
width:100px;
height:100px;
}
#image{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:center;
}
#linkname{
font-size:15px;
text-align:center;
}
#linkchoice:hover #image {
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
}
#linkchoice:hover #linkname {
color:#EB0307;
}
<div id='linkchoice'>
<div id='image'></div>
<div id='linkname'>Search</div>
</div>
in the second solution you can simplify the html using a single div, in this way:
#linkchoice{
width:100px;
height:100px;
}
#linkname{
height:75px;
background-image:url(https://i.postimg.cc/P5nvVtPt/search-icon.png);
background-repeat:no-repeat;
background-size:75px 75px;
background-position:top;
padding-top:75px;
font-size:15px;
text-align:center;
}
#linkname:hover{
background-image:url(https://i.postimg.cc/0jmDrrbB/search-icon-white.png);
color:#EB0307;
}
<div id='linkchoice'>
<div id='linkname'>Search</div>
</div>
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
How do I get border radius to work in IE?
I have an <input type=image> element in my html. In my css I have border-top-right-radius:12px; and border-bottom-right-radius:12px.
Everything works in Chrome and Firefox, but in IE11, the image shows up with square corners instead of rounded corners.
I also have this meta tag in my html:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
The code is below.
CSS:
body .overlay {
background-color: rgba(0, 114, 198,.7);
height:100%;
position:relative;
}
body .layer {
background: url('photo-homebanner.jpg') 55%;
position:relative;
top:0;
left:0;
width:100%;
height:100%;
}
body .goldenDiv {
width:665px;
height:326px;
position:fixed;
z-index:100;
margin-top:-38px;
margin-left:-8px;
}
body h1 {
color:white;
text-align:center;
font-family:sans-serif;
padding-top:22px;
padding-bottom:5px;
font-size:45px;
}
body h3 {
color:white;
text-align:center;
font-family:sans-serif;
font-weight:100;
padding-bottom:14px;
}
body h3.hidden {
visibility:hidden;
padding-bottom:0px;
position:absolute;
top:220px;
left:190px;
}
body input:focus {
outline:none;
}
body .prettyInput {
align-content: center;
padding-left: 20px;
padding-right: 70px;
margin-left: 106px;
width: 350px;
height: 61px;
font-size: 18px;
font-weight: 600;
border-radius: 15px;
border: hidden;
margin-bottom: 40px;
}
body .inputOverlap {
position:absolute;
top:167px;
top:166px\9;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
body hr {
color:white;
position:absolute;
top: 77px;
left:120px;
align-content:center;
}
#-moz-document url-prefix() {
body .inputOverlap {
position:absolute;
top:168px;
left:485px;
z-index:3;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
}
}
HTML:
<body>
<div class="goldenDiv">
<div class="layer">
<div class="overlay">
<h1>Stay ahead of industry news!</h1>
<hr width="450px"/>
<h3>Let us send you the latest from our Marketing Department.</h3>
<input id="emailAddress" type="text" class="prettyInput" required placeholder="Your email address here" />
<input onclick="sendEmail()" type="image" width="57px" height="57px" class="inputOverlap" src="submitButton.jpg" />
<h3 class="hidden" id="hiddenValidation">*Please enter a valid email address.</h3>
<h3>100% privacy, no spam, just news.</h3>
</div>
</div>
</div>
</body>
The issue seems to be with IE's rendering of input[type="image"]- if you give it a border attribute you can see that the image is rendered ignoring the border-radius property.
Easiest way to fix would be to wrap the input[type="image"] in a div, apply the positioning, border, and sizing properties to the div (apply sizing to the input[type="image"] as well), and tag the div with overflow:hidden;.
Stylistic notes (unrelated to the problem):
border-radius: 0 12px 12px 0; means the same thing as
border-top-right-radius:12px;
border-bottom-right-radius:12px;
but is less than half the locs. I suggest only using the verbose versions if you need to adjust only one corner and want whatever the others were set to to be preserved.
The height and width attributes on your image should be set in the CSS not on the input[type="image"]. Those attributes have been frowned upon for a very long time, especially since the CSS ones accomplish the same thing.
I'm trying to reproduce some pieces of CSS from the http://flink.to website, especially the tiles which contains for each article the picture, the title, the author, the link to the author page and the link to the article.
Here is the HTML for one tile :
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about">
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
Here is the CSS for one tile :
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
Everything's OK except that we can't access the article and the "view story" link which is supposed to show up only when we hover the picture, in the middle/center of it.
Edit : Here is a demo : http://jsfiddle.net/5qwejk20/
As the website's CSS sheet of Flink.to is really very complicated, I didn't find how to resolve this. Could you please help me ?
There is a lot of CSS, and obviously it's hard to tell what does what and it will need to be trimmed. But from what I can tell these are the styles making it happen. The button opacity is initially 0 (hidden), so needed to change to 1.
JSFiddle
I added this style to make it show with the cursor
.view-full-module.mod-custom-icon:hover .button.view-full-custom-el {
opacity: 1;
}
By looking at the css the elements are hiding and showing by using the z-index property and CSS Positioning. Try the following code, I use different values of z-index to overlap elements. Remember that the z-index property only is valid for elements with position:absolute,position:relative or position:fixed so you have to scaffold your website having this on mind. I also added an id to the img to select it on the css. http://jsfiddle.net/cfahhmkj/
HTML
<div class="block-module">
<a href="http://flink.to/stories/54b6e61de3039db33f00000b" class="article-link">
<span class="button">View Story</span>
</a>
<img class="albumImage" src="https://cdn01.flink.to/api/image/54f492ec30323921c9000000/300/300/fill">
<div class="block-about" >
<h2 class="block-title">Arch Enemy’s Perpetual Revolution</h2>
<span class="block-stats">
by Andrew Epstein
</span>
</div>
</div>
CSS
.block-module { width: 283px; height: 283px; font-size: 0.9622em; display: block; cursor:pointer; border-radius:0.3125em; overflow:hidden; z-index:4; position:relative; }
.block-about { position:absolute; bottom:0; left:0; right:0; padding:4em 1em 1em 1em; background-image:-webkit-linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); background-image:linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); }
.block-about a { position:relative; z-index:5; }
.block-title { max-width:100%; margin:0 0 0; color: white !important;font-size:1.625em; }
.block-stats { width:100%; margin-top:0.35714em; font-size:0.875em; color:rgba(255,255,255,0.55) !important; }
.button { color:#ffffff; background-color:#337d94; }
.author-link { color:#659dae; }
.article-link {
position:absolute;
left:110px;
top: 120px;
z-index:-1;
}
.albumImage{
position:absolute;
z-index:0;
}
.albumImage:hover{
z-index:-2;
}
I have been working with several solutions on the web and have not found anything that works.
I am trying to do something that should be simple. I am trying to have an image of a "button" underneath an actual button. When I do this, the image always overlaps the button itself.
HTML:
<div id="button"> <!-- Container for my image and button -->
<img src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>
CSS:
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
Instead of using an actual image (which you won't be able to put behind anything), just make it a background image.
CSS:
#button {
height:30px;
padding:3px;
position:relative;
background: url('file:///C:/Users/Hansen/Desktop/Websigte/Images/buttonUnclicked.png');
background-repeat: no-repeat;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
jsBin demo
Use a background image for #button if you want
<div id="button">
<input type="button" value="Roofing"/>
</div>
CSS:
#button {
width:90px;
height:30px;
padding:3px;
position:relative;
background: url(Images\buttonUnclicked.png);
}
#button > input {
position:absolute;
left:5px;
top:6px;
width: 86px;
}
If you adjust the number for the left and the top in the CSS, you can move your picture around. I called the picture #myImage in the HTML. Hope that helps.
CSS
#myImage{
position:absolute;
left:10px;
top:50px;
}
#button {
height:30px;
padding:3px;
position:relative;
}
input[type=button] {
font: 12px verdana,arial,sans-serif;
width: 86px;
float:left;
z-index:0;
}
html
<div id="button"> <!-- Container for my image and button -->
<img id="myImage" src="C:\Users\Hansen\Desktop\Websigte\Images\buttonUnclicked.png" />
<input type="button" value="Roofing" onclick="createImageRoof();" style="position: absolute"/>
</div>