My markup is:
li
.wrapper
p = #album_count
h3 Albums
The above is in Slim
My styles are:
li
+span-columns(3, 12)
+nth-omega(4)
position: relative
color: $body-text
h3
text-transform: uppercase
text-align: center
.wrapper
position: relative
display: table
display: block
width: 100%
height: 0
padding-bottom: 94.6%
+border-radius(50%)
border: 6px solid $white
border: remCalc(6px) solid $white
text-align: center
background-color: #266997
+box-shadow(inset 3px 3px 3px #0B5486)
+box-shadow(inset remCalc(3px) remCalc(3px) remCalc(3px) #0B5486)
&:after
content: ''
position: absolute
left: 10%
top: 10%
width: 80%
height: 80%
+border-radius(50%)
background-color: white
+box-shadow(3px 3px 3px #0B5486)
+box-shadow(remCalc(3px) remCalc(3px) remCalc(3px) #0B5486)
p
position: absolute
display: table-cell
width: 100%
height: 100%
vertical-align: middle
z-index: 10
Basically, I end up with the .wrapper being a specific width due the Compass Susy column it is sat in and the height becomes the same due to the 94% bottom padding. It's 94% due to the h3 underneath. This is something I will be changing but this isn't the issue here.
The problem I have is with the p, I have absolutely positioned it and set it's height and width to be 100% each so it sits on top of the circle .wrapper. That works fine. I then displays the .wrapper as a css table and the p as a css table cell and added vertical-align: middle. This should work as far as I am aware but it is not making any difference at all in this case.
Is anyone able to help?
You can't display as table-cell an absolutely positioned element: relationships between 'display', 'position', and 'float' (CSS2.1 REC)
EDIT: is there a typo in .wrapper? You've 2 instructions involving display and for compatibility reasons with IE6/7 I can understand why you would first display as block for every browser and then for IE8+ as table but here: .wrapper is a div (I think) and it's already block by default and it's written the other way around (table than block so it's block for everybody)
Related
I know it's probably the dumbest question on StackOverflow, but I have a problem with my menu. I want it to be 100% of the page's height, but it's only 100% of the window.
Here is my uncompiled Sass (Compile it yourself if you don't like Sass):
.nav
position: relative
z-index: 0
width: 20vw
height: 100vh
background-color: #EEEEEE
If you need more information (HTML code, etc...) see this link http://codepen.io/arguiot/pen/RGQkmg
It's due to your fixed header. Add its height (15vh) as a margin-top to the .navbar, and subtract that value from the all items margin-top inside the navbar to compensate that moving down.
.nav
position: relative
z-index: 0
width: 20vw
height: 100vh
margin-top: 15vh
background-color: #EEEEEE
.nav-title
position: relative
text-align: center
font-size: 1.5em
top: 5vh
.nav-content
position: relative
margin-top: 10vh
text-align: center
font-size: 1.5em
Here's an edited codepen: http://codepen.io/anon/pen/ORQKQm
I have a simple page with two offcanvas menus, one in which side, they both work normally when in english, but since I also need to support arabic, I use the dir="rtl" in the html tag, and with it the right offcanvas menu have some weird behaviour on Chrome, looks like a repaint issue, when I resize the window it goes to the right position (sometimes it goes randomly after a few seconds as well).
I'm using transform: translateX(); and transform: translate3d(); in the body to achieve this, and as far as I can see there's nothing wrong.
Here's a codepen example of the bug: http://codepen.io/Ghostavio/pen/WbgXXZ
Its a simple thing I did Hope This is your answer
What I did was made the body position Fixd
in body:
position: fixed
Your New CSS will look like this:
box-sizing: border-box
body
padding: 5%
position: fixed /*Changed Here*/
overflow-x: hidden
transition: .3s ease-in-out transform
&.left-offcanvas-active
transform: translateX(270px)
//transform: translate3d(270px, 0, 0)
&.right-offcanvas-active
transform: translateX(-270px)
//transform: translate3d(-270px, 0, 0)
header
text-align: center
position: relative
img, svg
vertical-align: middle
a
text-decoration: none
.logo img
width: 240px
max-width: 100%
.gc
fill: #8E8E8E
.content
text-align: justify
.hamburger-icon
position: absolute
top: 10px
left: 0
cursor: pointer
.second-icon
left: auto
right: 0
.left-offcanvas, .right-offcanvas
witdh: 270px
min-width: 270px
height: 100%
background-color: #BABACA
position: fixed
display: block
top: 5%
.left-offcanvas
left: -270px
.right-offcanvas
right: -270px
.offcanvas-links
display: block
padding: 20px
color: #117EBF
border-bottom: 1px solid #E1E1E1
font-weight: 800
text-decoration: none
span
background-color: #C80428
color: #FFF
padding: 0 5px
border-radius: 2px
font-weight: 400
float: right
Hope this helps you.
I had a similar issue creating a sticky header on a horizontal scrolling table for RTL. What I found is that in order to get position : sticky to work for RTL without JS, I had to assign z-index to both the sticky column (sticky header) and the scrollable columns.
At first I used JS to position everything and add offset padding to get the sticky header effect. But after a walking away in frustration and returning to it days later did I come up with a CSS only solution.
JSfiddle example
I'm New to CSS.
Is there a way to move text within the following span like a non-repeated background-image?
for example: 50px from left, 40 px from left? without causing extra height and width!
div{
width: 300px;
height: 300px;
border: 1px solid black;
}
<body>
<div>
<span>Hello World</span>
</div>
</body>
Can I ask more question? how many space does a 16px character occupies? I mean what does 16px mean? 16pixel wide? 16 pixel height? when we select a character with mouse, there is a blue box around the selected character, which is bigger than that character. is this relevant to this question?
Firstly I think font-size always relates to the height of the letters and the reason the "blue box" is slightly larger is because it is highlighting the line specified by line-height.
To position the text inside your box you have a couple of options:
1) You can absolutely position the span inside the div like so:
div {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
span {
position: absolute;
top: 50px;
left: 50px;
}
http://jsfiddle.net/5xukp/
2) You can set the span's display to block or inline-block and then apply margin or padding to position the span like so:
span {
display: inline-block;
margin-top: 50px;
margin-left: 50px;
}
http://jsfiddle.net/m79as/
EDIT - In response to your comment, there is no property like background-position where you can set it to be center center or center left however you can use vertical-align and text-align to position the text. In order to vertically align the span correctly you will need to set the display to table-cell
div {
width: 300px;
height: 300px;
border: 1px solid black;
display: table-cell;
text-align: center; /* left|right|center|justify */
vertical-align: middle; /* top|text-top|middle|bottom|text-bottom */
}
http://jsfiddle.net/6ExB2/
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
I'm trying to achieve this effect: http://codepen.io/chriscoyier/pen/wxdCD
I'm using SASS (.sass syntax) and haml, and while everything works with sass/haml in CodePen after I revise the code, it doesn't operate in the same way when I apply it to my app. I would like the boxes to float in a grid within the containing div #notecardContainer
Unfortunately I just joined and don't have a reputation score high enough to post a picture, which is rather counter-productive. But here's a link: Screenshot
Essentially, the boxes are appearing within the containing div #notecardContainer, but they are severely offset to the right by about 50% the width of the containing div #drawer Also, they are stacking vertically, not horizontally, and they don't flex with change in the screen size. I'm not sure why it works in CodePen but not in my code.
SASS: (NOTE: the indentation MAY not translate correctly to StackOverflow)
#drawer
width: 680px
height: auto
margin-left: auto
margin-right: auto
#notecardContainer
width: inherit
.ul.box
position: relative
z-index: 1
overflow: hidden
list-style: none
li
position: relative
float: left
width: 300px
height: 150px
padding: 0
border: 1px solid #000
margin: 0 30px 30px 0
background: #fff
&:before,
&:after
content: ''
z-index: -1
position: absolute
&:after
left: auto
right: 10px
HAML:
#notecardContainer
%ul.box
%li
%li
%li