Wickham
-
Posts
1,114 -
Joined
-
Last visited
-
Days Won
5
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Everything posted by Wickham
-
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.
-
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).
-
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.
-
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.
-
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.
-
I think it's position: fixed for .Republicans.
-
<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"
-
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. I don't do that.
-
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>.
-
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/
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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.
-
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>
-
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/
-
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?
-
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
-
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/
-
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.
-
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
-
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*/
