SkillShare Forum - CSS Beauty - All Discussions

Forum Rules, Please READ before starting a new thread or commenting.

admin — Sun, 08 Jan 2006 12:43:35 -0500

Choose the right category when starting a thread

Be descriptive with your questions, we are not mind readers.

Provide example URLs whenever possible

Spam will not be tolerated

No Affiliate links of any kind

The use of profanity will not be tolerated

ENGLISH! Please try to spell and grammar check your post.

NO more "Site critique, site showcase, or site review". SkillShare's mission is to help with problems, and to discuss Web Standards and Web Design topics, NOT to review sites. If you need help with a certain problem on your site, then ask specifically about that issue.

NO self promotion! This means no URLs to your own websites, unless related to discussion.

New rules will be added as appropriate, and others will be adjusted as necessary.

Website Developer (Chicago, IL)

WebToMed — Fri, 03 May 2013 11:30:11 -0400

WebToMed, a leading provider of medical website development and Internet marketing services, seeks an experienced HTML developer. Ideal candidate will be responsible for developing new websites and managing existing projects. A strong existing online web development portfolio is a must.

Requirements
Candidate must meet the following qualifications and be experienced in the following areas:
• Expert knowledge of XHTML, CSS, table-less layout, and jQuery
• Ability to hand-code XHTML
• Knowledge of Photoshop and Dreamweaver
• Minimum of three years experience focusing on website development
• Strong website usability and content organization skills
• Comfortable working in a fast-paced environment
• Ability to keep timelines and meet deadlines
• Excellent written and verbal communication skills

Additional skills:
• Bachelor’s degree or other formal training
• Experience with content management systems

Why apply at WebToMed:
• Work with established and successful Internet professionals
• Succeed in a rewarding and fun business environment
• Develop new skills and exercise creative talents
• Receive competitive compensation and bonuses
• Enjoy attractive benefits and medical coverage

We’re looking for a team member that is able to work well in a group setting, as well as independently. Ideal candidate should be detail oriented with outstanding organizational and prioritization skills. Candidates should provide a link to an online website development portfolio or links to samples of previous work and selected candidates may be tested for proficiency during interview process.

Resume, link to online design portfolio, and salary history should be sent to: hr@webtomed.com

help with CSS3 animations

johndove523 — Mon, 29 Apr 2013 10:42:57 -0400

Please see http://www.backstageweb.net/newsite/images/fpo.jpg graphic to aid with instructions below.

I want to do two fairly basic animations on this page and they are essentially the same:

#1 - When "portfolio" is clicked, I want the spotlights to slide in from the left and right respectively, from outside the viewport to their location shown. When any other button is clicked, I want them to disappear the same way.

#2 - Again, when portfoilo is clicked, I want the 'web' and 'print' menus to slide in from the left and right respectively, and whichever one is clicked, the other one disappears.

I've got the animation code from http://daneden.me/animate/, and the instructions from https://github.com/daneden/animate.css, (I apologize, I know I'm straying into jQuery here a bit) but under 'Usage' on the github page I don't understand where that jQuery code goes.

Right now what I've got is this:

and CSS:

.lights-left {
height: 112px;
left: -24px;
position: relative;
top: -26px;
width: 169px;

-webkit-animation-name: LightsLeft;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-direction: forwards;
-webkit-animation-fill-mode: both;
}

.lights-right {
height: 112px;
position: relative;
right: -858px;
top: -26px;
width: 175px;

-webkit-animation-name: LightsRight;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-direction:forwards;
-webkit-animation-fill-mode: both;
}

@-webkit-keyframes LightsLeft { /*and the same/opposite for 'lights-right' */
0% {opacity: 0; -webkit-transform: translateX(-180px); }

50% { opacity: .5;}

100% {opacity: 1; -webkit-transform: translateX(0);}
}

I don't know about this positioning, seems to me it shouldn't be 'relative' but when I make it absolute the animation doesn't work at all. I'd be most grateful for some help with this.

Thanks,

John

jQuery Menu like barbour.com

JB — Fri, 20 Jul 2012 04:42:38 -0400

I’m looking for a jQuery/javascript menu to do something like www.barbour.com so that when you hover over the menu it drops down and then when you hover over an item in the menu it displays an image related to that item.

Does anybody know where I could download a script like this?

thanks

nav menu display problem in IE9, 8, 7

johndove523 — Thu, 05 Jul 2012 19:12:56 -0400

The display problem I'm encountering is semi-reproducable depending on the machine it's viewed on. On my Win7 laptop using IE9, the display problem occurs only when I navigate to the blog page and every page thereafter. It does not occur in IE 9 or 8 on my work computers (XP and Win7) It occurs in IE 7 without fail, it you can look at it in that browser.

Since I cannot attach a graphic here, I will describe the problem as best I can. I think I have the problem code isolated, I just don't know how to code it correctly. Here are the steps:

1. In IE7 (if possible) go to URL: http://caspca.org/wordpress/ In IE7, you can immediately see that the navbar

s don't float left, and are bursting out of their container to the right.

In IE9 (on my Win7 laptop), the navbar is fine, until you navigate to the blog page (Under News > Blog). Here's where it blows up.

2. Using IE's development tools (element inspector), click on a nav li ("home" is:

Some help with JQuery toggle function

aleare — Tue, 22 Nov 2011 14:32:06 -0500

Hi everyone,
I have made this script to open the extended text of a newsline "more reading" service:

$(document).ready(function() {
$(".morereading").click(function(){
$(".newsBox").slideToggle("1");
});
});

The problem is this script works pretty good only for only ONE newsline, but probably there will be more than one in the same html... If I put a different ID to every "more reading", how do I call their respective extended text by this ID given?

All suggestions or modifications are welcome
Thanks!

Alejandra

Web site editors

gogogob — Mon, 06 Feb 2012 14:10:54 -0500

I've been using Aptana Studio Community Edition for years, without problems.
Now, While I have been working on a long (49Kb), principally editorial site, it has gone completely flakey.
It has been chewing up half my processor resources, and crashing.
I've tried all the obvious fixes.
How can we know the causes, Aptana certainly has some elementary problems such as no word wrap?
I suspect a project grown too complex, and nobody around to handle the problems from the root.

My request - What free alternatives are available for Aptana...
All my work is hand-coded, I need a good coding environment with the usual features... file management, code colouring, mistake flagging, browser preview, script and css coding support -- just good basics.

I would appreciate your suggestions.

By the way... I have received an enormous amount of traffic from CSS Beauty for my antique, then-cutting edge website... www.panavista.eu . That is hand coding!!

Old school ... John McAllister ... gogogob ... grow old disgracefully.

Need help conflicting jquerycss menu with other jquery css tabs

Yubi — Thu, 10 Nov 2011 03:47:00 -0500

I added a jQuery menu tab to my page and there is a clash in the CSS, as can be seen here: http://newbie-cms.com/demo1.

I separated a page with only the jQuery tabs here: http://newbie-cms.com/demo1/channeltabs and that works fine. Also, the http://newbie-cms.com/demo1/index.html page works fine without the tabs.

But once I combine the tabs code with the videos page, the ul,li items of the tabs become displaced.

I also understand that based on my menu, the ul element should have classes ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all and li elements should have classes ui-state-default ui-corner-top. I can find the classes in the menu.css and jquery-ui.css file sbut I don't reallyunderstand how to fix this. I would apreciate help in fixing this.Thank you.

Burlesque Dance Website Design - Please Critique!

RevelationConcept — Mon, 09 May 2011 11:04:15 -0400

I just finished this site for an LA based Burlesque Dance group "Je Suis Femme". I really love the way it turned out, but I want feedback from the design community. I would label myself an "intermediate" level designer. It's been a long road as I've been self teaching myself over the past two years and trying to be standards compliant etc.

Any and all feedback is welcome...I want to learn where I need to improve on both design and coding. Thanks in advance for your time!

WEBSITE TO CRITIQUE: http://BlushingMovement.com

How do I create a Gmail like navigation the locks itself when hitting top of window?

fransgaard — Thu, 06 Oct 2011 02:13:23 -0400

Hi

The subject really says it all. How do I create a navigation that scrolls with the page until it hits the top of the browser screen at which point it locks itself to the top?

Much similar to the Archive, Spam Delete bar in the new Gmail interface.

Any examples?

Many thanks in advance

Styling issue on jQuery scroller

johndove523 — Mon, 12 Sep 2011 15:11:49 -0400

Hi,

Please see URL http://backstageweb.net/StyleCity/.

I am 90% of the way there styling the jQuery scroller in the text box area of the page, but can't quite get the positioning right. The scrollbar itself is too tall, and I don't know how to make it shorter, but the main issue is that when you pull down on the scrollbar, it goes PAST the end of the text (by quite a bit), and then when you try and go back up, you can only go back up about halfway (and see the latter half of the text). I'd be most grateful if someone can straighten me out on this.

The source site for the jQ scroller is http://manos.malihu.gr/jquery-custom-content-scroller

The suspect code:

#main{
background:url(../images/CityBkgrnd.jpg) no-repeat;
float:left;
width:697px;
height:579px;
margin:0;
padding:0;
}

#borderbox {
border: 2px solid #e4e085;
width:620px;
height:265px;
margin:272px 33px 0 36px;
background:url(../images/TextBkgrnd.png) repeat;
}

#main .customScrollBox {
height:265px;
overflow:hidden;
}

#main .customScrollBox .container {
position:relative;
width:586px;
float:left;
}

#main .customScrollBox .content {
clear:both;
}

#main .dragger_container {
position:relative;
width:2px;
height:220px;
float:left;
margin:10px 0 0 5px;
background:#000;
cursor:pointer;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}

#main .dragger {
position:absolute;
width:2px;
height:20px;
background:#999;
text-align:center;
line-height:40px;
color:#666;
overflow:hidden;
cursor:pointer;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}

ie7 problems. please help.

jay0316 — Sun, 14 Aug 2011 04:30:44 -0400

I'm having some trouble with finding a solution to a couple ie7 problems.

First page is this: http://fridaynightohio.com/stage/videos/episode/3886

The left side of the second panel isn't showing in ie7 and there is a big blue bar at the bottom of it. If you look in firefox, you can see what it's supposed to look like.
The videos are also not showing up. Could that be outdated embed code?

Next page is the home page: http://fridaynightohio.com/stage/

"Top Players" blue panel. The panel appears to be collapsed behind the content.
Then same problem with the videos not showing in the player.

Any suggestions?

Thanks!

My North Carolina Golf Community Site is 8th position...

waynem80 — Wed, 18 Jul 2007 12:02:25 -0400

My site is 8th position on Google for keywords "NC GOLF" but i know that it's way better than any site listed above, plus have more traffic than those sites too.. Why isn't google putting me at the top of the list? is the because i don't have enough Keyword Optimized?

thanks,
wayne

disappearing submenu items on webpage and same issue caused by flash as hover submenus disappear

Yubi — Sat, 09 Jul 2011 10:20:25 -0400

Hello Everyone,

I have a website from a shopping cart solution here: http://brandcomputers.eu. I have css issues on the homepage specifically for the left categories menu. On hovering over a category and trying to select a submenu item, it disappears because of the content beneath it. The flash also causes the same issue in different browsers. I would like to fix this on IE7,8 , FF and Chrome for different resolutions.
I tried increasing z-index and changed the ff:
WHAT I DID:

1) FOR categories box:
previously was :

#dd-categories-box li {list-style: none none;}

changed to :.dd-categories-box li {
position: relative;
}

2)FOR box content

previously was:

.box-content {padding: 10px;z-index:300000}

changed to :.box-content .box-content {
left: 210px;
position: absolute;
top: 0;
}

The special product promotions in the center of the page are in a table.Tried with divs but still got same issue with disappearing submenu items.
I can provide the css file on demand but didnt see how to upload it. Appreciate your help.

Basic SEO Tips for beginners

Trincypris12 — Thu, 03 Feb 2011 23:20:40 -0500

1. Title Link and Text

The link of your title should not be a number like – ( http://xyz.com/123.html ) or random letters of the alphabet. This is a poor SEO technique and will affect you rankings horribly. A good permalink structure does have an impact on SEO.

So you should always try putting in some keywords related to the content on that page in your URL? Once you have chosen keywords to include in the URL, write out the title of your post. You will have some keywords to work, so it will make it a little easier on you.

When talking about one of the most important factors of good SEO, we talk about the title of the page. By looking at the title of your page in search engine results, people should be able to make decision about the kind of content they have in store on that page for them. So again include your main keywords in your title, but don’t make it spammy by including too many keywords or by making it read as gibberish.
2. Keywords

If you want your post to appear on search engines for certain keywords then make sure that these keywords appear often in your post. You should skillfully incorporate the keyword into your post five to six times – without making it look artificial for your readers.

But be careful, don’t use the keywords too much or the search engine spider may suspect spam. And if you are creating friendly content, have your keywords in your content where they fit in naturally. And please keep your keyword density lower than 2 percent!
3. Quality Links

It is important that your blog is linked from various high quality websites, as this will increase your number of backlinks (link to a previous post) which has great SEO benefits

At the same time, if your site is linked to undesirable sites such as link farms, bad neighborhoods, etc. then it will have a negative effect on your search engine rankings.

So link to authority and trusted websites only so that your website outgoing profile becomes stronger. And at the same time, get links from quality websites and blogs only. You can grab some quality links for your website by submitting your content on ezine publishing websites, guest posts, genuine blog commenting on the blogs in your niche and getting links from other bloggers.
4. Image Alt Tag

Always add an ALT tag to your images when you insert an image. This is important as there is a lot of traffic that is to be gained from indexed images as well.

An ALT tag is basically an alternative description of your image and it is crawled by search engine spiders.

Using ALT text with an image is important as people will be able to see some text when they are having image off on their systems or when see in an email body. And in the absence of ALT text, they will not get any information about the image you placed on a page or email content if they don’t prefer seeing image from an email or page they browse.
5. Use Anchor Text

When you interlink your pages in the blog, be sure to add proper anchor text. Anchor text is basically a word that is related to the post that you have linked it to; in other words: keywords.

Suppose you have a post about toy making, and use the anchor text, sell toys in any of your posts that link to it. When search engines visit your site and see that anchor text, they follow it, and know your page is about selling toys.
6. Interlink Your Pages

Bloggers are so obsessed with getting quality links from other blogs that they forget that the most basic step of SEO: interlinking pages.

This can do a number of things for you. By interlinking, you are basically selecting keywords in your article and linking them to another page on your blog. You can do this with old articles, pages on your blog, etc. This increases the pageviews on your blog, and makes it easier for search engines to travel deep into your blog.

http://www.reputationmanagements.com/

Where do I start?

mikko_arlanza — Fri, 24 Jun 2011 23:28:21 -0400

Guys can you help me out? I'm making a website and i don't know where to start. I know a little of html and css. Could you guys give me some tips or common problems when making a website? Thanks guys! :)

CSS EXPERT WANTED

nml — Fri, 28 Mar 2008 21:27:14 -0400

Interested in a freelance project? Omelle.com (my luxury footwear company) needs a freelancer to work with us to create the CSS
for our site. We have a rails guy working on the back end of the site - and I am the graphic designer (nicolelafave.com). We are
looking for a CSS expert that is amazing and detailed and can match mockups in Adobe Illustrator as close as possible with little
instruction. Samples are a must - Interested? This will be ongoing and an exciting project.

Need CSS Designer for Sportbike website

camarofloyd — Wed, 06 Sep 2006 21:35:44 -0400

I'm looking for a talented artist/designer that has a good eye for balance and form.

I would like him/her to come up with a template that I can pick apart and use for an upcoming web 2.0 website. The page needs to look grungy, fast, dark, and technological all at the same time. I have been looking at other websites, and one in particular has that sort of style... http://soulpurpose.co.nz/ <-- the pictures are good, the edges are torn, the contrast is black on a diagonally striped gray background. If someone can come up with a good and unique design, I will be willing to give you a payment for what its worth.

Again the page needs a grungy, technological feel, like a chrome tool case, the Nebuchadnezzar in the Matrix, or spraypainted gang symbols under a train passing. The site will be dealing mainly with Sport bikes and the modification scene, so if you are familar, that is a major plus.

The website is currently located at http://www.bikermods.com/index.php

If you think you have some crazy ideas for something that looks great, send a message!

More related websites follow :
http://www.elansnowboards.com/
http://mattbrett.com/
http://csszengarden.com/?cssfile=/116/116.css
http://www.csszengarden.com/?cssfile=113/113.css

Position : CSS Designer
Compensation : $200 - $500
Contact email : floydroute@gmail.com

Some simple CSS work

cocothecat — Tue, 27 Apr 2010 12:35:11 -0400

I hope I'm posting in the correct place, I need someone to fix some cross browser issues I have. Its probably 2 hours work maximum simple stuff but we pay quickly and there is more to follow form the same project.

I'll forward details on request.

Regards

John

JQuery CYCLE Not Working

sherman — Fri, 20 May 2011 01:45:40 -0400

Hey Guys! can you help me figure out why the slideshow is not working

The effect I am trying to achieve is : http://jquery.malsup.com/cycle/pager6.html & http://www.migreyes.com/work/threadless-loves/

My website is http://www.widerpurpose.com/tees

Please help.

Thanks

Appearance of text in Photoshop vs Browser

rasice — Thu, 23 Mar 2006 11:21:08 -0500

I have recently developed a liking towards text based design. I have always designed my websites entirely using photoshop and then moved on to coding.

The thing that bugs me(and makes it difficult to do such designs) is how anti aliased text looks on photoshop and then how it looks entirely different on the browser when its coded using the same font. For example fonts like Lucida Grande/Sans Unicode, look terrible on photoshop and great on the browser once coded (as we know).

I was wonder if theres something im doing wrong, or is there sort of setting that could fix this problem?

I am using CS2 on the windows platform

thanks in advance

EDIT: I do mean aliased text , anti aliased text obviously is totally different.

fade in a div#1 onload, start fade in div#2 when div#1 fully visible

mykstor — Sat, 13 Mar 2010 10:47:52 -0500

I'm redesigning my website which was built for me originally using all Flash. I want to use JQuery for my do-over.

To give my site entrance page some dramatic impact, I'm having my logo drop into place from the top of the window. I used a drop-in slide show script for this and altered it so it doesn't repeat after its first cycle through the jpg array.

I need help getting my slogan to fade from 0 to 100% opacity in a division just below this as soon as my logo has dropped in completely.
At the same time an ENTER SITE button should also go from 0 to 100% opacity in a division below this, at screen center.

I know that JQuery has a fadeIn command, but I don't know how to implement it. I've found several examples of far more complicated fade-ins triggered by onclick, etc, but nothing that simply fades in a jpg triggered by onload. Can someone advise me on how to write the whole code for this?
Is JQuery a good choice for this?
I like the esthetic of using enhanced Javascript instead of a Flash movie if possible.

Thanks in advance for any help offered by any of you!

Mike Storer, a perfumer in Los Angeles.
michaelstorer.com

Trouble with centered Layout

Maquita — Tue, 23 Feb 2010 00:36:27 -0500

Hi there,

I'm going nuts. I just can't find a solution for this. This is how it SHOULD look like:

The navigation will have background image (full width), but the menu itself should be centered. Same for the footer. And that's my problem. This is how it currently looks:

The red box in the background is the footer, which of course should be at the bottom below the blue box.

That's my HTML:

div id="menu"
div id="menu-content" /div
/div

div id="header" /div
div id="conten" /div
div id="footer" /div

And my CSS:

#menu{width:100%;height:60px;background:#FF0;}

#menu-content {left:50%;margin-
left:-512px;position:absolute;overflow:hidden;height:60px;width:1024px;background:#0FF;}

#header {width:1024px;height:300px;background:#CF0;left:50%;position:absolute;margin-left:-512px;}

#content{width:1024px;height:500px;background:#03C;left:50%;position:absolute;margin-left:-512px;margin-top:300px;}

#footer{width:100%;height:100px;background:#C33;}

Any suggestions what I'm doing wrong or how I could solve this?

Thanks a lot
Nicole

Outlook background image?

dmitryseliv — Mon, 12 Apr 2010 19:48:31 -0400

Is the way to display background image in outlook?
I know it's pretty safe to use background color which works ok most of the time but not having much luck with outlook displaying backround image.

DS

JQuery: Fade In on Mouse Over

Yakuzza — Tue, 23 Jan 2007 10:09:43 -0500

Hi,

I'm searching for a method to create the following effekt using jquery.

The idea

I have a page with thumbnails of some photos on it. Initially the thumbnails should have an lower transparency maybe 30% of its original.
On hover the selected thumbnail should fade in to 100%.

I've been searchin for a while in goole but I'am not very experienced with jquery.

I hope someon can help me :)

THX in advance

Free Facebook templates for fan page applications

kensmith — Wed, 20 Apr 2011 03:29:05 -0400

wanted to share a growing collection of free and premium facebook templates for facebook fan page applications. register for free at hostFB.com and apart of getting free facebook fan page hosting you will also get unlimited access to the collection of facebook templates.

site discussion

john — Thu, 14 Apr 2011 10:37:30 -0400

hello varland.....
i've visited your site you done great job provided information s are handy for employers... but designing is not salient ...

image does not position correctly in Safari 4

kirks — Fri, 08 Apr 2011 16:30:09 -0400

I have a site that I have created in WordPress using a pre-designed theme that I heavily customized.
http://www.newlivingwaygreenville.org/blog/

The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x.
The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others.

The image is using inline styles to overcome the limitations of this particular WordPress theme.
style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;"

Any ideas why this doesn't work right in Safari and what I can do to fix it?

Thanks!

ks

Flash movie as background!!!

dmitryseliv — Tue, 07 Nov 2006 16:38:31 -0500

Just curries!

If you can use flash movie as background with CSS?
Let say I have a CSS based website but I want to use a flash background that does some simple animation.

Best, DS

missing pages redirect?

dmitryseliv — Tue, 07 Apr 2009 10:12:08 -0400

Hi,

Does anybody knows how to make permanant redirect on all missing pages to root of the website?
So I don't have to create entry for each missing page in .htaccess file.

Cheers, DS