All Discussions - CSS-Tricks Forums http://css-tricks.com/forums/discussions/feed.rss Tue, 11 Oct 11 09:42:00 -0400 All Discussions - CSS-Tricks Forums en-CA Bulletproofing a menu http://css-tricks.com/forums/discussion/14067/bulletproofing-a-menu Mon, 10 Oct 2011 11:38:35 -0400 mpanic 14067@/forums/discussions
	font-family:'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;


Now, if HelveticaNeue fails to load and it falls back to Helvetica which is a much wider font the menu falls apart.
This is my markup:

<ul id="main-menu">
<li class="current-page"><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Ideas</a></li>
<li class="last"><a href="#">About</a></li>
</ul>


This is my CSS:

#main-menu{
float: right;
margin: 51px 0 0 0;
max-width: 700px;
}
#main-menu li{
float: left;
}
#main-menu li a{
display: block;
padding: 0 0 5px 0;
margin: 0 25px;
font-family:'HelveticaNeueW01-77BdCn 692722', Helvetica, Arial, sans-serif;
font-size: 2em;
color: #fff;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 1px 0 #946439;
}


First list item should align to begining of #main-menu, and the last list item should align to the end of #main-menu. How do I get it to work the same when I have Helvetica or Helvetica Neue as my font?

Thanks for any help.]]>
Why is fitvids.js not running when the settings are placed in an external script.js file? http://css-tricks.com/forums/discussion/14044/why-is-fitvids.js-not-running-when-the-settings-are-placed-in-an-external-script.js-files Sat, 08 Oct 2011 10:48:38 -0400 albi 14044@/forums/discussions
I've tried to add the settings for the fitvids.js to that script.js file, but it won't work. When placed inside my HTML file right after script.js it is working.

Can't see why this is an issue to fitvids.js? Shouldn't be there no difference at all?]]>
Problem with Anything slider implementation on my site http://css-tricks.com/forums/discussion/14080/problem-with-anything-slider-implementation-on-my-site Tue, 11 Oct 2011 09:09:08 -0400 joelmb 14080@/forums/discussions http://mediamarble.com

I recently redesigned my site which in the main was cosmetic re-skinning what's there now. However I've done something to the code causing a problem with the slider...

Obviously the slider is made up of multiple div layers inside ul and li tags which only slide in when the navigation instructs them to. However I've got two strange things happening.

1. On some pc's I look at my site and only the first fifth of the slider is showing. However clicking refresh seems to sort it and it's all visible.

2. The bigger problem; on mobile devices all the slider layers are visible at same time, and the navigation / slider select isn't working at all. This was working as I say in the older design so I can't work out what's happened.

Can anyone see the problem in the code?? I apologise in advance, it's a bit messy in there. My guess is the mobile device isn't interpreting the UL and LI tags or something.... one ideal solution should be to have a css styled mobile version of my site of course, but I'd like to get this sorted first.]]>
create custom play|pause button to play a song http://css-tricks.com/forums/discussion/14058/create-custom-playpause-button-to-play-a-song Mon, 10 Oct 2011 04:37:41 -0400 amyth91 14058@/forums/discussions Anything Slider not sliding with embedded iframes. http://css-tricks.com/forums/discussion/14062/anything-slider-not-sliding-with-embedded-iframes. Mon, 10 Oct 2011 08:57:26 -0400 tblanco 14062@/forums/discussions In the site i'm making, i want embedded Vimeo video's in iframes. If the (auto) slider comes across one of those, it stops sliding and the navigation is disabled (although the video is playable).
If i use the 'vimeo old embedded methode' it works perfectly, but then the videos are not good for ipad and such.
Anybody a solution?
thanks]]>
New website about CSS Layouts, feedback please. http://css-tricks.com/forums/discussion/14071/new-website-about-css-layouts-feedback-please. Mon, 10 Oct 2011 13:58:05 -0400 Cokyweb 14071@/forums/discussions Just got this domain name registrations reseller package from a local webhosting co. My primary services are domain registrations and web hosting service, i've chosen to use CSS website Layouts as my niche. So i designed this website to offer my services under the CSS website Layouts umbrella.

I believe the structure of the website is good even though there is still some errors when validating the homepage.
I really need your feedback on my website's : colors, ads placements and my fixed sidebar menu.

Here's my website : http://www.cokyweb.com

Thanks

Kennel Worth]]>
Can't Get Divs Right http://css-tricks.com/forums/discussion/14068/cant-get-divs-right Mon, 10 Oct 2011 12:17:40 -0400 jmeyer0911 14068@/forums/discussions 1. I can't get my div to show up.
I created 4 divs...it looks like this:
HTML:


<div class="mainContent">
<div class="topContent"></div> <----Won't show up
<div class="content">
<asp:ContentPlaceHolder ID=......>
</asp:ContentPlaceHolder ID>
</div>
<div class="bottomContent"></div> <---Won't show up
</div>


CSS:

div.mainContent
{
padding-bottom: 4px;
height: 100%;
text-align: left;
position: relative;
}
div.topContent
{
background: url('Images/Menu/topBorder.png');
clear: both;
}
div.conent
{
background-color: white;
clear: both;
}
div.bottomContent
{
background: url('Images/Menu/bottomBorder.png');
clear:both;
}

I'm not sure if you know what I'm doing. the top/bottomBorders are an image, which the content is suppose to line up with those images...But every time I run it, they never show up, only the div.content shows up. I checked everything to make sure my paths were correct. Everything is...just those images won't show up. The images are just rounded borders. I did make a css3 type, but then, they won't work if xp is the users os.
I think I'm writing it correctly.]]>
i want know any forum which interested in designs layout http://css-tricks.com/forums/discussion/13973/i-want-know-any-forum-which-interested-in-designs-layout Tue, 04 Oct 2011 03:58:12 -0400 ameral 13973@/forums/discussions I want to know any discussion forums which interested in layout of web sites and i can post in it , as i sometimes find some tricks in design and i want to know how to do it ?

thx in advanced ]]>
Coding a simple form http://css-tricks.com/forums/discussion/14072/coding-a-simple-form Mon, 10 Oct 2011 14:26:45 -0400 Bob 14072@/forums/discussions
Anyway, I have this login form and I alway have problems aligning the field inputs and labels and so on. I came up with this image in photoshop which I how I'd like to look: http://i.imgur.com/tsbqh.jpg

Can anyone tell me what would be the best way to start coding this? So far I came up with this:

<body>

<div id="loginwrap">

<div id="title">
<p>Log in!</p>
</div>

<form>

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

<br />

<label for="password">Password:</label>
<input type="text" id="password" name="password" />

<br />

<input type="submit" name="submit" value="Log in" />

</form>

</div>

</body>


And for the CSS:

body {
background: #F3E7C2;
}

@font-face {
font-family: 'Lucida Fax';
src: url('fonts/LFAXD.ttf') format ('truetype');
}

#loginwrap {
margin: 0 auto;
width: 580px;
height: 325px;
-moz-border-radius: 10px;
border: 1px solid #FFF;
background: #72AEE5;
padding: 10px;
}

#title {
background: #103E69;
color: #FFF;
height: 40px;
-moz-border-radius: 10px;
font-family: 'Lucida Fax', Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
padding: 2px 2px 2px 10px;
}


Which, well.. it looks already pretty much the way I want to look. But I guess I'd like to know how to properly align the labels and inputs and submit buttton etc. Also should I make divs around the label and inputs to create a container for them and give them the blue background or is there a better way to do this? I don't even know if using
tags to put the next input field on the next line is good, I don't think I've seen it before..
Oh, and how would I go about placing this login form somewhere like 40% down from the top? Add a margin-top: 40% or something to the wrapper?
]]>
Problems with the CSS Tricks Website http://css-tricks.com/forums/discussion/13373/problems-with-the-css-tricks-website Tue, 23 Aug 2011 17:26:54 -0400 furrball1383 13373@/forums/discussions how to install PHP 5.3.8 Released! on appserv ! http://css-tricks.com/forums/discussion/14079/how-to-install-php-5.3.8-released-on-appserv- Tue, 11 Oct 2011 05:25:47 -0400 The-Marshal 14079@/forums/discussions
how to install PHP 5.3.8 Released! on appserv!

is there any clear tut for it!]]>
Getting Media Queries working on old IE http://css-tricks.com/forums/discussion/14056/getting-media-queries-working-on-old-ie Sun, 09 Oct 2011 21:55:15 -0400 rjc 14056@/forums/discussions
Firstly thanks for a great site! lots of helpful advice...

Now my problem: I am trying to get my media stylesheets to run in old versions of IE. It's almost working except for the first page is not displaying correctly

Roughly each page has a set of separate includes for each screen type:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" title="layout width" href="/includes/layout-mobile.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 481px) and (max-width: 800px)" title="layout width" href="/includes/layout-narrow.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 801px) and (max-width: 1300px)" title="layout width" href="/includes/layout-medium.css"/>
<link rel="stylesheet" type="text/css" title="layout width" media="only screen and (min-width: 1301px)" href="/includes/layout-wide.css"/>
<link id="include-directory" href="/includes/"/>

And then for IE 8 and below there was a small javascript routine:

function ieMediaQuery() {
//load stylesheets
var width = document.documentElement.offsetWidth;
var href = document.getElementById("include-directory").href;
//XXX should somehow parse media attr directly in link..
if (width < 481) {
href += "layout-mobile.css";
} else if (width < 801) {
href += "layout-narrow.css";
} else if (width < 1301) {
href += "layout-medium.css";
} else {
href += "layout-wide.css";
}
for (var i = 0; i < document.styleSheets.length; i++) {
var s = document.styleSheets[i];
if (s.href != null && href.indexOf(s.href, href.length - s.href.length) !== -1) {
if (s.media != "screen") {
s.media = "screen";
}
if (s.disabled == true) {
s.disabled = false;
}
} else if (s.title == "layout width" && s.disabled == false) {
s.disabled = true;
}
}
}

document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"" + document.getElementById("include-directory").href + "empty.js\"><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (/^(complete|loaded)$/.test(script.readyState)) {
ieMediaQuery();
script.onreadystatechange = null;
if (/^complete$/.test(script.readyState)) {
//try to force relayout by trying to retrieve offset from known element
var menu = document.getElementById("menu");
//XXX commented as causes error
//var tmp = menu.offsetTop;
}
}
window.attachEvent("onresize", ieMediaQuery);
};


Above works - except for first time when IE never sends readystate 'loaded' only get 'complete' which seems too late to change the active stylesheets.

In that case tried forcing it to relayout by requesting the offset of a div...but that didn't work, just generated an error in IE for some reason.

Any Ideas?

Thanks in advance for any assistance.]]>
Onclick info (slides down) http://css-tricks.com/forums/discussion/14078/onclick-info-slides-down Tue, 11 Oct 2011 00:50:23 -0400 Slink2 14078@/forums/discussions
a while back I watched a video tutorial for a snippet of CSS code that would begin showing just an image and onclick would slide down a window with written information on it, was just wondering if anyone had a link to the video or a similar tutorial?

thanks! ]]>
Active Page Link http://css-tricks.com/forums/discussion/14045/active-page-link Sat, 08 Oct 2011 11:44:52 -0400 Bingham 14045@/forums/discussions
Example:
On the site, I want the links to appear green, hover orange, and when "home" page is showing, I want that home link to be purple but all of the other links to be green still.

Is there an a:current tag out there?

I could write < span >home< /span> gallery | gallery |... and redefine with purple link characteristics and then just change the span on every page. That is a lot of extra markup and checking. I'm seeking a shortcut.]]>
css border-image http://css-tricks.com/forums/discussion/14075/css-border-image Mon, 10 Oct 2011 17:23:22 -0400 dynamyc 14075@/forums/discussions This is the image
]]>
LESS: Background color inheritance http://css-tricks.com/forums/discussion/14077/less-background-color-inheritance Mon, 10 Oct 2011 22:34:26 -0400 Johnnyb 14077@/forums/discussions
I'll cut to the chase.. I'm using LESS for the first time and trying to figure out something which seems pretty straight forward, but is proving not to be.

I have a 8 sections, each with their own unique background color. Inside each section is a link. I want this link to inherit the background color of its parent section. I then want to saturate it by 20%. Something like this:


section a{
background: saturate(@parent-bg-color, 20%);
}


Can I do this without having to specify background colors for each one? I'd like to avoid this:

section#one a{
background: saturate(@section1-color, 20%);
}
section#two a{
background: saturate(@section2-color, 20%);
}
section#three a{
background: saturate(@section3-color, 20%);
}
etc.. etc..

]]>
Horizontally Scrolling Site http://css-tricks.com/forums/discussion/14076/horizontally-scrolling-site Mon, 10 Oct 2011 21:13:55 -0400 jgriffiths 14076@/forums/discussions http://css-tricks.com/166-how-to-create-a-horizontally-scrolling-site/ .

I used the table method to make a horizontally scrolling site. I also used some javascript to make it scroll smoothly. Now I'm looking for a way to make the javascript scroll to the exact center of the page, no matter how wide the user's screen is.

My site is here: http://achieveopedia.com/new

Any suggestions?]]>
How to override css styles under a single class http://css-tricks.com/forums/discussion/14059/how-to-override-css-styles-under-a-single-class Mon, 10 Oct 2011 05:22:27 -0400 ash_alwazz 14059@/forums/discussions
<div class="when clear">
<ul class="details">
<li><h3>When</h3></li>
<li><p>Saturday, November 12, 2011<br/> 7:30 PM - 9:00 PM<br/>Eastern Time</p></li>
</ul>
</div>


I want to add different colors to <li><h3>When</h3></li> and <li><p>Saturday, November 12, 2011<br/> 7:30 PM - 9:00 PM<br/>Eastern Time</p>

I have used the following method to override: .details { color: #0066CC;}
But both of them are changing to the same color. Does anyone know how I can override to apply different colors to the different li tags.
]]>
multiple loop issue - previous posts page is wrong!? http://css-tricks.com/forums/discussion/5976/multiple-loop-issue-previous-posts-page-is-wrongs Sun, 10 Jan 2010 16:32:39 -0500 silvers 5976@/forums/discussions
i have been trying to do something similar to css-tricks in showing my newest post in a different way to the other posts on the page. that seems all good, however when you click on "older posts" it has a problem as it still shows the newest post on each page, and doesn't work in the same way css-tricks does.

could someone help me on this one please? i would really appreciate it.

this is the site i have the problem on (i know its crap but i am trying!) http://www.mariosuniverse.com/blog

here is my code... (thanks in advanced)

do i need a conditional statement to only do it on the home page like <?php if (is_home()) { } ?> ??? if so can someone show me the way? cheers



<?php get_header(); ?>
<div class="top"></div>
<div id="main-content">

<div class="loop">

<?php $my_query = new WP_Query('category_name=featured&posts_per_page=1');
while ($my_query->have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID;?>

<div id="datebox">
<p class="day"><?php the_time('d') ?></p>
<p class="month"><?php the_time('M') ?></p>
<p class="year"><?php the_time('Y') ?></p>
</div>
<div class="star"></div>
<div class="clear"></div>

<div id="post-<?php the_ID(); ?>"> </div> <!-- did wierd stuff with this when i moved "loop" up! -->
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h2>
<?php the_content('Read The Article / Have your say!'); ?>

<!-- <p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> </p> -->

</div>
<br/>
<br/>
<div class="shroom"></div>
<br/>
<br/>
<br/>


<?php endwhile; ?>

<?php if (have_posts()) : while (have_posts()) : the_post();
if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<div id="datebox">
<p class="day"><?php the_time('d') ?></p>
<p class="month"><?php the_time('M') ?></p>
<p class="year"><?php the_time('Y') ?></p>
</div>
<div class="star"></div>
<div class="clear"></div>

<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"> <?php the_title(); ?></a></h2>
<?php the_content('Read The Article / Have your say!'); ?>
<!-- <p><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p> -->


<br/>
<br/>
<div class="shroom"></div>
<br/>
<br/>
<br/>
</div>
<?php endwhile; ?>

<ul>
<li><?php next_posts_link('&laquo; Older Entries') ?></li>
<li><?php previous_posts_link('Newer Entries &raquo;') ?></li>
</ul>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
]]>
[Solved] wordpress older entries http://css-tricks.com/forums/discussion/9464/solved-wordpress-older-entries Fri, 08 Oct 2010 16:16:36 -0400 marcdefiant 9464@/forums/discussions
Here's the webpage, I made it for practicing with wordpress.
http://home.dyllon.co.cc]]>
Label in forms http://css-tricks.com/forums/discussion/14061/label-in-forms Mon, 10 Oct 2011 07:26:44 -0400 Kiser 14061@/forums/discussions
1)
<label for="name">What's your name</label>
<input type="text" name="name" value="" />


and

2)
<label>What's your name
<input type="text" name="name" value="" />
</label>


With the same CSS, the two forms DO NOT yield the same result. I've found advantages and disadvantages for both structures. I have learned to like the second method because the LABEL becomes a container for the INPUT. I have only tested with FireFox. Has anyone done any comparisons of the two forms on other navigators? I was just curious what y'all use and why?
]]>
Anything Slider not working + shortcode suggestions http://css-tricks.com/forums/discussion/13760/anything-slider-not-working-shortcode-suggestions Mon, 19 Sep 2011 22:30:16 -0400 amillet 13760@/forums/discussions
I am using the Anything Slider and am not able to get the arrow functionality working. When I first install the plug-in, these arrows work, but as soon as I start changing the settings in the dashboard, the arrows no change slides when clicked. I have enable the arrows so I am not sure where I am going wrong.

As a separate concern, could anyone advise on how to add more shortcode to the anything slider? I am relatively new to PHP, but if someone could point me in the right direction as to how to create new shortcodes, that would be great- I am looking to add a shortcode for showMultiple, allowing me to display 3 slides on one page, 1 one on another etc. I would also eventually like to add other shortcode regarding arrows, or start button, etc.

Much thanks!

-Alex]]>
Tabbed menu - flared edges and dropdown problems! http://css-tricks.com/forums/discussion/13878/tabbed-menu-flared-edges-and-dropdown-problems Wed, 28 Sep 2011 02:32:16 -0400 plaedien 13878@/forums/discussions
I'm a bit of a newbie when it comes to this, and this is driving me crazy. I am trying to do a tabbed menu along these lines:

http://www.users.on.net/~plaedien/Screen%20shot%202011-08-30%20at%202.19.43%20PM.png


where the current page has the tab shown, but similar tabs appear on rollover for the other links. similar to this site (but obviously with the drop down element on certain links):

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml

I have seen a solution for this on this site, but unfortunately it would not work with my design, as it is not a single colour background. Ive also tried playing around with the old 'sliding doors' trick, but i just cannot get the menu to sit against the top with the images all nice and flush.

Is it possible to do the drop downs as illustrated in my first pic? or do i have to make them just a rectangle with round edges - without the bit cutting in near the normal tab area...

Help!



]]>
fixing elements when window resized http://css-tricks.com/forums/discussion/14073/fixing-elements-when-window-resized Mon, 10 Oct 2011 15:05:48 -0400 chrrissss 14073@/forums/discussions
thanks]]>
Help With Javascript! http://css-tricks.com/forums/discussion/14070/help-with-javascript Mon, 10 Oct 2011 13:13:20 -0400 codman212 14070@/forums/discussions
http://css-tricks.com/examples/MiddleBoxLinks/

Thanks!!]]>
SSL http://css-tricks.com/forums/discussion/14057/ssl Sun, 09 Oct 2011 22:42:45 -0400 mshort1985 14057@/forums/discussions I'm currently researching SSL, but something that confuses me is if I need to code anything special in my PHP for data to be encrypted or if just having SSL certificate installed on the server is all i need.

Thanks to anyone who can help.]]>
Creating a nomination page http://css-tricks.com/forums/discussion/14074/creating-a-nomination-page Mon, 10 Oct 2011 15:32:37 -0400 anemone42 14074@/forums/discussions
I want to create a page structured like this:

There's one dropdown box. Under that 5 input fields, where content can be typed in. However, it's also possible to choose an item in the dropdown box, and click "copy", and then that item will be copied to an empty field.

I assume there's a script out there making this super simple.

Lise]]>
mysql_real_escape_string() doesn't work http://css-tricks.com/forums/discussion/14069/mysql_real_escape_string-doesnt-work Mon, 10 Oct 2011 12:58:13 -0400 Monsignor 14069@/forums/discussions
<?php

mysql_connect("localhost","adminname","adminpassword") or die (mysql_error());
mysql_select_db("databasename") or die (mysql_error());

$comment=mysql_real_escape_string($_POST['commentbox']);

?>


...and then the result is put into the database along with some other data.

The database entry is correct, except, when I check the database or echo the result I get the same thing that was entered into 'commentbox'. For instance, if I enter "I am very 'confused' by this" into the box, the same string will be found in the database table. No slashes, just quotes. Anyone have an idea what's wrong with this? Because it all seems simple and correct but doesn't work.]]>
jquery form validation regular expression http://css-tricks.com/forums/discussion/14023/jquery-form-validation-regular-expression Fri, 07 Oct 2011 05:32:34 -0400 stian 14023@/forums/discussions

$('#contact-form #submit').click(function () {

//Get the data from all the fields
var name = $('input[name=name]');
var email = $('input[name=email]');
var website = $('input[name=url]');
var message = $('textarea[name=message]');

//Simple validation to make sure user entered something
//If error found, add hightlight class to the text field
if (name.val()=='') {
name.addClass('hightlight');
return false;
} else name.removeClass('hightlight');

if (email.val()=='') {
email.addClass('hightlight');
return false;
} else email.removeClass('hightlight');



if (message.val()=='') {
message.addClass('hightlight');
return false;
} else message.removeClass('hightlight');


});


How can I use a regular expression to check for a valid email?]]>
Flash and Html5 http://css-tricks.com/forums/discussion/14066/flash-and-html5- Mon, 10 Oct 2011 11:18:18 -0400 Misterfluff 14066@/forums/discussions I hope this hasn't been covered -- I have a web part on a site that contains a small flash animation. It works fine. I would like to use the same web part to allow users of ipads, etc to see the same animation in html. I would like both users to see the page in the same layout. I feel there is a very simple solution. Thanks!!]]>