I'm trying to make a menu button that is an image with text at the bottom, like so:
jsfiddle
On jsfiddle it works fine, but when I load my page "title" element instead of being at the bottom of the parent is on top of it (outside of its parents border): bad
In my code I have a-tags instead of divs, because on jsfiddle it didn't look correct with a-tag, but I don't think it is a problem, because I tried with divs in my code, and the "bug" is still present and the apperance does not change:
<a class="menu-item" href="#">
<p>Title</p>
</a>
After toggling one of titles properties in inspect mode (text-align, width, bottom or margin) off and then on it is now as it should be: good What? Why?
While trying to fix this I found out that when I remove "margin: auto" from .menu-item it no longer happens, but it's obviously not a solution, because now my buttons are not centered.
.menu-item {
margin: auto;
}
I'm a newb in CSS, so only solution that comes to my mind is to toggle one of the properties with JS, but that seems a bit hacky and I'm sure there is a better way. I tried chaning order of styles in .css file, but it did nothing.
So my question is: Why is this happening (not changing anything in css styles, just toggling off and on, changes apperance) and what can I do to fix this?
Edit:
My local files:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head>
<body>
<div class="top">
<div class="left"></div>
<div class="center">
<div class="menu">
<div id="left-mi" class="menu-item" href="#">
<p class="mi-title">Title</p>
</div>
<a id="middle-mi" class="menu-item" href="#"></a>
<a id="right-mi" class="menu-item" href="#"></a>
</div>
</div>
<div class="right"></div>
</div>
<div class="middle">
<div class="left"></div>
<div class="center">
</div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
styles.css
body {
width: 100%;
margin: 0;
background: steelblue;
}
.left, .center, .right {
height: 100%;
display: table-cell;
}
.left, .right {
width: auto;
}
.center {
width: 50%;
margin: auto;
}
.top, .middle, .bottom {
display: table;
width: 100%;
}
.mi-title {
text-align: center;
background: rgba(0, 0, 0, 0.5);
width: 100%;
position: absolute;
bottom: 0;
margin: 0;
}
.menu-item {
height: 80%;
display: block;
margin: auto;
width: 30%;
position: relative;
}
.menu {
margin: auto;
width: 80%;
height: 100%;
background: magenta;
display: flex;
}
/*#region Heights*/
.top {
height: 200px;
}
.middle {
height: 300px;
}
.bottom {
height: 100px;
}
/*#endregion*/
/*#region Borders*/
.top .center, .bottom .center, .middle > div {
border: 1px solid black;
}
.top .center, .bottom .center {
border-top: 0;
border-bottom: 0;
}
.middle .left, .middle .right {
border-left: 0;
border-right: 0;
}
/*#endregion*/
/*#region Debug Colors*/
#left-mi {
background: red;
}
#middle-mi {
background: green;
}
#right-mi {
background: blue;
}
.top .left {
background: rgb(80, 0, 0);
}
.top .center {
background: rgb(160, 0, 0);
}
.top .right {
background: rgb(250, 0, 0);
}
.middle .left {
background: rgb(0, 80, 0);
}
.middle .center {
background: rgb(0, 160, 0);
}
.middle .right {
background: rgb(0, 250, 0);
}
.bottom .left {
background: rgb(0, 0, 80);
}
.bottom .center {
background: rgb(0, 0, 160);
}
.bottom .right {
background: rgb(0, 0, 250);
}
/*#endregion*/
You can do something like this. Keep adjusting the left until you have the button centered. There may be a better solution but I think this works fine.
<a class="menu-item" href="#">
<p>Title</p>
</a>
And the corresponding CSS can be
.menu-item {
width: 100px;
height: 100px;
background: red;
margin: none;
left:43%;
position: relative;
}
I hope this helps
Related
I have been trying to find a workaround to overflow:hidden not applying to fixed elements, and I came across clip and clip-path. As clip is deprecated, I am trying to use clip-path to create the desired effect. I have successfully created the effect I am looking for in both Firefox and Safari, but the clip-path function does not appear to be working in Chrome.
I've included the current HTML and CSS below; the desired effect is for each title and subtitle to only be visible when their respective parent element is in view. If you are viewing on Firefox or Safari this should be working appropriately. However, if viewing on Chrome you should see that the clip-path function is not applying and therefore you can see both titles and subtitles at the same time when viewing the first parent element (the turquoise rectangle).
As you can see in the code, I am using clip-path: fill-box which works in both Firefox and Safari, but not Chrome. I've also tried inset(0), which still works in FF/Safari but it too fails in Chrome.
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
clip-path: fill-box;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
}
.p1, .p3 {
top: 40vh;
}
.p2 {
top: 45vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link href="css/clip.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild p1">
First Title
</p>
<p class="subchild p2">
First Subtitle
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild p3">
Second Title
</p>
<p class="subchild p2">
Second Subtitle
</p>
</Div>
</Div>
</section>
</body>
</html>
I decided to play a little with Javascript. I've changed a little the HTML and the CSS. The subchilds are positioned top: 150px;.
function getY(element) {
var rect = element.getBoundingClientRect();
return rect.bottom;
}
let container1 = document.querySelector(".container_1");
let container2 = document.querySelector(".container_2");
let container3 = document.querySelector(".container_3");
let subchild1 = document.querySelector(".container_1 .subchild");
let subchild2 = document.querySelector(".container_2 .subchild");
let subchild3 = document.querySelector(".container_3 .subchild");
document.addEventListener('scroll', function() {
let bottom1 = getY(container1);
let bottom2 = getY(container2);
let bottom3 = getY(container3);
if ((bottom1 > 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild1.style.display = "block";
}
else {
subchild1.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 > 166) && (bottom3 > 166)) {
subchild2.style.display = "block";
}
else {
subchild2.style.display = "none";
}
//
if ((bottom1 < 166) && (bottom2 < 166) && (bottom3 > 166)) {
subchild3.style.display = "block";
}
else {
subchild3.style.display = "none";
}
});
* {
padding: 0;
margin: 0;
border: none;
}
html {
background-color: black;
}
.info {
list-style-type: none;
margin-left: 13vw;
padding: 0;
overflow: hidden;
position: fixed;
color: white;
z-index: -1;
top: 80vh;
}
.container {
width: 100%;
height: 110vh;
}
.parent {
position: absolute;
width: 100%;
height: 110vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.parent_1 {
background-color: turquoise;
}
.parent_2 {
background-color: tomato;
}
.parent_3 {
background-color: purple;
}
.subchild {
position: fixed;
color: white;
width: 60vw;
left: 14vw;
top: 150px;
}
.container_1 .subchild {
display: block;
}
.container_2 .subchild {
display: none;
}
.container_3 .subchild {
display: none;
}
<section class="container container_1">
<Div class="parent parent_1">
<Div class="child child_1">
<p class="subchild">
First Title
</p>
</Div>
</Div>
</section>
<section class="container container_2">
<Div class="parent parent_2">
<Div class="child child_2">
<p class="subchild">
Second Title
</p>
</Div>
</Div>
</section>
<section class="container container_3">
<Div class="parent parent_3">
<Div class="child child_3">
<p class="subchild">
Third Title
</p>
</Div>
</Div>
</section>
I have a box with a background, which is dimmed when hovered on. There is also a text, which is uncolored (transparent color), I'm trying to set its color to white when parent element is hovered on.
I know this should work:
#someDiv:hover > .someClass {
color: white;
}
But in my code it doesn't. Can anyone point me to the mistake?
jsfiddle here.
HTML:
<div class="row">
<div class="box" style="background:url('http://images6.fanpop.com/image/photos/34000000/Sandor-Clegane-sandor-clegane-34035068-960-640.jpg')">
<div id="overlay"></div>
<div class="hashContainer"><span class="tru">123</span></div>
</div>
CSS:
.box {
display: inline-block;
width: 300px;
margin: 40px;
height: 300px;
background-size: cover;
z-index: -1;
}
.hashContainer {
pointer-events: none;
position: relative;
top: 22%;
}
#overlay {
height: 300px;
width: 300px;
position: absolute;
}
#overlay:after {
content: "";
display: block;
height: inherit;
width: inherit;
opacity: 0;
background: rgba(0, 0, 0, .5);
transition: all 1s;
top: 0;
left: 0;
position: absolute;
}
#overlay:hover:after {
opacity: 1;
}
.tru {
font-size: 70px;
color: transparent;
font-weight: 900;
transition: all 1s;
}
/* not working */
#overlay:hover > .tru {
color: white;
}
/* not working */
.box > .tru {
color: white;
}
In my case, I'm trying to apply color change to the tru class span, while box \ overlay divs are hovered.
The [#overlay] is a sibling of[+] [.hashcontainer and .hashcontainer] the parent of[>] [.tru]
CSS
#overlay:hover + .hashContainer > .tru {
color: white;
}
HTML
<div id="overlay"></div><!----------------[#overlay isn't a parent of .hashContainer but an actual sibling]-->
<div class="hashContainer"><!-------------[.hashContainer is the parent of .tru]-->
<span class="tru">123</span>
</div>
http://plnkr.co/edit/H2Up3Y2YD6fl5uiwQky4?p=preview
Consider the following HTML document:
<html>
<head>
<style>
.someClass:hover { //mention in this manner
background: blue;
}
</style>
</head>
<body>
<div id="id1" class="someClass" >
<h1 id="id2" > HELLO MAN </h1>
</div>
</body>
</html>
The above code works. Color changes to blue when you hover over <div>.
I have a CSS file, mastercss4.css:
#content {
width: 1000px;
height: 800px;
background-color: #b0c4de;
margin-left: auto;
margin-right: auto;
}
#top {
width: 1000px;
height: 141px;
background-color: red;
}
#topleft {
width: 193px;
height: 141px;
background-color: yellow;
float: left;
}
#topmid {
width: 15px;
height: 141px;
background-color: green;
float: left;
}
#topright {
width: 797px;
height: 141px;
background-color: cyan;
float: left;
}
#middle {
width: 1000px;
height: 598px;
background-color: white;
float: clear;
}
#midleft {
width: 188px;
height: 598px;
background-color: aquamarine;
float: left;
}
#midmid {
width: 15px;
height: 598px;
background-color: orange;
float: left;
}
#midright {
width: 797px;
height: 598px;
background-color: blueviolet;
float: left;
}
#bottom {
width: 1000px;
height: 61px;
background-color: blue;
float: clear;
}
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #000000;
}
I have an HTML file, default09.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="test">
<meta name="author" content="Algomeysa">
<title>test</title>
<link rel="stylesheet" href="mastercss4.css">
</head>
<body>
<div id="content">
<div id="top">
<div id="topleft">tl</div>
<div id="topmid"></div>
<div id="topright">tr</div>
</div>
<div id="middle">
<div id="midleft">ml</div>
<div id="midmid"></div>
<div id="midright">mr</div>
</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
what should result is the Red, White, and Blue bars completely overwritten
Top row: Yellow box, thin Green section, Cyan box
Middle row: Aquamarine box, thin Orange section, Blueviolet box
Bottom row: Blue box
What happens instead is the top right cyan box gets dropped down to the middle left, and everything else is staggered.
Can anyone spot what I'm doing wrong?
set topright width to 792px. You have 5 more pixels than your parent container width:
#topright{
width: 792px;
}
clear is not a valid value for the float property. left, right, none, initial and inherit are the only valid values for float.
clear itself is a css property and accepts left, right, both, none, initial or inherit.
It looks like you have a couple of instances of float: clear; in your code. Change those to something like clear: both; and you should be fine.
make it simple just change
float:none
to #topright
and reduce the width of topright as rquired
I´ve got a problem with position:absolute in FF. I´ve got a bar with a width of 100% and two bars with a static width on the left and right side.
I need to do set the inner Bar to 100% to make it responsive. It looks bad when I give percentage-values to the borders.
In Chrome and even IE!!! it´s working fine but Firefox adds both short bars to the right side (like on the picture).
HTML:
<div id="wrapper">
<div class="row-fluid">
<div class="span12">
<div id="slider">
<button class="scrllbtn">〈</button>
<div id="sliderFrame">
<div id="innerSlider">
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
<button class="videoButton">▶</button>
</div>
</div>
<button class="scrllbtn">〉</button>
</div>
<div id="videos"></div>
</div>
</div>
</div>
Styles:
#wrapper
{
width: 960px;
margin: 0 auto;
border: solid 1px red;
}
#slider {
padding-top: 0.4em;
clear:left;
width:100%;
height: 160px;
display:block;
}
#sliderFrame {
width:100%;
height:160px;
overflow-x: hidden;
overflow-y:hidden;
float:left;
border-top: solid 1px #043860;
border-bottom: solid 1px #043860;
}
#innerSlider {
width:950px;
height:200px;
clear:none;
}
.scrllbtn {
position: absolute;
height:162px;
width: 20px;
}
.scrllbtn:first-child {
clear:left !important;
}
.scrllbtn:last-child {
margin-left: -20px;
float:right;
}
.scrllbtn:focus {
outline: none;
}
.videoButton {
float:left;
width:200px;
height:160px;
}
Fiddle
Any suggestetions how I could solve that problem?
somthing like this :)
demo
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
.main {
position: absolute;
width: 100%;
height: 500px;
background: red;
}
.right {
position: absolute;
top: 0;
right: 0;
background: orange;
width: 100px;
height: 500px;
}
.left {
position: absolute;
top: 0;
left: 0;
background: gray;
width: 100px;
height: 500px;
}
Adding the following rule makes it work in my copy of Firefox:
.scrllbtn:first-child {
left: 0;
}
Fiddle
fix problem in your example :)
demo
<button class="scrllbtn scrllbtnleft">〈</button>
<button class="scrllbtn scrllbtnright">〉</button>
.scrllbtnleft {
left: 0;
}
.scrllbtnright {
right: 0;
}
i have a number containers that i want aligned. This is the code i have so far: jsfiddle
First of all, when i run this code from my machine, the "day-label" is double the size that it shows on jsfiddle. the next two ("max-points" and "close-points") are stacked on top of each other and are right text to "day-label", this is as i want it.
Now the next three containers i can't seem to get them lined up, the "points-totals" container i want to be like the "day-label" but to the right of the max and close points. then the next two "thirty-points" and "fifty-points" i want next to the totals.
They should all be on the same line but they're not all the same shape.
Does anyone know what i'm talking about or am i confusing the situation?
I think i'll be able to use "top:X" and "left:X" but i wanted to know if there was an easier way to get them all inline with each other? like the first three containers.
Thanks for the help.
This is a mock up of how i want it to look -
How's this jsFiddle example?
HTML
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
</div>
CSS
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float:right;
}
.thirty-points
{
background-color: red;
width: 10%;
float:right;
}
.fifty-points
{
background-color: gold;
width: 10%;
clear:right;
float:right;
}
I'm not 100% sure what you're trying to achieve but you could try to use the float function in CSS, e.g float:lefthere's a link to W3schools page on float http://www.w3schools.com/cssref/pr_class_float.asp or if you just want them centered you could always try <center>
use this : fiddle
.day-point-container
{
width: 100%;
background-color: pink;
}
.result-headers
{
background-color: green;
}
.day-label
{
background-color: lime;
width: 10%;
height: 10%;
text-align: center;
float: left;
}
.max-points
{
background-color: blue;
width: 50%;
height: 5%;
}
.close-points
{
background-color: purple;
width: 50%;
height: 5%;
}
.points-totals
{
background-color: orange;
width: 20%;
height:10%;
float: left;
}
.thirty-points
{
background-color: red;
width: 10%;
float: left;
}
.fifty-points
{
background-color: gold;
width: 10%;
float: left;
display:inline;
float: left;
}
.clearfix {
clear: both;
}
<div class="day-point-container">
<div class="result-headers">Title</div>
<div class="day-label"><h1>1<small>st</small></h1></div>
<div class="max-points">Max</div>
<div class="close-points">Close</div>
<div class="points-totals">Total</div>
<div class="thirty-points">30 points</div>
<div class="fifty-points">50</div>
<div class="clearfix"></div>
</div>
Update with prettier code
Also- dude, what you look like you're trying to do is display tabular data
If that is the case, there's nothing wrong with using an actual table-- in fact, NOT doing so would be wrong.
html
<section class="container">
<header>
<h1 class="title">Title</h1>
</header>
<ul class="point-container">
<li class="day"><h1>1<span>st</span></h1></li>
<div class="points">
<li class="max">Max</li>
<li class="close">Close</li>
</div>
<div class="results">
<li class="totals">Total</li>
<li class="thirty-points">30 points</li>
<li class="fifty-points">50</li>
</div>
</div>
</section>
css
// ==================
// base
//
//
html{ font-size: 62.5%; }
body{
font-size: 1.6rem;
font: normal normal 100 1.6rem "Helvetica Neue", sans serif;
background-color: black;
}
.container{
width: 90%;
color: white;
margin: auto;
}
// ==================
// layout
//
//
body,
.container,
.points,
.results,
.point-container{
display: flex;
}
.points,
.container{
flex-flow: column;
}
.results{ flex-flow: row;}
.day,
.results li{
flex: 1;
}
.points,
.results{
flex:3;
}
.results li{
text-align: center;
}
// ==================
// colors
//
//
.title{ background-color: #008001; }
.day{ background-color: #00ff00; }
.max{ background-color: blue; }
.close{ background-color: purple; }
.totals{ background-color: orange; }
.thirty-points{ background-color: red; }
.fifty-points{ background-color: gold; }