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;
}
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! ^_^
So here is the css code and when i go to developer tools (Mozila) the code isn`t executed in responisve mode as it should.
The margin-left:auto; is underlined as u can see in the picture that i uploaded.
I am new to responsive design.If you wanna see the whole project(page) click here, please help.
Developer tools image
#media screen and (max-width: 750px) {
img {
margin-left: auto;
}
}
body {
margin: 0;
overflow: auto;
background-color: #a6a6a6;
}
img {
margin-left: 40%;
}
p {
text-align: center;
font-size: 1.2em;
}
ul {
font-size: 1.3em;
margin-left: 15%;
margin-right: 15%;
}
small {
text-align: center;
margin-left: 45%;
}
hr {
display: block;
height: 1em;
border: 0;
border-top: 0.1em solid #4d4d4d;
margin-right: 10%;
margin-left: 10%;
padding: 0;
}
#title {
float: left;
text-align: center;
background-color: #cccccc;
width: 100%;
top: 0;
position: fixed;
margin-left: 0;
font-size: 1.25em;
}
#content {
background-color: #e6e6e6;
margin-left: 5%;
margin-top: 10%;
margin-right: 5%;
margin-bottom: 6%;
}
#e {
font-size: 2em;
}
#timeline {
font-size: 1.5em;
}
#sources {
font-size: 1.8em;
}
#Author {
font-size: 1.6em;
}
a {
cursor: pointer;
text-decoration: none;
}
a:visited {
cursor: pointer;
text-decoration: none;
color: blue;
}
a:hover {
cursor: pointer;
text-decoration: none;
}
Order of declarations in CSS matters. Move the media query BELOW the img { margin-left:40%; } and it should work.
The media queries you see in style sheets tend to be better placed at the bottom. Place
#media screen and (max-width:750px){
img{
margin-left:auto;
}
}
underneath the last CSS declaration
I have a footer divided into 2 rows, i.e footer-top and footer-bottom.
footer-top has text which aligns in center perfectly. However footer-bottom has menu which is not center-aligned.
My html:
<div class="page-wrap">
<footer>
<div class="footer-top">
Copyright
</div>
<div class="footer-bottom">
<ul class="footermenu">
<li>LEGAL</li>
<li>PRIVACY</li>
<li>COPYRIGHT</li>
</ul>
</div>
</footer>
</div>
My css:
.page-wrap {
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
footer {
width: 100%;
background-color: #8DC63F;
display: block;
float: left;
clear: both;
text-align:center;
}
.footer-top { width: 100%; float: left;padding-top:10px; color: #FFFFFF;}
.footer-bottom {
width: 100%;
text-align: center;
float: left;
display: inline-block;
}
.footermenu a {
color: #FFFFFF;
float: left;
font-size: medium;
list-style-type: none;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
.footermenu li {
width: auto;
float: left;
text-align: center;
list-style-type: none;
text-decoration: none;
}
.footermenu {
text-decoration: none;
width: auto;
text-align: center;
}
and here is the
DEMO
You should add display: inline-block to .footermenu
Example...
Try this and see if it works for you:
Demo Fiddle
I agree with the other answers that you should use inline-block, but to do so you'll need to comment out the float entries, and rely on text-align: center.
CSS, I've gone ahead and commented out the styles you probably don't need:
/* new css */
.footermenu li {
display: inline-block;
margin-bottom: 10px;
}
/* old css */
.page-wrap {
width: 100%;
height: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
footer {
//width: 100%;
background-color: #8DC63F;
//display: block;
//float: left;
clear: both;
text-align:center;
}
.footer-top {
//width: 100%;
//float: left;
padding-top:10px;
color: #FFFFFF;
}
.footer-bottom {
width: 100%;
//text-align: center;
//float: left;
//display: inline-block;
}
.footermenu a {
color: #FFFFFF;
//float: left;
font-size: medium;
//list-style-type: none;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
}
.footermenu li {
//width: auto;
//float: left;
//text-align: center;
list-style-type: none;
//text-decoration: none;
}
.footermenu {
//text-decoration: none;
//width: auto;
//text-align: center;
}
you need to change your footer menu css
.footermenu {
text-decoration: none;
width: 266px;
margin: 0 auto;
text-align: center;
}
fiddle : http://jsfiddle.net/dT6sC/4/
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
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".)