Really? Surely you can use a fancy button, styled with css if it is placed within it's own fieldset in a traditional form?Daniel wrote:problem is youi con't have nice buttons if you don't use javascript.
Well the design here is that the buttons are all using 1 background image with actual text as a link... and just stretching across the span. As opposed to using actual images, which would mean 1 image for each button.SiteE@se wrote: Really? Surely you can use a fancy button, styled with css if it is placed within it's own fieldset in a traditional form?
It is a shame HTML never created an input type="link" or something that allowed this natively. All input types should be allowed to be a "submit" button imo. Then things like like submit on select and radio change would also be native
Entirely possible with the form/fieldset/css solution ... use the 'sliding doors' technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible shaped CSS buttons. Each button can accommodate text of variable widths.Qphoria wrote: Well the design here is that the buttons are all using 1 background image with actual text as a link... and just stretching across the span. As opposed to using actual images, which would mean 1 image for each button.
Chris
I assume you are talking about something like the example towards the bottom of this link:SiteE@se wrote:Entirely possible with the form/fieldset/css solution ... use the 'sliding doors' technique of CSS, plus two sliced background images with "on" and "off" states, to create flexible shaped CSS buttons. Each button can accommodate text of variable widths.Qphoria wrote: Well the design here is that the buttons are all using 1 background image with actual text as a link... and just stretching across the span. As opposed to using actual images, which would mean 1 image for each button.
Chris
http://cssbutton.com/forms/
It's ugly to use that much code tho... maybe feasible. but eh. Tho I see his "submit" button image isn't stretching well.
I actually created a jscript that
- finds all input type="button"
- gets the "value"
- replaces the button with a text link, using the value for the link
- and styles the button
This way when javascript is enabled, you see the pretty button
When jscript is off, you see the standard gray button.
A bit overkill i guess.
There are also examples at http://www.dynamicdrive.com/style/cssli ... tegory/C7/ with well-commented (although slightly bulky) code.Qphoria wrote: I assume you are talking about something like the example towards the bottom of this link:
http://cssbutton.com/forms/
It's ugly to use that much code tho... maybe feasible. but eh. Tho I see his "submit" button image isn't stretching well.
With jscript the code still has to be rendered on the client side - There's probably only milliseconds in it but I'm not sure which solution css or javascript is actually the most efficient. Assuming the css is in a separate file it will be cached (as would jscript). However, not all javascript used in OC 1.2.6 (AFAIK) is stored in external files and some therefore isn't cached, which must slow things a little?Qphoria wrote: I actually created a jscript that
- finds all input type="button"
- gets the "value"
- replaces the button with a text link, using the value for the link
- and styles the button
This way when javascript is enabled, you see the pretty button
When jscript is off, you see the standard gray button.
A bit overkill i guess.
Those examples all use the same method used with 1.x.. you still need javascript to submit forms.SiteE@se wrote: There are also examples at http://www.dynamicdrive.com/style/cssli ... tegory/C7/ with well-commented (although slightly bulky) code.
We seem to be going in circles hereQphoria wrote: Those examples all use the same method used with 1.x.. you still need javascript to submit forms.
I was responding to Daniel's comment that you can't have nice buttons if you don't use jscript, which of course you can, a la CSS examples quoted.I think the main issue is that in 1.x.jscript is being used for form submission rather than traditional form/post. Personally I prefer traditional html forms but only because I find them easier to code. As long as jscript isn't introducing accessibility issues (like the 'enter' one that started all this) then I'll live with either.
Chris
Daniel is saying you can not style a submit button as nice as a Link using just CSS
and he is absolutely right there!
Having said that, I'd like to add, there is no reason for when declaring a
in the same Document!
This has the same effect as for the xml standard used and if the server isn't set to UTF8 anyway – just use in the PHP files.
In IE6 anything before the <!DOCTYPE> tag, it will make IE6 enter into quirks mode and render html quite differently!
OK again IE6… but removing will make it much, much easier for those who wanna add some IE6 CSS — simply test this in the Demo-Shop — once the <?xml version="1.0" encoding="UTF-8"?> is removed it already looks much, much better in IE6!
Cheers
Code: Select all
<input type="submit" value="Submit" />Code: Select all
<a href="#" tabindex="20">text</a>and he is absolutely right there!
Having said that, I'd like to add, there is no reason for
Code: Select all
<?php echo '<?xml version="1.0" encoding="UTF-8"?>' . "\n"; ?>Code: Select all
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">This has the same effect as for the xml standard used and if the server isn't set to UTF8 anyway – just use
Code: Select all
header('content-type: text/html; charset=utf-8');In IE6 anything before the <!DOCTYPE> tag, it will make IE6 enter into quirks mode and render html quite differently!
OK again IE6… but removing
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>Cheers
Last edited by make-oc on Tue Apr 21, 2009 10:52 am, edited 3 times in total.
Almost forgot…
The reason why you can not use the EnterKey is simply the lack of the form tag.
So to make the QuickSerch in the header work I just edidted the template:
This leaves the pretty buttons and still get's you the expected behavior of a form.
Cheers
The reason why you can not use the EnterKey is simply the lack of the form tag.
So to make the QuickSerch in the header work I just edidted the template:
Code: Select all
++<form action="">
++<input name="route" type="hidden" value="product/search" />
<?php if ($keyword) { ?>
<input type="text" name="keyword" value="<?php echo $keyword; ?>" id="filter_keyword" />
<?php } else { ?>
<input type="text" name="keyword" value="<?php echo $text_keywords; ?>" id="filter_keyword" onclick="this.value = ''" />
<?php } ?>
<a onclick="location = 'index.php?route=product/search&keyword=' + encodeURIComponent($('#filter_keyword').attr('value'));" class="button"><span><?php echo $button_search; ?></span></a>
++</form>
</div>This leaves the pretty buttons and still get's you the expected behavior of a form.
Cheers
You can't have pretty buttons without Javascript?!..What the?? Do any of you actually use CSS?? I have been using expandable images for buttons for years it's very possible:
You can view a sample here http://webmagic.com.au/button_image
This is how it's done with only one background image and sprites:
To use simply add your own BG image...to have dynamic button text simply change 'Check Out' with the php. For example the search button is <?php echo $button_go; ?>
I have seen it work with IE 6+, firefox, chrome, netscape and safari.
Daniel this is something that can definitely be fixed...pages should degrade smoothly if there is no JS.
You can view a sample here http://webmagic.com.au/button_image
This is how it's done with only one background image and sprites:
Code: Select all
<style>
.new_button{
list-style:none;
padding:0;
margin:0;
}
.new_button li{
float:left;
}
.new_button li.left{
background:url(button_image.png) 0 2px no-repeat;
width:10px;
height:25px;
}
.new_button li.right{
background:url(button_image.png) right 2px no-repeat;
width:10px;
height:25px;
}
.new_button .input2{
border:0;
background:url(button_image.png) 0 2px no-repeat;
color:#FFFFFF;
height:27px;
font-weight:bold;
outline:none;
padding:0px;
cursor:pointer;
}
html>/**/body .new_button .input2, x:default{
/* firefox fix */
height:25px;
}
.new_button li.middle{
/* chrome fix */
background:url(button_image.png) -30px 2px no-repeat;
}
</style>
<form method="post" action="index.html" >
<ul class="new_button">
<li class="left"></li>
<li class="middle">
<button class="input2" name="submit" type="submit">Check Out</button>
</li>
<li class="right"></li>
</ul>
</form>
I have seen it work with IE 6+, firefox, chrome, netscape and safari.
Daniel this is something that can definitely be fixed...pages should degrade smoothly if there is no JS.
No.. you can't have pretty buttons without hardcoded languages on images. This is extremely inefficient. You would need new button images for each language.
If you want this, goto zencart.
Just add <noscript> tags to the top of your page and be done with it.
If you want this, goto zencart.
Just add <noscript> tags to the top of your page and be done with it.
Who is online
Users browsing this forum: No registered users and 8 guests
