site map construction problems

Discussion in 'other software & services' started by Bethrezen, Mar 2, 2007.

Thread Status:
Not open for further replies.
  1. Bethrezen

    Bethrezen Registered Member

    Joined:
    Apr 16, 2002
    Posts:
    546
    hi all

    i was wondering is anyone here any good with html and css coz i'm having some problems i'm trying to create a site map but i'm stuck

    here is what i have so far

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
   
<head>
     
<title>Trouble With Un-Welcome Malware: Site Map</title>

<style stype="text/css">

/* Layout Code */

html, body {padding:0; margin:0;}

body {padding: 5% 0; width:100%; height: auto}

#content {padding: 24px; width:80%; margin: 0 auto;}

h3 {padding:6px;}

ul {padding-left: 0px; margin-left: 0px; width: 48%;}
ul li {margin-left:22px;}
ul li ul {width: 100%;}
ul li ul li {margin-left:24px;}


/* Styling Code */

html, body {background-color: #F8F8F8;}

div#content {background-color:#fff; border: 1px solid #736F6E}

h3 {background-color: #369; color: #fff;}

li {list-style: none;}
ul li {font-weight: bold;}
ul li ul li {font-weight: normal;}
ul li ul li a, li span {background-color: #fff; color: #369;}


/* Positioning Code */


/* Testing */

ul {background-color:green;}

</style>

<!--[if IE]>
<style stype="text/css">

div#content {padding-top: 42px; padding-bottom:21px}

</style>
<![endif]-->

</head> 

<body>

<div id="content">

<h3>Site Map</h3>

<ul>
<li>» <span>Section 1: Cleaning Your System</span>
<ul>
<li>» <a href="Section%201/Introduction.html">Introduction</a></li>
<li>» <a href="Section%201/Preparation.html">Preparation</a></li>
<li>» <a href="Section%201/BasicCleaning.html">BasicCleaning</a></li>
<li>» <a href="Section%201/AdvancedCleaning.html">AdvancedCleaning</a></li>
<li>» <a href="Section%201/LastResort.html">LastResort.html</a></li>
<li>» <a href="Section%201/Troubleshooting.html">Troubleshooting.</a></li>
<li>» <a href="Section%201/Support.html">Support</a></li>
<li>» <a href="Section%201/AdditionalReading.html">AdditionalReading</a></li>
</ul></li></ul>

<ul>
<li>» <span>Section 2: Securing Your System</span>
<ul>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Introduction</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Internet Explorer</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Outlook Express</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Windows Media Player</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Disable Unnecessary Processes</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">System Configuration Utilities</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Additional Layers of Protection</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Tweaking & Windows Customisation</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Fix Un-Patched Security Holes</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Testing & Validation Services</a></li>

</ul></li></ul>

<ul>
<li>» <span>Section 3: Surfing More Securely</span>
<ul>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Host File & Host File Management</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Pacfile & Pacfile Management</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Proxies & Web Filters</a></li>

</ul></li></ul>

<ul>
<li>» <span>Section 4: System Maintenance</span>
<ul>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">General Computer Maintenance</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">Registry Maintenance: Backup and Restoration</a></li>
<li>» <a href="/Bethrezen/Web%20Site/UnderConstruction.html">System Backup</a></li>
</ul></li></ul>

</div>

</body>

</html>
    now everything to this point works as intended regardless of browser, window size or screen resolution

    where i'm having problems is that using positioning or floats takes the targeted elements out of the regular flow of html and as a result lots of strange things happen and the whole dam thing breaks

    here is a slightly broken example of the effect i'm trying to achieve

    http://h1.ripway.com/Bethrezen/Web Site/index.html

    now for the most part that works ok but it has a few problems which i cant seem to fix

    1.) when the browser window is reduced in size the or the or the screen res is to reduce 800x600 or both the white space on the top right and bottom of the containing box disappears

    2.) IE seems to be having a problem with the spacing between sections for some reason its increasing the amount of space on page load but if i hit reload ie will decrease the space to the amount i specified not sure if this is a percentage rounding problem or the IE double float margin bug or something else

    try as i might i cant seem to sus out a way to fix this so i was wondering if any one here might be able to help
     
    Bethrezen, Mar 2, 2007
    #1
  2. Mrkvonic

    Mrkvonic Linux Systems Expert

    Joined:
    May 9, 2005
    Posts:
    10,224
    Hello,

    A few words of advice:

    Keep css in a separate file from html.

    Try to make the css as readable as possible, meaning each element in a separate line.

    You will have to rely on so-called IE hacks for css in IE, because IE has more than shitty css support. Of course, you do not need to do this. Myself, I refuse to use IE hacks, even though I know some of my pages render uglily in IE.

    Checking your code, I see you're already using them.

    Don't use spaces in file names as they show up as ugly %20 in uri line.

    You might wanna use meta tags, to help browsers / search engines categorize your page properly...

    Try to use as little px in definition of size, go with em and %.

    Your css validates, but your html does not.

    Your page renders fine in FF... However, in Opera, the page begins at support line... I think you should try again, from scratch, build the site map box, then start adding elements into it...

    If I get some time, I'll have a closer look at it, see what goes wrong...

    Mrk
     
    Mrkvonic, Mar 2, 2007
    #2
  3. Bethrezen

    Bethrezen Registered Member

    Joined:
    Apr 16, 2002
    Posts:
    546
    hi Mrkvonic

    thanks for your replay

    i do normally i only ever use it internally like that when i building just makes like a lil quicker and easer

    i can do that i always just found things easer to read when there left to right unless the lines get very long which is why i brake the code up in to individual sections

    you aren't the only one that dislikes coding for ie it give me no end of problems but unfortunately as ie is still the majority browser it would be unfair to people not to code for ie

    agreed that's easy to fixed though

    i'll sort that out when I'm finished building the site

    meta tags ?? what are these and what function do they serve some more info please

    agreed and in-fact i prefer using % sizes coz then my page will resize nicely depending on the size of the view port of the screen res or both but being new at this building a liquid design is no easy task hence why i'm here looking for help

    oh o_O that's news to me ill have to check that

    again that's news to me coz i have opera 9.10 here and everything seems to display ok what version are you using o_O

    thanks any help would be greatly appreciated
     
    Bethrezen, Mar 3, 2007
    #3
  4. Bethrezen

    Bethrezen Registered Member

    Joined:
    Apr 16, 2002
    Posts:
    546
    hi

    ok ran what i have through the validator and everything checks out ok I've tried this code in

    IE6 version 6.0.2900.2180.xpsp_sp2_gdr.050301-1519

    firefox 2.0 version Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

    opera Version 9.10 Build 8679

    and everything thus far seems to work as intended so now its a case of how do i transform this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
   
<head>

<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
     
<title>Trouble With Un-Welcome Malware: Site Map</title>

<style type="text/css">

/* Layout Code */

html, body 
{
padding:0; 
margin:0;
}

body 
{
padding: 5% 0; 
width:100%; 
height: auto
}

#content 
{
padding: 24px; 
width:80%; 
margin: 0 auto;
}

h3 
{
padding:6px; 
font-size: 19px;
}

ul 
{
padding-left: 0px; 
margin-left: 0px; 
width: 48%;
}

ul li 
{
margin-left:22px;
}

ul li ul 
{
width: 100%;
}

ul li ul li 
{
margin-left:24px;
}

/* Styling Code */

html, body 
{
background-color: #F8F8F8;
}

div#content 
{
background-color:#fff; 
border: 1px solid #736F6E
}

h3 
{
background-color: #369;
color: #fff;
}

li 
{
list-style: none;
}

ul li 
{
font-weight: bold;
}

ul li ul li 
{
font-weight: normal;
}

ul li ul li a, li span 
{
background-color: #fff;
color: #369;
}

/* Positioning Code */


</style>

<!--[if IE]>
<style type="text/css">

div#content 
{
padding-top: 42px;
padding-bottom:21px
}

h3 
{
padding-top: 7px
}

li 
{
margin-top:1px
}
</style>
<![endif]-->

</head> 

<body>

<div id="content">

<div id="content">

<h3>Site Map</h3>

<ul>
<li>» <span>Section 1: Cleaning Your System</span>
<ul>
<li>» <a href="Section-1/Introduction.html">Introduction</a></li>
<li>» <a href="Section-1/Preparation.html">Preparation</a></li>
<li>» <a href="Section-1/Basic-Cleaning.html">Basic Cleaning</a></li>
<li>» <a href="Section-1/Advanced-Cleaning.html">Advanced Cleaning</a></li>
<li>» <a href="Section-1/Last-Resort.html">Last Resort</a></li>
<li>» <a href="Section-1/Troubleshooting.html">Troubleshooting.</a></li>
<li>» <a href="Section-1/Support.html">Support</a></li>
<li>» <a href="Section-1/Additional-Reading.html">Additional Reading</a></li>
</ul></li></ul>

<ul>
<li>» <span>Section 2: Securing Your System</span>
<ul>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Introduction</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Internet Explorer</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Outlook Express</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Windows Media Player</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Disable Unnecessary Processes</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">System Configuration Utilities</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Additional Layers of Protection</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Tweaking & Windows Customisation</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Fix Un-Patched Security Holes</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Testing & Validation Services</a></li>
</ul></li></ul>

<ul>
<li>» <span>Section 3: Surfing More Securely</span>
<ul>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Host File & Host File Management</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Pacfile & Pacfile Management</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Proxies & Web Filters</a></li>
</ul></li></ul>

<ul>
<li>» <span>Section 4: System Maintenance</span>
<ul>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">General Computer Maintenance</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">Registry Maintenance: Backup and Restoration</a></li>
<li>» <a href="/Bethrezen/Web-Site/Under-Construction.html">System Backup</a></li>
</ul></li></ul>

</div>

</body>

</html>
    into this http://h1.ripway.com/Bethrezen/Web Site/index.html with out braking anything because as i stated before when using floats or positioning this removes the targeted elements from the regular flow of html and lots of strange things start to happen and i don't know how to deal with
     
    Last edited: Mar 3, 2007
    Bethrezen, Mar 3, 2007
    #4
Thread Status:
Not open for further replies.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...