The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Can't get this sidebar to line up
Zulaika
post Jul 4 2012, 02:35 PM
Post #1


Novice
**

Group: Members
Posts: 22
Joined: 8-June 11
Member No.: 14,725
Why doesn't the sidebar line up to the post title?

CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="container">    
    
    <div id="header">
        <p><span id="header-title">Header</span></p>
        <p><span id="header-description">Description</span></p>
    </div>
    
    <div id="navigation">
        <div class="menu">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </div>

    <div id="content">

        <div id="post">
            <span id="post-title">Post Title 1</span>
            <p>This is a sample <a href="#">link</a>.</p>
        </div>

        <div id="sidebar">
            <div id="secondary" class="widget-area" role="complementary">
                <h3>Search</h3>
                <form method="get" action="http://www.google.com/search">
            <div>
            <table border="0" cellpadding="0">
                <tr>
                <td>
                    <input type="text" name="q" size="25" maxlength="255" value="" />
                    <input type="submit" value="Search" />
                </td>
                </tr>
                <tr>
                <td style="font-size:75%">
                    <input type="checkbox"  name="sitesearch" value="prosalamander.com" checked /> only search PRO SALAMANDERRR!
                </td>
                </tr>
            </table>
            </div>
            </form>
            </div>
        </div>
    
        <div id="footer">
            <p>All right reserved.</p>
        </div>
    </div>

</div>

</body>
</html>


CODE
a:link {
    color:#ff0000;
}
a:visited {
    color:#ff0000;
}
a:hover {
    color:#dd0000;
}
a:active {
    color:#dd0000;
}

body {
    font-family:arial,sans-serif;
    background-image:url('bg.png');
}

#container {
    background: #fff;
    border: solid #000 1px;
    margin-left: 25%;
    margin-right: 25%;
}

#header {
    text-align: center;
}
    
#header-title {
    font-size: 26px;
    font-weight: bold;
}

#header-description {
}

#navigation {
    background: #ff0000;
    display: block;
    float: left;
    margin: 0 auto 1em;
    width: 100%;
    border-top: solid #000 1px;
        border-bottom: solid #000 1px;
}
#navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
#navigation li {
    float: left;
    position: relative;
}
#navigation a {
    display: block;
    line-height: 2em;
    padding: 0 1em;
    text-decoration: none;
    color:#fff;
    border-right: solid #000 1px;
}
#navigation li:hover > a {
    background: #dd0000;
}
#navigation ul ul a:hover {
    background: #dd0000;
}
#navigation ul li:hover > ul {
    display: block;
}
#navigation li:active > a {
    background: #dd0000;
}

#content {
    padding-left: 5px;
    padding-right: 5px;
}

#post {
    float: left;
    width: 75%;
    overflow: hidden;
}

#post-title {
    font-weight: bold;
    font-size: 20;
}

#sidebar {
    float: right;
    width: 25%;
}

#footer {
    clear:both;
    text-align: center;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 4 2012, 04:09 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,726
Joined: 9-August 06
Member No.: 6
Looks fine to me. How do you want it to be that it isn't?


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zulaika
post Jul 4 2012, 04:43 PM
Post #3


Novice
**

Group: Members
Posts: 22
Joined: 8-June 11
Member No.: 14,725
QUOTE(pandy @ Jul 4 2012, 05:09 PM) *

Looks fine to me. How do you want it to be that it isn't?


I want it to be where the green line is, not the black.


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 4 2012, 06:47 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 13,726
Joined: 9-August 06
Member No.: 6
Ah, now I get it! I misunderstood what the sidebar was. It's lower because of the top margin some browsers add to headings. Control the margins of that H3.


--------------------
“Never go to excess, but let moderation be your guide.”
– Cicero
IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Zulaika
post Jul 4 2012, 09:38 PM
Post #5


Novice
**

Group: Members
Posts: 22
Joined: 8-June 11
Member No.: 14,725
Sorry, how do I do that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 5 2012, 01:37 AM
Post #6


WDG Member
********

Group: Root Admin
Posts: 7,852
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
See our CSS Reference (links at top and bottom of page), especially the CSS Structure and Rules page:
http://htmlhelp.com/reference/css/structure.html


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 22nd May 2013 - 07:06 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC