donald
Members
-
Joined
-
Last visited
-
ok i joined the css and html together so it is easier to read. seems to be working. only need to test it in ie6 and ie7. ie8, chrome and firefox render it correctly. thank you for the help. <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Welcome</title> <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; } .oneColLiqCtr #container { width: 95%; /* this will create a container 80% of the browser width */ background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } .oneColLiqCtr #mainContent { padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ } #menu-bar { height: 2em; background-color: #F00; } #header { width: 100%; height: 182px; text-align: center; } #logo { float:left; } #right-logo { float: right; } #telephone img { margin:0 auto; } --> </style> </head> <body class="oneColLiqCtr"> <div id="container"> <span id="header"> <div id="logo"> <img src="images/logo.gif" alt="Logo" /></div> <div id="right-logo"> <img src="images/539862.jpg" alt="Logo" /></div> <div id="telephone"><img src="images/telephone.gif" alt="123456789" /></div> </span> <div id="menu-bar"></div> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, </p> <p>molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <!-- end #mainContent --> </div> <!-- end #container --> </div> </body> </html>
-
-
the div holder is holding the div header. I cant find the unopen div tag and w3 validation says it is correct.
-
Your code is, errr, horrible code has been fixed now. Properly formatted
-
i only use Dreamweaver for the code view. I was always taught not to use absolute positioning for a liquid layout. Bad things happen with other browsers especially ie6.
-
Hello. I have 3 images at the top of my page. a logo on the lefthand side. phone number in middle ( had to make it an image because text would not go to bottom of div when window was resized) and a supporting logo on the right hand side. now the 2 logos work perfectly they stay on the left and right no matter the resizing. however the middle div with the phone number image will not center. html code <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Welcome</title> <link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body class="oneColLiqCtr"> <div id="container"> <div id="holder"> <span id="header"> <div id="logo"> <img src="images/logo.gif" width="312" height="182" alt="Logo" /></div> <div id="telephone"><img src="images/telephone.gif" alt="1234567896" align="absbottom" /></div> <div id="right-logo"> <img src="images/539862.jpg" width="124" height="182" alt="Logo" /></div> </span></div> <div id="menu-bar"></div> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, </p> <p>molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <!-- end #mainContent --> </div> <!-- end #container --> </div> </body> </html>> css body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000; } .oneColLiqCtr #container { width: 80%; /* this will create a container 80% of the browser width */ background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } .oneColLiqCtr #mainContent { padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */ } #logo { height: 182px; width: 312px; float: left; } #menu-bar { height: 2em; background-color: #F00; } #header { } #right-logo { float: none; text-align: right; } #telephone img { height: 182px; vertical-align: bottom; text-align: center; float:left; display:block; margin: auto; } please help. thank you
-
I am trying to get back into webdesign after a 5 year break due to family problems. only problem is i seem to have forgotten most of the html. so please put up with a couple of stupid question.
