i am very new to CSS. i need to increase the width of the white space of this:
http://yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
the css file is here:
http://yoursdproperty.com/templates/pjo_joomlaforall/css/template_css.css
how do know which element to change?
The page you link to is using the following as a background image:
http://yoursdproperty.com/templates/pjo_joomlaforall/images/bgr.png
To increase the width of the white space, you'll need to modify that image.
#background_right is the element that contains the background image.
Also, per Umar's answer, install Firebug.
use firebug. it is a firefox add-on. just download and enable it and click an element to inspect it. you will instantly know everything related to it.
Edit
On you page, you just need to replace the image ../images/bgr.png with a wider white space in it.
Related
Today on the site appeared red vertical line along the entire height of the site. Can you please tell how to remove it?
Your main_color class has the bacgkround image of http://www.alkonarkostop.com.ua/wp-content/uploads/2015/02/-e1423758635687.jpg
removing this in the chrome developer tools removed the vertical line. Try it. If it works for you, you need to check the css and remove this line or remove main_color from your html.
So Im loading images with ajax, except when they load they're positioning is mucked up, but the have exactly the same style and everything as the others. Scroll down to the bottom of this page to see what I mean.
http://alexbridger.com/test.php
And this is just my testbed site, I know it's awful.
There are some extra space characters in your html code between <img>. Those characters make some extra blank space between images in your site. So try to add this to #maincontainer:
#maincontainer {
font-size: 0;
}
This will help, but you'd better check your code to find the strange extra space characters.
well it sound weird but I found the reason. the difference between the pictures is there hieght and width, and the proportion between them. the pictures on the first rows originally were 304.904pxX306px. like a rectangle.
the pictures on the last row are 300X300 like a square.
the space you had on the first rows was not because on css, it was because the image was not a perfect square. try to upload images on the same size and add margin in the css file.
I'm using a text widget, Black Studio TinyMCE, in WordPress. For some reason, I cannot get the background color to match the background of the header (#192E82). Currently, the header looks like this -- as you can see, there's a white outline surrounding the text area:
And when I Firebug the selection, Firebug shows this:
I can add whatever custom CSS I'd like to. But I'm not sure how to do so. I'm unsure which class I should use a # before, if any, or which class I should use a . before. Ultimately, I'd like to make that white area around the edge to match the background color of the header.
For instance, this doesn't work -- in fact, nothing I've tried works!
#widget-wrap .textwidget {
background-color:#192E82;
}
Does anybody know how I can accomplish getting the white to match the header background? Any guidance would be appreciated!
EDIT: Here's a Fiddle of everything I could find:
http://jsfiddle.net/jasonpaulweber/nvkVT/
Hard to give a precise answer with only the info included, but I would inspect one element at a time, from the <strong> and upwards in the hierarchy, and look for an element with either a white background-color and a padding, or a thick white border. If you do that I'm sure you'll spot it. Once you've identified it just let me know and I'll try and help you targeting it with a CSS selector.
According to the fiddle, the white space is padding of the header-right element
You should set
#header-right {
background-color:#192E82;
}
The website I'm working on has a list ul with above a 100 (li) bullet points. Each of them links to another html-site.
I would like to show an image preview, whenever you hover over one of the links. The image should slowly slide in from the left.
As each preview image is up to 40kb in size, I actually don't want to preload the images.
What would be the best way to prevent it?
I would like to do this only via CSS, without JS, if possible.
My ideas:
a) default-state: <img>-tag with display:none; hover-state: set it to display:inline . Problem: transition does not work with display :(.
b) simply use a div instead and write a CSS-rule for every li, so that on hover the corresponding background-image with the preview-image is assigned to it.
Does this prevent the preloading of the image?
If you add it as a background image, but only show it on hover the image won't load until the user hovers over whatever has the style. You should be able to set the background image inline instead of outputting the image file as an IMG
You can't do this with just CSS because your browser will load all contents (regardless of display:none). I would recomend javascript or server side like php.
Maby jquery load could be something?
http://api.jquery.com/load/
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.