Wie positioniere ich Schaltflächen so, dass sie horizontal an einem anderen Element ausgerichtet sind?

Question

Apr 20, 2014, 07:10 AM

Wie positioniere ich Schaltflächen so, dass sie horizontal an einem anderen Element ausgerichtet sind?

Ich brauche etwas Hilfe bei meinem Styling. Ich versuche eine gut aussehende Website zu bekommen, aber ich kann es einfach nicht tun. Ich habe versucht, schwimmt, aber ohne Erfolg. Ich möchte das Erscheinungsbild von 'Aspen Development' als Markenname haben und dann meine Schaltflächen auf der rechten Seite des Div. Hier ist mein HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aspen Development | Home</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    </head>

    <body> 
    <div id="container">
      <div id="navMenu">
        <div id="header">
                <div id="brand"><a href="index.html">Aspen Development</a></div>
                <ul>
                  <li class="navButton">Home</li>
                  <li class="navButton">Pricing</li>
                  <li class="navButton">Contact Us</li>
                </ul>
        </div>
      </div>
      <div id="content">
        <div id="contentContainer">
        <p><b>4.21.14</b> Welcome to Aspen Development.</p>
        <p><b>4.19.14</b> The website has been created!</p>
        </div>
      </div>
      <div id="footer">
        <center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright &copy; 2014 Aspen Development | All Rights Reserved</p></center>
      </div>
    </div>
    </body>
</html>

Mein CSS:

@charset "utf-8";

body, h1, h2, h3, h4, h5, h6, p, div {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFF;
}

#navMenu, #footer {
    width: 100%;
    height: 50px;
    background-color: #F8F8F8;
    border: 2px solid #E6E6E6;
}

#header {
    width: 1140px;
    height: 50px;
    margin: 0 auto;
    text-align: right;
}

#brand a {
    display: block;
    width: 175px;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    color: black;
    font-size: 1.25em;
    text-align: justify;
    text-decoration: none;
}

.navButton {
    display: block;
    width: 175px;
    padding-top: 12px;
    padding-bottom: 16px;
    padding-left: 14px;
    padding-right: 14px;
    color: black;
    font-size: 0.75em;
    text-align: justify;
    list-style: none;
}

#content {
    width: 100%;
}

#contentContainer {
    width: 1140px;
    margin: 0 auto;
}

#contentContainer p {
    margin: 20px;
}

Danke im Voraus. :)