I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.
Related
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
I am creating a Wordpress theme based on the Twenty Eleven theme and can't figure out how to have the navigation bar center automatically so I won't have to constantly update it.
Here is my CSS:
http://pastebin.com/SGvKmXEb
Here is the PHP/HTML:
http://pastebin.com/TBL1nzjV
There may be duplicate properties in the CSS, but only because I am still experimenting with this and testing multiple things...
Thanks in advance for the help!
This Worked for me on the test site you provided
#access li {
float: left; /*delete*/
display:block; /*delete*/
display:inline-block; /*add*/
}
#access ul {
margin-left: 25%; /*delete*/
margin-right: 25%; /*delete*/
width: 1000px; /*delete*/
height: 10px; /*delete*/
margin-bottom: 0px; /*add*/
margin-left: 0px; /*add*/
padding: 0px; /*add*/
}
I'd choose an inline-block approach.
.containerElement {
width: 100%;
text-align: center;
}
.childElements {
display: inline-block;
}
In order to make it work in your code, you need to remove .containerElement (#access ul) fixed height, and .childElements (#access li) floating property.
Within my Wordpress site I have a custom written PHP search. It appears within the Content section of specific pages via 'include' so it's a separate file.
http://www.glutenfreeireland.com/accommodation/find-accommodation/
The entire code for search and results appear within the DIV .wheretoeatsearchwrapper.
Unfortunately a large gap appears between the text "Step 1: Choose a Location:" and the first SELECT box. It is caused by the adverts on the right, which when removed, fix the problem. I understood the class wheretoeatsearchwrapper kept everything within that DIV, i.e. objects either side of wheretoeatsearchwrapper wouldn't affect content inside it?
This is the applicable CSS:
.wheretoeatsearchwrapper {
/*max-width: 490px;*/
clear: none;
margin: 0;
padding-left: 10px;
}
.wheretoeatsearchwrapper h1,h2,h3,h4,h5,h6 {
display: inline;
}
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both;
}
.steps {
color: #339933;
font-weight: bold;
}
.searchvenuetype {
font-size: 95%;
margin: 4px;
float: left;
clear: none;
}
It's the clear:both; on the searchlocation select element.
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
clear: both; // Remove this
}
Remove clear: both for .searchlocation select
.searchlocation select {
font-size: 95%;
margin: 0.2em;
float: left;
/*clear: both;*/
}
I am trying to get a jQuery function to slide li items left and right by clicking an arrow. I am using a jQuery script called TinyCarousel.js. While I have it functioning properly, it continues to scroll right until the last li item is in the first position. What I have currently can be seen here in the "Games Currently Testing or Releasing section" under the main slider. If you scroll all the way to the right you will notice the issue.
Is it possible to either...
1) Change the jQuery to make the last li item stop once it is showing all the way on the right side of the window? I know this would have to be relative to the browser window size as well as make one single partial movement incase the window size has a partial item showing. I also know I would have to know the amount of li items which I can do within the php.
2) Or two, append the li continually so that the slider never seems to end. Just continues through repeating over and over? I would guess that I need to continually append li items as well as remove them if they are off screen.
I attempted to create a jFiddle to show the issue. But it is doing something all together different on jFiddle which is closer to what I need. It seems to stop moving right at some point. But it does not need the entire last li to display completely. What is it doing differently than what I have on the live site where it does stop?
Any help is greatly appreciated. I did search and found this but it did not seem to work in this situation. Thank you in adavnce.
I have am using jQuery 1.10.2, php 5.4, TinyCarousel.js version 1.9
Here is what I have currently.
The CSS
.PrevArrow {
width: 5%;
float: left;
margin-top: 20px;
}
.NextArrow {
width: 5%;
float: right;
margin-top: 20px;
}
.ListImage img {
margin-top: 5px;
margin-bottom: 10px;
}
#slider-code .viewport {
float: left;
width:90%;
height: 95px;
overflow: hidden;
position: relative;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#slider-code .buttons {
display: block;
margin: 0px 10px 0 10px;
float: left;
}
#TickHead {
margin-top: 3px;
}
#slider-code .prev {
margin: 0 10px 0 10px;
}
#slider-code .next {
margin: 0 10px 0 10px;
}
#slider-code .disable {
visibility: hidden;
}
#slider-code .overview {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.TestingTickerText {
vertical-align: top;
color: #666666;
font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 10px;
}
#slider-code .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 65px;
width: 105px;
left: 0;
}
#slider-code .pager {
overflow:hidden;
list-style: none;
clear: both;
margin: 0 0 0 45px;
}
#slider-code .pager li {
float: left;
}
#slider-code .pagenum {
text-decoration: none;
text-align: center;
padding: 5px;
color: #555555;
font-size: 14px;
font-weight: bold;
display: block;
}
#slider-code .active {
color: #fff;
}
The php
<div id="slider-code">
<div class="PrevArrow">
<img src="Link to Left Arrow"/>
</div>
<div class="viewport">
<ul class="overview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
etc...
</ul>
</div>
<div class="NextArrow">
<img src="Link to Right Arrow"/>
</div>';
<center>
<span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
</center>
</div>
The jQuery
(function ($) {
$(document).ready(function(){
$('#slider-code').tinycarousel({ display: 1});
});
}(jQuery));
I think the problem you're having is due to css positioning of the images. Try adjusting the margins so that they will be placed slightly further away from each other; so that when no image is appended the slider will stop and there will be no space. If thats not the issue, try this:
1:
Create a div and place all of the slider images in it.
2:
Give each arrow button a separate div and class.
3:
Use the jquery append function to dynamically add images to the slider class when a user clicks either button.
$(document).ready(function(){
$('.arrowbutton').click(function(){
$('.imageslider').append('.image');
});
});
Also, remember to give your image slider a set width in css, and set overflow to hidden. That should make sure no appended images go outside of the slider, and no scrollbars appear.
I am trying to make a website for my school, and I am working on getting a area where there is a content area and also a sidebar. As you can see here: lrch.harrisonbh.com and I want the top of "Header 1" to match the top of "Sidebar." I put the css on a jsFiddle here: http://jsfiddle.net/GHpux/
I am using the css code here:
div.body{
width: 1047px;
margin-top: 210px;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
div.content{
background-color: #dbdbdb;
width: 750px;
max-width: 750px;
float: left;
padding: 15px;
margin-right: 15px;
z-index: 1;
display: inline-block;
}
div.sidebar{
background-color: #dbdbdb;
width: 215px;
float: right;
position: absolute;
padding: 15px;
display: inline-block;
}
But I get the undesired effect of the divs not matching up as you can see on the jsFiddle or my website. Im wonderding what is wrong with this? Thanks. I have tried many things. Thanks
Nice site, by the way. Sorry I didn't see the question. The fix is:
You need to remove the <br /> before the .sidebar.
Refer the screenshots.
Removing it makes it look this way:
Remove the <br> before sidebar, remove position:absolute and float:right from the sidebar and add vertical-align:top to sidebar and content.
http://jsfiddle.net/GHpux/1/