i am working on a grid view for image gallery
this is what i did so far but there are still vertical spaces between some of the photos
CSS:
#container{
background-color:transparent;
top: 60px;
left:8%;
height:100%;
border:1px solid ;
width: 82.19%;
position:absolute;
outline: 0;
}
.box {
background-color:#3e3e3e;
border:1px solid #bebebe;
margin: 6px 3.5px;
width:362px;
display:block;
float:left;
border-radius:3.6px;
}
.box:nth-child(2n + 0) {
float: right;
}
how i am applying it:
<div id='container'>
<?php
(some php & mysql here)
echo "<div class='box'><img src='pictures/$image' width='360' ></div>";
</div>
?>
i can't figure out the proper css to create a grid view with no extra vertical spaces.
images have varying heights fixed width, the space i m talking is that space which is not letting grid structure to form properly the vertical distance b/w some photos is alot more than it should be
Is there anybody who can help me?
NOTE: Don't suggest any jquery plugins i want to use pure css
Related
I started making a new WordPress theme with Bootstrap when I stumbled across a problem.
I found out that when I create a new post with some text and an image at the top(Aligned to left) then the image is actually not aligned.
The image is in the top left corner and the text is underneath it.
I searched on Google and read blog posts and so on.
Most people suggest adding some styling in style.css that would align the text.
Example:
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; }
Of course, this aproach didn't work for me so I checked and I think that the problem is because these classes work only if applied to image tag.
When accessing the_content() function, the image is printed inside a div tag.
<div id="attachment_66" style="width: 310px" class="wp-caption alignleft">
<img class="size-medium wp-image-66" src="path/to/img" alt="Sphere" width="300" height="169" sizes="(max-width: 300px) 100vw, 300px">
<p class="wp-caption-text">Who doesn’t like spheres?</p>
</div>
If the problem really is because of those tags, how can I get alignment classes to be applied to img not div tags?
This is how it looks.
Thanks to #Andrei Gheorghiu I managed to solve the issue and I am gonna answer my question.
Premade WordPress themes have some css that I haven't included.
So, this is what you need to include in you style.css
.alignleft { float:left;}
.alignright { float:right;}
.aligncenter { display: block; margin: auto; }
Instead of creating the following style:
img.alignleft { float: left; margin: 0 1em 1em 0; }
Why don't you create it like:
div.alignleft img { float: left; margin: 0 1em 1em 0; }
I'm doing a grid with several elements in the sidebar of a WordPress site.
Each element of the grid is an image with a label below.
My goal is to have an image change:
the normal state of the image is to be green (#66be2c), then to the passage of mouse cursor will change it in the original image.
I tried using two physical images for the two states and overlaying them when needed. But this solution is very wasteful... load two different image files is not a good thing.
There's a way to achieve the same effect in a more efficient manner?
This is a part of my page code:
<td style="width: 150px; text-align: center;">
<p style="color: #66be2c;">
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" style="width:50px; height:50px" onmouseover="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png';" onmouseout="this.src='mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png';">
</p
<p style="color: #66be2c;">.NET</p>
</td>
SOLUTION:
The correct way to do this is creating a Vector Image.
What you need is an image editor (such as Adobe Illustrator or others) and a C compiler (in particular two libraries for xslt)
These are two links that may be useful: SVG-Stacking_Guide and GitHub-SVG-Stacking-Download
I hope this can be of help to others who have the same problem.
It's a bad approach,
I'm not an expert in CSS or design but i think you should do :
<div class='overlay'></div>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/OriginalImage.png" style="width:50px; height:50px">
</div>
And put a class in CSS like this :
.overlay { background-color: your_color; }
.overlay:hover { background-color: transparent; }
You can overlay a DIV with a lesser opacity on to the image, and then register the hover such that the covering div fades away and the real image appears.
<div class='cover'></div>
<img id='your-image' />
The CSS for the image would be as such:
.cover{
position: absolute;
top: 0;
left: 0;
opacity: .7;
background: green;
/* additional transition effects */
-webkit-transitions: all .3s;
-moz-transitions: all .3s;
transitions: all .3s;
}
.cover:hover{
opacity: 0;
}
Note that the covering div and the image should be in the same containing div relative to each other.
You could use the ::before selector to achieve this. This would mean not using any extra markup, and no javascript either. You'd really benefit from not using that inline css either. Take a look at CSS :: Before
HTML:
<table>
<tr>
<td>
<p>
<img src="mydomain.com/aaa/wp-content/uploads/2015/08/GreenImage.png" class="image">
</p
<p>.NET</p>
</td>
</tr>
</table>
CSS:
td {
width: 150px;
text-align: center;
}
td p {
color: #66be2c;
}
.image {
width:50px;
height:50px;
position: relative;
}
.image::before {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
left: 0;
background: green;
}
.image:hover::before{
display: none;
}
Basically, this targets your image with a class of .image and puts a 50 x 50px box on top of it with a green background. When you then move your mouse over it, it gets rid of the box.
You can see this working in this fiddle
The number of checkboxes can extend to like 40. If that happends, the scroll bar works and you can scroll to the right.
But i want that the image also adjust itself to that length.
So right now if i scroll to the right the image automatically stops.
Also when there are only 2 checkboxes, i want the train to be that smal. (So i just want the image to adjust to the length of the checkboxes.
The code is:
<div id="axle_bogie_border">
<!--This is the train image-->
<img src="Images/axle_train.png" alt="train">
<!--The show axles are the number of checkboxes (Filled in by a user)-->
<div id="show_axles">
<?php
$_POST['number_of_axles'];
if(isset($_POST['number_of_axles'])){
for($i=0; $i<$_POST['number_of_axles']; $i++){
echo "Axle " . "$i " . "<input type='checkbox' name='axles[$i]'>";
}
}
?>
</div>
</div>
And the CSS:
#axle_bogie_border {
border: 2px solid black;
width: 98%;
height: auto;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
display: inline-block;
}
#axle_bogie_border img {
width: 100%;
height: 200px;
}
The show axles div has no content yet.
This is a example of how it looks now:
And as you can see the train does not continue after a certain length.
I think you should slice the train image into an engine and a carriage image and then define the carriage-image as background-image of #axle_bogie_border with background-repeat:repeat-x.
http://www.w3schools.com/cssref/pr_background-repeat.asp
Maybe this is helpful: CSS multiple Background Images both repeat-x
I am trying to design gallery of images using php and css. I have placed the images in unordered list like,
<ul style="list-style-type:none;">
<?
while($data=mysql_fetch_row($result))
{
$pic=$data[2];
if ($pic)
{
$path="http://www.myworkdemo.com/pecifica/photos/".$pic;
}
?>
<li style="list-style-type:none; float: left; margin-left:4px; margin-top:5px; margin-bottom:5px;">
<img src=<?=$path?> width=300 height=240></img>
<!--<td class='delete'><a href='addproject.php?ProjId=<?=$data[0]?>&action=edit' >Edit</a></td>-->
<div class='delete'>Delete</div>
</li>
</ul>
And i got all the images but one bullet(starting) was not removed from the list. my gallery after css formatting is like
and due to that bullet i lost the alignment of first row images. please guide me.
Very easily:
list-style-type: none;
Also consider list-style: none; if the bullet is actually an image not rendered by the browser.
It lies in two of your CSS files.
Line 514 http://www.myworkdemo.com/pecifica/admin/css/style1.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Line 523, http://www.myworkdemo.com/pecifica/admin/css/style.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Disabling both of these with firebug eliminated the bullet (which is actually a custom gif file). You'll need to review how you're using the involved classes.
Can somebody please help me out on how to increase the size of the rounded button with respect to text. Please check the image:
I want to be able to write any length of text and rounded button will stretch automatically based on text.
Please help me on how to write CSS for to get this working ?
Note: I don't want to use CSS3 border-radius because it does not work in IE and I don't want to use css3pie, etc, that's why i have created the rounded images. Thanks
Use the Sliding Door Principle. http://www.alistapart.com/articles/slidingdoors/.
In sliding doors you have two extreme as images(rounded) between these images is a background. The images move (slide further) based on the length of the text.
ul {
list-style-type: none;
}
ul li {
height: 31px; // height of the background image *reused below
margin: 10px; // width of the left image *reused below
float: left;
background: url(left.png) no-repeat top left;
}
ul li div {
height: 31px;
margin-left: 10px;
padding-right: 10px;
background: url(right.png) no-repeat top right;
}
//used with
<ul>
<li><div>text</div></li>
<li><div>texttexttext</div></li>
<li><div>texttexttexttext</div></li>
</ul>
I would probably opt for creating a div which inherits a css class like the following
<div class="button">TEXT HERE</div>
The CSS would be the following:
.button { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: blue; }
The above style would allow all browsers (except older IE's) to render the rounded corners rounded which means you will have no need for images