SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Two CSS problems

    A user told me that the graphic at the top of my web site is partially hidden
    underneath the webnauts logo when he set's his browser at 800x600.

    I also made a test with Mozilla increasing the font size to 150%, and a problem is there too.
    My links Skip Navigation and Accesskeys overllape my horizontal menu.

    Can someone help me with these issues? I would be very greatful.

    See here: http://www.webnauts.net

  2. #2
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Aus
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first problem is a common one when you have a fluid design with fixed width images in the header. The easiest solution would be to reduce the centre graphic a tiny bit so that it doesn't overlap at 800x600, or use a fixed width. I'm sure someone else has some other solutions though.
    I think the second problem is because you are using absolute positioning, maybe try floating it to the right and then clearing it, and remove the height from the header so it expands when the text resizes.
    If this doesn't help I can have a proper look at it later when I have time.

    Matt.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Matt's suggestions are about right.

    The skip navigation will overlap the element below if the text is enlarged because it is placed absolutely and the element below will just ignore it.

    You could float all the top row but that would change the look a bit.

    Something like:
    Code:
    #header {min-height: 75px; padding-left: 0.45em; background-color: #fff; color: #000;}
    * html #header {height:75px} /* ie*/
    * > html #header {height:auto}/* ie mac*/
    #header .left{margin-left: 1px; margin-top: 10px;width:228px;}
    #lowerMenuBar {clear:both;background-color: #f93; color: #000000; font-weight: bold; height: 2.0em; padding-left: 0em; padding-top: 0.8em; padding-right: 1.8em; border-top:1px solid #000; border-bottom: 1px solid #000; text-align: right}
    .RHS {float:right;margin-right: 1.0em; width: 14.5em; margin-top: 1.0em; font-weight: bold; text-align: left;}
    That will float all elements but you will probably be better off just floating the skip links and letting the rest of the header be static.

    Paul

  4. #4
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul I tried to copy and paste the above code, but there were some problems again.
    Can you check this? Thanks you so much in advance.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well this is how I envisaged it with three floats on the top which should always remain visible although I thing you should reduce the width of the middle graphic a little bit to accomodate 800x600.

    Heres all the code although the board will probably mess up the absolute urls.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Webnauts Net Web Accessibility &amp; Usability Consulting.</title>
    <meta name="Description" content="Web Accessibility and Usability Consulting by Webnauts Net. Designing with accessibility and usability in mind." />
    <meta name="keywords" content="web accessibility,usability consulting,section 508,access,accessible,people with disabilities,services,information,standards,forum,site,usable,Webnauts Net" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" comment "ICRAonline EN v2.0" l gen true for "http://www.webnauts.net" r (nz 1 vz 1 lz 1 oz 1 cz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.webnauts.net" r (n 0 s 0 v 0 l 0))' />
    <meta name="Language" content="english,en" />
    <meta name="expires" content="Sun, 01 Jan 2006 00:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
    <style>
    /* Type CSS rules here and they will be applied
    to pages from 'editcss'
    immediately as long as you keep this window open. */
    /**** LINK-tag style sheet style.css ****/
    /* ###### Copyright Webnauts Net###### */
    body{color: #000; background-color: #fff; font-size: 80%; margin: 0em; padding: 0em; background-repeat: no-repeat; background-attachment: scroll; font-family: verdana, helvetica, arial, sans-serif}
    h1, h2, h3, h4, h5, h6 {color: #000; background-color: #eee; padding-left: 0.6em; padding-right: 0.6em; font-weight: bold; font-size: 1.2em; padding-top: 0.2em; padding-bottom: 0.2em; margin-top: 1.0em}
    a:visited img.square {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #800080; color: #fff}
    a:hover img.square {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #800080; color: #fff}
    a:hover img.square1 {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #fff; color: #000}
    img {border: none; margin-top: 0.55em}
    img.square {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #000; color: #fff}
    img.right {float: right; margin-left: 0em; padding-right: 0em}
    img.leftone {float: left; margin-top: 0em; margin-left: 3.3em; }
    img.left{float: left; margin-top: 0em; margin-left: 0.7em; padding-right: 1.4em; padding-bottom: 0.45em}
    img.square1 {height: 0.4em; width: 0.4em; vertical-align: 20%; border: none; background: #000; color: #fff}
    p.danke {color: #000; font-size: 1.0em; font-weight: bold; text-align: center; background-color: #fff}
    p.fehler {color: red; font-size: 1.1em; font-weight: bold; text-align: center; background-color: #fff}
    p.lila {color: #000; font-family: verdana, helvetica, arial, sans-serif; font-size: 0.9em; font-weight: bold; font-style: italic; text-align: center; background-color: #fff}
    dt {font-weight: bold; padding-left: 0.6em; padding-right: 0.6em; font-size: 1.1em}
    dd {padding-left: 0.6em; padding-right: 3em; padding-bottom: 0.25em}
    html>body q span {display:none}
    .smallCaps {font-variant: small-caps}
    code {font-family: lucida console, monospace}
    acronym {border-bottom-style: dotted; border-bottom-width: 0.09em; cursor: help; color: #000; background-color: #eee}
    html>#bodyText {height: 1%; float: left; margin: 0em}
    /*#bodyText {background: url(http://www.webnauts.net/images/shadow1.gif) fixed no-repeat; background-position: center}*/
    #bodyText {background-color: #fff;color: #000; line-height: 1.4em; margin: 0 0 0 15.5em; padding: 1.4em 1.4em 0.9em 1.4em; border-left: 1px solid}
    #bodyText p {padding-left: 0.6em; padding-right: 3em}
    #bodyText a {color: #000; text-decoration: none; border-bottom-style: solid; border-bottom-width: 0.09em}
    #bodyText a:hover {font-weight: bold; border-bottom: none; background-color: #800080; color: #fff; text-decoration: underline}
    #bodyText a:active {border-bottom: none; color: #fff; background-color: #800080; text-decoration: underline}
    #bodyText .topOfPage {font-size: 80%; font-weight: bold; font-variant: small-caps; border: 0; padding: 0.45em 0.6em; float: right; text-decoration: underline}
    #bodyText a.topOfPage:hover {color: #fff; background-color: #800080; text-decoration: none; padding-top: 0.3em; padding-bottom: 0.3em}
    #bodyText li {list-style: square}
    
    #upperMenuBar .highlight, #lowerMenuBar .highlight {color: #000; text-decoration: none}
    #upperMenuBar {height: 2.1em; color: #fff}
    #upperMenuBar a {color: #fff; font-size: 90%; text-decoration: none; padding-left: 0.48em; padding-right: 0.96em}
    #upperMenuBar a:hover {text-decoration: underline; color: #f93}
    .LHS {left: 1.8em; top: 0.8em}
    .RHS a:active {background-color: #eee; color: #000}
    .RHS li {list-style: square; padding: 0; margin-left: 0}
    .RHS ul li a:link {color: #000; background-color: #fff;  text-decoration: none}
    .RHS ul li a:visited {color: #800080; background-color: #fff; text-decoration: none}
    .RHS ul li a:hover {color: #fff; background-color: #800080; text-decoration: none}
    .RHS ul li a:active {color: #000; background-color: #fff; text-decoration: none}
    
    html>body #lowerMenuBar {height:auto;}
    #header {min-height: 75px; padding-left: 0.45em; background-color: #fff; color: #000;}
    * html #header {height:75px}
    * > html #header {height:auto}
    #header .left{margin-left: 1px; margin-top: 10px;width:228px;}
    #lowerMenuBar {clear:both;background-color: #f93; color: #000000; font-weight: bold; min-height: 2.9em;line-height:2.9em; padding-left: 0em; padding-right: 1.8em; border-top:1px solid #000; border-bottom: 1px solid #000; text-align: right}
    * html #lowerMenuBar {height:2em};
    * > html #lowerMenuBar {height:auto}
    .RHS {float:right;margin-right: 1.0em; width: 14.5em; margin-top: 1.0em; font-weight: bold; text-align: left;}
    
    #lowerMenuBar a {color: #fff; font-weight: bold; text-decoration: underline; margin: 0 0.5em}
    #lowerMenuBar a:hover {text-decoration: none; color: #000}
    #lowerMenuBar a:visited {color: #800080}
    .sideMenuBox, .sideTextBox {background-color: #eee; color: #000; width: 15.5em; border-bottom: 1px solid; padding: 1.5em 0 1.5em 0em; margin-bottom: 0.05em; float: left; clear: left}
    .sideMenuBox div, .sideTextBox div {font-weight: bold; padding-left: 0.8em; padding-bottom: 0.8em; border-bottom: 0px}
    .sideMenuBox ul li a {list-style: square; text-decoration: none; margin: 1.2em 0 1.2em 0em}
    .sideMenuBox ul {margin-top: 0; margin-left: 2.4em; padding: 0; list-style: none; font-family: verdana, helvetica, arial, sans-serif; font-size: 95%; line-height: 150%}
    .sideMenuBox ul li a:hover {text-decoration: underline}
    .sideMenuBox a {color: #000}
    .sideMenuBox a:visited {color: #800080}
    .sideMenuBox a:hover {color: #f93}
    .sideTextBox span {line-height: 1.5em; display: block; padding: 0 0.8em 0 1.06em; list-style: none}
    .sideTextBox a {text-decoration: none; border-bottom-style: solid; border-bottom-width: 0.09em}
    .sideTextBox a:hover {border-bottom: none; text-decoration: underline; background-color: #fff; color: #000}
    .sideTextBox span {color: #000; background-color: #eee}
    .lighterBG {background-color: #fff;color: #000}
    .sideLastBox {font-weight: bold; background-color: #fff; color: #000; width: 15.5em; padding: 1em 0 1em 0; margin-bottom: 0.09em}
    .sideLastBox .centered {margin-left: -1em; border-bottom-style: solid; border-bottom-width: 0.09em}
    div.boxgroup {width: 15.5em; margin: 0 0 0 0; padding: 0; text-align: left; float: left}
    div.centered {text-align: center}
    div.small {font-family: verdana, helvetica, arial, sans-serif; font-size: 80%}
    div.row {clear: both; padding-top: 10px; width: 100%; text-align: left}
    div.red {background-color: #fff; color: red; float: right}
    #footer {font-size: 85%; padding: 0em 0.55em 2.4em 0.55em; clear: none; border-top-style: solid;  border-width: 0.09em; background-color: #fff; color: #000}
    #footerlow {background-color: #800080; color: #fff; font-size: 30%; padding: 0em 0.55em 1.44em 0.55em; border-top-style: solid; border-width: 0.09em}
    #footer div {text-align: center; line-height: 1.45em; padding-top: 0.1em}
    #footer ul, li {list-style-type: square}
    /*#footer ul, li {list-style-type:none; display: inline; line-height: 1.5em}*/
    #footer a {text-decoration: none; color: blue}
    #footer a:active {background-color: #eee}
    #footer a:hover {background-color: #800080; color: #fff; text-decoration: none}
    .footerLHS {line-height: 1.7em; float: none; clear: none}
    fieldset {width: 550px; padding: 10px; border: 1px solid}
    label {color: #000;  background-color: #fff; font-weight: bold}
    legend {color: #000;  background-color: #fff; font-weight: bold}
    .row label {text-align: right; width: 150px; margin-right: 5px; display: block; float: left}
    .row input {width:200px; text-align: left}
    .row2 input {text-align: right; width: 150px; margin-right: 5px; display: block; float: left}
    .row2 label {width:360px; text-align: left; float: left}
    .row textarea {width:250px; text-align: left} 
    input, textarea {background-color: #eee; border: 1px solid; color: #000;}
    .submit {text-align: center} 
     
    </style>
    <link rel="SHORTCUT ICON" href="graphics/wheelchair.ico" />
    <link rev="made" href="mailto:webmaster@webnauts.net" title="John Britsios, Webnauts Net" />
    </head>
    <body>
    <div class="top" id="top"></div>
    <div id="header"> <a id="logo"><img src="http://www.webnauts.net/images/accessibility.gif" alt="Webnauts Net" width="228" height="60" class="left" /></a> 
      <div class="RHS"> 
    	<ul>
    	  <li><a href="#content" title="Skip to main content (access key = 1)" accesskey="1">Skip 
    		Navigation</a></li>
    	  <li><a href="access.html#accesskey" title="Help for people who are disable to use a pointing device (access key = 2)" accesskey="2">Accesskeys</a></li>
    	</ul>
      </div>
      <img src="http://www.webnauts.net/images/webnauts_header.gif" alt="Disabilities symbols" width="400" height="60" /> 
    </div><div id="lowerMenuBar">
    <map id="toplinks" title="Footer tags"><div>
    Home | <a href="services.html" title="Our services (access key = 3)" accesskey="3">Services</a> | <a href="http://forum.webnauts.net" title="Accessibility &amp; Usability Forum (access key = 4)" accesskey="4">Forum</a> | <a href="sitemap.html" title="Site Map = Site Navigation (access key = 5)" accesskey="5">Site Map</a> | <a href="http://www.webnauts.net/contact.html" title="Contact us (access key = 6)" accesskey="6">Contact</a> </div> 
    </map></div>
    <div class="boxgroup"> 
      <div class="sideMenuBox"> 
    	<div>We recommend:</div>
    	<ul>
    	  <li><a href="accessibilty.html" title="Article: Why Accessibility is Important to You">Article 
    		about Accessibility</a></li>
    	  <li><a href="http://www.webnauts.net/usability.html" title="Article: Why Usability is Important to You">Article 
    		about Usability</a></li>
    	  <li><a href="accessibility_seminar.html" title="W3C Web Content Accessibility Guidelines">Seminar 
    		in Accessibility</a></li>
    	  <li><a href="usability_seminar.html" title="Evidence-Based Techniques on Web Design and Usability Issues">Seminar 
    		in Usability</a></li>
    	</ul>
      </div>
      <div class="sideMenuBox lighterBG"> 
    	<div>Navigate this page:</div>
    	<ul>
    	  <li><a href="#welcome" title="Acknowledgement">Web Accessibility and Usability 
    		Consulting</a></li>
    	  <li><a href="#designing" title="Designing with accessibility and usability in mind">Designing 
    		with accessibility and usability</a></li>
    	</ul>
      </div>
      <div class="sideMenuBox"> 
    	<div>Featured Sites:</div>
    	<ul>
    	  <li><a href="http://www.w3c.org/WAI/" title="Web Accessibility Initiative">W3C/WAI</a></li>
    	  <li><a href="http://www.eypd2003.org/eypd/" title="The European Year of People with Disabilities">EYPD 
    		2003</a></li>
    	  <li><a href="http://webaim.org/" title="WebAIM (Web Accessibility In Mind) Center for Persons with Disabilities">WebAIM</a></li>
    	  <li><a href="http://www.accessiblenet.org/" title="Web Accessibility links and resources">Accessible 
    		Net</a></li>
    	  <li><a href="http://usability.gov/" title="Resource for designing usable, useful and accessible Web sites and user interfaces">Usability.gov</a></li>
    	  <li><a href="http://www.usabilitynet.org/" title="European Union project that provides usability and user centred design resources">Usability 
    		Net</a></li>
    	  <li><a href="http://webstandardsgroup.org/" title="Web Standards Group">WSG</a></li>
    	  <li><a href="http://section508.gov/" title="US Section 508 of the Rehabilitation Act">Section 
    		508</a></li>
    	  <li><a href="http://www.disability.gov.uk/dda/" title="UK Disability Discrimination Act 1995">DDA</a></li>
    	  <li><a href="http://learningforlife.fsu.edu/webmaster/index.cfm" title="Florida State University Webmaster Certifications">FSU 
    		Webmaster Certifications</a></li>
    	</ul>
      </div>
    </div>
    <div id="bodyText"> <a id="content"></a><strong>You are here: Home</strong> 
      <h1 id="welcome">Web Accessibility and Usability Consulting</h1>
      <p>Choosing the right Web Accessibility and Usability Consulting firm can be 
    	challenging. You want a firm that has experience, industry knowledge, and 
    	innovative ideas.</p>
      <p>Our firm has the background and knowledge to help you or your company succeed. 
    	This site will provide in-depth information about our background and describe 
    	the different services we offer. We will also include information about our 
    	top consultants.</p>
      <a class="topOfPage" href="#top" title="Top Of Page">&#94; top</a> 
      <h2 id="designing">Designing with accessibility and usability in mind</h2>
      <p>We can help you or your company to reach the widest possible audience. We 
    	achieve this by designing your Web site from the ground up to be both accessible 
    	and usable. We will create a design for your Web site that will meet several 
    	accessibility standards.</p>
      <dl>
    	<dt>Section 508</dt>
    	<dd>The United States government has created its Federal Accessibility Standards 
    	  for Web-based Intranet and Internet Information and Applications. These 
    	  standards are commonly referred to as Section 508, as they are derived from 
    	  Section 508 of the Rehabilitation Act. Section 508 requires that Federal 
    	  agencies' electronic and information technology is accessible to people 
    	  with disabilities.</dd>
    	<dt>W3C's Web Accessibility Initiative (W3C WAI)</dt>
    	<dd>The World Wide Web Consortium (<acronym title="World Wide Web Consortium" xml:lang="en"><span title="World Wide Web Consortium" xml:lang="en">W3C</span></acronym>) 
    	  produces specifications (called &quot;Recommendations&quot;) that describe 
    	  the building blocks of the Web. Their Web Accessibility Initiative proposes 
    	  standards that promote a high degree of usability for people with disabilities. 
    	  These standards are more comprehensive than those described by Section 508.</dd>
      </dl>
      <p>Usability is another of our primary concerns. If a visitor to your Web site 
    	finds it difficult to use, they may decide to leave. We draw on our expertise 
    	to provide you with accessible and usable alternatives. Our goal is for your 
    	web site to provide a rich and rewarding experience for all of your potential 
    	customers.</p>
      <p>Do you already have a site on the World Wide Web? We will work with you to 
    	increase its accessibility and usability. This can be done without sacrificing 
    	your existing layout and the <em>look</em> of your site. We can perform a 
    	detailed analysis of your site and consult with you to reach the widest possible 
    	audience. <a href="what_else.html" title="What else? (Further reading)"><strong>What 
    	else?</strong></a></p>
      <br />
      <script type="text/javascript" src="http://www.webnauts.net/scripts/turn.js"></script>
      <noscript>
      <p class="fehler">Attention: Your browser does not support our "back link" function. 
    	Please use the back button of your browser!</p>
      </noscript>
      <a class="topOfPage" href="#top" title="Top Of Page">&#94; top</a> <br />
    </div>
    <div id="footerlow">&nbsp;</div>
    <div id="footer"> 
      <div> <div class="footerLHS"> 
    	<map id="links" title="Footer tags"><div>
    [ <a href="access.html" title="Our website accessibility statement">Accessibility Statement</a> ]
    &nbsp;-&nbsp; [ <a href="technical.html" title="Our website technical statement">Technical Statement</a> ]
    &nbsp;-&nbsp; [ <a href="disclaimer.html#privacy" title="Our privacy policy">Privacy Policy</a> ]
    &nbsp;-&nbsp; [ <a href="disclaimer.html#terms" title="Our terms and conditions">Terms &amp; Conditions</a> ]
    &nbsp;-&nbsp; [ <a href="disclaimer.html#about" title="Information about our company">About Us</a> ]
    <br />
    	  <span class="footerLHS"> Copyright 2004, Webnauts Net Accessibility and Usability Consulting. - All rights reserved.</span> <br /> <span class="footerLHS">- Designing with Accessibility and Usability in Mind. -</span> <br /> <span class="footerLHS">Last updated: Aug 10, 2004.</span> </div> 
    	</map>
      </div>
    </div><div class="footerLHS">
    <map id="logos" title="Footer logos"><div>
      <a href="http://validator.w3.org/check?uri=ht....webnauts.net/" title="Valid XHTML 1.1! Requirement for web accessibility and usability"><img src="http://www.webnauts.net/images/valid-xhtml11.gif" alt="Valid XHTML 1.1! Requirement for web accessibility and usability" height="31" width="88" /></a>&nbsp;&#108;&nbsp; <a href="http://jigsaw.w3.org/css-validator/v....webnauts.net/" title="Valid CSS! Requirement for web accessibility and usability"><img src="http://www.webnauts.net/images/css.gif" alt="Valid CSS! Requirement for web accessibility and usability" height="31" width="88" /></a>&nbsp;&#108;&nbsp; <a href="http://www.w3.org/WAI/WCAG1AAA-Conformance" title="Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0"><img src="http://www.webnauts.net/images/WAI-AAA.gif" alt="Level Triple-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" width="88" height="32" /></a>&nbsp;&#108;&nbsp; <a href="http://www.CynthiaSays.com/org/cynthiatested.htm" title="Cynthia Tested"><img src="http://www.webnauts.net/images/Ctested.gif" alt="Cynthia Tested!" height="31" width="88" /></a>&nbsp;&#108;&nbsp; <a href="http://bobby.watchfire.com/" title="Bobby WorldWide Approved"><img src="http://www.webnauts.net/images/bobby.gif" alt="Bobby WorldWide Approved" width="88" height="31" /></a>&nbsp;&#108;&nbsp; <a href="http://www.icra.org" title="Internet Content Rating Association"><img src="http://www.webnauts.net/images/icrasw.gif" alt="Internet Content Rating Association" height="31" width="88" /></a> </div> 
    </map></div>
    <br /></div>
    </body>
    </html>
    This is more of an idea for you to work with so check it out first before replacing your other one

    Paul

  6. #6
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Paul! You were, are and will be the best!

  7. #7
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul I followed your advice, but the problem now is that the graphic is not centered. Could you have another look please? http://www.webnauts.net/test/index.html

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Just off to sleep now I'll have another look tomorrow

  9. #9
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    OK Paul. Thanks a lot in advance.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You just need to add text-align:center to your header which will center the disabillity image.

    Copy all my previous post and then add these minor tweaks.
    Code:
    #header {text-align:center}
    .RHS {float:right;margin-right: .5em; width: 12.5em; margin-top: 1.0em; font-weight: bold; text-align: left;display:inline;}
    img.left{float: left; margin-top: 0em; margin-left: 0.7em; padding-right: .2em; padding-bottom: 0.45em}
    You will still need to shrink your disability symbols if you want then to fit on one line in 800x600 because all three items are just too big to fit on one line.

    Otherwise the code I posted should do what you want.

    Paul

  11. #11
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Everything works great!
    Though I have a little problem again.

    I wanted to add in the background of my content area a watermark graphic, but I can't get it work.

    I did this:

    bodyText {background: url (shadow2.gif) fixed no-repeat}

    Can you have a look please?

    Thanks again in advance.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Don't use fixed as that has a different meaning and in good browsers the image is fixed in respect of the viewport and not the container its in.

    That means the image will only show if the container is in the same place that the image has been placed. (Ie does this differently anyway so is best avoided unless you know what you are doing )

    Your code should be:
    Code:
    #bodyText {background: url(http://www.webnauts.net/images/shadow1.gif) no-repeat center center}
    Paul

  13. #13
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul!

  14. #14
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul I hope the last issue. I did some changes in the CSS code. When I resize the fonts in Mozilla to 150% I have the same problem again. Did I do something wrong? Can you please have a nother look?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    You've left the clear:both out which is why the skip nav links are moving over the menu.

    Code:
    #lowerMenuBar {clear:both;background-image:url("http://www.webnauts.net/images/nav_gradient.jpg"); background-repeat: repeat-x; color: #000000; font-weight: bold; min-height: 2.9em;line-height:2.9em; padding-left: 0em; padding-right: 1.8em; border-bottom: 1px solid #000; text-align: right}
    Paul

  16. #16
    Forensic SEO Consultant Webnauts's Avatar
    Join Date
    Jun 2003
    Location
    European Union
    Posts
    1,488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You solved my problem again Paul! Endless of thanks man! I am just wondering, what would we all do if you were not here...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •