i have the problem whit my layout, make in css some, whit no javascript because i dont know dynamically position my divs(posts)...this divs have spaces, make lines and i dont want lines because are diferent sizes, see the photo to understand perfectly:
see this photo please
http://postimage.org/image/hibb48iq3/
this is the normal, but the next see this:
http://postimage.org/image/6h9b8mpt9/
this big space i dont want, im try use various properties of display in the css but nothing change this big space, my css to this is it:
#post {
box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.4);
background: #fbffff;
color: #6d6d6d;
margin:10px 0;
padding:15px;
box-sizing: border-box;
font-family: tahoma;
line-height: 20px;
width:30%;
float:right;
}
if someone have some solution, or using css or javascript of a made dinamyc, my code is in ruby on rails some to inform.
Im thanks and wait response, please.
Looks like your going for a "Pinterest" layout. Your best bet is to use jQuery and add the plugin Isotope or Masonry
Related
I've encountered a problem when I'm trying to adjust my CSS after the user-device dimensions. I'm using the following code:
#media only screen and (max-width: 700px) {
#form input[type=text]
{
width: 100px;
height: 50px;
margin: 95px -60px 0 15px;
box-shadow: inset 0px 0px 3px 1px grey;
border:1px lightgrey solid;
border-radius: 4px;
text-align: center;
font-family: times;
font-size: 10px;
}
}
All settings apply properly and change the original CSS except the dimensions, which remain the same. How is this even possible? Is this a CSS bug? If some do apply the selector is correct and all, but the dimensions don't. It's not a cache problem, and I've tried on several devices.
I very much appreciate the help,
Fredrik
Can you post a link to your code?
Does the problem only occur on a mobile device? What happens when you resize the browser window to a width less than 700px?
Typically this kind of error is due to having selectors that are too specific somewhere else in your code, which makes them hard to override.
Try adding !important to the end of your declaration to see if the style can be overridden. Beware its generally bad practice to leave !important in there, so if that works for you search your code for the offending selectors and adjust it until your media query can override.
I have two Joomla module positions. They are stacked in the same module position. I need for these two modules to appear on the web page as a single displayed module with a single border surround all of it.
How can this best be accomplished without modifying PHP code for either of these modules? I'm thinking this might be done with CSS, but I'm not an expert with CSS. Maybe a Module Class Suffix added for both of these modules could make them appear appear seamlessly joined? If so, how do I do this?
OKay, without being able to see the HTML, I'll pretend the two components get outputted as <div>s with the class themodule, and that some padding, borders and margins have been applied something like this:
.themodule {
padding: 1em;
border: 0.1em solid black;
border-right: 0;
margin: 2em;
}
If you add this:
.themodule + .themodule {
padding-left: 0;
border-left: 0;
border-right: 0.1em solid black;
margin-left: 0;
}
That means any .themodule directy after another one will get the left padding, border and margin chopped so it butts right up against the previous one and visually is part of the same box.
Hopefully you can apply to your case, but let me know if you have questions.
I most likely know the answer but maybe I'm wrong so lets try.
I want to change the appearance of the comment form from Blogger (blogspot - Google blog system). Sadly, this awful little form is embedded in an iframe so my CSS styles wont work.
Also playing around with jquery is useless, of course.
I know, iframes are not meant to manipulated but maybe its possible for blogger, somehow... in a distant world.
Is there a way or just not possible as i think?
Have you tried styling your comment iframe?
you cannot style content inside iframe, but you could style your iframe .
Below is an example, add this just before closing the <head> tag.
<style type='text/css'>
#comment-editor {
background: #F9F9F9 url(http://2.bp.blogspot.com/-Bdsls_ui_vY/UX-d4NVcHiI/AAAAAAAAB3M/IIzD9w00lDs/s1600/form-gradient.gif) repeat-x scroll -1px -2px;
border: 1px solid rgb(221, 221, 221);
border-radius: 6px 6px 6px 6px;
box-shadow: 5px 5px 5px rgb(204, 204, 204);
padding: 5px;
width: 560px;
height: 224px !important;
}
</style>
So it will look like this!
Screenshot of the resulting comment form!
I never had a need to style comment section in Blogger, so I cannot help you in that regard.
But you could try to replace it with third-party comment systems like IntenseDebate.
It supports custom CSS and URL to external stylesheet and has lots of other useful features too.
If you decide to try it just remember to backup a template before making a switch in case you want to revert back.
my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don't care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png
Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don't want to look for the css
here is the css:
.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
0 0 4px #7F241C;
cursor:pointer;
}
This is easily fixed if you create a conditional statement in your html head to wrap your new stylesheet in such as
<!--[if IE 8]><link rel="stylesheet" href="Css/ie.css" /><![endif]-->
and put the following CSS into your stylesheet this should fix the problem.
input.formbutton.buttonbloghuts.buttongradient {
position: relative;
top: 8px;
}
You already have a conditional statement in your head to create your HTML5 elements.
Any problems and I'll be happy to help.
Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).
(Using conditional classes makes it a lot easier to target IE-specific fixes like these)
If you could provide a jsfiddle of the button code that would help. IE dev tools aren't cooperating very will with me. If my memory serves, try adding float left on both input fields and see what happens.
Look at this site and at the search: it's really similar done but there's an extra div to do stretchy stuff : http://www.genesismedicalimaging.com
Ive been handed a design that has a particular header with style the type knocking out a rule like:
------ Text Content ------
Ive done this a couple times over the years but i was never happy with my solution. Usually it involved using numerous elements. Since these are headers id like to keep the markup as lean as possible.
My first thought this time around was to use box collapsing to my advantage: http://jsfiddle.net/cEcCL/
However there a are few problems here:
This relies on setting the background of the span to something opaque in order to knockout the line. Problem is most of these will probably be in the upper portion of the page where the gradient background hasnt yet faded to its solid
Actually i wasnt aware of this till i made the fiddle - the text seems slightly off center, not sure why that is.
While it can probably be managed, Im worried about the robustness of the vertical offsets to center the line on the median of the text line-box.. What if i have long header that goes to 2 lines?
Does anyone have any other ideas?
Here's a very quick example that uses a single h2 and the before/after pseudo elements.
h2:before, h2:after {
content:' '; display:inline-block;
height:0; width:100px;
border-top:1px solid black;
vertical-align:middle;
margin:0 1em
}
Obviously, there are some drawbacks:
No IE6/7 support
As it stands, you have to explicitly declare a width for the lines (but you might be able to mess with this)
Doesn't handle multiple lines too well, but again, you might be able to edit the h2 styles to make this work a little better
While not a perfect solution (I feel your pain here, this is a tough one), sometimes you can use background-attachment:fixed to remedy the background issue using the <span> technique if you are using a background image:
Demo: http://jsfiddle.net/cEcCL/3/
<h2><span>Text Content</span></h2>
h2 span,
body{ /* Apply to h2 span and whatever the parent element is */
background:url(background.gif) fixed;
}
h2 {
line-height: 10px;
font-size: 18px;
text-align: center;
padding: 5px 0;
}
h2:after{
content:" ";
float:left;
border-bottom: 1px solid #000;
width:100%;
height:10px;
margin-top:-15px;
}
Of course this only works if the parent element can have a fixed background image, and won't work with CSS3 gradient backgrounds. It's a limited-use idea, but I just thought I'd bring it to light.
It seems only <legend> tags have this behavior, and I know of no way to emulate that with CSS, and I don't think you don't want to start using <legends> for headings...