Images appear to be cut off when the flexslider carousel animation starts.
Can it possible that this problem comes within the flexslider.css style code?
Full code with animation can be found here:
JSFiddle
I'm putting here a partial code of the flexslider.css where the problem is suspected to be.
.flexslider {
width: 250px;
height: 600px;
background: black;
}
.slides {
width: 100%;
height:100%;
padding:0;
padding-left:30px;
}
.slide {
width: 100%;
}
.slide img {
width: 100%;
}
.col{
float:right;
}
#side{
width: 40%;
margin-right: 150px;
margin-top: 0px;
}
I'm able to replicate your issue here: http://codepen.io/anon/pen/akjzx
Now, I'm not sure what's causing the issue since you couldn't get a live demo together. I recommend playing with the following CSS value. It should provide a solution to your problem.
.slides {
width: 100%;
height: 100%;
padding-left: -30px; /* Adjust this value; try a negative value */
}
I also recommend right-clicking the images in Chrome and selecting "Inspect element." This will help you debug the CSS and possibly determine what is causing the image to off.
Specially, you could add:
.flexslider .slides > li { padding-left: 0; }
Related
I am trying to make a responsive blog. Here is my code for my two halves:
.masthead {
background-color: $hot-orange;
float:left;
position: fixed;
height: 100%;
width: 32%;
#include mobile {
text-align: center;
}
}
.main-body {
float: right;
width: 68%
}
Here is the container that is wrapping both:
.container {
margin: 0 auto;
max-width: 1250px;
width: 100%;
}
Am I doing anything wrong? When I open the inspector and highlight both halves, it looks like the right half (the main-body) overlaps with the left slightly. I can't seem to find the issue.
Here is my repo
I have 2 divs with position:absolute set, looking as such:
#nav {
position:absolute;
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%:
height: 100%;
}
The #content div often exceeds the pages size, requiring the user to scroll down.
But the #nav div stops at the bottom of the screen - it does not continue down the page as the user scrolls.
Is there any way to make both divs have equal height (without JQuery)?
You can do this with css tables. (but you'll have to remove position:absolute)
FIDDLE
Markup
<div id="css-table">
<div class="col narrow">some content</div>
<div class="col wide">content</div>
</div>
CSS
#css-table {
display: table;
height: 100%;
}
#css-table .col {
display: table-cell;
padding: 10px;
}
.narrow
{
background: lime;
}
.wide
{
background:aqua;
}
You could try a fixed positioning over the #nav.
So, instead of position: absolute;
try position: fixed only for the first div, i.e. #nav. This should make it always be on the screen no matter how much the user scrolls.
try these css
#nav {
position:absolute;
width: 300px;
padding-bottom: 99999px;
margin-bottom: -99999px;
}
#content {
position: absolute;
width: 70%:
padding-bottom: 99999px;
margin-bottom: -99999px;
}
Since OP has not accepted any answer, m trying my luck.... :)I think the fault is in line width: 70%: for #content....there is : instead of ;...i tried your code here after replacing it in fiddle and looks fine to me :
Fiddle : http://jsfiddle.net/logintomyk/LDh5x/2/
HTML remaining the same, here is the CSS
#nav {
position:absolute;
border:1px solid #000; //to show the different divs
width: 300px;
height: 100%;
}
#content {
position: absolute;
width: 70%; //this was mistake point
height: 100%;
text-align:right; //to show the text
border:1px solid #CCC; //to show the different divs
}
I'm trying to have the background colour of one post expand the width of the browser but to no avail.
This is the site
I've tried
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: absolute;
width: 1200px;
}
and
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: aboslute;
width: 100%;
}
but that affects the whole post and shifts it to the left.
Where am I going wrong?
If I'm understanding your question correctly, you need to add the following to your CSS:
body {
margin:0;
}
Instead of absolute, use 'relative'. Set your width to 100%.
Add the following CSS at the end of your CSS file (or find these rules in your code and amend them to the following):
#site {
padding: 130px 0;
}
#canvas, .content-wrapper {
max-width: none;
}
I've done a bit of searching but I can't find what I'm looking for. I'm using the photoswipe plugin for jquery mobile to scroll my images but I need to have them displayed nicely on my page to begin with. I'd like an iphone-like photo grid like what happens when I click on photos on my iPhone, and then those photos to link into the PhotoSwipe. Also, it needa to be formatted as a for PhotoSwipe.
Is that purely css? If so, could someone help me out with the styling? I'm terrible with css I don't have the mind for design like that. (I understand it, I'm just not good at it).
Any ideas?
<div id="container">
<img src="..." />
</div>
CSS --
#container img {
float : left;
width : 30%;
height : auto;
}
This will put three images on each line, and they will always just-about fill the screen (there should be 10% of the width left-over for spacing).
Here is a demo: http://jsfiddle.net/sy764/
Update
I made the container a UL element and wrapped each image in a LI element. Here is the CSS to make the images display as approximately one third of the page's width:
#container li {
float : left;
width : 30%;
height : auto;
padding : 3px;
}
#container li img {
width : 100%;
height : auto;
}
Here is a demo: http://jsfiddle.net/sy764/1/
Looking at the example at http://www.photoswipe.com/latest/examples/04-jquery-mobile.html, set this on your list elements:
.gallery li {
float: left;
width: 33.33333333%;
}
This sets the width if the li and all its contents.
I'm kind of late for this answer, but this is the exact css values that PhotoSwipe uses in the jQueryMobile example:
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }
#Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }
So, right to the point, here's what I want (minus the poor quality)...
http://www.hbperspective.com/alt3/site.jpg
And here's what I've got...
http://www.hbperspective.com/alt3/
I'm trying to get those two transparent columns to be centered as they are in the pic. With this CSS layout I'm having a heck of a time figuring out how to do that without causing all kinds of other problems. Here is my styling...
* {
padding: 0;
margin: 0;
}
body {
background: #000000 url('background_div.png') repeat-y center top;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto;
}
#wrapper {
background: url('background_header_transparent.png') no-repeat center top;
width: 100%;
display: table;
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.container {
float: left;
position: relative;
margin-top: 100px;
}
.content {
position: relative;
float: left;
}
#contentColumn{
width: 540px;
}
#sidebarColumn {
width: 190px;
margin-left: 20px;
float: left;
display: inline;
}
#contentColumn .content {
width: 500px;
padding: 10px;
}
#sidebarColumn .content {
width: 170px;
padding: 10px;
}
* html #contentColumn .overlay { height: expression(document.getElementById("contentColumn").offsetHeight); }
* html #sidebarColumn .overlay { height: expression(document.getElementById("sidebarColumn").offsetHeight); }
The markup is pretty simple, probably be just easier to look at it from the link provided. So, like I said I'm not really sure what to do at this point to get it working the way I want. Any ideas?
div#container {
width:500px; /* Same width as both columns */
margin:auto; /* Will center the container */
}
div#col1 {
float:left; /* allows side-by-side columns */
width:250px;
}
div#col2 {
float:left;
width:250px;
}
div.clear {
clear:both; /* Stops columns from extending past border of container */
}
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div class="clear"></div>
</div>
And for extra credit, avoid using expressions :) Instead, perform any needed logic like that with javascript, via a framework like jQuery.
There are so many gotchas creating CSS columns I would suggest using a framework instead of rolling your own. There are lots of gotchas which are browser defendant and that you may not see unless you check in IE, FF, Safari, Opera, etc.
A few good frameworks are:
YUI Grids
Blueprint CSS
Blocks (new experimental)
Rules for centering things in CSS:
The thing you're centering must be assigned a width
The margins on that block must be assigned to auto
I have it working on your site in FF3 and IE7 using
div#wrapper {
width:800px;
margin: auto;
}
div#contentColumn
{
margin-left: 20px;
}
If you want to fix up the logo (see top right) then add an extra container div immediately inside the wrapper, and apply the above width/margin to the container (as suggested by Jonathan Sampson.)