Wickham

August 30, 2012

Wickham, can you explain the 'relative' to me - I always just use the auto margin and no position. When/why would I want to make it relative?

When someone posts without giving their code, you don't know if they have any position: absolute; divs, so I always add the position: relative to the code so that any position: absolute divs, if the person has any, will take positions from the corners of the position: relative #wrap div and retain positions inside the #wrap div when the #wrap div moves to center in wide window widths.

You don't need position: relative if there are no position: absolute divs or other absolute elements inside the #wrap div.

August 30, 2012

file size is too much.....however, What code should be included to each div to align center for any screen resolution's???

Without seeing your code, this usually works.

CSS in a stylesheet:-

#wrap { position: relative; width: ??px; margin: 0 auto; }

where the width is enough for all your content and the margin: 0 auto will make the side margins equal which will center the page in a wide window.

HTML markup:-

<!doctype html>
<head>........head section including stylesheet link or style tag enclosing styles......</head>
<body>
<div id="wrap">
.......all your page content.......
</div><!--end of #wrap div-->
</body>
</html>

You don't need to edit the other divs with your content (unless there's something wrong with your coding).

August 22, 2012

You can't make the inner div center vertically unless you give the container div a height to work within unless you use display: table and display: table-cell (unless javascript can do it).

See item 17f here

http://www.wickham43.net/firefoxbackground.php

where neither the container #displaytable, nor the middle div #displaytablecell2 nor the green div #nested have a height.

August 10, 2012

The best way is to put all menu links in a separate "include" file and use PHP code to insert the same menu into every main page, so you only have one file to edit if you want to change something.

Then you can use item 2 on this page:-

http://www.wickham43.net/highlighthome.php

which uses matched pairs in the styles so that if the link id or class matches the page id or class, only that linl will have a different style. Item 3 is the same principle but uses image buttons.

There is a PHP method in item 4 which uses image buttons but that could be edited to use text links.

Item 1 on the page above is the basic method that would have to be edited on every page, so the PHP "include" method is preferred. For the "include" method see http://www.wickham43.net/serversideincludes.shtml

Your menu uses divs. It would be better to use ul and li list code.

August 10, 2012

One important point to remember is that root relative links probably won't work on your local computer; many beginners use them and can't understand why they don't work.

Your root folder/directory on your computer is probably C:\ with lots of sub-folders before you reach the folder with the linked file so the path is wrong. It should work online from your host's server where your files and sub-directories are immediately in the root directory, or you can install Apache server inside WampServer or XAMPP on your computer and use Localhost to test root relative links.

August 9, 2012

I think it's position: fixed for .Republicans.

July 26, 2012

<h7> doesn't exist.

This website https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document has a section "Defining Headings in HTML5"

July 26, 2012

What I do is to place the actual font urls like these:-

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot');
src: local('☺'), 
url('Matchbook-webfont.woff') format('woff'), 
url('Matchbook-webfont.ttf') format('truetype'), 
url('Matchbook-webfont.svg#webfontilT7vtqy') format('svg');
font-weight: normal;
font-style: normal;
}

in a file called matcthbook.css in a separate folder called font-face and put a link in the head section of the html page (before the css file link or head section styles) like this :-

<link rel="stylesheet" href="font-face/matchbook.css" type="text/css" media="all">

Then the @font-face styles go in your css file or a head section style tag like this:-

/*STYLES FOR @FONT-FACE*/
/*Font from http://www.fontsquirrel.com/fontface/*/
h1.matchbook { font: 40px/44px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 2px; margin: 4px 0; font-weight: bold; } /*40px/44px is size and line-height*/

p.matchbook { font: 24px/27px 'MatchbookMatchbook', arial, sans-serif; letter-spacing: 1px; }

Adjust the above to suit your font.

Does the font have to be in your HD system folder/Fonts/.....I'm on a Mac.

I don't do that.

July 18, 2012

That's not quite right as you have <div>...</div> tags here which are inside the <p> tag:-

...span tag. <div> Going to keep writing to see if this breaks </div> or just keeps...

Delete <div> and </div>.

July 16, 2012

You shouldn't have a div tag inside a p tag. Delete <div> and </div> and put them where they belong. You haven't shown all your code but it should be something like

<div>
<p>....<span class="makeBold">...</span>...</p>
<p>....</p>
</div>

Check for errors here:-

http://validator.w3.org/

July 9, 2012

FWIW. for other viewers of this topic, I use WampServer and Skype on the same computer with no problem and I didn't need to change port 80.

June 20, 2012

Try Media Queries Responsive Layout which will keep your a fixed width at certain viewport widths (for desktops and laptops) but make it fluid for small screen devices if you change it to a % width. See

http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

http://www.alistapart.com/articles/responsive-web-design/

I also have a menu on the left with position: fixed and a fixed width and it works OK in a responsive layout because the media queries makes the content drop down below the menu. Media Queries will totally alter your layout so that only vertical scrolling is necessary if you do it correctly (plus some zoom to get the best size for reading text). Images need to be max-width: 100%; set the size you want for the desktop image in the actual image file initially, don't resize with CSS.

It will depend on how you have coded your page, but you should be able to get it to show the menu above the images below a certain "break point". The images shrink in width and height in proportion but stay side by side on one line until the viewport gets too narrow; then all the menu items and all the images will be in a vertical arrangement.

June 15, 2012

I don't know ecactly what you want, but start with this (I left out the PHP code) and add to it. The background image centers in the window bit doesn't repeat.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test page</title>
<style type="text/css">
body {
background:url('http://www.spitfirehiphop.com/wp-content/uploads/2012/05/SFHH-Music-Page-Background9.png') no-repeat fixed center;
background-size: 73em;
}

#bglink{
display:block;
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:0;
text-indent:-5000em;
}
</style>

</head>

<body>

<a href="http://www.datpiff.com/mixtapes-detail.php?
id=356052" id="bglink" target="_new">jump to 
http://www.datpiff.c...?id=356052/</a>

</body>
</html>

As I suspected, the new CSS3 size has to be a separate style; it didn;t work when added in the shorthand style.

June 15, 2012

You probably haven't given enough information to get a full answer.

I presume that you have a doctype in the html or php file.

The style tag should be in the head section, not the body section.

background {} is the short code. When you use the other long codes like background-position, the background should be background-image {} or use the short code for all styles:-

body {
background:url('http://www.spitfirehiphop.com/wp-content/uploads/2012/05/SFHH-Music-Page-Background9.png') repeat 73em fixed center;
}

If you only have one center it will center horizontally and at the top, if you have center center it will center both ways.

Size could have two sizes, if only one size then the other is auto as described here:-

http://www.w3schools.com/cssref/css3_pr_background-size.asp

although I'm not sure that the size (which is CSS3) is supported in the shorthand property in all browsers yet so you might have to use background-size: 73em; as a separate style as you did above.

June 12, 2012

What exactly do you mean by tabs? A drop down menu with tabs to click? If so, have a look at lots of menus here

http://www.cssplay.co.uk/menus/

choose one and download from the head section style tag and markup from the body section and edit to suit your requirements.

June 12, 2012

I'm not sure how you do that into Excel directly, but I can offer a solution to do it indirectly.

Assuming your hosting service has a Linux server, you use PHP and a MySQL database to store the data. You can then manually export the database data into Excel whenever you want, say every day or every week.

See http://www.wickham43.net/formphptomysql.php for an example, but remember that it's only the basic code and will need some extra security measures. The database has a menu with export options.

It's probably better to Google for a package that you can download and install.

June 10, 2012

IE7 and IE6 don't like the rotate code and just stop applying font styles at that point. I found that if I deleted the code for IE6, IE7 then IE7 displayed the correct font styles but without the rotation:-

.rotate {
		-moz-transform: rotate(-1.5deg);  /* 
FF3.5+ */
      	-o-transform: rotate(-1.5deg);  /* Opera 10.5 
*/
 		-webkit-transform: rotate(-1.5deg); 
/* Saf3.1+, Chrome */
       /*filter:  
progid:DXImageTransform.Microsoft.Matrix
(sizingMethod='auto expand', 
                M11=0.9996573249755573, 
M12=0.02617694830787315, M21=-0.02617694830787315, 
M22=0.9996573249755573); deleted*/ /* IE6,IE7 */
       -ms-filter: 
"progid:DXImageTransform.Microsoft.Matrix
(SizingMethod='auto expand',M11=0.9996573249755573, 
M12=0.02617694830787315, M21=-0.02617694830787315, 
M22=0.9996573249755573)"; /* IE8 */
              zoom: 1;}

there may be a way to correct the code for IE6 and IE7 rotation but I'm not sure what it is.

June 10, 2012

You have several errors if you check here:-

http://validator.w3.org/

and you need to save your html file and the css file as ANSI not utf-8; use File/Save As in Notepad or your text editor and you will see a box for Type which should be All files (*.*) not Text Documents (*.txt) for the html file but .txt is OK for the css file and another box for Encoding which should be ANSI not utf-8 (the meta tag in the head section with charset=utf-8" is OK).

Your doctype is wrong, you have xhtml11-strict.dtd which should be xhtml1-strict.dtd and xm1ns should be xmlns small L not 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Don't use spaces in file names, rename your files nested-list-vertical-list.html and vertical-menu-3.css and edit the stylesheet link in the html file head section to the revised filename.

#menu ul in the stylesheet needs to work with a parent element with id="menu" in the html file. so you need to enclose all the ul codes in <div id="menu">... ul codes here....</div>

June 9, 2012

If he uses Skype he can put a Skype Status button on his webpage which will show other people visitng his web page whether he is onlines and available or unavailable and a few other states like Do Not Disturb and hidden.

http://www.skype.com/intl/en-gb/tell-a-friend/get-a-skype-button/

June 9, 2012

Let people choose if they want the mobile or standard version of a web site on their smart phones.

Would that be achieved by having a button at the top left of a page to switch to the mobile version, loading a separate stylesheet with the Media Queries coding?

June 8, 2012

You have probably copied only the code shown on that page, without adding code in other pages of the tutorial. Your html file should look like this:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="navigation"> 
<h2>The Main navigation</h2>
</div> 

<div id="centerDoc">

<h1>The Main Heading</h1>

<p>Go to the Web Designers Killer Handbook home page and grab the
  practice HTML page that we will used as the starting template for this
  tutorial. You can find it under the heading: 'To create the practice HTML
  page do the following:'.</p>

<p>Follow the instructions there and create your basic HTML page
  ... and do it now!</p>
</div>
</body>
</html>

and the css file myCSS.css should be:-

/* Generic Selectors */

body {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color: #333333;
  background-color: #F9F9F9;
}

p {
  width: 80%;
}

li {
  list-style-type: none;
  line-height: 150%;
  list-style-image: url(../images/arrowSmall.gif);
}

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}

h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  border-bottom: 1px solid #C6EC8C;
}

/**************** Pseudo classes ****************/

a:link {
  color: #00CC00;
  text-decoration: underline;
  font-weight: bold;
}

li :link {
  color: #00CC00;
  text-decoration: none;
  font-weight: bold;
}

a:visited {
  color: #00CC00;
  text-decoration: underline;
  font-weight: bold;
}

li a:visited {
  color: #00CC00;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: rgb(0, 96, 255);
  padding-bottom: 5px;
  font-weight: bold;
  text-decoration: underline;
}

li a:hover {
  display: block;
  color: rgb(0, 96, 255);
  padding-bottom: 5px;
  font-weight: bold;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #C6EC8C;
}

a:active {
  color: rgb(255, 0, 102);
  font-weight: bold;
}

/************************* ID's *************************/

#navigation {
  position: absolute; background: #eee;
  width: 210px;
  height: 600px;
  margin: 0;
  margin-top: 50px;
  border-right: 1px solid #C6EC8C;
  font-weight: normal;
}

#centerDoc {
  position: absolute; background: #ddd;
  padding: 0 0 20px 0; /*top right bottom left*/
  margin-top: 50px;
  margin-left: 235px;
}

Note: I added temporary background colors so you can see the extent of the divs, it helps when checking page layout.

Note that browsers online are case sensitive so myCSS.css should be identical for the file name and the link in the html file; myCss.CSS is not the same as myCSS.css

June 8, 2012

Have a look at these tutorials for Media Queries responsive layouts:-

http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

http://www.alistapart.com/articles/responsive-web-design/

June 7, 2012

Oh, i meant like with a form. After the form is processed i want to be able to leave a message on the page without having to make it a php file and add php code to the page that the form is on.

Right now I am having to add the PHP code and make the form a php page. then I am using if($_GET['complete'] == true) { blah blah blah } but It is just in the middle of my content. I want to be able to do something like you could in javascript without having to rely on javascript.

You have to use a php form code for the message after an email is sent. Javascript might be able to do it, but my javascript knowledge is too little.

June 7, 2012

You can add content to a html webpage with a CMS (content management system) where certain areas of code are made available by a separate username and password for editing (often by untrained people) so that the rest of teh page code cannot be altered.

A simple cms would be http://www.simplecms.com/

or Joomla or Drupal fro a professional cms.

If you want to edit a part of a page yourself without opening the whole page code, you can put your extra text or image in a separate file called an "include" file and named, say, text2.inc and code PHP in the main page where you want it inserted:-

<?php include ("text2.inc"); ?>

and the main page must have a .php extension, not .html or .htm

May 27, 2012

You can change styles on visited, hover, active and focus link states compared with the default link state.

Links or hyperlinks are made with this code:-

<a href="introduction.html">Introduction</a>

for a file in the same directory or like this for an external url:-

<a href="http://www.your-domain.net/introduction.html">Introduction</a>

Browsers have default link colors and a viewer may not have edited these or he may have changed his browser default settings to colors he prefers. You can make your webpage show colors that you want by using these styles either in a stylesheet or inside style tags in the page head section (note: you can leave some out so that default colors are used but the ones you state must be in the following order):-

a:link { color: #de7007; } /*unvisited link orange*/
a:visited { color: #008080; } /*visited link teal*/
a:focus { color: #483d8b; } /*active link DarkSlateBlue/
a:hover { color: #996633; } /*hover link dark brown*/
a:active { color: #800080; } /*active link purple*/

Sign In

Profiles

Forums

Events

Downloads

Gallery

Store

Posts posted by Wickham