Simply put I have this page:
http://www.constantinos.org/portraits/
Each set of thumbnails is a NextGen Gallery and I want to make the galleries break lines if needed so they are not forced to appear as blocks in one line and the galleries will be next to each other instead of one per line.
An image is worth a thousand words so I photoshopped an example of I'd like to do:
http://constantinos.org/example/Screenshot%20from%202013-06-29%2018:01:23.png
this is my CSS for those sets of thumbnails:
#ngg-gallerySingleGallery {
float:left;
display: inline !important;
clear: none;
width: auto;
}
.ngg-gallery-thumbnail img {
background-color: #FFFFFF;
border: 0;
display: block;
margin: 4px 0px 4px 5px;
padding: 4px;
position: relative;
}
Pfff. is doing my headings.. Anyone has any suggestions?
Ok. so the problem is that you have your images grouped by threes in ngg-galleryoverview divs. So, even though they are floated, (both the images and the ngg-galleryoverview divs), your images will always be grouped in threes (You may need to review the box model a bit).
I don't know about how the galleries function—and this may be required markup for them to work properly—but that's why your images aren't flowing the way you want.
In fact, if you make your browser window really wide, you can see that the next three images will jump up to the first line.
So, I guess your best bet would be to place all the images into one gallery, rather than several smaller ones.
Related
I am having a lot of trouble getting my button in a BigCommerce theme to vertically align to the bottom. Since it is a responsive design, absolute positioning doesn't quite get the work done. Unfortunately it is the only thing that seems to move the buttons at all; I've tried all sorts of methods with relative positions and the vertical position will not budge. It seems that the products are listed within a list that functions as a table.
Here is the css for the button itself. I added the stuff below "border" and have tried many different ways as well as tried changing display to inline-block.
.product-grid .ProductActionAdd .button {
display:block;
background: #424546;
border: 1px solid #303334;
position: relative;
vertical-alignment:bottom;
bottom:0;
}
I can provide css for the other parts as well. Below is basically what I'm trying to fix. Those with 1-line product names would have the "in stock" button moved up.
image of buttons and problem
Without the full HTML/CSS or a jsFiddle it's going to be difficult for me to provide you with the complete HTML/CSS solution, but here's what will fix the problem:
Wrap the button and description inside of an element and set position:relative on that wrapper element
Give the buttons the following style: position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 5px;
Set the description to a fixed height and give the wrappers a fixed height
That should solve your issue. Here's an example
I'm having some problems centering my logo in my Omega subtheme. When viewed in "inspect element" (Google Chrome) there's no other CSS being applied to my targets. My branding region stretches the full 12 grids across the page. I don't quite know what I'm overlooking.
Let me know if you need any of the HTML. Below is the CSS I've used:
.branding-data {
width: 960px;
background: #333;
height: 50px;
}
.logo-img.center {
display: block;
width: 200px;
margin: 0 auto;
background: #ccc;
}
For anyone suffering with a similar problem, I record unto the annuls of the internet the solution that I found:
If you don't already have Delta installed (recommended whenever using Omega), do it.
Before you begin, it's best to have your logo be the same size as an even number of Omega's vertical grids. (mine is two).
Since Omega's default logo isn't in a block, the best way to mess with the logo's settings is to use Delta Blocks (admin/config/user-interface/delta-blocks). Check "Logo".
Then go Admin your Blocks, and add the "Logo" block to the "Branding" region.
Go into your Omega theme's zones administration (under "Appearance"), change the region's size to the number of columns your logo is (two in my case), and set the correct suffix and prefix (5 before, 5 after for a logo of 2 grids).
In "global.css," select the branding region, and center the text (code is as follows):
.region-branding {
text-align: center;
}
Then, insure that no float is applied to the logo image, and that it has margin: 0 auto
.logo-img {
float: none;
margin: 0 auto;
}
If it doesn't work the first time, remember to always clear your caches before freaking out.
Credit for helping me find this fix goes to the user "banghouse" on the #Drupal IRC channel.
Hopefully this helps someone.
I'm using Wordpress and user-uploaded images. I'm trying to build a responsive image gallery using Bootstrap but I'm running into some trouble with it:
Picture.png http://img339.imageshack.us/img339/6838/picturehq.png
Also find it on jsfiddle, (make sure to set the output window big enough that they switch to multi-columns)
Some of the real-world challenges and some of my constraints:
The images aren't all going to be the same size
The images shouldn't have to all be the same size
The gallery needs to be responsive (images can shrink/grow, can change from 2,3,4 columns etc)
The captions may be any length, and should be auto-truncated / hidden / etc.
I want the images to have the proper aspect ratios, e.g. no width:100%; height:100%
The captions should somehow line up
What I've Tried
One of the tricky ways that I used to create image galleries before responsive design was to have Wordpress create two images sizes, one with a max-width and one with a max-height, both with a soft-crop, of the size I wanted the gallery thumbnails to be. When generating the gallery I would check to see which didn't overflow the bounds and then use that image for the thumbnail. The other way is to just use an image that is close to the size I want, and then set the image as a background-url for the containing element with position set to center/center. This works great for fixed-width designs, but it doesn't work well for responsive! :)
Plus, as far as I know with responsive design / css there is no way to set the scale of a background image. It also seems more semantically accurate to code up images using, well, an <img> tag instead of a <div> with a background-image set via CSS.
Without responsive design you might also have a fixed column count, so you can do a clear:left on every nth image to keep the weird wrap from happening. But with responsive design the column count may change from 2,3,4 etc.
Also, without responsive design you could use Javascript to loop through the images / thumbnail containers and standardize their heights. Doing this on a responsive design is not impossible, but you have to wait for the page to load completely as the heights are set as percentages to start with and may not be accurate until all the resources are loaded. Then you have to worry about what happens on a window resize or orientation change. This seems like a hack and not the right way to do it.
I also tried setting the min-height areas for the .thumbnail element and setting the <a> containing the image to display:block and setting that to have a min-height as well. Results are better, but still not great:
3 column:
Picture.png http://img818.imageshack.us/img818/9472/picturemk.png
4 column:
Picture 1.png http://img525.imageshack.us/img525/706/picture1uh.png
So, how can I create a good-looking responsive image gallery WITHOUT perfectly sized images?
Though this doesn't require 'perfectly-sized images', it does, for a CSS-only solution, require specifically-sized li elements, with their overflow to hidden (so that the image doesn't have its ratio skewed, though it may be cropped by the parent li container).
Setting the li elements to float: left; in conjunction with the defined width and height allows for a uniform presentation/distribution, with the gallery able to self-adapt and reflow according to the width of the window/parent-ul:
li {
width: 160px;
height: 160px;
padding: 4px;
float: left;
position: relative;
overflow: hidden;
}
li p {
position: absolute;
color: #fff;
opacity: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 0 -1px 0;
}
li:hover p {
opacity: 1;
background-color: #000;
background-color: rgba(0,0,0,0.5);
-webkit-transition: all 1s linear;
}
JS Fiddle demo (with float: left;).
(Removed the display: inline-block solution, since it doesn't appear to allow descendant elements to be absolutely-positioned with regard to the li with that display property.)
If JavaScript solutions are possible, there's also jQuery-required Masonry (and non-jQuery Masonry) and Isotope (requires jQuery), among others.
Although, if you're able to live with the restricted-width of the lis, and somewhat limited cross-browser support compatibility, you could use CSS columns:
ul {
-moz-column-width: 160px;
-moz-column-gap: 0;
-ms-column-width: 160px;
-ms-column-gap: 0;
-o-column-width: 160px;
-o-column-gap: 0;
-webkit-column-width: 160px;
-webkit-column-gap: 0;
column-width: 160px;
column-gap: 0;
}
JS Fiddle demo.
I have a website in which I want to change the space between some elements. I don't know much about CSS. I am a newbie to it. You can see the website here.This is now on a temporary domain name : timepasssite.hostoi.com.
I want to reduce the space between logo and main menu1...Home..Add a Listing..I have to move it up by a small distance.
I also want to move the search box up in the line of the Main Menu1.
I want to move up the Featured Listing up near the earth's photo 4 px distance should be enough. Listing Categories move Up close to Featured Listings 2 px distance..
Can anybody guide me how to do this ?
Here are the Common.css and Style.css files..
Download Common.css Style.css
Image :
I can't paste the files here...I don't know how to...Please download the files for me and provide me the solution!
Generally speaking, you have to use margin, padding or in case of absolute positionning, left, top etc...
In order to reduce the space between your logo and your main menu, you have to reduce (or delete) the padding-bottom in div#logo css property, located on common.css, as this :
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
For your search bar, the css is contained inside the parent div, inline style. You'll have to override the top property in your css file, and giving it -50 as a value for instance.
Now you have the general idea, I think you can manage your other issues.
I strongly suggest you to use Firebug (extension for Firefox / Chrome) though.
Feel free to ask for precisions.
I seen your css. In that padding: 7px 10px 10px; making space between menu and logo, and also you were mention height also.
reduce the padding and also margin-top property.
better post your codes
make this change in common.css to remove bottom spacing of the logo -
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
2, 3
I think
You can use margin-top or bottom property
or padding
In common.css, find this:
div#logo
{
/*width: 185px;
height: 75px;
float: left;*/
text-align: center;
padding:15px 0px;
}
When two values are supplied for the padding attribute, they specify the top/bottom and left/right values. Therefore at the moment there is 15px of padding being applied to both the top and bottom of the logo. (See http://www.w3schools.com/cssref/pr_padding.asp.)
Change the padding:15px 0px; line to padding: 15px 0px 0px 0px; - this will set all padding to 0 apart from the top, which stays at 15px.
You should be able to find a similar solution for your other queries: look for the container id in the HTML, then find the CSS for the id. For example, if the Featured Listing is in <div id="featured">, look in the CSS for div#featured, and edit the padding property there.
On this page, you'll see a blog post that has a thumbnail, tag set and other information in a sidepanel on the left: http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/.
What I am trying to do is to create a black rectangle on this white div, a black rectangle that extends from the top left of the white div to the bottom, just left of the post text.
At first I tried simply creating a two-color image that was one pixel wide and using repeat-y in order to extend the "faux two column" layout from top to bottom. However, this div resizes dynamically, so in many cases the black text from the post ends up running over into this sidebar.
I then tried using the same image in the same way, but giving the white div a "position: absolute" trait. This caused the sidebars on the right to spill over onto the post content.
I want to create this black rectangle to take up any whitespace to the left of the post content.
I have inherited a lot of CSS that I'm not sure how to change. Any advice would be greatly appreciated. `
I will add the style.CSS file here if I can find some way to do so. This is my first time on the site.
Looking into the CSS, it says that everything you said is within its own div:
<div class="info-panel">
With that said, you just make your CSS changes to that class. You'd do something like:
.info-panel {
background-color: #000;
}
But keep in mind that, for it to look good, you should play with the padding and margins for the info-panel and post-content classes as well.
I just made it look better and keep the same overall width by including the following:
.post-content {
background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
padding: 0 4% 30px 1%;
}
.info-panel {
background: none repeat scroll 0 0 #000000;
float: left;
margin-right: 1%;
padding: 2% 0 2% 2%;
width: 29%;
}
The last two code snippets from the CSS are just some advice on what I would do if my solution worked for you. Doesn't mean you have to, so please don't treat it as such. It just keeps the area from looking awful.
It's hard to decipher what exactly you're trying to do, but see if this helps:
.post-content.info-panel {
background-color: black;
padding: 4px;
width: 28%;
}