Brendon Branigin
-
Posts
148 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Brendon Branigin
-
-
-
just saw the reply, thanks for the info
-
debuggin ie
in CSS
thanks for looking over the code. What line is the typo on? its not showing in "find"
-
you would have to use a language like php to do this
-
You know in most web focused text editors they color code different parts of your code to make it easier to read and what not. I think something like this would be a nice feature to have on w3.
-
debuggin ie
in CSS
Alright well i've practicaly finished the conversion of runuo.com to xhtml and css but there are a few problems.In IE"|of use" appears double some how in the legal navigationthe section with navigation / runuo / playuo / razor divs is pushed slightly to far right the 1px top border does not extend as far left as it shouldIn FFthere should be a margin between navigation and runuo boxesThanks in advance
heres the html<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link href="css.css" rel="stylesheet" type="text/css"/></head><body><div id="wrapper"> <!-- begin header --> <div id="logo"> </div> <div id="subheader"> <h1>Welcome to the all new runuo.com</h1> </div> <!-- end header --> <!-- begin navigation and info --> <div class="navigation"> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="products.php">Products</a></li> <li><a href="downloads.php">Downloads</a></li> <li><a href="community.php">Community</a></li> <li id="last"><a href="freeshards.php">Shards</a></li> </ul> </div> <div class="runuo"> <h1>RUNUO </h1> <h2>RunUO 2.0.0 is coming</h2> <ul id="info"> <li><a href="#">Faster Core</a></li> <li><a href="#">More Features</a></li> <li><a href="#">64 Bit Support</a></li> <li><a href="#">Much more...</a></li> </ul> </div> <div class="playuo"> <h1>PLAYUO </h1> <h2>PlayUO Beta 13 </h2> <ul id="info"> <li><a href="#">Powerful Client</a></li> <li><a href="#">Convenient Options</a></li> <li><a href="#">Plugins Enabled</a></li> <li><a href="#">Much more...</a></li> </ul> </div> <div class="razor"> <h1>RAZOR </h1> <h2>Razor 1.0.0 </h2> <ul id="info"> <li><a href="#">Powerful Macro's</a></li> <li><a href="#">Packet Video System</a></li> <li><a href="#">Custom Titlebar</a></li> <li><a href="#">Much more...</a></li> </ul> </div> <!-- end navigation and info --> <!-- begin news / updates / projects --> <div class="content"> <h3>Latest News & Updates</h3> </div> <div class="projects"> <h3>Hosted Projects</h3> <ol> <li><a href="http://www.uogamers.com/"> UO Gamers: Hybrid (UOR)</a></li> <li><a href="http://www.uodivinity.com/">UO Gamers: Divinity (T2A)</a></li> <li><a href="http://www.uodemise.com"> UO Gamers: Demise (ML)</a></li> <li><a href="http://www.runuo.com/razor/"> Razor</a></li> <li><a href="http://www.smithysanvil.com/">The Smithy's Anvil</a></li> <li><a href="http://www.imagedonkey.com/"> Image Donkey</a></li> <li><a href="http://www.topshards.com">Top 200 Free Shards</a></li> <li><a href="#"> Coming Soon!</a></li> </ol> </div> <!-- end news / updates / projects --> <!-- begin footer --> <div class="footer"> <ul id="footernavigation"> <li class="first"><a href="http://www.runuo.com/index.php">Home</a></li> <li><a href="http://www.runuo.com/about.php">About</a></li> <li><a href="http://www.runuo.com/products.php">Products</a></li> <li><a href="http://www.runuo.com/downloads.php">Downloads</a></li> <li><a href="http://www.runuo.com/community.php">Community</a></li> <li><a href="http://www.runuo.com/shards.php">Shards</a></li> <li><a href="http://www.runuo.com/contacts.php">Contacts</a></li> <li><a href="#">Sitemap</a></li> </ul> <h4>RunUO.com © 2006 All Rights Reserved</h4> <ul id="legalnavigation"> <li class="first"><a href="http://www.runuo.com/privacy.php">Privacy Policy</a></li> <li><a href="http://www.runuo.com/privacy.php">User Agreement</a></li> <li><a href="http://www.runuo.com/privacy.php">Terms Of Use</a></li> </ul> </div></div></body></html>
and heres the css
.content a:link { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.content a:visited { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.content a:hover { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.content a:active { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.projects a:link { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.projects a:visited { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.projects a:hover { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}.projects a:active { color: #4A8AC8; text-decoration: underline; font-family: Arial, Helvetica, sans-serif;}h1 { font-family: Tahoma; font-size: 18px; color: #FFFFFF; height: 30px; width: 169px; line-height: 30px; padding: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 0px;}h2 { font-family: Tahoma; font-size: 13px; color: #000000; padding-left: 5px; text-align: center; margin-top: 20px;}h3 { font-family: Tahoma; font-size: 12px; color: #000000; background-color: #E2E2E2; padding-left: 20px; line-height: 30px;}h4 { font-family: Tahoma; font-size: 11px; list-style-position: inside; list-style-image: none; list-style-type: none; text-align: center; color: #4F4F4F; font-style: normal; font-weight: lighter; width: 699px; }.runuo h1 { background-color: #FA4D11; border-top: 15px solid #F7360B; text-align: right; margin: 0px;}.playuo h1 { background-color: #FA9811; border-top: 15px solid #F98B10; text-align: right; margin: 0px;}.razor h1 { background-color: #A8B62B; border-top: 15px solid #9DAD26; text-align: right; margin: 0px;}#subheader h1 { display: none;}body { text-align: center; border-top: 5px solid #E9E9E9; border-right: 5px #E9E9E9; border-bottom: 5px #E9E9E9; border-left: 5px #E9E9E9; margin: 0px; padding: 0px;}#wrapper { text-align: left; height: auto; width: 699px; margin-right: auto; margin-left: auto;}#logo { background-image: url(images/logo.gif); background-repeat: no-repeat; background-position: left top; height: 40px; width: 699px; margin-top: 25px; margin-left: 20px; padding: 0px; margin-right: 0px; margin-bottom: 0px; float: left; clear: left;}#subheader { background-image: url(images/head.jpg); background-repeat: no-repeat; background-position: left top; height: 141px; width: 699px; margin-top: 12px; margin-bottom: 15px; padding: 0px; margin-right: 0px; margin-left: 0px; clear: both; float: left;}.navigation { background-color: #FFFFFF; width: 166px; margin-left: 0px; height: 180px; padding-top: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; clear: none; float: left; text-align: left; list-style-position: inside; list-style-image: none; list-style-type: none;}.runuo { background-color: #FFFFFF; width: 169px; margin-left: 5px; height: 180px; padding-top: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; clear: none; float: left; border: 1px solid #E2E2E2;}.playuo { background-color: #FFFFFF; width: 169px; margin-left: 5px; height: 180px; padding-top: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border: 1px solid #E2E2E2; clear: none; float: left;}.razor { background-color: #FFFFFF; width: 169px; margin-left: 5px; height: 180px; padding-top: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border: 1px solid #E2E2E2; clear: right; float: left;}.content { height: auto; width: 473px; margin-right: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 0px; margin-top: 15px; margin-bottom: 0px; margin-left: 0px; text-align: left; float: left;}.projects { width: 220px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 0px; margin-top: 15px; margin-right: 0px; margin-bottom: 0px; clear: right; text-align: left; height: auto; float: left;}ul#info { list-style-position: outside; list-style-image: url(images/infobullet.gif); list-style-type: none; font-family: Tahoma; font-size: 12px; text-align: left;}.footer { height: auto; width: 669px; border-top: 3px solid #E7E7E7; border-right: 3px #E7E7E7; border-bottom: 3px #E7E7E7; border-left: 3px #E7E7E7; margin: 0px; clear: none; float: left; text-align: center; padding: 0px;}ul#info li a { text-decoration: none; color: #ADADAD; text-align: left; margin: 0px; padding: 0px;}ul#legalnavigation { font-family: Tahoma; font-size: 12px; list-style-position: inside; list-style-image: none; list-style-type: none; text-align: center;}ul#legalnavigation li { display: inline; text-align: center; border-left-width: 1px; border-left-style: solid; border-left-color: #4F4F4F;}ul#legalnavigation li a { text-decoration: none; color: #4A8AC8; margin: 0px; padding: 0px 5px 0px 10px;}#legalnavigation li.first { border-left: 1px solid #FFFFFF;}ul#footernavigation { font-family: Tahoma; font-size: 12px; list-style-position: inside; list-style-image: none; list-style-type: none; text-align: center; margin-top: 4px; padding: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;}ul#footernavigation li { display: inline; text-align: center; border-left-width: 1px; border-left-style: solid; border-left-color: #4F4F4F;}ul#footernavigation li a { text-decoration: none; color: #666666; margin: 0px; padding: 0px 5px 0px 10px;}#footernavigation li.first { border-left: 1px solid #FFFFFF;}.navigation ul li a:link { color: #6A6A6A; text-decoration: none; list-style-position: inside; list-style-image: none; list-style-type: none; text-transform: uppercase; font-family: Tahoma; font-weight: 900; font-size: 11px; background-image: url(images/normal.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;}.navigation ul li a:visited { color: #6A6A6A; text-decoration: none; list-style-position: inside; list-style-image: none; list-style-type: none; text-transform: uppercase; font-family: Tahoma; font-weight: 900; font-size: 11px; background-image: url(images/normal.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;}.navigation ul li a:hover { color: #6A6A6A; text-decoration: none; list-style-position: inside; list-style-image: none; list-style-type: none; text-transform: uppercase; font-family: Tahoma; font-weight: 900; font-size: 11px; background-image: url(images/active.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;}.navigation ul li a:active { color: #6A6A6A; text-decoration: none; list-style-position: inside; list-style-image: none; list-style-type: none; text-transform: uppercase; font-family: Tahoma; font-weight: 900; font-size: 11px; background-image: url(images/normal.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; margin: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;}.navigation ul li { list-style-position: inside; list-style-image: none; list-style-type: none; width: 166px; margin: 0px; padding: 0px 0px 0px 20px; height: 29px; border-top-width: 1px; border-top-style: solid; border-top-color: #DEDEDE; line-height: 29px;}.navigation ul { margin: 0px; padding: 0px;}Any suggestions of things i should have done differently that would improve the code are welcome as well as comments on whether or not you think it looks close to the real thing www.runuo.com
-
never mind figured it out ;/ .class h1if anyone knows how to style the class "more" differently depending on what class its located in then let me know
-
Basicly heres the project im working on.Im converting www.runuo.com new site which uses layout tables and embeded styles into a site which uses css and divs.my biggest problem is getting the html hierarchy to a point where styling can be efficient
<!-- begin navigation and info --> <div id="navigation"> <ul> <li>Home</li> <li>About</li> <li>Products</li> <li>Downloads</li> <li>Community</li> <li>Shards</li> </ul> </div> <div class="runuo"> <h1>RUNUO</h1> <h2>RunUO 2.0.0 is coming</h2> <ul> <li><a href="#">Faster Core</a></li> <li><a href="#">More Features</a></li> <li><a href="#">64 Bit Support</a></li> <li><a href="#">Much more...</a></li> </ul> <a href="http://www.runuo.com/products.php#1" class="more">More Info</a> </div> <div class="playuo"> <h1>PLAYUO</h1> <h2>PlayUO Beta 13</h2> <ul> <li><a href="#">Powerful Client</a></li> <li><a href="#">Convenient Options</a></li> <li><a href="#">Plugins Enabled</a></li> <li><a href="#">Much more...</a></li> </ul> <a href="http://www.runuo.com/products.php#2" class="more">More Info</a> </div> <div class="razor"> <h1>RAZOR</h1> <h2>Razor 1.0.0</h2> <ul> <li><a href="#">Powerful Macro's</a></li> <li><a href="#">Packet Video System</a></li> <li><a href="#">Custom Titlebar</a></li> <li><a href="#">Much more...</a></li> </ul> <a href="http://www.runuo.com/products.php#3" class="more">More Info</a> </div> <!-- end navigation and info -->
these 4 items (razor runuo playuo and navigation) all fall in a single rownow each of the h1's share the same characteristics (box size, font size/color etc) but differ in 2 things. 1. the top border (which is a shade darker then the background)2. and the background itself (the 3 different colors)so i figure i should be able to style them based on their locationif the h1 is located within class razor it should have thebg color of #A8B62Btop border of #9DAD26but all h1 should be 165px wide and 30px high white size 18 tahoma font aligned to the right with a 15px right marginnow this is all great but i cant seem to figure out the proper way to name the style and by that i mean h1 { font-family: Tahoma; font-size: 18px; color: #FFFFFF;that covers the properties similar between all h1's but how do i handle the different propertiessorry if this comes off realy confusing
-
thanks, i changed the classes and it works perfectly
-
I actualy ended up styling the backgrounds to the links with the imgs
thanks for the help though.another problem you might be able to help me withI have 2 links that need to be inline, "link 1" needs to be preceded by "img 1""img 2" needs to proceed "link 1""link 2" needs to proceed "img 2"this all needs to be in the top right corner of my wrapper divi have it set up as a ul with 2 li'seach li has a class (1 and 2).1 is styled with a bg of img 1 which is non repeat align left vertical center.2 is the same as .1 but with img 2 as bgit works great in ie but ff doesnt even recognize the stylesheres the css}.1 { background-image: url(images/tm1.gif); background-repeat: no-repeat; background-position: left center;}.1 a:link { margin-left: 15px; text-decoration: none; color: #000000;}.2 { background-image: url(images/tm3.gif); background-repeat: no-repeat; background-position: left center;}.2 a:link { margin-left: 15px; text-decoration: none; color: #000000;}<div id="header"> <ul> <li class="1"><a href="forums/usercp.php">my account</a></li> <li class="2"><a href="http://www.runuo.com/contacts.php">contact us</a></li> </ul> </div>
I know theres propably a better way using some sort of special child/ancestor selector of some sort. please enlighten me ;/
-
never mind on the 2nd question ;/ figured out i had to set the list to display inside ;/
-
Im making a navigation system that calls for custom bullet images (one for normal and one for hover)i set it up so that "#navigatin li" uses one images and "#navigation li:hover" uses another and it works fine in firefox but in IE it does not change the images, how do i fix this?AlsoHow can i get the top border of the li to go over the bullet image?
-
crazy you need to understand that w3schools stays online as a free resource for web developers because of the advertisers. if you take the viewers away from the site people wont want to advertise and w3schools goes down.
-
thanks boen, ive got another question if you dont mind answering.what are the rules for heading tags (<h1> <h2> etc). I read somwhere that every page should have atleast an <h1> and that you should use them in orderIE:<h1><h2><h3>but not<h1><h3><h4>If this is correct then should <h1> be anything in particular to a page? Should it be the name of the site or name of the page or something, does it matter?
-
what is line height for and when should i use it?what would a layout css look like for a 4 row desgin (not columns). All i ever see is tutorials on column layouts but i only need one column but 4 rows.what does clear do? when should is be used?
-
only thing worse then advertising on a forum is advertising using huge run on sentences and overall poor grammar
-
after handing coding layout tables for a few months (before i knew of css and accesibility) i moved on to dreamweaver. I was so glad to have a tool that could easily perform the small tasks that would normaly take much longer. I agree though anybody who wishes to ever aspire to the level of pro web desginer/developer should start with a simple no frills/thrills text editor. Starting off straight into dreamweavers makes designers/devs lazy and they wont appreciate the time that dreamweaver saves them.
-
Im giving a +thumb to cjb.net. When i was using them (a year ago) the only form of advertising on my site was a thin 15px high 100% wide area at the top of the page.
-
.topnav a { font-weight: bold; text-transform: uppercase; display: block; width: 100%; height: 100%; background: #4D4D4D url("/cat/images/menuCorner.gif") no-repeat bottom right; }.topnav td { border-right: 2px solid #666; white-space: nowrap; }.topnav a div { padding: 2px 0px 4px 11px; }theres the source for it. So yes it is an image
-
Thats great news boen, I sat for 5 minutes trying to figure "if xml was designed to do nothing then wtf". The ability to dynamicly place data will completely change the way i think about site structure.
-
I just went through the xml tut's and i have a question. Can i keep all my websites text in XML files and then call for specific parts of data to be displayed in an XHTML file? I saw this done in an example using XSLT. Is it a good way to keep content organized?How will this effect page load times? Is it worth the effort?
-
so they dont actualy expect somone to know all of them? they just list them all so that they can find somone who knows atleast one?
-
im just curious to why web developer/designer employers insist that the potential employee have 4 years of exp in every scripting language known to man and able to work with every database ever invented. Im going through craigslist and these posts are rediculoussome of them want things like perl, is perl even used anymore? are all employers this dumb?
-
http://www.w3schools.com/xml/tryit.asp?fil...httprequest_js1when loaded div T1 has a height and width atributes to a fixed size. shouldnt they be set to auto so that the text generated from the xml doesnt overlap?not important but i thought i would mention it.
combining a:link a:active ect
in CSS
Posted
ive got a few sets of links where all 4 statuses are the same (link, visited, hover, active)so to optimize the code i tried combining them, it went terribly wrong
heres the code
#content a a:link, a:visited, a:hover, a:active { color : #4a8ac8; text-decoration : underline; font-family : Arial, Helvetica, sans-serif; background-color : #ffffff; margin: 0px; padding: 0px;}#text a:link, a:visited, a:hover, a:active { color : #4a8ac8; text-decoration : underline; font-family : Arial, Helvetica, sans-serif; background-color : #F4F4F4; margin: 0px; padding: 0px;}#projects a:link, a:visited, a:hover, a:active { color : #4a8ac8; text-decoration : underline; font-family : Arial, Helvetica, sans-serif; background-color: #FFFFFF; margin: 0px; padding: 0px;}ul#legalnav li a:link, a:visited, a:hover, a:active { text-decoration : none; color : #4A8AC8; margin : 0px; padding : 0px 5px 0px 10px; background-color: #FFFFFF; }ul#footernavigation li a:link, a:visited, a:hover, a:active { text-decoration : none; color : #666666; margin : 0px; padding : 0px 5px 0px 10px; background-color: #FFFFFF; }#navigation ul li a:link, a:visited { color: #6A6A6A; text-decoration: none; list-style-position: inside; list-style-image: none; list-style-type: none; text-transform: uppercase; font-family: Tahoma, sans-serif; font-weight: 900; font-size: 11px; background-image: url(images/normal.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; margin: 0px 0px 0px 15px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; background-color: #FFFFFF;}#navigation ul li a:hover, a:active { color: #6A6A6A; text-decoration: none; list-style-position: inside; list-style-image: none; list-style-type: none; text-transform: uppercase; font-family: Tahoma, sans-serif; font-weight: 900; font-size: 11px; background-image: url(images/active.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; margin: 0px 0px 0px 15px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; background-color: #FFFFFF;}#logo a:link, a:visited, a:hover, a:active { text-decoration: none; font-family: Tahoma, sans-serif; font-size: 11px; color: #666666; background-color: #FFFFFF;}what did i do wrong?