17 replies [Last post]
uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

Hi thepineapplehead once told I should post here in case I wanted help getting rid of the Divitis on my website I showed him some months ago.
Now I think I'm ready for this but there's so much info to juggle at the same time I'm not sure how to start.
If you point me at the problems then it will be easier for me to get into the "Zone" Smile
http://csscreator.com/divitis

HTML
http://virtualseafarer.com/renaissance/ndiswrapper/index.html
CSS
http://virtualseafarer.com/renaissance/ndiswrapper/css/ndiswrapper.css

I'm guessing there was some complaints about this code

But when I got rid of the <'span classes> and just used <'h1>Wireless<'/h1> and <'h2>NDISwrapper<'/h2> I could no longer get the same typography as I did with the <'span classes>. Help.

syrupcore
Offline
Enthusiast
Last seen: 12 years 33 weeks ago
Timezone: GMT-8
Joined: 2004-03-10
Posts: 108
Points: 0

that page seems pretty

that page seems pretty reasonable to me, div wise. you could get rid of all the clearfix containing divs. they're not doing anything at all for you.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 5 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Ahah, I remember this one

Ahah, I remember this one Wink

I think my original comment stemmed from the fact that you're overcomplicating the HTML, you could replicate your current design using much less, and more semantic, code.

You need to have a look at your page (ignore your current code for the time being) and actually "see" what each element is. Then mark them up using the bare minimum HTML, then add extra code if it's needed.

For example, your bits at the top. Do you know what I see? I see a title. It makes sense to use the H1 and H2 tags, which you are. However, you don't need all the code around them, you can simply apply the CSS directly to the elements and get exactly the same outcome.

Eg, this:

coudl be coded as this:

connect Wireless device

with NDISwrapper

Verschwindende wrote:
  • CSS doesn't make pies

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

The thing is the more I take

The thing is the more I take away stuff the more HTML VALIDATOR warnings do I get Sad
Like removing <'div class="clearfix"> will give me 1 more warning.
And the <'a name="contents"> gets errors when I put it before and after <'h1>

Changes
http://virtualseafarer.com/renaissance/ndiswrapper2/index.html
Original
http://virtualseafarer.com/renaissance/ndiswrapper/index.html

If I follow the HTML VALIDATOR cleanup recommendations then instead of me havin <'span class="ban1"> and <'span class="ban2" they want to clutter up everything with scattered <'a> <'/a> around which makes the code just as much as I began with when everything wasn't semantic. :?

Because not all my pages will have the purple text on top and the green text below. Like this example I want them to be on the same line. But by using <'h1> <'h2> creates an undesired line break for a page such as this.
http://virtualseafarer.com/renaissance/network_calculations/index.html

Do you see my dilemmas? The more I fix the more I break it seems Sad

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 5 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

uhuru wrote:Because not all

uhuru wrote:
Because not all my pages will have the purple text on top and the green text below. Like this example I want them to be on the same line. But by using <'h1> <'h2> creates an undesired line break for a page such as this.
http://virtualseafarer.com/renaissance/network_calculations/index.html

Do you see my dilemmas? The more I fix the more I break it seems Sad

that's what CSS is for. Simply set them to display: inline; or float them left Smile

Change this:

to this:

and see what the validator says about it Wink

Verschwindende wrote:
  • CSS doesn't make pies

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

Hey you're right all that

Hey you're right all that stuff really worked and pass through Validator. Next problem I'm reusing the same typography settings like I did with my spans but it becomes different how can I lessen the spacing between those 2?
New
http://virtualseafarer.com/renaissance/ndiswrapper2/index.html
Original
http://virtualseafarer.com/renaissance/ndiswrapper/index.html

/*------------------------------*/ /* BANNER */ /*------------------------------*/ #banner { margin-left: auto; margin-right: auto; width: 780px; background: black; color: olive; text-align: right; }

h1.join {
font-weight: normal;
font-style: normal;
font-size: 300%;
color: purple;
letter-spacing: .1em;
}

h2.me {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
font-size: 210%;
color: olive;
letter-spacing: .2em;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 5 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Noooooooooooooo, get rid of

Noooooooooooooo, get rid of those classes, stop adding things you don't need Laughing out loud Use this instead:

/*------------------------------*/ /* BANNER */ /*------------------------------*/

#banner {
margin: 0 auto;
width: 780px;
background: black;
color: olive;
text-align: right;
}

#banner h1 {
font-weight: normal;
font-style: normal;
font-size: 300%;
color: purple;
letter-spacing: .1em;
}

#banner h2 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
font-size: 210%;
color: olive;
letter-spacing: .2em;
}

The gaps between the text comes from the default top and bottom margins of the heading elements. Play around with the values until you get it the way you want.

Verschwindende wrote:
  • CSS doesn't make pies

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

Whoops :-)

Whoops :rolleyes: So now I seem to have fixed the #Banner# lego. Then I tried using my new skills in finding some similar Divitis. I couldn't, things seems to get more complicated with my multi color Navigation or the lego piece #row1col1#.
However I managed to make the CSS code more consistent than before and thus avoiding any future conflicts I hope.

1.)
Do you find any more semantic errors in my html?

2.)
How do I make my phone picture link open up in a new tab or new window?
http://virtualseafarer.com/renaissance/ndiswrapper2/index.html

3.)
I used this Doctype why does Html Validator keep recognizing it as Transitional? I want it to be STRICT :?

HTML VALIDATOR outputs:
Result: 0 errors / 0 warnings

Info: Doctype given is "-//W3C//DTD HTML 4.01//EN"
Info: Document content looks like HTML 4.01 Transitional

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 5 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

I'd work on your Contents

I'd work on your Contents box next, it's very messy Wink

 Contents 

  •  Introduction  
  1.  Investigate  
  2.  Search the databases  
  3.  Kernel headers  
  4.  Install NDISwrapper  
  5.  Device detection  
  6.  Install wireless Windows drivers  
  7.  Check if the NDISwrapper module is loaded  
  8.  Detect wireless Access Points (AP)  

would be better as:

Contents

  • Introduction
  1. Investigate
  2. Search the databases
  3. Kernel headers
  4. Install NDISwrapper
  5. Device detection
  6. Install wireless Windows drivers
  7. Check if the NDISwrapper module is loaded
  8. Detect wireless Access Points (AP)

Verschwindende wrote:
  • CSS doesn't make pies

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

You guys keep telling me to

You guys keep telling me to get rid of <'div class"clearfix"> which was an advice given to me in these forums some year ago. So I just wanted to explain why I use it and weather I should keep doing things like this or not in the future.

So my site is built from the "liquid insanity" model.
http://www.maxdesign.com.au/presentation/liquid/example13.htm
My customized model looks like this and much of my work comes from this. To do this I have to use clearfix after each row. Is this a bad model to follow?
http://virtualseafarer.com/tests/floats_11.html

Because removing the CLEARFIX class from my contents box like you guys suggest make things look like this.
Just wanted to clarify things before doing all the changes.
http://virtualseafarer.com/renaissance/ndiswrapper2/index.html

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 5 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

It's excessive, because you

It's excessive, because you can just clear the elements through CSS, eg on this page:

http://virtualseafarer.com/renaissance/ndiswrapper2/index.html

adding:

#row2 { clear: left; float: left; margin-left: 3%; margin-top: 54px; width: 30%; height: 200px; background-color: black; color: white; }

puts everything in the right place Wink

Verschwindende wrote:
  • CSS doesn't make pies

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

That worked but will that be

That worked but will that be able to replace the CLEARFIX class' in the "liquid insanity" customized example?

Anyhow I followed your advice with this code except for 2 things I kept the spaces &'n'bsp'; because of my red hover effects on links. And second I kept <'li class="even"> because I had trouble making the colors alternate with odd and even rows some months ago when I first played with it. If they are all <'li> I don't see how I can differentiate odd and even rows :?

Contents

  •  Introduction  
  1.  Investigate  
  2.  Search the databases  
  3.  Kernel headers  
  4.  Install NDISwrapper  
  5.  Device detection  
  6.  Install wireless Windows drivers  
  7.  Check if the NDISwrapper module is loaded  
  8.  Detect wireless Access Points (AP)  

Antique vintage phone.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

I think that there may be a

I think that there may be a little bit of a misunderstanding here regarding the 'clearfix' solution; you do not want to get rid of this class at all, clearing is a matter of understanding and employing one of three primary methods 'clearfix', the clear property, the overflow property, and triggering haslayout for IE you need a range of methods as it's not always possible to re-use the same one depending on the special circumstances of the particular elements in question.

What is likely to have been asked is that you loose the unnecessary div that you have been applying the class 'clearfix' to. The class can be directly applied to a parent element holding child floats and that needs to contain those floats. The principle of 'clearfix' is that it applies a pseudo element :after and which is set to display:block this gets set at the end of the parent element after all other nested elements, as it's display:block and 'cleared' it clears below any floats and forces the parent to stretch to contain it.

clearfix is a method that you will want available and should be retained at the bottom of your generic stylesheet that you use and re-use.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

Hmm that was a bit too

Hmm that was a bit too technical for me to grasp all that you said. It sounds important but I don't understand it when I read it over and over again. Can you make some sort of example perhaps?

Use this as an example and show me what is wrong and how it should be written in the codes:
CLEARFIX
http://virtualseafarer.com/tests/floats_11.html
No CLEARFIX
http://virtualseafarer.com/tests/floats_12.html

According to the method I just learned from pineapple I could remove the <'div class="clearfix"> before my #Banner# , #ROW1# and #ROW2# lego pieces and then in the CSS codes ..............

Row1 col1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.

< Back to article

Row1 col2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.

Row2 col2

.....in the CSS codes write this. But it messes things up in the "liquid insanity" model.

/*------------------------------*/
/* ROW 1 */
#row1col1{
clear: left;
...
...

/*------------------------------*/
/* ROW 2 */
#row2col1{
clear: left;
...
...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 5 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

get rid of the

get rid of the "class="even". That's why I put the span in. Use that to change toe colour of the text.

And get rid of the NBSPs, use margins instead.

Verschwindende wrote:
  • CSS doesn't make pies

uhuru
Offline
Enthusiast
Last seen: 10 years 6 weeks ago
Timezone: GMT+2
Joined: 2007-04-16
Posts: 59
Points: 35

OK I did like you said. Now

OK I did like you said. Now how do I apply these previous CSS codes to my new spans?

#row1col1 li.even { color: olive; }

#row1col1 .odd a:link { color: white; text-decoration: none; }
#row1col1 .odd a:visited { color: white; text-decoration: none; }
#row1col1 .odd a:hover { background: red; color: white; text-decoration: none; }
#row1col1 .odd a:active { color: white; text-decoration: none; }

#row1col1 .even a:link { color: olive; text-decoration: none; }
#row1col1 .even a:visited { color: olive; text-decoration: none; }
#row1col1 .even a:hover { background: red; color: white; text-decoration: none; }
#row1col1 .even a:active { color: olive; text-decoration: none; }

And without the table data that you had me remove how do I apply that to my new html code?

#row1col1 table {
border-style: solid;
border-width: 1px 2px 1px 24px;
}

Previous version 2.
http://virtualseafarer.com/renaissance/ndiswrapper2/index.html
Newest version 3.
http://virtualseafarer.com/renaissance/ndiswrapper3/index.html

Problems:

  • having list numbers problems.

  • don't have any table borders anymore since I was told to remove tables.

  • how do I apply the margins to my red hovers?
  • thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 5 days 5 hours ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9674
    Points: 810

    Use this in place of

    Use this in place of it:

    #contents_index {border: 1px solid pink; width: 400px;}

    #contents_index h3 {
    font-family: serif, 'Times New Roman', arial;
    color: white;
    font-size: 120%;
    text-align: left;
    margin: 0.2em;
    }

    #contents_index a { color: #fff; text-decoration: none; }
    #contents_index span { color: olive; }
    #contents_index a:hover { background: red; color: white; text-decoration: none; }

    #contents_index li {
    line-height: 180%;
    word-spacing: .15em;
    letter-spacing: .1em;
    font-size: 94%;
    font-family: Georgia, 'Times New Roman', arial;
    padding: .1cm;
    }

    Verschwindende wrote:
    • CSS doesn't make pies

    uhuru
    Offline
    Enthusiast
    Last seen: 10 years 6 weeks ago
    Timezone: GMT+2
    Joined: 2007-04-16
    Posts: 59
    Points: 35

    Sorry for the delay I had to

    Sorry for the delay I had to prep for a Triple-Boot-installation with Windows XP, Ubuntu and Debian Tongue it just took forever to get all the steps in proper order.

    Anyhoove back to business, I had to tweak the html by adding <'div "contents_box"'> since I didn't want the header CONTENTS to be inside the box.
    http://virtualseafarer.com/renaissance/ndiswrapper3/index.html
    http://virtualseafarer.com/renaissance/ndiswrapper3/css/ndiswrapper.css

    #contents_index h3 { font-family: serif, 'Times New Roman', arial; font-weight: bold; font-style: normal; letter-spacing: .1em; word-spacing: normal; color: white; font-size: 120%;

    text-align: left;
    text-decoration: none;
    line-height: normal;
    margin: 0.2em;
    margin-top: none;
    margin-left: 80px;
    }

    #contents_box {
    border: 1px solid white;
    width: 400px;
    border-width: 1px 2px 1px 24px;
    }

    #contents_index a { color: blue; text-decoration: none; }
    #contents_index span { color: green; }
    #contents_index a:hover { background: red; color: white; text-decoration: none; }

    #contents_index li {
    line-height: 180%;
    word-spacing: .15em;
    letter-spacing: .1em;
    font-size: 94%;
    font-family: Georgia, 'Times New Roman', arial;
    padding: .1cm;
    }

    Problems:

  • I can't get the secondary link color to apply in the <'spans'>.

  • How do I distinguish the primary and secondary hover code?
    #contents_index a:hover { background: red; color: white; text-decoration: none; }
  • Don't I need to use the LoVeHAte order for my links to get better control?