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
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 background that covers the entire screen. Black line is end of viewport.
Main-div is just a container (dark blue) using position absolute.
Top-div (yellow) also using position absolute.
Middle-div (red) also using positon absolute.
Why? Well I want the Middle-div (red) to completely cover the screen vertically. Also only half should be visible - needs to scroll to see it.
Everything works fine, but how can I position the Footer-div (yellow) below the Middle-div (red)?
CSS code for Yellow Footer:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: 0px;
border: 1px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
Right now it sits on the bottom, leaving too much gap above. Problem it must work on different resolutions. Setting bottom: 100px; will only work on this resolution....
Image:
You cannot position elements relative to other absolutely positioned elements unless they are children of said elements, or both children of the same element when you know the position and size of both elements.
If you make the footer a child of the middle div, you can position it absolutely within:
#footy
{
width: 100%;
height: 100px;
position: absolute;
bottom: -100px;
border: 4px solid yellow;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 12px;
}
I don't know all of your other CSS/HTML, but I guessed in a fiddle here, with some exaggeration of borders, etc for visual reference:
http://jsfiddle.net/jtbowden/NuG7T/
You can also create a wrapper around middle and footy:
http://jsfiddle.net/jtbowden/NuG7T/1/
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
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)
First of all, have a look at this example of the layout I'm trying to achieve (below)
Basically, I have a standard center div (gray) with the typical margin: 0 auto. My problem is that I have a background image (on the white overflow area) that is <div id="stripes"> with the following CSS
background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;
This background is applied BELOW the HTML level of the document to the #stripes div.
What I'm having trouble with is setting up the red div below. The plan is for it to stay visible at all times via position: fixed however, I can't use % based right: xx%; top: 0 because the pattern must line up with the striped pattern, so a few pixels offset will create a visible and obvious "seam" on the page.
Here is a look at the effect with the stripes included:
The way I ended up solving this was to create two divs. On the top layer, I used a standaard width: 960px; margin: 0 auto div and then at the end of the document I created another div with the same styles meant to act as a container for the photo (red div above). Inside of the second div I nested a <div id="photo_bg"> div. This div used the following styles:
#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}
the parent div was called #stripes
#stripes {
background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
height: 9999px;
left: 0;
overflow: visible;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}