[WD&D] Digest for sitedesign@googlegroups.com - 11 Messages in 5 Topics

  Today's Topic Summary

Group: http://groups.google.com/group/sitedesign/topics

• Center image horizontally inside a td [2 Updates]
• How to make the google plus demo tour [1 Update]
• How to pass parameters to a script from an HTML element [4 Updates]
• 100% width menu [3 Updates]
• system to preview uploaded image on a mug [1 Update]

 Center image horizontally inside a td

MariF <maria.focsa@gmail.com> Dec 12 06:02PM -0800  

Hi guys,
 
The bad part of growing up as a dev in the past 1 year is that my
experience working with tables sucks. So, anybody has any ideas how I
could center the images vertically on this layout:
http://knit.net.au/jo-sharp-books
 
Few constrains:
- i cannot drop the table, is inserted automatically by the CMS and I
cannot change it
- I know div inside td is a bad idea, but such is the world of
Business Catalyst
- the images are different sizes so I cannot use a fixed margin.
 
Any idea how to fix this?
 
Thanks!
Maria


 

Artist <sitepro@gmail.com> Dec 12 08:49PM -0600  

<div align="center">image here</div>
 
Is old style, not proper. You should never use tables for layout. But If
you are formatting data you can take your cues from it...
 
<td align="center">image here</div>
 
Neither is proper. If is best to assign them a class in CSS such as
 
.alignCenter {center};
 
...in the head and call the property to be centered with class alignCenter
in the body...
 
<div class="alignCenter">image here</div>
 
 
-Doug
 
Doug Peters
(605) 610-9001 (Google phone) or 1-800-279-2156
http://www.Doug-Peters.com http://www.twitter.com/Domainating
http://www.facebook.com/people/Douglas-Peters/1628191759
http://www.W3DN.com http://www.DomainHostmaster.com
http://www.Domainers.Name http://www.PremiumBrand.Name
http://www.HDWebHosting.com http://www.ApacheWebsiteHost.com
http://www.PhotoshopPros.com http://www.SymbioticDesign.com
http://www.AddURLEngine.com http://www.TopSitesCatalog.com
http://www.HyperlinkDirectory.com http://www.Worthful.Info
http://www.Reciprocate.Info http://www.httpmaster.com
 
 


 

 How to make the google plus demo tour

lilmopat <lilmopat@gmail.com> Dec 12 08:47AM -0800  

I will like to know if anybody knows how to make the google plus demo
tour....http://www.google.com/intl/en_uk/+/demo/


 

 How to pass parameters to a script from an HTML element

Olivier Florence <oli.florence@gmail.com> Dec 12 03:18PM  

Hello,
I am animating some elements on a page, one after the other. Those are DIV
and each need to pass parameters relating to the animation.
 
As a test I have been passing the parameters via the "title" so for
instance:
<div id="layer123" title="1|4|left|fade"></div>
 
It works fine but obviously this is not the way to do it. Is there an HTML
tag that would allow me to pass my parameters in a similar way as the title?
 
 
--
Olivier Florence
oli.florence@gmail.com
www.flowebdesign.ie
I am on Linked In <http://www.linkedin.com/in/olivierflorence>!
Follow us on Facebook <https://www.facebook.com/flowebdesign>


 

Aaron Craig <maremma.mercutio@gmail.com> Dec 12 05:20PM +0100  

Are you using Javascript for the animation? If so, you probably don't need
to change pages at all, but can just make ajax calls.
 
Otherwise, I often pass information in the class attribute. This is
standards compliant, and doesn't change the page in any way. It often can
end up being helpful in styling the page, as well.
 
On page one, for instance:
<div id='mydiv' class='normal-classes myid-123-step-1'></div>
 
On page two
<div id='mydiv' class='normal-classes myid-123-step-2'></div>
 
etc.
 
Aaron Craig
Performance International / Evolving Design
http://performance-international.net
http://evolving-design.com
 
 


 

Olivier Florence <oli.florence@gmail.com> Dec 12 04:24PM  

Hi Aaron,
It is a Jquery Script. I want to pass the position of the layer before to
animate, the position after the animation, the speed of transition etc so i
am not sure the class would be ideal for this?
 
Kind regards,
Olivier
 
 
--
Olivier Florence
oli.florence@gmail.com
www.flowebdesign.ie
I am on Linked In <http://www.linkedin.com/in/olivierflorence>!
Follow us on Facebook <https://www.facebook.com/flowebdesign>


 

Aaron Craig <maremma.mercutio@gmail.com> Dec 12 05:34PM +0100  

Hello, Olivier -- it's been a while :)
 
Can't you just do it through jQuery and ajax? Why do you need to reload
the page? If the page doesn't reload, you shouldn't need to set any
attributes, or you can use $.data() to store information.
 
If you have more details, I can probably help you more.
 
Aaron Craig
Performance International / Evolving Design
http://performance-international.net
http://evolving-design.com
 
 


 

 100% width menu

Liam Kenneth <liam.kenneth89@gmail.com> Dec 12 03:50AM -0800  

Hi all I am trying to get my menu to be 100% of its container and to
reduce size when the screen gets smaller I cant seem to do it. I have
posted the code below.
 
When the screen size is wide there is loads of empty space on the
right and I would like the menu to expand to fill this gap and then
reduce when the screen is smaller. anyone know how to do this? thanks
 
CODE: (just copy and paste in to notepad )
 
<!DOCTYPE html>
 
<html>
<head>
<title>Page Title</title>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
 
body {
width:100%;
 
}
 
/* ----------------+_+-----------------*/
 
.clear {
clear:both;
}
 
.lookfeelMenu {
background: #f6f8f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/
Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI
+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjhmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2U1ZWJlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2Q3ZGVlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY3ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ
+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc
+);
background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3
51%, #f5f7f9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-
stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3),
color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee
50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3
51%,#f5f7f9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3
51%,#f5f7f9 100%); /* IE10+ */
background: linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3
51%,#f5f7f9 100%); /* W3C */
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9',
endColorstr='#f5f7f9',GradientType=0 ); /* IE6-8 */
margin:10px;
height:38px;
border:1px solid #ccc;
min-width:1000px;
}
 
.lookfeelMenu ul li {
display:block;
float:left;
padding-right:1.9%;
padding-left:1.9%;
border-right:1px solid #ccc;
 
/* centers menu and borders */
height:28px;
padding-top:10px;
/* ----------------------- */
}
 
.lookfeelMenu ul li:last-child {
border:none;
}
 
 
.lookfeelMenu ul li a{
text-decoration: none;
font-family:sans-serif;
color:#555;
 
}
 
.lookfeelMenu ul {
/* padding-top:10px;*/
/*margin-left:10px; */
 
}
 
.active span {
color: #0e9dd2;
}
 
.lookfeelMenu ul li a:hover {
color: #0e9dd2!important;
}
 
 
</style>
</head>
 
<body>
 
 
<div class="lookfeelMenu">
<ul>
 
<li><a href="#" class="active"><span>General</span></a></li>
 
<li><a href="#">Header & Footer</a></li>
 
<li><a href="#">Menu & Bread Crumb</a></li>
 
<li><a href="#">Headings</a></li>
 
<li><a href="#">Buttons</a></li>
 
<li><a href="#">Tabs</a></li>
 
<li><a href="#">Booking Form</a></li>
 
<li><a href="#">Grids</a></li>
 
<li><a href="#">CSS</a></li>
 
</ul>
</div><!-- End Create New Banner -->
<div style="clear:both;"></div>
 
</body>
</html>


 

Joni Mueller <joni@jonimueller.com> Dec 12 05:54AM -0600  

Post a link to the site; we can grab your HTML and CSS using Firefox dev tools. Or maybe just post the relevant code?
 
Joni Mueller
Pixelita Designs
joni@pixelita.com
Sent from my iPhone
 
 


 

Liam Kenneth <liam.kenneth89@gmail.com> Dec 12 12:01PM  

I posted the code if you look at the email :) the site isn't live
 


 

 system to preview uploaded image on a mug

daniyala ramprasad <ramprasad.daniyala48@gmail.com> Dec 12 10:09AM +0530  



 

You received this message because you are subscribed to the Google Group sitedesign.
You can post via email.
To unsubscribe from this group, send an empty message.
For more options, visit this group.

--
You received this because you are subscribed to the "Web Design and Development" group at Google Groups. Messages are prefixed with [WD&D] in the subject. No spam is allowed. Be civil, be professional; try to be helpful & mind your netiquette. All posts are Copyright the original author and the Web Design and Development group. No reproduction of this content is allowed in any electronic or printed form outside the group at Google Groups and the http://www.WDaDg.org website. Any unauthorized use of our copy constitutes illegal Copyright infringement and may well be prosecuted to the full extent of the law. Digital Signature: $©"[W|D|&|D]g"|^|!SiteDesign@GG||#%$
To post to this group, email SiteDesign@googlegroups.com
To unsubscribe, email SiteDesign-unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/SiteDesign?hl=en