I have the following SASS code:
ul {
&.threeColList1 {
margin: 30px auto 0 auto;
padding: 0;
list-style: none;
width: 775px;
li {
width: 225px;
height: 330px;
float: left;
text-align: left;
margin-right: 50px;
.name {
margin-bottom: 5px;
}
.position {
margin-top: 0;
font-weight: bold;
}
&.last {
margin-right: 0;
}
}
}
&.threeColList2 {
margin: 0 auto;
padding: 0;
list-style: none;
width: 850px;
li {
width: 225px;
height: 175px;
float: left;
text-align: left;
margin-right: 75px;
h3 { font-size: 1.5em; }
p { font-size: 1.2em; }
&.last {
margin-right: 0;
}
}
}
}
How would you approach DRY'ing this up? If it weren't for the inner li elements such as h3, name, position, DRY'ing it would be pretty straight forward. Your answer will be helpful in understanding more about what you can do with SASS to keep your code DRY.
I converted this from scss to sass format, but I think it should be straightforward enough.
The basics are I would rework the classes on the html to be a little less specific and then just pull things out as it makes sense.
Here's the full refactor:
ul
&.threeCol
padding: 0
list-style: none
margin: 0 auto
li
width: 225px
float: left
text-align: left
&.last
margin-right: 0
&.list1
margin-top: 30px
width: 775px
li
height: 330px;
margin-right: 50px;
.name
margin-bottom: 5px
.position
margin-top: 0
font-weight: bold
&.list2
width: 850px
li
height: 175px
margin-right: 75px
h3
font-size: 1.5em
p
font-size: 1.2em
Related
I can get the sidebar to display properly on some pages but not all. I can't figure out where I've gone wrong.
I've messed around with clearing the floats but I don't fully understand how this works and how to apply it. So the index page displays properly but the about page has the sidebar positioned under the main page content and the space where the sidebar should display is empty.
article::after, #home-two-parts::after {
content:''; display: block; clear: both;
}
#home-main-left {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
/* === HOMEPAGE - Left Top === */
#intro {
margin-bottom: 30px;
}
figure {
margin: 0;
padding: 0;
}
figure img{
display: inline-block;
width: 60%; height: auto;
padding-right: 20px;
}
figcaption {
display: inline-block;
width: 30%;
vertical-align: top;
}
/* === HOMEPAGE - Left Bottom === */
#home-two-parts {
margin-bottom: 50px;
}
#home-two-parts p {
height: 80px;
}
#home-two-parts img {
width: 80%;
height: auto;
}
#about-button, #tutorial-button {
float: left;
width: 45%;
}
#about-button {
margin-right: 30px;
}
/* === ABOUT page ===*/
article::after, #about-extra-two::after {
clear: both;
}
#About {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#about-textWrap img {
float: left;
margin: 0 1em 1em 0;
display: inline-block;
width: 40%; height: auto;
padding-right: 20px;
}
#about-videos {
padding-bottom: 20px;
}
.video {
display: inline-block;
width: 100%;
height: auto;
text-align: center;
}
.video-caption {
text-align: left;
float: right;
display: inline-block;
margin-bottom: 20px;
}
#links {
width: 100%;
padding: 0 10px 0 10px;
}
#more, #directory {
float: left;
width: 30%;
height: 250px;
margin-left: 45px;
padding: 15px;
background-color: #f0c1e6;
overflow: auto;
}
#extra-two {
margin-bottom: 50px;
}
#extra-two h3 {
text-align: center;
color: #ffffff;
background: #191970;
}
#extra-two p {
height: 80px;
width: 70%;
}
#extra-two li {
padding-bottom: 10px;
}
#links {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#links ul {
width: 100%;
text-align: left;
margin: 20px;
padding-bottom: 20px;
}
#links li {
list-style: circle;
}
Guys thanks for your reply, I fixed it!
I looked through the guide to posting a "Minimal Reproducible Example" and decided to go back to square one and check for syntax errors, comparing the pages that work with the pages that didn't.
On each problem page, there was an element positioned incorrectly outside of the main content section that was blocking my sidebar from floating.
Even though you guys didn't "fix" my problem, you made me stop and think, go back to basics and work it out for myself, which is far more valuable because I feel like I really learned something. Thank you! ^_^
I've been struggling with getting my hamburger menu to slowly open. It took me a long time to even create it. :) Can anyone tell me if this CSS code allows for having it gradually open?
http://codepen.io/kiddigit/pen/EKRgQz
#media only screen and (max-width: 700px) {
body {
background-color: #white;
}
img {max-width: 100%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.wrapper {
border: 0px;
padding: 1px;
background-color: white;
}
.content {
background-color: white;
border: none;
margin-left: 100px;
margin-right: 100px;
}
.menu-btn div{
float: left;
padding-right: 0px;
margin-top: 0em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.menu-btn span:last-of-type {
margin-bottom: 0;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
width: 80px;
float: left;
margin-right: 0;
margin: 0;
}
.main-nav {
border: none;
}
a {
font-size: 10px;
color: white;
}
.responsive-menu li {
padding-left: 5px;
font-size: 10px;
line-height: 25px;
list-style-type: none;
background-color: black;
}
.expand {
display: block !important;
}
$( '.menu-btn' ).click(function(){
$('.responsive-menu').slideToggle('slow');
});
UPD: Smooth appearing of element when it changes display from none to block can't be achieved with CSS. JQuery has some functions for that, toggle() and slideToggle(). slideToggle looks better for dropdown as it changes height of element from 0 to its natural height. In brackets you can add animation speed, slow is equal to 600 milliseconds, time in milliseconds also can be used: $('.responsive-menu').slideToggle(500)
Here's what's up. I've got a post that has images, and I'm trying to get them to wrap into the paragraph text, but it's not behaving the way I expect. Any insight? Probably a simple fix that I'm just missing.
Relevant styles
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright, .alignleft { display:inline;}
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption {font-size:10px; max-width:100%;}
Page in question: http://dev.traction.media/mmsheeks/alice/i-spy/
Any pointers?
styles.css:91
.main p {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.3em;
/* float: left; */
margin: 1em auto;
}
I'm starting with HTML and CSS and i have written my first page for my friend. Problem is that my code seems to be pretty bad, cause when i try to change few things, whole page almost crashes.
map of my page:
http://i.stack.imgur.com/0U1lO.png
So here's the thing:
Logo + navigation menu
here's code:
#logo {
margin-left: 15%; }
nav {
float: left;
margin-left: 10%;
margin-top: 1%;
font-weight: bold;
vertical-align: central; }
a {
text-decoration: none; }
nav ul {
list-style-type: none; }
nav li {
float: left;
margin-right: 10px;
}
Slider is only thing made well i think, cause i made it margin-left and right on: auto;
Here starts the fun:
code of news:
.newsy {
font-weight: 900;
font-size: xx-large;
margin-left: 15%;
color: black; }
.image-box {
position: relative;
margin-left: 15%;
width: 640px;
height: 300px; }
.image-box span {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .5);
color: white;
padding: 15px;
}
.community-box {
margin-right: 15% ;
float: right;
}
.baner-box {
float: right;
width: 270px;
height: 500px;
margin-right: 15%; }
.baner-box baner {
margin: 40px;
}
.autor {
border: solid 0px white;
background-color: white;
margin-left: 15%;
padding: 10px;
padding-left: 20px;
width: 610px;
background-color: white;
position: relative;
font-weight: bolder;
font-size: 13px;
font-kerning: normal; }
.readmore {
position:absolute;
bottom: 0;
right: 0;
width: 90px;
padding: 10px;
padding-left: 20px;
background-color: rgba(0,0,0, .9);
color: white;
}
When i try to move them from center to a bit of left whole page is crashing.
Also my community boxes (facebook, YT and twitter) aren't too properly set.
Can anybody help me and say what mistakes I have made ? It's really important.
Greets.
P.S. tell me if you need whole code i can upload package of it.
this may be happen because the width and height's pixel is may be greater than your display's pixel so i suggest you to give it in %
like
.baner-box {
float: right;
width: 40%;
height: 50%;
margin-right: 15%; }
may be work for you
i have recently generated css using Fireworks cs5 and i cannot seem to set my my header full width.I have been trying various solutions but none has worked very well so far.I need Div2 which is my header to be full width.
Here is the code.
#charset "utf-8";
body {
background-color: #fff;
font-size: 62.5%;
margin: 0;
padding: 0;
}
body * {
font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.1em;
margin-top: 0;
}
#main p.lastNode {
margin-bottom: 0;
}
a:link img, a:visited img {
border: none;
}
div.clearFloat {
clear: both;
font-size: 0;
height: 0;
line-height: 0px;
}
li.clearFloat {
clear: both;
}
ul.symbolList {
display: inline;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.AbsWrap {
position: relative;
width: 100%;
}
.rowWrap {
width: 100%;
}
#main {
margin: 0 auto;
width: 960px;
}
#Div {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #333;
width: 960px;
padding-top: 0px;
height: 849px;
}
html > body #Div {
height: auto;
min-height: 850px;
}
#Div2 {
margin-left: 0px;
margin-top: 0px;
display: inline;
float: left;
margin-bottom: 0;
background-color: #e8807d;
width: 960px;
padding-top: 0px;
height: 99px;
}
html > body #Div2 {
height: auto;
min-height: 100px;
}
Remove float:left and display: inline — that should do it. (And the width property, if that doesn't define what you mean by "full width".)