Everything posted by Flex
- Vertical menu is sending me crazy!
-
Vertical menu is sending me crazy!
Hi, I don't understand Javascript but if you modify your Javascript for this it whould go to the position, bue the sub-menu doesn't appear. Javascript code: var menuids = new Array("sidenav"); var submenuoffset = 0; function createcssmenu() { for (var i=0; i<menuids.length; i++) { var ultags = document.getElementById(menuids[i]).getElementsByTagName("ul"); for (var t = 0; t < ultags.length; t++) { var spanref = document.createElement("span"); spanref.innerHTML = " "; ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref); ultags[t].parentNode.onmouseover = function() { this.getElementsByTagName("ul")[0].style.left = this.parentNode.offsetWidth+submenuoffset+"px"; this.getElementsByTagName("ul")[0].style.display = "block"; } ultags[t].parentNode.onmouseout = function() { this.getElementsByTagName("ul")[0].style.display="none"; } } } } if (window.addEventListener) { window.addEventListener("load", createcssmenu(), false); } else if (window.attachEvent) { window.attachEvent("onload", createcssmenu()); } Regards.
-
is HTML DEAD?
Hi, You can use Flash of course for videos player and so on, I just don't recomend you to use Flash to create a full version Flash Site. There can be a lots of issues with accessibility. Embed your Flash in HTML . Regards
-
is HTML DEAD?
Hi, Tks for the reply my friend. Man that last link I didn't know. I saw a person searching for labios sensuals LOOOOL. Tks a lot once again. Regards
-
is HTML DEAD?
Hi, Well that reports are variable I see :S. Do you guys know what system they have to verify that? I think they only do that statistics for their site with a little script of browser identification. Regards
-
Piece of cake.....
And who loves it? Only people who don't know nothing about the Internet and that is all what they have xP. Regards
-
Piece of cake.....
Hi, IE6 was different dimensions. Try to modificate that value of the condition or you must increase some value in your composition. Good luck with that xP. Regards
-
DIV auto height does not work on multiple DIV's!
Nice dude. Always here , go on. Regards
-
is HTML DEAD?
Hi, A little of topic, but I whould like to know if there are many users with IE6 yet? Is there a site with a kind of statistics where we could consult? HTML hasn't been replaced . About Flash, Flash is good for example: create a video player, a music player, slide show's, games, and much more. I don't recommend you to use Flash for full website. HTML and CSS are very pretty . Take a look over the following link: CSSMANIA. Hope you will gain inspiration. Regards.
-
Where Do I start?
Hi, Dude see a lot of tutorials, you have to read a little bit and study HTML with CSS. You can start with that programs, but they aren't the best way for future projects. In Dreamweaver have attention to the section code, with time you will understand how HTML and CSS work. We are here to help in what we are capable for. Regards.
-
DIV auto height does not work on multiple DIV's!
Hi, Did you try the example I have passed you? for me worked fine . Make a new document and try it. Regards
-
DIV auto height does not work on multiple DIV's!
Hi friend, Try this code . CSS: * { margin: 0px; padding: 0px; } body { font-family: "arial", verdana, sans serif; background-color: #ccc; overflow: auto; border: 0px; } #global { margin: 0px auto; text-align: center; min-width: 770px; width: 902px; } #header { height: 100px; width: 900px; border: 1px solid #414142; background: #fff url("slogan.gif") no-repeat scroll center right; } img.displayed { display: block; text-align: left; margin: 6px auto 0px 15px; } .nav { height: 35px; background: url(dropline_0.gif) repeat-x; position: relative; font: bold 12px arial, verdana, sans-serif; width: 900px; border-left-style: solid; border-right-style: solid; border-color: #414142; border-width: 1px; margin-top: -1px; margin-bottom: -1px; z-index: 500; } .nav .table { display: table; margin: 0 auto; } .nav .select, .nav .current { margin: 0px; padding: 0px; list-style: none; display: table-cell; white-space: nowrap; } .nav li { margin: 0px; padding: 0px; height: auto; float: left; } .nav .select a { display: block; height: 35px; float: left; background: url(dropline_0.gif); padding: 0px 30px 0px 30px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #fff; } .nav .current a { display: block; height: 35px; float: left; background: url(dropline_2.gif); padding: 0 0 0 15px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #ffffff; } .nav .current a b { display: block; padding: 0px 30px 0px 15px; background: url(dropline_2.gif) right top; } .nav .select a:hover, .nav .select li:hover a { background: url(dropline_1.gif); padding: 0px 0px 0px 15px; cursor: pointer; color: #fff; } .nav .select a:hover b, .nav .select li:hover a b { display: block; float: left; padding: 0 30px 0 15px; background: url(dropline_1.gif) right top; cursor: pointer; } .nav .select_sub { display: none; } .nav table { border-collapse: collapse; margin: -1px; font-size: 1em; width: 0px; height: 0px; } .nav .sub { display: table; margin: 0px auto; padding: 0px; list-style: none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background: transparent; color: #f00; } .nav .select :hover .select_sub, .nav .current .show { display: block; position: absolute; width: 900px; top: 35px; background: url(back_0.gif); padding: 0px; z-index: 100; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; left : -1px; right : 0px; text-align : center; } .nav .current .show { z-index: 10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display: block; float: left; background: transparent; padding: 0px 10px 0px 10px; margin: 0px; white-space: nowrap; border: 0px; color: #414142; } .nav .current .sub li.sub_show a { color: #414142; cursor: default; background: url(menus/back_1.gif); } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility: visible; color: #1b75bc; background: url(menus/back_1.gif); } h1,h2,h3,h4,h5,h6 { font-family: arial, verdana, sans serif; color: #1b75bc; text-align: left; } p { font: bold 14px arial, verdana, sans serif; color: #414142; text-align: left; } #body { float: left; width: 900px; background-color: #ffffff; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; } #text { width: 550px; height: 900px; margin: 25px 0px 0px 50px; border-style: solid; border-color: #1a1a1a; float: left; } #side { width: 200px; height: 900px; margin: 25px 0px 0px 10px; float: left; border-style: solid; border-color: #1a1a1a; } p.links { text-align: center; font: 13px arial, verdana, sans serif; } #footer { position: relative; text-align: center; vertical-align: center; width: 900px; height: 110px; background-color: #fff; margin-top: 5px; margin-bottom: 10px; border: 1px solid #414141; clear: both; } .clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Worklinx - The self-employed workforce</title> <link rel="stylesheet" media="all" type="text/css" href="style.css"><!--[if IE]> <link rel="stylesheet" media="all" type="text/css" href="style_ie.css" /> <![endif]--> </head> <body> <div id="global"> <div id="header"> <img class="displayed" src="newlogo2.gif" alt="worklinx" /> </div> <div class="nav"> <div class="table"> <ul class="select"> <li> <a href="#nogo"><b>Home</b></a> </li> </ul> <ul class="select"> <li> <a href="#"><b>About Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Our Goal </a></li> <li><a href="#nogo">Our Values </a></li> <li><a href="#nogo">Why Use Worklinx </a></li> <li><a href="#nogo">Partners </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Services</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub show"> <ul class="sub"> <li><a href="#nogo">Construction </a></li> <li><a href="#nogo">Installation </a></li> <li><a href="#nogo">Maintenance </a></li> <li><a href="#nogo">Repairs </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Sub-contractors</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">About our sub-contractors </a></li> <li><a href="#nogo">Working for Worklinx </a></li> <li><a href="#nogo">The Application Process </a></li> <li><a href="#nogo">Join Us </a></li> <li><a href="#nogo">FAQ </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Contact Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Request a Sub-contractor Application Pack </a></li> <li><a href="nogo">Request a call back </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </div> <div id="body"> <br /> <br /> <br /> <div id="text"> <h2>Welcome to Worklinx</h2> <p>Welcome to Worklinx - the UK's only construction, installation, maintenance and repair company powered solely by a vetted workforce of self-employed sub-contractors and tradesmen.</p> </div> <div id="side"> <p>side boxes</p> </div> </div> <div id="footer"> <p class="links"> <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="ourservices.html">Our Services</a> | <a href="oursubcontractors.html">Our Sub-contractors</a> | <a href="contactus.html">Contact Us</a> <br /> <br /> <a href="sitemap.html">Sitemap</a> | <a href="contactus.html">Contact Us</a> | <a href="legal.html">Legal</a> | <a href="privacy.html">Privacy</a> <br /> <br /> Copyright © 2007-2009 Worklinx. All rights reserved </p> </div> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Worklinx.co.uk presents valid HTML 4.01 Transitional" height="31px" width="88px" border="0" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0px; width:88px; height:31px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Worklinx.co.uk presents valid CSS" /> </a> </div> </body> </html> Regards
-
Rounding corners with CSS
Hi, Look at this example, I think it can help you in a certain way: Link CSS3 is going to help us in a few years! Regards
-
How can I do this?
Hi, I can't open the links. Regards.
-
Spacing in menu bar
Hi, I didn't understand what you are looking for, maybe passing a Image for me too see whould help. Regards
-
why aren't my main nav links working?
Hello, Here is the same thing, all the links work properly, try cleannig your cache, I don't know if it can help. I visualized in Firefox 3.5. Best Regards.
-
DIV auto height does not work on multiple DIV's!
Hey, No problem matte , I'm glad to help . Later I will try to center that my friend, I'm just a little busy with a project, as soon as possible I will try to help you. Today you will have that centered. Regards
-
DIV auto height does not work on multiple DIV's!
Hi there, I have to go to work now, I just didn't put de body in the center. I also cleaned your code . HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Worklinx - The self-employed workforce</title> <link rel="stylesheet" media="all" type="text/css" href="style.css"><!--[if IE]> <link rel="stylesheet" media="all" type="text/css" href="style_ie.css" /> <![endif]--> </head> <body> <div id="global"> <div id="header"> <img class="displayed" src="newlogo2.gif" alt="worklinx"></div> </div> <div class="nav"> <div class="table"> <ul class="select"> <li> <a href="#nogo"><b>Home</b></a> </li> </ul> <ul class="select"> <li> <a href="#"><b>About Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Our Goal </a></li> <li><a href="#nogo">Our Values </a></li> <li><a href="#nogo">Why Use Worklinx </a></li> <li><a href="#nogo">Partners </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Services</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub show"> <ul class="sub"> <li><a href="#nogo">Construction </a></li> <li><a href="#nogo">Installation </a></li> <li><a href="#nogo">Maintenance </a></li> <li><a href="#nogo">Repairs </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Our Sub-contractors</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">About our sub-contractors </a></li> <li><a href="#nogo">Working for Worklinx </a></li> <li><a href="#nogo">The Application Process </a></li> <li><a href="#nogo">Join Us </a></li> <li><a href="#nogo">FAQ </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <ul class="select"> <li> <a href="#nogo"><b>Contact Us</b><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <div class="select_sub"> <ul class="sub"> <li><a href="#nogo">Request a Sub-contractor Application Pack </a></li> <li><a href="nogo">Request a call back </a></li> </ul> </div> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> </div> <div id="body"> <br /> <br /> <br /> <div id="text"> <h2>Welcome to Worklinx</h2> <p>Welcome to Worklinx - the UK's only construction, installation, maintenance and repair company powered solely by a vetted workforce of self-employed sub-contractors and tradesmen.</p> </div> <div id="side"> <p>side boxes</p> </div> </div> <div id="footer"> <p class="links"> <a href="index.html">Home</a> | <a href="aboutus.html">About Us</a> | <a href="ourservices.html">Our Services</a> | <a href="oursubcontractors.html">Our Sub-contractors</a> | <a href="contactus.html">Contact Us</a> <br /> <br /> <a href="sitemap.html">Sitemap</a> | <a href="contactus.html">Contact Us</a> | <a href="legal.html">Legal</a> | <a href="privacy.html">Privacy</a> <br /> <br /> Copyright © 2007-2009 Worklinx. All rights reserved </p> </div> <a href="http://validator.w3.org/check?uri=referer"> <img src="http://www.w3.org/Icons/valid-html401" alt="Worklinx.co.uk presents valid HTML 4.01 Transitional" height="31px" width="88px" border="0" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0px; width:88px; height:31px;" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Worklinx.co.uk presents valid CSS" /> </a> </div> </body> </html> Here is the CSS: * { margin: 0px; padding: 0px; } html, body { height: 100%; } body { font-family: "arial", verdana, sans serif; text-align: center; min-width: 770px; background-color: #ccc; overflow: auto; border: 0px; } #global { margin: 0px auto; } #header { margin: 0px auto; height: 100px; width: 900px; border: 1px solid #414142; background: #fff url("slogan.gif") no-repeat scroll center right; } img.displayed { display: block; text-align: left; margin: 6px auto 0px 15px; } .nav { height: 35px; background: url(dropline_0.gif) repeat-x; position: relative; font: bold 12px arial, verdana, sans-serif; width: 900px; border-left-style: solid; border-right-style: solid; border-color: #414142; border-width: 1px; margin: -1px auto; z-index: 500; } .nav .table { display: table; margin: 0 auto; } .nav .select, .nav .current { margin: 0px; padding: 0px; list-style: none; display: table-cell; white-space: nowrap; } .nav li { margin: 0px; padding: 0px; height: auto; float: left; } .nav .select a { display: block; height: 35px; float: left; background: url(dropline_0.gif); padding: 0px 30px 0px 30px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #fff; } .nav .current a { display: block; height: 35px; float: left; background: url(dropline_2.gif); padding: 0 0 0 15px; text-decoration: none; line-height: 35px; white-space: nowrap; color: #ffffff; } .nav .current a b { display: block; padding: 0px 30px 0px 15px; background: url(dropline_2.gif) right top; } .nav .select a:hover, .nav .select li:hover a { background: url(dropline_1.gif); padding: 0px 0px 0px 15px; cursor: pointer; color: #fff; } .nav .select a:hover b, .nav .select li:hover a b { display: block; float: left; padding: 0 30px 0 15px; background: url(dropline_1.gif) right top; cursor: pointer; } .nav .select_sub { display: none; } .nav table { border-collapse: collapse; margin: -1px; font-size: 1em; width: 0px; height: 0px; } .nav .sub { display: table; margin: 0px auto; padding: 0px; list-style: none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background: transparent; color: #f00; } .nav .select :hover .select_sub, .nav .current .show { display: block; position: absolute; width: 900px; top: 35px; background: url(back_0.gif); padding: 0; z-index: 100; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; left : -1px; right : 0px; text-align : center; } .nav .current .show { z-index: 10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display: block; float: left; background: transparent; padding: 0px 10px 0px 10px; margin: 0px; white-space: nowrap; border: 0px; color: #414142; } .nav .current .sub li.sub_show a { color: #414142; cursor: default; background: url(menus/back_1.gif); } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility: visible; color: #1b75bc; background: url(menus/back_1.gif); } h1,h2,h3,h4,h5,h6 { font-family: arial, verdana, sans serif; color: #1b75bc; text-align: left; } p { font: bold 14px arial, verdana, sans serif; color: #414142; text-align: left; } #body { float: left; width: 900px; background-color: #ffffff; border-color: #414142; border-left-style: solid; border-right-style: solid; border-width: 1px; } #text { width: 550px; height: 900px; margin: 25px 0px 0px 50px; border-style: solid; border-color: #1a1a1a; float: left; } #side { width: 200px; height: 900px; margin: 25px 0px 0px 10px; float: left; border-style: solid; border-color: #1a1a1a; } p.links { text-align: center; font: 13px arial, verdana, sans serif; } #footer { position: relative; text-align: center; vertical-align: center; width: 900px; height: 110px; background-color: #fff; margin: 5px auto 10px auto; border: 1px solid #414141; clear: both; } .clearfix:after { content: "."; display: block; height: 0px; clear: both; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; } I cleaned a lot of your CSS. Good Luck, if you need something just call over. Have to go to work :S. Regards
-
DIV auto height does not work on multiple DIV's!
Hi, I'm going to bed now, but tomorrow I will help you . If you figure it out please post here for me to know. Regards and good night
-
Another float issue!
Hi, Say if it helped friend . Do it hard . Regards
-
Slicing PSD's, Is it worth it?
Hi, You can slice it but then use CSS to position your images. I do it like that way, is the same as cutting a peace of image of my layout. Regards
-
Another float issue!
Hi, Look, can you guide with this example: CSS: * { margin: 0px; padding: 0px; } .centro { width: 500px; height: 500px; margin: 0px auto; } .img { float: left; border: 1px solid #000; width: 250px; height: 150px; } .conteudo_direito { float: left; border: 1px solid #000; height: 150px; } .baixo { clear: both; border: 1px solid #000; } HTML: <div class="centro"> <div class="img">teste</div> <div class="conteudo_direito">Teste</div> <div class="baixo">Teste2</div> </div> Regards
-
Another float issue!
Well, I'm going to see your code. Trying to help you. Regards.
-
Three new DOM for Firefox
LOOOOL, imagine that fingerprints with oil or something like that xP. Regards
-
Another float issue!
Hi, Why do you have this: .postDate p, .postTitle p { float: right; } if there isn't any paragraph in the .postDate and .postTitle? Regards