Re: [css-d] 2 Problems; float and link placement

Rick Tue, 26 Jan 2010 21:41:27 -0800

David,

        I saw where you eliminated the negative margin, but what markup
errors?


        Tim Climis delivered the answer moments before you and now the
skeleton appears fine.  Like I mentioned, new to CSS and now I want to
eliminate that bulky HTML in my existing web-pages.  My goal is to validate
both the HTML and CSS after rewriting.  As it stands now, validation
generates more errors than source lines on the existing code.  And I picked
up the key advice of using the W3C Validation Service to check both the
HTML/CSS.  It has proven invaluable.

        Looking forward to reading your helpful advice on future topics.

        Rick
        

-----Original Message-----
From: David Laakso [mailto:da...@chelseacreekstudio.com] 
Sent: Tuesday, January 26, 2010 10:30 PM
To: Rick
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] 2 Problems; float and link placement

Rick wrote:
> New to CSS, but I've been reading this list for the past month.  Hopefully
> nothing complicated, just laid out the basic skeleton and have two
> questions.
>
>           Rick>   


Try this (markup errors corrected and negative (minus) margin eliminated:



<!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=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title> Humor </title>

<style type="text/css">

p {clear: both;}
#banner {
    width: 700px;
    margin: auto;
    border: 2px dotted #080080;
}
#banner h1 {
    font-size: 1.5em;
    font-family: "Arial Black", Arial, sans-serif;
    color: #000000;
    text-align: center;
    margin-top: 2px;
}
#banner a {  color : teal;
    margin-top: 200px;
    /*margin-left: -110px; delete */
    font-weight: bold;
}
#banner a:hover {
    color: lime;
}
#banner .left_image {
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
}
#banner .right_image {
    float: right;
    margin-right: 10px;
    margin-bottom: 10px;
}

#calendars {
    width: 680px;
    margin: 0 auto;
    border: 5px dashed #ff3333;
    color: #000000;
    overflow: hidden;
}
#calendars h2, h3 {
    font-size: 1.2em;
    text-align: center;
}

#current_month {
    float: left;
    width: 300px;
    margin: 10px;
    font-family: Verdana;
    border: 3px dashed #007385;
}
#previous_month {
    float: right;
    width: 300px;
    margin: 10px;
    font-family: Verdana;
    border: 2px solid #080080;
}
#footer img {
    display: block;
    margin: auto;
    padding-top: 25px;
}

</style>

</head>
<body>

<div id="banner">
<img src="http://www.gage-r.com/fresh/humor-left.jpg"; alt="">
<img src="http://www.gage-r.com/fresh/humor-right.gif"; alt="">
<h1>HUMOR</h1>
<a href="#">BACK TO HOME PAGE</a>
</div> <!-- end of banner division -->

<div id="calendars">
<h3>Click on the date to see the jokes/videos for that day</h3>
<div id="current_month">
<h2>January</h2>
</div> <!-- end of current_month division -->

<div id="previous_month">
<h2>December</h2>
</div> <!-- end of previous_month division -->
</div> <!-- end of calendars division -->

<div id="footer">
<img src="http://www.gage-r.com/fresh/humor-bottom.jpg"; alt="">
</div> <!--  end of footer division -->

</body>
</html>


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 2 Problems; float and link placement

Reply via email to