Having some issues trying to create a fixed header layout for this jsfiddle:
http://jsfiddle.net/4xk4D/107/
Basically, I'd like the id element app-header-container to be fixed on the page.
I used this article as a reference but no luck yet!
NOTE: I am using SCSS in the jsfiddle.
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
Trying to modify your css:
#app-header-wrapper
{
width: 1024px;
margin: 10px auto;
background-color: pink;
}
#app-header-container
{
}
#app-main-nav
{
background-color: pink;
}
#app-header
{
height: 93px;
background-color: blue;
}
#app-access
{
background-color: green;
}
#app-content-container
{
width: 1024px;
margin: 10px auto;
background-color: red;
}
#app-content
{
float: left;
width: 739px;
background-color: yellow;
}
#app-sidebar
{
float: right;
width: 275px;
background-color: orange;
}
#app-footer
{
margin: 0 auto;
width: 1024px;
height: 50px;
background-color: pink;
}
.clearfix:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
Or just try using css grid for layouting. One of them http://1kbgrid.com/
#app-header-wrapper {
width: 1024px;
margin: 10px auto;
background-color: pink;
#app-header-container {
#app-access {
background-color: green;
}
#app-header {
height: 93px;
background-color: blue;
}
#app-main-nav {
background-color: pink;
}
}
}
You can not nest CSS that way. Much of the CSS is being ignored due to how you've got it nested and sub nested between brackets. Markup shoul dbe selector { property } or selector, selector, selector { property }
Related
Can someone help me how can I move my footer to the bottom using position: relative?
FOOTER PROBLEM PHOTO
#page-footer {
.list-inline {
display: none;
}
}
.s-footer {
background-color: $primary;
margin-top: auto!important;
padding: 0px !important;
border-top: 1px solid $primary;
font-size: 0.875rem;
color: $default;
.tool_dataprivacy {
display: none;
}
.helplink {
display: none;
}
}
.c-container {
width: 100%;
text-align: center !important;
}
This is the code from the theme, i haven't made any changes from that code. Thank you!
You need to set min-height to container
.c-container {
width: 100%;
text-align: center !important;
min-height: 80vh; //adjust this accordingly
}
Or make the footer fixed
.s-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
I am using scss.
On situation like this, how can I change target element's style on hover child element?
https://codesandbox.io/s/thirsty-haibt-60yph
.parent {
// some styles..
.child {
// some styles..
}
}
.target {
// some styles..
}
I tried using #at-root inside the child, but couldn't figure out. (code below)
.target {
height: 100px;
width: 100px;
background-color: blue;
}
.parent {
height: 200px;
width: 200px;
background-color: red;
.child {
height: 100px;
width: 100px;
background-color: yellow;
&:hover {
#at-root .target {
background-color: green;
}
}
}
}
Kindly help..
the message given is clear, #root cannot be used that way.
but you can trick css via pointer-events:
body {
.parent {
height: 200px;
width: 200px;
background-color: red;
pointer-events:none;
.child {
height: 100px;
width: 100px;
background-color: yellow;
pointer-events:auto;
}
&:hover {
background-color: green;
}
}
.target {
height: 100px;
width: 100px;
background-color: blue;
}
}
or did you mean
body {
.parent {
height: 200px;
width: 200px;
background-color: red;
pointer-events:none;
.child {
height: 100px;
width: 100px;
background-color: yellow;
pointer-events:auto;
}
&:hover ~ .target {
background-color: green;
}
}
.target {
height: 100px;
width: 100px;
background-color: blue;
}
}
I'm getting an error I can't correct when testing with Rspec and Capybara in my rails app.
Failure/Error: visit('/')
ActionView::Template::Error:
Invalid CSS after " text-indent:": expected expression (e.g. 1px, bold), was "}"
It says the error is occurring in app/assets/stylesheets/application.css. I have nothing in there as of yet and cannot locate the issue. I think the error(based on what I've read) may have something to do with my css or scss file extensions. I've tinkered with them a bit with no change so here I am asking for help.
My registration_spec.rb
require 'spec_helper'
describe "Signing Up" do
it "allows a user to sign up for the site and creates the object in the database" do
expect(User.count).to eq(0)
visit('/')
expect(page).to have_content("Sign Up")
click_link "Sign Up"
fill_in "First Name", with: "John"
fill_in "Last Name", with: "Smith"
fill_in "Password", with: "password123"
fill_in "Password Confirmation", with: "password123"
click_button "Sign Up"
expect(User.count).to eq(1)
end
end
Here's my style.css
#about {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#about-content {
text-align: left;
}
#article-image {
float: left;
}
#article-links {
list-style-type: none;
}
#article-links a {
font-weight: bold;
color: #3f4944;
text-decoration: none;
}
#article-links img {
margin-right: 20px;
}
#article-show {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
.bit-5 {
background: white;
padding: 20px;
text-align: center;
border: 2px solid #57645d;
color: #606e67;
float: right;
display: block;
}
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent:
}
.clearfooter {
height: 330px;
clear: both;
}
#contact {
background: #efeddf;
padding: 20px;
border: 2px solid #57645d;
}
#contact-content {
text-align: left;
}
footer {
position: relative;
width: 100%;
height: 330px;
background: #3f4944;
}
html,body {
background: #efeddf;
height: 100%;
}
#title a {
color: #555;
text-decoration: none !important;
}
#main-header {
height: 180px;
background: #57645d;
position: fixed;
top: 0px;
margin: auto;
z-index: 100000;
width: 100%;
}
#main-nav ul {
text-align: center;
margin-top: 120px;
}
#main-nav ul li {
padding-left: 10px;
display: inline-block;
margin-right: 20px;
}
#main-nav ul li a {
text-decoration: none;
color: #efeddf;
font-size: x-large;
}
#new-article-path a {
font-weight: bold;
color: #3f4944;
}
#recent-article li {
list-style: none;
}
#recent-article li a {
color: #57645d;
text-decoration: none;
}
My grid(lemonade.css)
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
/* Set the width of the grid */
.frame {
margin: auto;
width: 1100px;
margin-top: 200px;
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
/* Attribute selector */
[class*='bit-'] {
float: left;
padding: 0.3em;
}
/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
float: right
}
/* Clearfix */
.frame:after {
content: "";
display: table;
clear: both
}
/* Main Widths */
.bit-1 { width: 100% }
.bit-2 { width: 50% }
.bit-3 { width: 33.33% }
.bit-4 { width: 25% }
.bit-5 { width: 20% }
.bit-6 { width: 16.6666666667% }
.bit-7 { width: 14.2857142857% }
.bit-8 { width: 12.5% }
.bit-9 { width: 11.1111111111% }
.bit-10 { width: 10% }
.bit-11 { width: 9.09090909091% }
.bit-12 { width: 8.33% }
.bit-75 { width:75%}
.bit-25 { width:25%}
/* Landscape mobile & down */
#media (max-width: 30em) {
.bit-1,
.bit-2,
.bit-3,
.bit-4,
.bit-5,
.bit-6,
.bit-7,
.bit-8,
.bit-9,
.bit-10,
.bit-11,
.bit-12 {
width: 100%;
}
}
/* Portrait tablet to landscape */
#media (min-width: 30em) and (max-width: 50em) {
.bit-4,
.bit-6,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
.bit-1,
.bit-2,
.bit-3,
.bit-5,
.bit-7,
.bit-9,
.bit-11 {
width: 100%
}
}
/* Landscape to small desktop */
#media (min-width: 50em) and (max-width: 68.750em) {
.bit-2,
.bit-7 {
width: 100%
}
.bit-4,
.bit-8,
.bit-10,
.bit-12 {
width: 50%
}
}
Im still pretty new at all this so any help/and or criticisms would be appreciated. Thanks.
Your style.css is invalid which is causing following error:
Failure/Error: visit('/') ActionView::Template::Error: Invalid CSS
after " text-indent:": expected expression (e.g. 1px, bold), was "}"
In your style.css, for class .bit-75, you forgot to set value of text-indent property
.bit-75 {
background: white;
padding: 20px;
text-align: left;
border: 5px solid #57645d;
color: #606e67;
text-indent: // <-- set a value here for eg : 10px;
}
code pen
HTML
<div id="header">header</div>
<div id="body"><div id="content">content</div></div>
<div id="footer">footer</div>
CSS
#header {
background-color: red;
}
#body {
background-color: orange;
}
#content {
width: 500px;
margin: 0 auto;
background-color: yellow;
}
#footer {
background-color: blue;
}
body {
display: table;
height: 100%;
width: 100%;
}
#header,#footer,#body {
display: table-row;
height: 1px;
}
#body {
height: auto;
}
#content {
/* ??? */
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}
This answer provides some good solutions when just the top-level div needs to be stretched, but in my scenario, I can get #body (orange bg) to stretch but I need #content (yellow) to stretch all the way down as well.
How can I do that?
Demo http://codepen.io/anon/pen/Bltbh
#header {
background-color: red;
}
#body {
background-color: orange;
height:100%;
}
#content {
width: 500px;
margin: 0 auto;
background-color: yellow;
}
#footer {
background-color: blue;
}
body {
display: table;
height: 100%;
width: 100%;
}
#header,#footer,#body {
display: table-row;
}
#header,#footer {
height:1px;
}
#body {
height: 100%;
}
#content {
height: 100%;
}
html,body {
margin: 0;
padding: 0;
height: 100%;
}
I have a div below two floating divs (one floating left and the other right). As I opened up the element inspector I noticed something odd. Why is it that a div below that with the css property clear: both overlaps the top two? Also, when I change the height of the div, the element inspector shows that the div no longer contains its contents. Here are two screenshots to show what I mean. The code is below the screenshots.
No height set in css:
Height of class "tags" set to 200px in css:
HTML for page
CSS for page
You have syntax errors in your CSS. You have some classes inside of other classes which won't work and also you have some unclosed brackets. I fixed it below
#container {
width: 900px;
min-height: 500px;
margin: auto;
background: #DDDDDD;
}
.entry {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.title {
text-align: center;
}
.name {
padding: 0px 10px;
}
.tag {
display: inline-block;
}
.link {
border: 1px solid black;
display: inline-block;
padding: 10px;
text-decoration: none;
}
.info {
width: 610px;
margin: auto;
}
.input-text_area {
width: 300px;
height: 250px;
padding: 0;
border: none;
resize: none;
}
.input-text_field {
width: 300px;
padding: 0;
margin: 0;
border: none;
}
.input-button {
width: 75px;
height: 50px;
margin: 2px 0px;
display: block;
float: right;
}
select {
float: right;
margin: 0px;
}
.right_half {
float: left;
padding: 1px;
height: 300px;
width: 300px;
}
.left_half {
float: left;
padding: 1px;
height: 300px;
}
.tags {
height: 200px;
}
label {
display: block;
}
.text_field {
width: auto;
}
.block-label {
display: block;
}