New here, so hopefully I am posting in the correct spot (or that this is allowed). I just wanted to show off a new snippet I made today.

It uses the checkbox "hack" (:checked ~ div) to create click events using just CSS. It's not really meant to be super UI/UX friendly, but it's still pretty neat. Anyways, here's the links. Let me know what you guys think.

Thanks!

http://codepen.io/ncerminara/pen/KzurJ

http://scotch.io/demos/pure-css3-star-wars-lightsaber-checkboxes

background: -moz-linear-gradient(
  top,
  #1275ae 0%,
  #0e619c);
background: -webkit-gradient(
  linear, left top, left bottom, 
  from(#1275ae),
  to(#0e619c));

My attempts did not work..

Thank you very much :)

I am trying to use this technique for my own wordpress website re design.

This is what im trying to do http://css-tricks.com/jquery-magicline-navigation/

and this is my wbsite http://dev.planbfootball.com/

As you can see its not sliding when you hover over.

Can anyone please help ?

I build sites the simplest way I know how---with a browser, a text editor, and an FTP client. That's all I really need. Am I really missing something here?

At the end of the day, I just don't see any point in preprocessors. Sure, I'd use SASS if it didn't have to be converted to CSS. But I'm not keen on jumping through tons of hoops just to supposedly "save time".

Anyone with me?

position:absolute;
bottom: 0px; 

In #nav but all that does is align them to the very bottom of the page. What could I be doing wrong?

My first post so please be gentle!

I've added a colostrip to the top of my web page and its not alligning properly, but only on mobile devices - well, at least safari on iphone and ipad and android.

It appears fine on multiple browsers on my PC so I'm really confused.

The color strip does not stretch the whole way across the screen on the right and the slide show has been pushed to the right.

Here is a screen shot from my iphone: theweddingsinger.uk.com/images/screenshot.jpg

And the live page is: theweddingsinger.uk.com/index1.htm

My CSS is:

colorstrip {

width: auto; height: 40px; text-align: center; background-color:#9c2160; border-bottom:solid 2px white; }

colorstriptext

{ width:980px; margin-left:auto; margin-right:auto; margin-top:0; padding-top:12px; text-align:center; font-family:arial,verdana,helvetica,'sans serif'; font-size:8pt; font-weight:bold; background-color:#9c2160; color:#C0C0C0; }

and in my HTML:

I recently experimented creating a single page website: http://www.electromueblestony.com and would like add two things:

1. When user clicks on a menu item, which takes it to an anchor, I would like that item to be the active or selected item on the nav.

2. I would like to have a smooth slide to the section or anchor.

Thanks in advanced for your time.

I'm in the middle of a project and I've got stuck and hoped you folks could help me out. Currently I'm trying to optimize the design for both pc and mobile device and here's problem -- the menu I would like to show on the mobile won't appear.

The code can be seen here: http://cdpn.io/nqpLo

As you can see I'm using a sticky footer holding the menu('s) one is hidden with the help of an id tag and given the css attribute "visibiilty:hidden;" The other is visible for the pc(or laptop ofc) user.

Thanks in advance - If you're in doubt or I'm not explaining myself well enough please do let me know :)

• Lasse

I know that we need the Content:""; then to position it. but relative? and would that be relative to the parent ? (so the li? or the a?) then the triangle.

http://jsfiddle.net/attilahajzer/6Sxak/10/

I just have a simple question: is there any software like Codekit for pc?

I need to know of a way to display "small caps" along with "uppercase" based on how the letter was typed. Example... THe LAZY dog SleePS all day.

In the example, I want all letters that are typed in uppercase to be "capitalized", while all letters typed in lowercase to transform to "small caps". Make sense?

Is this possible to do in CSS?

Thanks and apologies if my terminology is not correct.

I'm busy putting a new responsive site together and I've heard a lot of talk about shifting to EMs for media queries and layout.

Can anybody give me a "Top 10" list of why this is a good/bad idea and any gotchas to look out for?

Shot!

Gareth

The above pen illustrates a way to make a responsive layout that includes a sidebar. When the final breakpoint is met, the navigation disappears, and a navigation icon appears. When the icon is clicked, the navigation appears. I accomplished this with jQuery, and I'm using .addClass() to add class "close" to the icon so that, after the navigation is opened, when it is clicked on the navigation closes. It works, until you do it a second time. The second time around, the navigation opens and immediately closes. It seems as if the class "close" is not being removed after the first second click. Feedback/help is appreciated, thanks.

Edit: I figured it out. I knew it had to be something terribly simple. I forgot to close the gallery div. Sigh.

If you go to PayPal's UK homepage there's an image of a couple looking out onto a lake. This image is sized at 1600px so it fills the screen regardless of the screen resolution. How simply do I achieve this without having a left/right scroll bar at the bottom if the screen resolution is less than 1600px wide? As the screen resolution gets bigger more of the image at the sides will be seen, and as it gets smaller they will be cut off.

Thanks

Does anyone have any suggestions on the best techniques/scripts for server side conditional loading. I know of Categorizr and it seems very straight-forward although it's no longer supported or developed. Any feedback is greatly appreciated. Thanks!

=====Example Markup from Categorizr=====

<?php if (isMobile()) { ?> This device is a mobile
<?php } ?>

<?php if (isTablet()) { ?> This device is tablet
<?php } ?>

<?php if (isDesktop()) { ?> This device is a desktop
<?php } ?>

<?php if (isTV()) { ?> This device is a TV
<?php } ?>

Please help, Jon

The left arrow is on top of the menu and it is not desired. Please help me solve this.

Best, Jon

Thanks!

I've managed to get it to function properly but i seem to have an issue. If you look at this picture: http://i40.tinypic.com/ae3xa0.png

To the left of the dropdown menu is a bunch of extra white space. How do i remove that and center the text?

Css Code for the navigation: http://i44.tinypic.com/noda8j.png

Thanks a bunch if anyone can help, - Miky.

using an in-line style like <p style="background-color:#d7a284">John & Jane Johnson</p> using span and div produce same result

how do I limit the background color to just where the text is?

I just want to know, how many font's we can use in new fresh design.

Actually i am making one new design. I'd always used three/four font's, which i think it's too many.

In-fact if you can send me some link 's with good typography website, so i can understand better.

Thanks in advance :-)

Rihan Terence

http://joannfitzpatrick.com/leadvalidation/signup-test.html

Thank you in advance.

I have a main page and then I have 3 pages i want to link off of it.

My problem is, I link all the pages etc they all open up in a new window, which is what im after at the moment. However say my 'portfolio' page is underneath my 'home' page, so i just scroll down and it's there and even when I click the link to go to the 'portfolio' page, the main menu plus the 'portfolio' page is just repeated :/

I've tried looking at other sites that are similar to mine but i just get lost in the codes.

I've tried making seperate .css sheets but this doesn't help either.

the biggest thing is the wrapper and columns and the background images to give the three line box

now to make it responsive / fluid you can not use a fixed width image to produce the columns so how do you tackle something like this or is this style of site dead with responsive design

the idea of making this mobile friendly what problems could this cause

this is more of a discussion and techniques and trying to work out if a different design needs to be used

many thanks

devo

  /*
             Theme Name: WordPress Theme
             Theme URI: http://reallycoolstuff.net/wordpress
             Description: Fully Responsive WordPress Theme
             Version: 1.0
             Author: Jarolin Vargas
             Author URI: http://domain.com
             Tags: responsive, theme, template
             */

and added this to index.php file to link the style.css sheet.

        <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css"/>

What else must i do to get this to work?