|
HTML - Just Started Designing Another Site, Opinions Would Be Nice!
First of all, I have only just started this site, and it's only ever going to be a very basic HTML site.
It's going to be a ground guide for Non-League football. Here is one of the completed ground pages so far. Most of the links don't actually take you to anything in perticular, so don't shout! I'd just like a couple of ideas on how to improve the general look of the site. Thanks! Code: http://79.170.43.200/adp-design-demos.com/nlgg/wadham_lodge.html Don't worry about the ugly domain, it's only going to be like that during testing Similar Tutorialsplease help choose a nice background color theme for my site... I'm not savy with html...I'm trying to find the code so I can change this "plain jane" background color of my "template made site". Can I get some opinions on a color theme and ALSO where I would insert the color codes. Not looking for a "in your face" attack..just anything better than the blah brown/tan colors! TIA Please take the time to help me out here it seems really minor but im completly lost on what to do right now, i have 3 ideas stick with the 1st design, stick with the 2nd or scrap them both and go for a php template or find a real nice html template and buy it... i think i like this one the thing i cant decide here is i dont like the flash menu being as the table is on the side with it, plus i know more links will be added later and the top table will only hold 8 links... http://www.freewebs.com/fallingrain11/22.html this layout i like but i feel looks to plain from outside prespective... http://www.freewebs.com/fallingrain1...rrrrrrrrr.html and well im looking @ php templates right now and theres some rediclous looking templates out there i just dont trust they will work properlly for every visiting user... has any1 used php templates and or can offer some advice on there reliability as far as the average viewer being able to view them? thank you all very much ... Wondering everyone's thoughts on HTML email best practices. Does anyone else like the idea of one large background image behind the layout table? It sure makes the process faster (going from design to HTML). Any drawbacks? I haven't found any email readers that ignore background images. Any advantages to chunking the table up into cell-based background images or IMG images (instead of the one large background image)? Do you generally try to include all text as HTML unless the style/design dictates a non-standard font? Lately I've been trying to keep text near the top of the email as HTML if at all possible so that it renders even if graphics are turned off on the client email reader. Also, I have found no alternative to hacking through inline CSS styles as gmail strips out any styling above the body tag. I wish Dreamweaver CS3 would allow you to toggle between stylesheet and inline styles...for now it seems I'm stuck typing inline styles manually. As for layout, I like one container table at 100% width with one row that contains a content table, usually around 700-800px, with a span of as many columns as is necessary to accommodate the design. Any other thoughts/best practices are appreciated. I decided to give my site a face lift but I started deleting random bits of code and now i'm too stressed to get it together again, so I need some help putting it back together.. You will see what i mean: http://www.freewebs.com/mutimediasto...20A%20TEST.htm Click the "home" link to see how it was before, I want it the same as the layout before but with my new stuff. Thanks Anyone knows of a good one? It needs to look professional! Something like this would be awesome: http://www.adriantnt.com/products/pixel_menu/ Hi, I have developed a table. I want to display text in vertical. Depending on the browser, i am assign the css value to the div. It's displaying fine in IE, but in firefox, i am not able to align it properly. i tried many thing and it's not working.. I want to disply the same way as in the IE for the firefox. here's my code.. Style Sheet -------------- .firefoxdiv3-5Style { -moz-transform: rotate(-90deg); -moz-transform-origin: 100% 50%; font-family:Verdana; font-size:12px; font-weight:bold; color:#0156a6; width:44px; height:110px; display:block; } .iedivstyle { font-family:Verdana; font-size:12px; font-weight:bold; color:#0156a6; FILTER: flipv fliph; WRITING-MODE: tb-rl; width:44px; height:110px; display:block; padding-top:10px; } .ietdstyle { HEIGHT: 120px; BACKGROUND-COLOR: #c2d9e9; WIDTH: 44px; } .firefoxtd3Style { HEIGHT: 120px; BACKGROUND-COLOR: #c2d9e9; WIDTH: 44px; } HTML CODE --------------- <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <link href="Stylesheet1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i<data.length;i++) { var dataString = data[i].string; var dataProp = data[i].prop; this.versionSearchString = data[i].versionSearch || data[i].identity; if (dataString) { if (dataString.indexOf(data[i].subString) != -1) return data[i].identity; } else if (dataProp) return data[i].identity; } }, searchVersion: function (dataString) { var index = dataString.indexOf(this.versionSearchString); if (index == -1) return; return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); }, dataBrowser: [ { string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb" }, { string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version" }, { prop: window.opera, identity: "Opera" }, { string: navigator.vendor, subString: "iCab", identity: "iCab" }, { string: navigator.vendor, subString: "KDE", identity: "Konqueror" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.vendor, subString: "Camino", identity: "Camino" }, { // for newer Netscapes (6+) string: navigator.userAgent, subString: "Netscape", identity: "Netscape" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE" }, { string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv" }, { // for older Netscapes (4-) string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla" } ], dataOS : [ { string: navigator.platform, subString: "Win", identity: "Windows" }, { string: navigator.platform, subString: "Mac", identity: "Mac" }, { string: navigator.userAgent, subString: "iPhone", identity: "iPhone/iPod" }, { string: navigator.platform, subString: "Linux", identity: "Linux" } ] }; BrowserDetect.init(); // --> </script> <script type="text/javascript"> function WriteFunction() { var browsername = BrowserDetect.browser; var browserVersion = BrowserDetect.version; if (browsername == "Explorer") { document.getElementById("tdcatiav4").className="ietdstyle"; document.getElementById("tdcatiav5").className="ietdstyle"; document.getElementById("tdunigraphics").className="ietdstyle"; document.getElementById("tdsolidworks").className="ietdstyle"; document.getElementById("tdparasolid").className="ietdstyle"; document.getElementById("tdiges").className="ietdstyle"; document.getElementById("tdsteps").className="ietdstyle"; document.getElementById("divcatiav4").innerHTML = "<center> </center>CATIA V4"; document.getElementById("divcatiav4").className="iedivstyle"; document.getElementById("divcatiav5").innerHTML = "<center> </center>CATIA V5"; document.getElementById("divcatiav5").className="iedivstyle"; document.getElementById("divunigraphics").innerHTML = "<center> </center>Unigraphics"; document.getElementById("divunigraphics").className="iedivstyle"; document.getElementById("divsolidworks").innerHTML = "<center> </center>SolidWorks"; document.getElementById("divsolidworks").className="iedivstyle"; document.getElementById("divparasolid").innerHTML = "<center> </center>Parasolid"; document.getElementById("divparasolid").className="iedivstyle"; document.getElementById("diviges").innerHTML = "<center> </center>IGES"; document.getElementById("diviges").className="iedivstyle"; document.getElementById("divsteps").innerHTML = "<center> </center>STEP"; document.getElementById("divsteps").className="iedivstyle"; } else if (browsername = "Firefox") { if (browserVersion == "3.5") { document.getElementById("divcatiav4").innerHTML = "<center> </center>CATIA V4"; document.getElementById("divcatiav4").className="firefoxdiv3-5Style"; document.getElementById("tdcatiav4").className="firefoxtd3Style"; document.getElementById("tdcatiav4").align="center"; document.getElementById("tdcatiav5").className="firefoxtd3Style"; document.getElementById("tdcatiav5").align="center"; document.getElementById("tdunigraphics").className="firefoxtd3Style"; document.getElementById("tdunigraphics").align="center"; document.getElementById("tdsolidworks").className="firefoxtd3Style"; document.getElementById("tdsolidworks").align="center"; document.getElementById("tdparasolid").className="firefoxtd3Style"; document.getElementById("tdparasolid").align="center"; document.getElementById("tdiges").className="firefoxtd3Style"; document.getElementById("tdiges").align="center"; document.getElementById("tdsteps").className="firefoxtd3Style"; document.getElementById("tdsteps").align="center"; document.getElementById("divcatiav5").innerHTML = "<center> </center>CATIA V5"; document.getElementById("divcatiav5").className="firefoxdiv3-5Style"; document.getElementById("divunigraphics").innerHTML = "<center> </center>Unigraphics"; document.getElementById("divunigraphics").className="firefoxdiv3-5Style"; document.getElementById("divsolidworks").innerHTML = "<center> </center>SolidWorks"; document.getElementById("divsolidworks").className="firefoxdiv3-5Style"; document.getElementById("divparasolid").innerHTML = "<center> </center>Parasolid"; document.getElementById("divparasolid").className="firefoxdiv3-5Style"; document.getElementById("diviges").innerHTML = "<center> </center>IGES"; document.getElementById("diviges").className="firefoxdiv3-5Style"; document.getElementById("divsteps").innerHTML = "<center> </center>STEP"; document.getElementById("divsteps").className="firefoxdiv3-5Style"; } } } </script> </head> <body onload="WriteFunction();"> <form id="form1" runat="server"> <div> <table border="1" style="width:425px"> <tr> <td style="width: 120px; height:120px"></td> <td id="tdcatiav4"><div id="divcatiav4"></div></td> <td id="tdcatiav5"><div id="divcatiav5"></div></td> <td id="tdunigraphics"><div id="divunigraphics"></div></td> <td id="tdsolidworks"><div id="divsolidworks"></div></td> <td id="tdparasolid"><div id="divparasolid"></div></td> <td id="tdiges"><div id="diviges"></div></td> <td id="tdsteps"><div id="divsteps"></div></td> </tr> </table> </div> </form> </body> </html> Please help me out.. Thanks Rajagopalan. I need to recreate the text paragraphs on the home page of www.advanced1.net. The issue I'm having is getting both sides of the paragraphs at the slant. Does anyone have any ideas on how I could possibly do this? Thanks, George I am a graphic designer trying to teach myself html, this may be a basic question for you genius's but I need help chaning 2 scroll bars on my page. I would like to put in fancy, colored scroll bars.. here is the page im working on : http://www.fashionfreakers.com/samplesite.html any input would be great. Thanks, C Ok, so I just got Dreamweaver, how do get started in designing webpages? I heard that it makes webdesigning a lot easier. I know it's important to understand codes but at the same time I wanted to learn Dreamweaver because I know I'll be using it soon. Any help is greatly appreciated. similar to this. http://groups.myspace.com/index.cfm?...5EEF8181551476 i can make all the graphics so thats not a problem but how do i make it? What up Everyone! Its me the Newb!...haha OK, I need to start building the Navigation part of the website. I dont have One Dang clue how to start!... Man this web design stuff hurts my head & fustrating I have many ideas dont know how to Implement them!!!!.... It took my 3days to figure out how to do an Internal Link with a button...so yea...LoL How do I go about after clicking a Button on the homepage called "sales" then it goes to that page how do I make that a working page etc??? Do I need to add Javascript? IF so I have no idea how to integrate that into HTML still.... I wish I had a go to person...I am looking into taking some Free classes for HTML...I missed the Spring Semester sign up...D'oh!!! Ok...sorry if I confused anyone...And thanks in advance if anyone can give some pointers! My excuses for bothering you with this but I need a little push in the right direction to get started. I'm a 3d (technical) artist, but my HTML knowledge is minimal. What I have is: - A PNG image without alpha to be used as the background. - One or more PNG's with alpha to be composited on top of this background using the embedded alpha channels. I want to do this using the Canvas element and what I learned from searching the web is they often composite everything offscreen and then draw it to the Canvas. So if anyone could provide me with small example I would be eternally grateful. It's mainly the syntax that stumps me right now. Thanks in advance. Hi all, long time no post for me, good to see still a vibrant forum. I have been helping a friend with their existing site they built with Weebly. Weebly uses the deprecated html <font> tag to set the size of text the user sets via the GUI. Ive found the font tag does not play nice with line-height, I.e. when line-height is set to a value other than "normal", the actual size of the font in the <font> tags does not figure in the line-height calculation and if the font tag has a large size set, you get major bleeding - i.e. the line-height is too small. At least in Opera Chrome FF. I came up with a solution which seems to work but I thought this should be a known problem but could not find anything. Thought Id check see, may be there is a better fix, or I m missing something. Current solution is: font[size="1"] { font-size:xx-small; line-height:100% } font[size="2"] { font-size:small; line-height:100% } font[size="3"] { font-size:medium; line-height:100% } font[size="4"] { font-size:large; line-height:100% } font[size="5"] { font-size:x-large; line-height:100% } font[size="6"] { font-size:xx-large; line-height:100% } font[size="7"] { font-size:40pt; line-height:100% } Can you see any problem with this. Cheers, Sam. I am wondering if it is possible to create an INDEX.HTML to redirect to another website? I would like it to display the redirected site, but if possible keep to the original address.. e.g. A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar. Hope I explained ok, any responce would be much appricated! Thanks! the site http://www.googtwo.tk (my site) is attempting to put a garfield comic for the day by an iframe. if you look at the code, you'll see some irrelavent code, ignore it. but the iframe, isn't goign to the size i want it to, and therefore you can't see the comic. ??? Hi Could anyone help me with some coding probs? I cant see were the problem is occurring. The two divs container and content dont seem to wrapping around the other html variables correctly. If you put a border around content and container and view it you will know what im talking about. I want to put a margin between the footer and the movie. Thanks Please see the URL http://pmbperformance.99k.org/ Hi, Please help. I'm new to web design and have kinda cobbled my site together from various templates, etc. Problem is my site appears in Firefox, but comes up blank in IE and Safari. I'm pretty sure it's something stupid I've missed. The url is http://artheat.net Could anyone give me some advice? The basic html code is: <?xml version="1.0" encoding="utf-8"?> <!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" xmlns:v="urn:schemas-microsoft-com:vml" > <head> <title>ArtHeat</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta name="description" content="ArtHeat. Contemporary South African Art" /> <meta name="keywords" content="ArtHeat. Contemporary South African Art" /> <meta name="robots" content="index, follow" /> <link rel="shortcut icon" href="favicon.gif" /> <script language="JavaScript"></script> <style media="screen" type="text/css"> /* <!-- */ /* General styles */ body { margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; background:black; min-width:600px; /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */ font-size:90%; color:#CCC; } a { color:#FF9933; } a:hover { color:#fff; text-decoration:none; } a img { color: black; border: 0 0; margin:10px 0 5px; } h1, h2, h3 { margin:.8em 0 .2em 0; padding:0; font-family: Helvetica, Arial, sans-serif; color: #ff9933 text-decoration:none; } h2 a { text-decoration:none; } p { margin:.4em 0 .8em 0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #ccc; } img { margin:10px 0 5px; } /* Header styles */ #header { clear:both; text-align:center; width:100%; } #header { border-bottom:1px solid #000; } #header p, #header h1, #header h2 { padding:.4em 15px 0 15px; margin:0; } #header ul { clear:right; float:right; width:100%; list-style:none; margin:10px 0 0 0; padding:0; } #header ul li { display:inline; list-style:none; margin:0; padding:0; } #header ul li a { display:block; float:right; margin:0 0 0 1px; padding:3px 10px; text-align:center; background:black; color:#D46912; text-decoration:none; position:relative; right:15px; line-height:1.3em; } #header ul li a:hover { color:#fff; } #header ul li a.active, #header ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } #header ul li a span { display:block; } /* 'widths' sub menu */ #layoutdims { clear:both; background:#eee; border-top:4px solid #000; margin:0; padding:6px 15px !important; text-align:right; } /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; /* width of page */ position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */ overflow:hidden; } /* 3 Column settings */ .threecol { background:black; /* right column background colour */ } .threecol .colmid { right:25%; /* width of the right column */ background:black; /* center column background colour */ } .threecol .colleft { right:50%; /* width of the middle column */ background:black; /* left column background colour */ } .threecol .col1 { width:46%; /* width of center column content (column width minus padding on either side) */ left:102%; /* 100% plus left padding of center column */ } .threecol .col2 { width:21%; /* Width of left column content (column width minus padding on either side) */ left:31%; /* width of (right column) plus (center column left and right padding) plus (left column left padding) */ } .threecol .col3 { width:21%; /* Width of right column content (column width minus padding on either side) */ left:85%; /* Please make note of the brackets he (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */ } /* Footer styles */ #footer { clear:both; float:left; width:100%; border-top:1px solid #000; } #footer p { padding:10px; margin:0; text-align:center; } /* begin styles for RSS Feed */ .rss-box { margin: 1em; width: 200px; background-color: #000000; } .rss-items { margin-top:0px; padding:0.5em; 0.5em; margin-left:0px; color:#FFFFFF; } p.rss-title {padding:0.5em;} .rss-title { text-decoration: none; font-family: small helvetica, arial, tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif; font-size: 12px; background-color:#000; color:#f93; font-weight:bold; margin: 0px; padding:0em; text-align: left; } .rss-item { font-family: small helvetica, arial, tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif; font-size: 12px; font-weight : normal; list-style:none; padding-bottom:1em; } .rss-item a { text-decoration : none; color: #f93; font-size: 12px; font-weight:light; font-family:small tahoma, "Bitstream Vera Sans", "Trebuchet MS", "Lucida Grande", lucida, helvetica, sans-serif; } .rss-item a:visited { color:#a51000; } .rss-date { font-size: 85%; font-weight : normal; color: #ccc; } </style> </head> <body> <div id="header"> <a href=/index.html><img src="Header.jpg" alt="art gossip truth" longdesc="http://artheat.net" /></a> </div> <div class="colmask threecol"> <div class="colmid"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --> <!-- Begin #main --> <div id="main"><div id="main2"> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <h2><a href="/project">Project</a></h2> <p>Project is ablah blah blah</p> </div> <div class="col3"> <!-- Column 3 start --> <h2><a href="/wiki">DataBase</a></h2> <p>DataBase is etc etc etc</p> <h3>What's New on DataBase</h3> <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.artheat.net%2Fwiki%2Findex.php%3Ftitle%3DSpecial%3ANewpages%26feed% 3Drss&num=25&date=y&tz=+2&targ=y" type="text/javascript"></script> <noscript> <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.artheat.net%2Fwiki%2Findex.php%3Ftitle%3DSpecial%3ANewpages%26feed% 3Drss&chan=title&num=25&date=y&tz=+2&targ=y&html=y">View RSS feed</a> </noscript> <h3>What's Changed on DataBase</h3> <script language="JavaScript" src="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.artheat.net%2Fwiki%2Findex.php%3Ftitle%3DSpecial%3ARecentchanges%26 feed%3Drss&num=25&date=y&tz=+2&targ=y" type="text/javascript"></script> <noscript> <a href="http://feed2js.org//feed2js.php?src=http%3A%2F%2Fwww.artheat.net%2Fwiki%2Findex.php%3Ftitle%3DSpecial%3ARecentchanges%26 feed%3Drss&num=25&date=y&tz=+2&targ=y&html=y">View RSS feed</a> </noscript> </div> </div> </div> </div> <div id="footer"> <p>ArtHeat is open to any submissions or comments. Email us at <SCRIPT LANGUAGE="JavaScript"> var anchortext = "ArtHeat"; var mailpart1 = "artheat"; var mailpart2 = "gmail.com"; document.write("<a href=" + "mail" + "to:" + mailpart1 + "@" + mailpart2 + ">" + anchortext + "</a>") </script></p> </div> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-1848067-8"; urchinTracker(); </script> </body> </html> Ok, I have a big serious problem. I codded my whole page on Firefox, not on IE or Chrome. So when I use it in Firefox, there is not a problem. When I do it in IE, everything is not in the right position. Then I tried in Chrome. The footer goes beside the sidebar. Is there a certain CSS or HTML code I have to add for it to work in IE or Chrome? I am not using Wordpress, I codded the whole site. If you need to know my site's address, its... http://www.takingtech.com/ So frustrated! Hi Guys, Brand new on here so here's hoping that I can get some valuable input and help from you all. I am a mac user so am naturally using Safari as my browser. I have developed the new home page for my companies web site. To me it looks great and I am happy with the appearance (in Safari). What I am not happy with is it's appearance in Firefox. When viewed in Firefox there are blue boxes around all of the link images and and this is causing the placement to be out also (not perfect like in Safari). I have three questions : 1. How do I stop the blue boxes when viewing in Firefox? 2. Not having IE, how does this page look in IE? 3. Have I approached the coding correctly and could it be done better thus improving the performance? I am aware that there are a good number of rollovers but I do wish to keep them all. I look forward to any input - good or bad. Thanks a lot Gary http://www.gtgrafix.com/index_1.html |
|||||||