Can't skip a line

crmamx · April 14, 2011

I can't get a space before "Chapter 2: CSS basics in the Menu. Tried Firebug but just can't find the problem.

<!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" xml:lang="en" lang="en" >
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
        <title>CSS Tutorial 1</title>
<style type="text/css">

#container
{
    margin: 0 auto;
    width: 900px;
    background: #fff;
}
#header
{
    background: #ccc;
    padding: 20px;
}
#header h1 {
    margin: 0;
}
/* ======================== Navigation ================================= */

div#menu a {
    color: #000;                  /* #000 the look of the links */
    text-decoration: none;
    margin: 0px;
}
div#menu ul {
    list-style: none;             /* Remove the bullets */
    margin: 0;
    padding: 0;
    width:200px;                  /* Menu width */
}
div#menu ul li {
    display: block;               /* Make a menu item a block (height 100%, width 100%) */
    font: bold 11px/16px arial, helvetica, sans-serif;
    height:100%;
    width:100%;
    background:#81A9FE;           /* medium blue - first column*/
    border-bottom:1px solid #fff; /* white */
    position: relative;
    float:left;                   /* Make sure (in IE) there is no margin between the menu items */
}
div#menu ul li a{
    display:block;
    padding: 5px 8px;
}
div#menu ul li a:hover {
    color: #a00;
    background: #81A9FE; 
    border-right:1px solid #fff;  /* white */
    border-left:1px solid #fff;   /* white */
}
/* ======================== End Navigation ================================= */

#content-container{
    float: left;
    width: 900px;
    background: #fff url(/wp-content/uploads/layout-two-fixed-background.gif) repeat-y 100% 0;
}

#content{
    clear: left;
    float: left;
    width: 560px;
    padding: 20px 0;
    margin: 0 0 0 30px;
    display: inline;
}

#content h2{
    margin: 0;
}

#aside
{
    float: right;
    width: 240px;
    padding: 20px 0;
    margin: 0 20px 0 0;
    display: inline;
}

#aside h3 {
    margin: 0;
}

#footer{    
    clear: left;
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}
/* ================================ Next Lesson ======================== */

#box1 {                      
    background-color: #999999;
    width: 90px;
    height: 15px;
    border: 2px solid;
    padding: 5px;
    font-weight: bold;
    float: right;
}
#box2 {                      
    background-color: #999999;
    width: 110px;
    height: 15px;
    border: 2px solid;
    padding: 5px;
    font-weight: bold;
}
/* ================================ End Next Lesson ======================== */
</style>

</head>
    <body>
        <div id="container">
            <div id="header">
                <h1>CSS tutorial for beginners</h1>
            </div>

            <div id="content-container">
                <div id="content">
    
<!-- ========================= BEGIN NEW PAGE CONTENT ===================== -->
<h2>Lesson 1: Introduction to tutorial</h2>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<!-- ========================= END NEW PAGE CONTENT ===================== -->

<! -- =========================== Next/Previous Lessons===================== -->
                    <div id="box1">
                        <a href="css_tutorial2.html">Next Lesson</a>
                    </div>
                    <div id="box2">
                    </div>
                </div>
<! -- =========================== Menu ==================================== -->
                <div id="aside">
                    <div id="menu">
                        <h3>Chapter 1: Overview</h3>
<br />

                            <ul>
                                <li><a href="css_tutorial1.html">Lesson 1: Introduction to tutorial</a></li>
                                <li><a href="css_tutorial2.html">Lesson 2: What is CSS?</a></li>
                                <li><a href="css_tutorial3.html">Lesson 3: Basic requirements</a></li>
                                <li><a href="css_tutorial4.html">Lesson 4: Benefits of CSS</a></li>
                                <li><a href="css_tutorial5.html">Lesson 5: How CSS works</a></li>
                                <li><a href="css_tutorial6.html">Lesson 6: Using a DOCTYPE</a></li>
                            </ul>                            
<br />
                        <h3>Chapter 2: CSS basics</h3>
<br />

                            <ul>
                                <li><a href="css_tutorial7.html">Lesson 7: Applying CSS to Html</a></li>
                                <li><a href="css_tutorial8.html">Lesson 8: External CSS file</a></li> 
                                <li><a href="css_tutorial9.html">Lesson 9: Basic CSS syntax</a></li> 
                                <li><a href="css_tutorial10.html">Lesson 10: CSS rules</a></li> 
                                <li><a href="css_tutorial11.html">Lesson 11: CSS properties</a></li> 
                            </ul>
                    </div>
                </div>
                <div id="footer">
                                <p>Copyright</p> 
                </div>
            </div>
        </div>
    </body>
</html>

sunfighter · April 14, 2011

You can add spaces to the line by adding non breakable spaces:

<h3> Chapter 2: CSS basics</h3>

But a better css solution is this:

#aside h3.second{
text-indent: 20px;
}

and then add the class="second" to Chapter 2: CSS basics

-----------------------------------------

If you want to add white space above the line to seperate it from the above lessons add this : margin-bottom: 200px; (you make up the amount) to the div#menu ul Selector.

sunfighter · April 14, 2011

You can alternately do

div#menu ul.second{
margin-bottom: 150px;
}

But all breaks you layout.

cssfreakie · April 14, 2011

don't use so many breaks, nor use no breaking spaces, it's extremely redundant. Us margin or padding depending on your needs.

Keep in mind the css boxmodel

crmamx · April 14, 2011

I just thought of something funny...

I am trying to write a CSS tutorial and can't even get the damn thing to skip a line.

don't use so many breaks, nor use no breaking spaces, it's extremely redundant. Us margin or padding depending on your needs.

Keep in mind the css boxmodel

This is just sort of a test page and the long line of breaks is to push the content pane down being I don't have any data on the page.

I know! I know! the box model. I tried to see with Firebug why I could not get a space or get "br" to work there but with no luck.

As you know, I will get it eventually.

cssfreakie · April 14, 2011

if i may advice, first make a nice framework, with no content at all. so just some divs.

After that make a general layout for the content. probably also just a div, with a h2 and a paragraph in it.

As soon as you are doing thing twice, you can do it better and faster.

Do you have it hosted somewhere so i can take a look?

crmamx · April 14, 2011

Do you have it hosted somewhere so i can take a look?

No I don't, but the 2 files involved are pretty small...only 3 kb each.

Email?....

I had the same problem with spacing when I was doing the ? mark but I was able to use Firebug and figure it out. This one I just can't find.

cssfreakie · April 14, 2011

yeah you can send it through. no problem

cssfreakie · April 15, 2011

put

overflow:hidden

on the Ul of the menu

Since you didn't gave it a height.

It should look nice afterwards

crmamx · April 15, 2011

put
overflow:hidden
on the Ul of the menu

Since you didn't gave it a height.

It should look nice afterwards

I will try that although I used a clear:both and that seemed to fix it.

cssfreakie · April 15, 2011

they ul's don't have a height. IF you give them a background color you will see it.

this is the same for any blockelement you set a width to but not a height

Sign In

Can't skip a line

Recommended Posts

crmamx

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

sunfighter

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

crmamx

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

crmamx

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

crmamx

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information