I ran into a problem when trying to style a home page that I am working on. Here is very simple version of what I am doing. http://cdpn.io/kgLzD
I am using wordpress and have the_loop within a div which outputs 8 post with a class of "post". The problem I am having is styling each post like the picture below because they are divs and have no control over choosing which "post" to style? If I was using a list then I could choose which item to style. Any help/tips/advice to achieving the styles below would be greatly appreciated.
This is where I currently am and as you can see all I basically need are the borders. How would you go about achieving this?
You could use css nth-of-type() selector - since you are floating left and have the div's two-up, using nth-of-type(2n) would select all of divs on in the right column: (see codepen here: http://cdpn.io/Iacvk)
section.home-grid {
width:440px;
}
.post {
border-top:1px solid #777;
width: 200px;
float:left;
padding: 10px;
}
.post p {
padding:.5em 1em;
width:90%;
margin:0 auto;
text-align:justify;
}
.post:nth-of-type(2n) p {
border-left:2px dotted #777;
}
Not entirely sure what you're looking for, but perhaps using an nth-child css selector on the posts will help.
http://css-tricks.com/how-nth-child-works/
Related
I have having a few problems, with what should be a simple task.
I have spent a good while trying to fix them, but no luck.
Centre the Input boxes within the div - tried this solution, (didn't work): http://jsfiddle.net/pjAHG/27/
input {
display: block;
margin: auto;
max-width: 80%;
}
Make the background image fill the full screen, only to the bottom of my timer div... if I use a solid colour, it fills the screen though :/ I have tried all the ways I can find online, but no luck.
Media query does not seem to change the size of the text/submit button.
If anyone could share some info, or help for these problems, I would be grateful.
Here is my code:
https://codepen.io/anon/pen/dVNZZO
Thanks :)
Try this
.input-group{
max-width:80%;
margin:0 auto;
}
and
#media (max-width:768px) {
.btn-lg{
display:block;
max-width:100%;
white-space:normal;
}
.lead-subtitle {
color: #dbdbdb;
text-decoration: underline;
font-size: 1em;
display:block;
}
}
here is the updated pen.
centered the form element instead of the input fields as they are
set to display: table by bootstrap anyway
this question doesn't make quite sense to me. I have added a sample image and it fills the whole bg, have a look
Bootstrap sets white-space: nowrap for the .btn class; I overwrote it for you
https://codepen.io/anon/pen/xXgPjZ
I feel a bit silly asking this because it's so basic, however I appear to be stuck.
Using CSS I want to apply a style to all the IMG elements on the page where no other class has been applied.
So, for example let's say I want all my images on my page to have have a red border, unless a class is applied which says different. This is basic stuff, right? But I'm finding that my other classes are overridden by the base IMG class.
In the following simple example I would like a red border on the top image and a green border on all the others:
CSS:
<style>
IMG {
/* I want this to apply to all images except those where other style applied */
border: solid 12px red;
width:50%;
}
IMG:nicepic {
border:solid 12px green;
}
</style>
EDIT: Problem was a typo and nothing more. IMG:nicepic should have read IMG.nicepic ("." instead of ":"). This entire question is based on a simple typo in my CSS; I tried to delete the question but was denied permission to do that by stackoverflow.
The class selector in css is a dot (.):
img.nicepic { /*not img:nicepic*/
border:solid 12px green;
}
hey there is small change
CSS CODE
IMG {
/* I want this to apply to all images except those where other style applied */
border: solid 12px red;
width:50%;
}
IMG.nicepic {/*not (:) is (.)*/
border:solid 12px green;
}
See Demo http://jsfiddle.net/JentiDabhi/ygco1ahf/
Why dont you just create a separate class for the first image, so you won't have to use the general "img"?
I have been searching over the internet for the past few hours looking for a solution to this problem and have been unable to find anything, although a few similiar issues, none appear to be the same as this.
I have a list, which contains 2 span elements. I wish the first span element to float to the left, and the second to float to the right.
In all browsers besides IE 7, which makes has the the right element appearing on the next line.
like so :
LEFT
LEFT RIGHT
LEFT RIGHT
RIGHT - (this is not meant to be in a code block, unsure how to remove it)
(there is more then 3 elements, but that is a general example - the page with the issue is located at : http://www.blisshair.com.au/testing/)
I am unsure of which modifications to make to correct this.
If anyone is able to help me out I would be much appreciative.
Regards.
Try Add this to your CSS this might help you
#basic_info ul {
padding:0px;
margin:0px;
list-style-position:inside;
list-style-image:url(tick.png);
width:100%;
position: relative;
font-size:0.8em;
float: left;
}
#basic_info li {
border-top:0.1em solid #DFDFDF;
background:#F7FEF3;
position: relative;
width:100%;
float: left;
}
try adding clear:right to the li element like
#basic_info li {
border-top: 0.1em solid #DFDFDF;
background: #F7FEF3;
clear: right;
}
Please excuse if this is a fairly basic question. I've trawled through Google and elsewhere, and haven't found a solution that works for me.
I am generating an image gallery with the following markup.
<div class="gallery">
<a class="galleryimg">
<img>
</a>
....
</div>
The .galleryimg is repeated, based on the number of images in the gallery. It is alse floated left.
I want to create a :hover effect that outlines the selected image. I've tried using border (messes up the layout), outline (which sounds perfect in principle), and inset box shadow (which is rendered below the image).
Outline is very close to what I want to achieve. But the right and bottom outline is obscured by adjacent images floating above it.
So my question: how can I create an on hover border/outline effect on a gallery of linked images?
I'd really appreciate any ideas as to how others have tackled this. Thanks!!
EDIT
The images are abutting, with no white space between.
HI you can used simply used css Tricks as like this
css
#example-one a img, #example-one a { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a img{width:100px;height:50px;}
#example-one a:hover img { margin: -3px;}
Live demo http://jsfiddle.net/rohitazad/QkT7d/3/
more about this click here http://css-tricks.com/examples/InnerBorderImages/#
Check this out:
http://jsfiddle.net/hMNZE/
Might be the desired effect. You will experience slight changes to the image as it makes itself smaller to allow for the border. but do let me know. This is only a quick fix.
---EDIT---
http://jsfiddle.net/hMNZE/2/
is a second version using negative margin, this looks okay but the images overlap a little.
Check out link: http://css-tricks.com/examples/InnerBorderImages/
---EDIT2---
http://jsfiddle.net/hMNZE/3/ is the best
---EDIT3---
.gallery {
width:100%;
height:100%;
padding:10px;
}
.galleryimg {
float:left
}
.galleryimg img {
z-index:-10;
}
.galleryimg img:hover {
margin:-2px;
border:2px solid blue;
z-index:9999;
}
if you use box-sizing property (supported since IE8) you could add the border on :hover without messing up the layout
.galleryimg {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width : 100px;
float : left;
}
.galleryimg:hover {
border : 3px gray solid;
}
see http://paulirish.com/2012/box-sizing-border-box-ftw/ for more info on this property
http://jsfiddle.net/Vvr7C/
The trick is to add the padding on .gallery so you'll see the outline also on the images that are on the edge od the gallery:
.gallery {padding:2px}
.galleryimg:hover img {outline: red solid 2px}
If you are using box-shadow & it's come below the other image then write like this:
.gallery img:hover{
padding:0;
box-shaow:0 0 0 2px red;
z-index:1;
}
.gallery img{position:relative;}
If your question was answered above, great. If not, it sounds like you might need some margin between the images and other objects around. You said it was obscured. It might just need 2px or so worth of margin to unobscure it.
hi you can do this thing easily via CSS3 *box-shadow* property:-
box-shadow: inset 0px 0px 0px 3px rgba(000,000,000,0.9);
see the demo for better understanding :- http://jsbin.com/upedel/5/edit
UPDATED ANWSER
Please see the updated demo:- http://jsbin.com/upedel/10/edit
I have an image like such:
and would like to when i hover, to get another Transparent image on TOP of it.
this is the css:
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
}
#imagebox:hover {
background: url("upplyst-platta.png") no-repeat 0 0;
}
But it is behind the picture, any way to solve this in css? or i have to fix it with javascript?
The image on bottom is generated from db(later on) and cannot be set in css
EDIT:
I saw this solution:
http://jsfiddle.net/bazmegakapa/Zf5am/
but cannot get it to work. even though i copy the whole code, what can be the problem?
Use the z-index to state which order the elements are drawn in.
You can find more information here: http://www.w3schools.com/css/pr_pos_z-index.asp
A few other things as well, you might want to add relative image placement based on the parents position and where you say Width in the first style, it should be all lowercase width :-P
Hope this is what you are looking for.
#imagebox {
Width:338px;
margin-left:10px;
background-color:#12100e;
height:221px;
float:left;
margin-bottom: 10px;
border: 1px solid #232323;
background: url("upplyst-platta.png") no-repeat 0 0;
}
#imagebox img{
display: none;
}
#imagebox:hover img{
display: block;
}
and the html structure should be:
<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>
Hope this works for you or provides some inspiration: jsfiddle example #1
Update based on first comment:
Do you mean like this? jsfiddle example #2
2nd update based on edit in question:
Well, the reason for not working is that the hoverimage isn't just transparent: it's a modification of the original.
But it clarifies your wish. I really think my first example is the solution you're looking for. Just replace the url in the style sheet with your transparent png file name.