I've been looking around and can't seem to find anyone with the same issue on here.
I'm rather new to CSS3, and I'm not sure what's up, but the text and links aren't working and you can't highlight the text. Here's the example:
http://503rephotography.com/_temp/test1.html
And I'm in the process of doing the rest correctly - right now there are a lot of workarounds using old HTML to position images, etc., so I'll fix all of that later! :)
If anyone has any ideas or tips, I would greatly appreciate any insight. Thanks in advance!
Trevor
The z-index is keeping the text below other items on your webpage.
If you change the z-index, for example, of your menu in main.css to 1 you should be able to highlight and click the links.
div.menu
{
font-family: CapsuulaRegular;
color:#fff;
line-height:54px;
width:22%;
height:100%;
padding:0px;
border:none;
border:0;
margin:0px;
background: transparent url('55.png');
font-size: 2.25em;
style=display:block;
position:fixed;
left:70px;
top:0;
bottom:0;
z-index:1;
}
Related
I'm working in a website with a mobile menu, so had to use a hamburger icon to it.
I found 3 ways:
Use FontAwesome or some lib like thatUse a SVGUse the three bars charactere
I exclude from my options because Font awesome library is a very big lib to use just a simple icon. So I figure out this charactere: ≡. So I thought: "Omg, i just have to put it on my HTML and it's ok!"
But I was thinking that it is maybe too easy to be true. So i had to come here and ask you guys: Is this correct? Is this supported by browsers in a large scale? Is there a better way to just use a simple icon?
Thanks!
There is truly no right answer for this but here is a simple solution if you only need the three lines.
.burger{
border-radius:0;
border:0;
width:15px;
height:2px;
background:rgb(0, 0, 0);
position:relative;
display:inline-block;
padding:0;
}
.burger:after,
.burger:before{
content:'';
width:inherit;
height:inherit;
background:inherit;
position:absolute;
top:4px;
left:0;
}
.burger:before{
top:-4px;
}
<button class='burger'></button>
I was wondering if anyone could help with a problem I'm having on the site I'm creating for my upcoming travel plans. I have been following a Udemy web coding class, and know the basics of html, and css. Enough to make this website. If there's any tips or constructive criticism on my code I'd greatly appreciate it.
http://www.daltoninjapan.com is the live site. It seems to be at the bottom of all three pages and I think it might have something to do with either a Script, or my "TOP" button. Thanks.
Your question is poorly structured, but I think I deciphered what do you want to do. Instead of:
#topbutton {
float:right;
align:bottom-right;
width:45px;
height:45px;
background-color:gray;
border-radius:5px;
margin:10px 10px 40px 10px;
}
use this
#topbutton {
position:fixed;
bottom:0px;
right:0px;
width:45px;
height:45px;
background-color:gray;
border-radius:5px;
margin:10px 10px 40px 10px;
}
position:fixed will ensure that element is always at the same position and it takes the element out of flow. You can learn more about element positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position.
I am creating a web page that needs to be responsive.
Here is an image of it:
Here is the HTML:
<div class="smallBoxes">
<div class="leftHomeBox">
<a class="Description" id="Desc_1">WHEN?</a>
</div>
</div>
and the CSS:
.smallBoxes{
display:block;
margin-left:25%;
margin-right:20%;
width:auto;
}
.leftHomeBox{
width:100%;
float:left;
margin-bottom:10px;
padding:10px;
padding-bottom:0;
height:65px;
}
.Description{
border:5px solid #ffffff;
padding:5px;
}
I am trying to keep the "when" box in the centre of the div, for all screen sizes. AS things are now, both margins will change, but at different rates eg they do not stay consistent relative to each other and so the "when" box doe s not stay central.
I have looked at other websites and have not been able to find a working example.
I have tried using
margin-left:20%;
margin-right:20%;
width:auto;
but this does not work. I have been working on this all day and I have read all I can find but I cannot seem to get this to work. I have tried every possible thing I can think of.
Surely this is something that is required often and cannot be very difficult to achieve, but I am not able to find a clear answer to how to achieve this, or what I am doing wrong.
If someone could provide a fiddle of a working solution I would be very grateful.
use
CSS
.leftHomeBox{
text-align:center
}
DEMO
.Description
{
display:block;
margin-left:auto;
margin-right:auto;
}
This should be work.
You can apply a text-align: center on an <a> tag.
.leftHomeBox{
text-align:center
}
It will center the link without using margins
I have a tile on my website that flips over when i hover over it. On the back of the first i attempted putting a button. The button hangs off of the bottom and im not quite sure how i can get it below the paragraph i have on the back of the tile. Also, i can't get the header of the tile centered. I tried using
text-align:center;
but that doesn't seem to work.
Here's the code i'm writing up. So if you run it and hover over the first black tile you'll see the text 'eternally rustled'. That's the problematic tile. Any help would be appreciated. Thanks.
I think I have your fix! Using what you gave us I just added two things to the "btile" portion of the CSS so it looks like the one below:
#btile {
width:350px;
text-align:center;
}
and to fix your header problem, I simply added width to the code below:
.webname {
width: 350px;//I added this
font:800 17px/17px"open sans";
color:#333;
text-transform:uppercase;
text-align:center;
border-top:1px dashed #888;
z-index:50;
position:absolute;
text-align:center;
}
Where does the width come from? It's the size of your picture! Just make sure the div width is the same size of the picture and you're set. Here is a JsFiddle that can show you exactly what I did! Let me know if it doesn't work! :)
I have created a stack of div tags and used z-indexes to make them appear behind each other.
They overlap enough for them all to be visible and mouse-overable. I then assigned a :hover to change the z-index and make the div tag which is being hovered over come to the top of the pile.
An example of what I have would be...
CSS
#red-box {
position:fixed;
width:170px;
height:210px;
margin-left:70px;
top:40px;
background-color:red;
z-index:3;
}
#red-box:hover {
z-index:5;
}
#blue-box{
position:fixed;
width:170px;
height:210px;
margin-left:150px;
top:70px;
background-color:blue;
z-index:2;
}
#blue-box:hover{
z-index:5;
}
HTML
<a id="red-box"></a>
<a id="blue-box"></a>
I have also created a jsFiddle to help highlight what's going on.
This works great in the latest versions of all the browsers but the div tags' z-indexes do not change in IE8.
Could anyone help me fix it?
This ought to fix it:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Basically, just set it to a ridiculously high number.
Edit: I just tested this in my version of IE on your JSFiddle, and it worked.