Hi I'm not too sure how to create the attached image effect where the right hand side is my main content and it shades onto my left sidebar which has a gradient effect downwards.
I'm trying to figure out the best way to create a row of three boxes (columns), with dividers between boxes 1 and 2, and boxes 2 and 3. The text would need to be centered within each box.
h2 {
color: #00ADEF;
margin-top:0;
margin-bottom:0;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
font-weight:bold;
line-height:23px;
}
p {
margin-top:0;
}
.3colwrapper {
width: 930px;
margin: 0 auto;
}
.colbox {
float:left;
margin: 10px;
width: 210px;
background:#DDD;
padding:10px 40px;
}
<div class="3colwrapper">
<div class="colbox"><h2>Step One</h2>
<p>Sign up</p>
</div>
<div class="colbox"><h2>Step Two</h2>
<p>Verify</p>
</div>
<div class="colbox"><h2>Step Three</h2>
<p>Participate</p>
</div>
</div>
Here's what I've worked up so far: http://cssdesk.com/YyjAr
I have a navigation bar, and underneath a black div on which the drop-down elements from the navigation bar drops. This is not the main function of the black div. It is just for design, but it works really well. You can see here what i am talking about: http://www.ecoloc.ro/interior/test/regeneration . Now, what i want to do is that every time a main element from the navigation bar is hovered, an image big enough to cover the main element and a part of that black div beneath it will appear. You can see in the link that i posted, on that black gap i want the image. Can this be done?
Thank you!
Hi,
i have this page.
login: [email protected]
password: m
I've gave a width to "td.select_edad label" but it doesnt work..
I know it's deprecated, so what is your advice?
Another question: why "height" (also deprecated) is working ok for the fields of the filter?
Regards
Javi
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Hi
My question is, can I control the style of the paging element separately of top and bottom, I have set the paging to appear in both top and bottom of the gridview, and I want to see that the top pagination is little high up in the page, to do that I used the cssClass and set margin-top:20px and made the position: absolute, this does change the position of the top paging area and set it rightly for me, but the bottom pagination has also come up as a result and now sits inside the grid data!! Is there any way to solve this?
Thanks and regards
Arunendra
I have a setup lets say like follows:
<div id="nav">
<div id="innernav">
//With dynamic content here.
</div>
</div>
I am running a script that sizes #nav to the size of the browser window in height. But sometimes my dynamic content is now getting bigger than the height of the window.. Is there a way I can enforce that when #innernav exceeds #nav that #nav will increase in size?
I'm having trouble with the alignment of two images on the footer of my temporary website (http://www.rotimioyewole.com). I'm new to the YUI grid, which I think may be a factor.
It should look roughly like this (works correctly in Chrome and Safari, haven't tested IE yet):
(http://cl.ly/44fH)
But on FF and Opera look like this:
http://cl.ly/44aO
If I can have some sort of consistency then the website would at least be presentable. Ideally, I would also like to align both images on the same Y axis, as well as the text next to the icons. I had trouble figuring out how to search for a solution..can anybody help me?
Thanks in advance
body{
background-image: url("./content/site_data/bg.jpg");
background-size: cover;
background-repeat: no-repeat;
font-family: 'Lobster', cursive;
}
Check: http://demo.jayantbhawal.in on firefox browsers, NOT in widescreen mode.
The code works on Chrome(Android + PC) and even the stock Android browser, but NOT Firefox(Android + PC). Is there any good alternative to it? Why is it not working anyways? Googled this issue a lot of times, but no one else seems to have this problem. Is it just me? In any case, how do I fix it?
There are quite some questions on SO about it too, but none of them provide a legitimate solution, so can someone just tell me if they have background-size: cover; issues on firefox too?
So basically tell me 3 things:
1. Why is it happening?
2. What is a good alternative to it?
3. Is this happening to you too? On Firefox browsers of course.
Chrome Version 35.0.1916.114 m
Firefox Version 29.0.1
Note: I may already be trying to fix it so at times you may see a totally weird page. Wait a bit and reload.
Hello,
I need to have resizable menu and content background images for my site, so both of them get stretched whenever the menu entries are too many, or the contents go outside the borders of the content background. I need vertical stretching.
Could you, please, give me a hint (an actual answer would work as well) or a link to a good example?
Thank you very much in advance!
I have the following html (i'm also using Jquery and JqueryUI)
<div style="display:none; position:fixed; z-index:100;padding:0;margin:0" class="ui-state-highlight" id="Info">
<table cellpadding="0" cellspacing="0" style="padding:0;margin:0">
<tr style="padding:0;margin:0;">
<td><span class="ui-icon ui-icon-info"></span></td>
<td width = "100%" style="padding:0;margin:0;"><div id = "InfoText"></div></td>
<td><button style="width:25px;height:25px;margin:0;padding:0" id="closeInfo"></button></td>
</tr>
</table>
</div>
It procudes the following:
See where i circled in red? I want to get rid of that yellow space under the button, but i can't figure out how...
Thanks!
Hello everyone my menu bar can't fit into my <div> area at different browser. I have checked with Opera and Chrome it looks fine but with Explorer and Firefox my menu can't fit.
And my menu is in this <div> tag:
.page {
width: 964px;
margin-left: auto;
margin-right: auto;
background-image:url(../images2/images/orta_alan_bg_GOLGE.png);
background-repeat:repeat-y;
}
Here is my menu:
ul#menu {
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: center;
}
ul#menu li {
display: inline;
list-style: none;
font-family: 'Museo300Regular';
font-size:17px;
font-style:normal;
}
ul#menu li a
{
background-image:url(../../images2/images/menu_bg_normal.jpg);
background-repeat: repeat;
padding: 5px 19px 5px;
font-weight: normal;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #FEFEFF;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
cursor:pointer;
}
So what is the problem why it can't fit into with Explorer and Firefox?
I attach an image you can understand what I mean
Here is the Chrome and Opera it can fit
I'm trying to stray away from using tables to form the layout of my content, and I can think of two alternatives that I'd like to better learn: (1) styling list items to be side-by-side, and (2) using div blocks that float onto the same line. Both of these would have their own uses for what I'm working on.
I'm already using div tags to form the entire layout of my three-column template, but what I need to do now is a bit different. In case it helps, my project can be found here.
In short, here's my question; how would I style a div so that the width of it is 50% of the width of the area it occupies, rather than 50% of the width of the page?
As for my other question, what would be the best approach to styling list items so that they are side-by-side? I'm working on a registration script now, and instead of using a table with "Username" on the left and the input text on the right, I can use two list items.
It's late and I've been working on this project of mine for about 8 hours straight now, so I apologize if I'm asking anything confusing. Feel free to ask me any questions about what I'm trying to do.
Thanks, friends. :)
Am having an issue in opera. I have a series on hyperlinnks in a ul li with backgorund images applied. The pointer cursor isnt displaying when I hover over the links.
Is this a know bug, code below
/cricket" title="Cricket" id="cricket-link" style="background-image:url(/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg);" onmouseover="$().hoverSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bghover.jpg', 'cricket'); return false;" onmouseout="$().originalSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg', 'cricket'); return false;"Cricket
#sidebar ul {
margin: 0;
padding: 0 0 27px 16px;
display: block;
float: left;
width: 180px;
}
#sidebar ul li {
background-image: url(images/left-nav-bg.jpg);
background-repeat: no-repeat;
margin: 0;
margin-bottom: 10px;
padding: 0;
display: block;
float: left;
width: 180px;
height: 40px;
list-style-type: none;
cursor:pointer !important;
}
#sidebar ul li a {
background-repeat: no-repeat;
background-position: 2px 2px;
margin: 0;
padding: 8px 8px 0 4px;
display: block;
float: left;
width: 168px;
height: 32px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: right;
cursor:pointer !important;
}
Hi,
is there any way to create a table like this below using lists ?
**************
* 1 * 1.1 *
**************
* 1.2 *
********
* 1.3 *
********
* 1.4 *
********
Regards
Javi
Hi folks:
I cannot ensure whether the background-image style is valid for <tr> b\c the image doesn't display in my computer.
<tr style='background-image: url(/images/Bet188/LeftMenu/xyz.png>...</tr>
Thanks.
is it possible with just css2 to have the following:
all the content to be in the flexible div.mid section
overlap the top and bottom parts
not fussed about ie6
here's the photoshop with centre slice:
as you can see the top and bottom parts are quite large and i need to overlap them from the middle slice...
Please dont misunderstand here, i understand how to make a flexible central div, the complexity is in the overlapping of the top and bottom while the mid div remains flexible.
I imagine it requires either negative margins or absolutely position top and bottoms elements with z-index..
I have noticed that alot of sites now, have all of their images in single files are then use background-position to offset the rectangle which is shown on the screen.
Is this for performance reasons? If so why?
I've had a problem with my styles not being applied after AJAX calls. My styles were not in the < HEAD section of the page, and they were only recognized by IE on initial Page_Load.
If you know of any other ways to fix this problem, post them here.
This is more of a reference, hope this helps some people.
I want basically the same as
http://stackoverflow.com/questions/530701/jquery-select-image
a row of images that you can select one of.
But I'm trying to style the one I select, and store it.
var selectedicon = "";
function selecticon(){
$('#iconselect').children().click(function(){
$(".selectedicon").removeclass("selectedicon");
selectedicon = $(this).attr("src");
$(this).addclass("selectedicon");
});
}
on this
<div id="iconselect">
<img src="/red-dot.png" class="selectedicon" />
<img src="/green-dot.png" />
<img src="/blue-dot.png" />
<img src="/orange-dot.png" />
</div>
What am I doing wrong?
I know styling is possible in SL, but I have a large web app that has both HTML and SL so it would be really useful if they could use the same style sheet...
Is it possible?
Thanks.
I'm trying to float my navigation at the top much more to left around 200px atleast more towards the end of the line that can been seen below. Everytime I apply a margin or padding it pushes the navigation to go under each other even though there is loads of room, could anyone take a look at my code.
means alot thanks,
I always find things easier with firebug so I uploaded it here http://xronn.co.uk/hosting/
Thanks again!