Wickham
Privileged
-
Joined
-
Last visited
Reputation Activity
-
Wickham reacted to rbrtsmith in Reponsive BG ImagesYou need to use the padding-bottom trick on the container element to ensure it keeps its aspect ratio.
<div class="contains-background"> </div> .contains-background { height: 0; padding-bottom: 50%; background: url('...'); background-size: cover; background-position: center center; } This is for something that has a 1:1 aspect ratio. adjust the percentage to match the AR of your background-image.
If you want content such as text to overlay the image the structure has to be somewhat different but still totally possible, although you have to ensure there isn't so much content that it overflows the container on small screens due to the height being dictated by the AR not the height of the content.
One thing to note: if your image illustrates a point in an article or something of that nature it should be an <img> and not a background, backgrounds or for decorative purposes semantically speaking.
Also the background-size: property has some performance issues and is often one of the reasons parallax appears janky (Due to the resized image not being cached meaning on every paint the image has to be resized from the original). For static backgrounds this won't matter unless you're using the property to resize a lot of large backgrounds.
-
Wickham got a reaction from jacklfords in Help, I Don't Know How to do This!Do you mean password protecting one or more pages? If so, you could set up .htaccess to use a username and password (a different one for each url) using a password generator like http://www.webmaster-toolkit.com/htaccess-generator.shtml or google htaccess password protection for more info. like http://www.javascriptkit.com/howto/htaccess10.shtml#.UkPw1t5wbIU
-
Wickham got a reaction from lozenges in z-index and opacity help pleaseOpacity is inherited, as said above, if in the same div. You can use a second div and position that with position: relative or position: absolute over the separate div and the opacity will not be inherited.
-
Wickham got a reaction from sensuous-love in float or display inline?You could use display: inline-block for the li tag, but float is better because it's better for positioning (like margins). Use this code to see the difference:
<!DOCTYPE html> <html> <meta charset="UTF-8" /> <title>test</title> <style type="text/css"> ul { list-style-type: none; overflow: hidden; background: pink; } ul li { display: inline-block; background: lime; } ul li a { display: block; padding: 10px; width:80px; background: #aaa; } ul li a:hover { background: skyblue; } ul.b { list-style-type: none; overflow: hidden; width:200px; background: pink; } ul.b li { float:left; width: 100px; background: lime; } ul.b li a { display: block; padding: 10px; width:80px; background: #aaa; } ul.b li a:hover { background: skyblue; } </style> </head> <body> <ul> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="httpt://www.google.com">Google</a></li> </ul> <ul class="b"> <li><a href="http://www.facebook.com">Facebook</a></li> <li><a href="httpt://www.google.com">Google</a></li> </ul> </body> </html> -
Wickham reacted to Nillervision in HTML5 Audio PlayerFinaly I found time to finish my Audio Player. It now have the following features:
Native html5 and raw Javascript (no plug-ins or frameworks needed) No JavaScript knowledge needed to use the player Custom HTML Playlist (just ad normal html links to mp3 files) Volume -and progress sliders (only visible when playing a track) Responsive layout.
Try it and grab the source (single html file) from here:
http://www.nielsharbo.dk/test/audioplayer/audioplayer.html
If you'd like to play around with the code online theres a jsfiddle here:
http://jsfiddle.net/Nillervision/s72b2/
The look of the player could be better, so if anyone feels like making a theme with some nice icons please let me know.
-
Wickham got a reaction from opensauce in how can i design HTML forumIt's probably better to choose a forum like IP Board or PHPBB3, download and install it, then choose a theme for it and download and install that rather than attempt to design and code a theme yourself. Most forum software has themes which are coded by other people but approved by the forum and conform to rules for the operation of the forum.
Like the styles for phpBB3 https://www.phpbb.com/customise/db/styles-2/
So much quicker than doing it yourself and it would have been tested.
-
Wickham got a reaction from teodora in How to make footer with NAV to float at bottom of pageIf you use position: fixed and want the rest of the page to scroll behind it, remember to add a background color to the footer or you will probably see the page content through the footer.
-
Wickham got a reaction from eva258 in Starting with HTML, CSS, etcStart off learning HTML and CSS and make a simple web page and use .php instead of .html for the filename extension so that when you later add a little PHP the page will be ready for it.
When you have your simple HTML/CSS page working, add a little PHP code or javascript, probably copying a chunk of code from a tutorial and testing.
Code manually using Notepad (already on your computer) or Notepad++ which you can download so that you learn how to code, try to avoid Dreamweaver (unless you use the manual coding) as the coding will be done for you and you won't learn anything.
-
Wickham got a reaction from PendulumX in Help with CSS!z-index must be used with position: absolute or position: relative in the style; it doesn't work on its own.
-
Wickham reacted to Jack in Animating CSSHere's a rough version using keyframes. All prefixed for you.
http://jsfiddle.net/yHMvU/
-
Wickham got a reaction from Chris Day in How do I make an MP3 file downloadable?Except, please don't start a filename with a number like 1.mp3, always use a letter character like a1.mp3, a2.mp3, etc.
http://webdesign.about.com/od/beginningtutorials/f/html-file-names.htm
-
Wickham got a reaction from 0xH in Horizontal Div AlignmentCopy this code without editing it and save with a new filename because it shows what I think you are trying to do:
<!DOCTYPE html> <head> <title>bo newsletter 6 slots</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{ background:#FFF; margin:0; padding:0; } .header{ background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: url(/images/headerBg.png); background-origin: padding-box; background-size: auto; border-collapse: separate; color: rgb(26, 77, 128); display: block; float: left; font-family: Arial, Helvetica, sans-serif, Calibri; font-size: 14px; font-weight: bold; height: 130px;/*118px;*/ line-height: 18px; width: 950px; background-color: orange; } .logo{ background-color: yellow; border-collapse: separate; color: rgb(153, 153, 153); display: block; float: left; font-family: Arial, Helvetica, sans-serif, Calibri; font-size: 15px; font-weight: bold; height: 80px; line-height: 18px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; margin-top: 40px; width: 295px; } .menucon{ background-color: skyblue; border-collapse: separate; color: rgb(153, 153, 153); display: block; float: right; font-family: Arial, Helvetica, sans-serif, Calibri; font-size: 15px; font-weight: bold; height: 118px; line-height: 18px; width: 450px; } .social{ background-color: lime; /*width: 50px;*/ display: block; height: 80px; line-height: 18px; } </style> </head> <body> <div class="header"> <div class="logo"><a href="index.php">Logo</a> </div> <!--<div class="social">test</div> coded after right div--> <div class="menucon"><!--not menuCon with capital C--> <!--<div></div>--> <!--<div></div>--> <div id="menu"> <ul class="sf-menu"> <li class="home"><a href="index.php"></a></li> <li><a href="knowledgebase.php"><span></span>F.A.Q's</a></li> <li><a href="announcements.php"><span></span>News</a></li> <li><a href="clientarea.php"><span></span>Client Portal</a></li> <li><a href="contact.php"><span></span>Contact Us</a></li> </ul> </div><!--end of #menu--> </div><!--end of .menucon--> <div class="social">test<br />test in .social div<br />test in .social div</div> </div><!--end of .header--> </body> I've given the divs colors so that you can see the arrangement.
If you want two floated divs (one left and one right) with a div in the middle, code the float left and float: right divs first in the markup, then the middle div and the middle div .social with a lime color fills all the space between the left and right divs. Note that .social is without a width and in fact overlaps the float left div but the text content will start at the side of the float: left div. If you give the middle div a width, it will drop down unless you code that with float: left as well and put it after the first float; left div.
Be careful to use the same case for style and markup, you had .menucon with a lower case c in the markup and .menuCon with a capital C in the style.
You had two empty divs in .menucon which I have deleted.
-
Wickham got a reaction from Webtastic in HTML4 and HTML5The basic structure looks OK to me. The meta tags are generally unrelated to which doctype you use, whether HTML4.01, XHTML 1.0 or HTML5, just use them if appropriate. Except that it's no longer necessary to state text/html in a meta tag like:-
<meta http-equiv="content-type" content="text/html; charset=utf-8"> but there must be a character code, so this is all that is required:-
<meta charset="utf-8">
Tables - they are still valuable for tabular data like products and prices, but not for the structure of a page. You can use display: table and display: table-cell for divs to replicate a table layout if you want.
Video has always been difficult cross-browser. The old object tag with nested embed tag with a classid (different for Flash) is still almost completely cross-browser but is old-fashioned. The new HTML5 video element needs your video in several formats, see http://www.wickham43.net/html5.php#video
-
Wickham got a reaction from Webtastic in HTML4 and HTML5Change all that to
<!DOCTYPE html>
very short and simple for HTML5. Test it (you can probably use IE in compatibility mode which is IE7 as far as I know) and it should show up any issues.
-
Wickham got a reaction from Webtastic in HTML4 and HTML5Have a look at this http://caniuse.com/#feat=background-img-opts re background images and background-size:cover in the resources / information page link at bottom
and this http://www.css3files.com/background/
background-size: cover is only HTML5 but if you use the doctype for html5
<!DOCTYPE html> instead of html 4.01 or xhtml 1.0 doctypes you should be OK with all modern browsers, but some people with old browsers won't see the cover properly.
Read these notes http://www.wickham43.net/html5.php
-
// message.php would look similar to this (i have included a PDO version aswell as a mysql one not sure what one you require)
<?php
if ($_POST[ 'message']) {
// mysql_*
// $query=m ysql_query( "UPDATE `message` SET `message`='".mysql_real_escape_string($_POST[ 'message']). "' WHERE `place`='homepage'");
// PDO (alter with your variables)// $query=$ db->prepare("UPDATE `message` SET `message`= ? WHERE `place`='homepage'");
// $query->execute(array($_POST['message']));
echo 'Message updated';
}
echo '<form action="#" method="post"><textarea name="message"></textarea><input type="submit" /></form>';
?>
// as for the index page
<?php
// mysql_*
// $query = mysql_query("UPDATE `message` SET `message`='".mysql_real_escape_string($_POST['message'])."' WHERE `place`='homepage'");
// $message = mysql_fetch_object();
// PDO (alter with your variables)
// $query = $db->prepare("UPDATE `message` SET `message`= ? WHERE `place`='homepage'");
// $query->execute(array($_POST['message']));
// $message = $query->fetchObject();
if ($message->message) {
echo '<div class="..." id="...">'.htmlentities($message->message).'</div>';
}
?>
-
Wickham got a reaction from teodora in How can I implement text content with scroll in a slider?First, please don't add irrelevant links to your post, especially not advertising some service.
Scrolling text boxes can be achieved by adding a height to a container div and overflow: scroll. Some examples are here:-
http://www.wickham43.net/scrollingdivs.php
Responsive design can be achived with Media Queries as shown in this tutorial:
http://www.html5rocks.com/en/mobile/responsivedesign/?ModPagespeed=noscript
-
Wickham got a reaction from Nillervision in How to make your auto heights equalDisplay:table used in any element, like a div, can be useful to line up items with different heights, but remember that older browsers don't process display: table but these have a very small proportion of browser useage now.
Display:table is not the same as old-fashioned tables; it's the modern equivalent that has the same effect but far more options and is suitable for page structure when used with divs or other elements.
-
Hi,
Some new members are finding it difficult posting new topics/replies with the current "You need 25 posts/topics to create links" limit in please, the module we purchased to police this is very buggy e.g. members can't post smilies and even code snippets, which is just ridiculous, and clearly this needs to change...
So we're running a trial where we'll be removing this limit and test if it has any affects on spam here on the forum, I think many members here are vigilant when it comes to reporting spam and letting us know by using the "report post" button on anything dodgey, which we're all thankful for, plus with the addition to 3 new moderators, we're much better equipped at handling any suspicious/spammy content.
We've also created a new forum here on WDF tailored specifically for WordPress - http://wdf.co/wordpress
It seems to make sense as we're getting WordPress related posts frequently, but posted all over the forum, so hopefully this should provide a central location to discuss any WordPress related queries people may have.
Stay tuned for more updates coming soon.
-
Wickham got a reaction from Nillervision in Div below three pictures won't showFirst, I would delete <?xml version="1.0" encoding="UTF-8"?> above the doctype. Anything above the doctype creates problems in IE and isn't necessary.
If you have floated divs and want to put another div below, add clear: both; to the id or class of the div below if it's full width or nearly full width, or add your separate div <div style="clear:both;"></div> below the floated divs (or below the container of floated divs if there is one) to break the floats.
-
Wickham got a reaction from Beavy in Editing Drop Down MenuWhat you do if you want to disable a link is to use #nogo
<a href="#nogo">Disabled link title</a> -
Wickham reacted to teodora in Website widthIf it is responsive website, I like to define 95% for the main container, with max-width as well, so it doesn't take all the space of bigger screens.
-
Wickham got a reaction from Precise Estimating Ltd in Help adding a sub menu on navigationIt's often better to use a menu that has been tested and edit to your requirements as coding your own may not work in all browsers. Have a look at menus here:
http://www.cssplay.co.uk/menus/
which are pure CSS, no javascript.
Choose a menu and look at the source code, copying from the head section style tag for the CSS, usually where it has styles for .menu or .nav, and copy the relevant part of the html markup, then edit carefully.
-
Wickham got a reaction from GregF in Image positioningI think that's a good use of display: table; and display: table-cell which will center images of different heights like a table and create different rows.
However, display: table; doesn't work in old IE browsers.
Display:table can be applied to any element, like a div, and is the modern way to do what a table can do with more flexibility.
-
Wickham got a reaction from teodora in CSS3 resoursesI find this http://caniuse.com/# very useful to tell me which version of which browser processes which feature.
