hey guys,
i have a probably rather simpel problem:
my website has two layers:
1) a drag&drop navigation on top which should be positioned absolute, so scrolling doesn't affect the bars.
2) a content area in the back behind the navigation which should be scrollable.
you can see what i mean right here: http://jsfiddle.net/Pghqv/
however now, i cannot click links in my content-area in the back. any ideas or solutions how i can still have the same position result and the links in the back are working?
thank you very much.
Hi,
I have this page.
login: [email protected]
password: m
As you can see in IE7 there isn't any border below 'Alcorcon', 'Madrid', etc. In FF yes.
Why?
Regards
Javi
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
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
So i have had a little hunt online about creating custom Facebook like buttons and custom twitter follow button but not really found a solution so thought i would ask here and see if anyone knows of a solution for this (currently i have coded some jQuery to get Facebook and Twitter counts using JSON which works but want some custom buttons as per below)
I have the count working all ok, just need to tackle the like and follow buttons - it is done in jquery at the moment so would like to continue to use that if this has to be done via that.
at the moment i use the API for each to get the count, if i can integrate into the current js i have to get the calls / functions i require would be good:
// grab from facebook
var facebook = $.getJSON('https://graph.facebook.com/'+f_page+'?callback=?', function(data) {
fb_count = data['likes'].toString();
fb_count_gt = data['likes'].toString();
fb_count = add_commas(fb_count);
$('#fb_count').html(fb_count);
});
// grab from twitter
var twitter = $.getJSON("https://twitter.com/users/"+t_page+".json?callback=?",function(data) {
twit_count = data['followers_count'].toString();
twit_count_gt = data['followers_count'].toString();
twit_count = add_commas(twit_count);
$('#twitter_count').html(twit_count);
});
Thanks in advance!
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 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.
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;
}
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!
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.
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
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.
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!
Recently i saw the following code that creates a class in javascript:
var Model.Foo = function(){
// private stuff
var a, b;
// public properties
this.attr1 = '';
this.attr2 = '';
if(Model.Foo._init === 'undefined'){
Model.Foo.prototype = {
func1 : function(){ //...},
func2 : function(){ //... },
//other prototype functions
}
}
Model.Foo._init = true;
}
// Instantiate and use the class as follows:
var foo = new Model.Foo(); foo.func1();
I guess the _init variable is used to make sure we don't define the prototypes again. Also, i feel the code is more readable since i am placing everything in a function block (so in oop-speak, all attributes and methods are in one place).
Do you see any issues with the code above? Any pitfalls of using this pattern if i need to create lots of classes in a big project?
Hi all,
Trying in vain to get a nested link working within a nested span. This is a working test page for the code below to explain what I'm trying to do.
Any ideas on how to get this working in valid html? I guess it's either a nesting order or style syntax thing but I am at a loss. Any thoughts much appreciated.
<div id="greyback">
<ul id="scrollbox">
<li class="listcat">List header</li>
<li><a class="menu" href="#freeze">List item 1<span><b>This text has popped up because you have clicked the list item, which has an "a" tag and now has :focus. That "a" tag is the first of two.</b><br><br>What I am trying to do is to set the second "a" tag as a DIFFERENT "embedded" link in this box<span style="color: blue; background-color: yellow;">eg, here<a href="http://www.conservationenterprises.com" target="blank">This is the second (nested) "a" tag in this html nest. It is a link to an external site. Instead of this being an always-visible link, I want it to sit within the yellow box in the first span (click the List item 1 to display).</a></span>
</a></span>
</li>
</a></span>
</li>
</ul>
</div>
and the CSS:
#scrollbox {margin: 0 auto; margin-top: 1em; margin-bottom: 1em; width:19em; height:auto; max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500;}
#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}
#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active {border:none; color: #535353; text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em; z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #c3FFe3; color: #535353; border: solid #FFA500 0.25em;}
#scrollbox li a:active span span, #scrollbox li a:focus span span{display: block; width: auto; height: auto; min-height: 2em; left: 25em; top:10em; z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: transparent; color: #535353; border: dashed red 1px;}
.ul#scrollbox {padding-left: 0.1em;}
#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: 0em; font-family:Arial, sans-serif; font-size: 0.9em;}
#scrollbox li.listcat {float: left; text-align:left; width: 18em; margin-left: 0em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 0.9em; font-weight:bold;}
Cheers
Patrick.
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. :)
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?
This question was already asked in the context of C#/.Net.
Now I'd like to learn the differences between a struct and a class in (unmanaged) C++. Please discuss the technical differences as well as reasons for choosing one or the other in OO design.
I'll start with an obvious difference:
If you don't specify public: or private:, members of a struct are public by default; members of a class are private by default.
I'm sure there are other differences to be found in the obscure corners of the C++ specification.
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