Diagonse my CSS coding.

Factual Questions
1

So, I’m trying to teach myself ASP.NET, HTML and CSS sort of all at once (I’ve got a book). At the moment it just went through using a CSS sheet to set what the output should look like. From what I can tell I followed the example in the book exactly, but my output doesn’t look like it should.
Here’s the CSS code



#Header
{
    background-color: #C0C0C0;
    width: 844px;
    height: 83px;
}

*
{
    font-family: Arial;
}

#PageWrapper
{
    width: 844px;
}

#MenuWrapper
{
    width: 844px;
}

#MainContent
{
    width: 644px;
    float: left;
}

#Sidebar
{
    background-color: Grey;
    width: 200px;
    float: left;
}

#Footer
{
    background-color: #c0c0c0;
    width: 844px;
    clear: both;
}

#MainContent a:visited
{
    color: #FF0000;
    text-decoration: underline;
}

#MainContent a:hover
{
    color: #FFA500;
    text-decoration: underline;
}

The visited and hovered links are just the normal color that they would always be (a browser default I assume). In fact links don’t change color at all when hovered over.

Also, the sidebar doesn’t seem to go where it should. It ends up below the main content and left justified. According to the book since the main content is 644 pixels and the sidebar is 200 they should be next to each other, but their not.

Any ideas?
Oh, I should also mention that if I do something, like, say, change the word Gray in the sidebar color to say Orange that will be reflected when I run the main code so I know the CSS sheet is linked in correctly.

2

We’d have to see your HTML to make sure you’re calling things correctly.

3

CSS looks okay at a glance, so yeah… we’d have to see the HTML that’s calling it.

4

Use the Inspect mode of the Firebug plugin for Firefox.

5 


<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
        .style1 {
            color: #339933;
        }
    </style>
    
    <link href="Styles/Style.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <form id="form1" runat="server">
    
        <div id="pageWrapper">
        <div id="Header">Header Goes Here</div>
        <div id="Menuwrapper">Menu Goes Here</div>
        <div id="Main Content">
        <h1>
            Hi there vistor and welcome to Planet Wrox</h1>
        <p>
            We're glad you're <span class="style1">paying a visit</span> to
            <a href="http://www.planetwrox.com">www.planetwrox.com</a> blah 
            <a href="Default.aspx">blah lah</a></p></div>
        <div id="Sidebar">Sidebar Goes Here</div>
        <div id="Footer">Footer Goes Here</div>
    </div>
    
        
    
    
    </form>
</body>
</html>
6

You have a space in the div ID “Main Content”. It should be “MainContent”.

And if you want your sidebar to be on the left, just move it above the MainContent DIV (although I don’t think you were asking for this).

7

A few suggestions:
[ul]
[li]Use Firefox. The FF addons are worth their weight in gold, irrespective that IE sucks as a web development tool.[/li][li]Don’t use CSS shortcuts during development. Define everything explicitly. Otherwise, you run a great risk of being unable to locate problems.[/li][li]Follow the KISS Principle. You gotta learn to walk before you can run.[/li][li]Do your development and self-learning with simple HTML. Build a simple web page (text, links and images) and understand how it functions before you start things such as forms.[/li][/ul]

8

Just fixing the “main content” syntax fixed everything:smack:. That was probably the third time I screwed up a space of missed a semicolon or something and everything went to hell.

9

Once you get the basics down, switching to a WYSIWYG (what you see is what you get) editor like Microsoft Expression or Adobe Dreamweaver will solve some of those problems. You can lay everything out graphically and only code when you need to manually fix something… no more forgotten semicolons :slight_smile:

However, it’s definitely worth learning first how everything works behind the scenes – I hope the book teaches you that!

10

I’m using MS Visual Web Devolper, but the books teaches you how to enter content in several ways (right click menus, design view, actually typing). MainContent was one of the items that was typed in so that’s how I screwed that up.

Yea, hopefully this book helps. I’m not looking to design a whole webpage. We paid for our website to be designed. I just want to be able to tweak it here and there when I need to.
Besides it’s been about 12 years since I’ve done any programming, so it’s kinda fun.