• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

News Box ausrichten

H

Hansii

Mitglied
Hallo.

Habe so ein Design : Unbenannt.jpg

Wie der Pfeil schon sagt, soll diese Box neben das Content...



HTML :

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Bundesliga Saison 2012/2013</title>
 <link rel="stylesheet" type="text/css" href="xxx.css" />
</head>
<body>
 <div id="wrapper">
  <header>
   <div id="header">
    <img style="float:left;" src="fussball.png"></img>
    <img style="float:right;" src="fussball.png"></img>
    <h1 style="font-weight: bold; font-size: 2.8em;">Bundesliga Saison 2012/2013</h1>
   </div>
  </header>
  <div id='navi'>
  <ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>1. Bundesliga</span></a>
    <ul>
     <li><a href='#'><span>Spieltage</span></a></li>
     <li><a href='#'><span>Tabelle</span></a></li>
     <li><a href='#'><span>Sieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>2. Bundesliga</span></a>
    <ul>
     <li><a href='#'><span>Spieltage</span></a></li>
     <li><a href='#'><span>Tabelle</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>DFB-Pokal</span></a>
    <ul>
     <li><a href='#'><span>1. Vorrunde</span></a></li>
     <li><a href='#'><span>2. Vorrunde</span></a></li>
     <li><a href='#'><span>Achtelfinale</span></a></li>
     <li><a href='#'><span>Viertelfinale</span></a></li>
     <li><a href='#'><span>Halbfinale</span></a></li>
     <li><a href='#'><span>Finale</span></a></li>
     <li><a href='#'><span>Pokalsieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Champions League</span></a>
    <ul>
     <li><a href='#'><span>Gruppenphase</span></a></li>
     <li><a href='#'><span>Achtelfinale</span></a></li>
     <li><a href='#'><span>Viertelfinale</span></a></li>
     <li><a href='#'><span>Halbfinale</span></a></li>
     <li><a href='#'><span>Finale</span></a></li>
     <li><a href='#'><span>Sieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Europa League</span></a>
    <ul>
     <li><a href='#'><span>Gruppenphase</span></a></li>
     <li><a href='#'><span>Sechzehntelfinale</span></a></li>
     <li><a href='#'><span>Achtelfinale</span></a></li>
     <li><a href='#'><span>Viertelfinale</span></a></li>
     <li><a href='#'><span>Halbfinale</span></a></li>
     <li><a href='#'><span>Finale</span></a></li>
     <li><a href='#'><span>Sieger</span></a></li>
    </ul>
   </li>
   <li class='has-sub '><a href='#'><span>Tippspiel</span></a>
    <ul>
     <li><a href='#'><span>Login</span></a></li>
     <li><a href='#'><span>Registrieren</span></a></li>
     <li><a href='#'><span>Rangliste</span></a></li>
     <li><a href='#'><span>Aktuelles</span></a></li>
    </ul>
   </li>
   <li><a href='#'><span>Gästebuch</span></a></li>
   <li><a href='#'><span>Forum</span></a></li>
  </ul>
  </div>
   <article>
    <div id="content">
     <h2>Startseite</h2>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
     <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p>
    </div>
   </article>
  <div id="main">
   <aside>
    <div id="aside">
     <h3 style="color: #ffffff; text-align: center;">News</h3>
     <ul id="box">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
     </ul>
    </div>
   </aside>
  </div>
  <footer>
   <p id="footer"><a href="#">AGB</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Datenschutz</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Nutzungsbedingungen</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Impressum</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Newsletter</a></p>
  </footer>
 </div>
</body>
</html>

CSS :

Code: 
html, body{
 width: 100%;
 height: 100%;
 font-family: Arial;
 font-size: 1em;
 font-weight: normal;
 background: #ffffff;
}

#wrapper{
 width: 1050px;
 margin: 0 auto;
}

/**********Hier beginnt der CSS-Code für den Header**********/
#header{
 height: 70px;
 background: #00CC00;
 padding: 10px 10px;
 text-align: center;
}

#header h1{
 font-weight: normal;
 font-size: 2.2em;
 color: #efefef;
 margin-top: 15px;
}

#header p{
 margin-left: 5px 0 0 30px;
 color: #dddddd;
}

/**********Hier beginnt der CSS-Code für die Navigation**********/
#navi{
 width:1050px;
 height:48px;
 display:block;
 padding:0;
 margin:20px auto;
 border:1px solid #279409;
 border-radius:5px;
}


#navi > ul {
 list-style:inside none;
 padding:0;
 margin:0;
}


#navi > ul > li {
 list-style:inside none;
 padding:0;
 margin:0;
 float:left;
 display:block;
 position:relative;
}


#navi > ul > li > a{
 outline:none;
 display:block;
 position:relative;
 padding:12px 20px;
 font:bold 13px/100% Arial, Helvetica, sans-serif;
 text-align:center;
 text-decoration:none;
 text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}


#navi > ul > li:first-child > a{
 border-radius:5px 0 0 5px;
}


#navi > ul > li > a:after{
 content:'';
 position:absolute;
 border-right:1px solid;
 top:-1px;
 bottom:-1px;
 right:-2px;
 z-index:99;
}


#navi ul li.has-sub:hover > a:after{
 top:0;
 bottom:0;
}


#navi > ul > li.has-sub > a:before{
 content:'';
 position:absolute;
 top:18px;
 right:6px;
 border:5px solid transparent;
 border-top:5px solid #ffffff;
}


#navi > ul > li.has-sub:hover > a:before{
 top:19px;
}


#navi ul li.has-sub:hover > a{
 background:#3f3f3f;
 border-color:#3f3f3f;
 padding-bottom:13px;
 padding-top:13px;
 top:-1px;
 z-index:999;
}


#navi ul li.has-sub:hover > ul, #navi ul li.has-sub:hover > div{
 display:block;
}


#navi ul li.has-sub > a:hover{
 background:#3f3f3f;
 border-color:#3f3f3f;
}


#navi ul li > ul, #navi ul li > div{
 display:none;
 width:auto;
 position:absolute;
 top:38px;
 padding:10px 0;
 background:#3f3f3f;
 border-radius:0 0 5px 5px;
 z-index:999;
}


#navi ul li > ul{
 width:200px;
}


#navi ul li > ul li{
 display:block;
 list-style:inside none;
 padding:0;
 margin:0;
 position:relative;
}


#navi ul li > ul li a{
 outline:none;
 display:block;
 position:relative;
 margin:0;
 padding:8px 20px;
 font:10pt Arial, Helvetica, sans-serif;
 color:#fff;
 text-decoration:none;
 text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}




#navi, #navi > ul > li > ul > li a:hover{
 background:#279409;
 background:-moz-linear-gradient(top, #279409 0%, #279409 100%);
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#279409), color-stop(100%,#279409));
 background:-webkit-linear-gradient(top, #279409 0%,#279409 100%);
 background:-o-linear-gradient(top, #279409 0%,#279409 100%);
 background:-ms-linear-gradient(top, #279409 0%,#279409 100%);
 background:linear-gradient(top, #279409 0%,#279409 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#279409', endColorstr='#279409',GradientType=0);
}


#navi{
 border-color:#279409;
}


#navi > ul > li > a{
 border-right:1px solid #279409;
 color:#fff;
}


#navi > ul > li > a:after{
 border-color:#279409;
}


#navi > ul > li > a:hover{
 background:#3f3f3f;
}

/***SIDEBAR***/
#aside{
 width: 200px;
 padding: 15px 10px 15px 15px;
 margin: 50px 0 50px 20px;
 float: right;
 clear: left;
 border-left: 1px solid #FF4000;
 border-right: 1px solid #FF4000;
 border-top: 1px solid #FF4000;
 border-bottom:1px solid #FF4000;
}

#box{
 margin: 15px 0;
 padding-left: 25px #ffffff;
 list-style: square;
 background: #ffffff;
}

/***CONTENT***/
#content{
 margin: 40px 0 0px 0px;
 width: 800px;
 background: #ffffff;
 border-left: 1px solid #FF4000;
 border-right: 1px solid #FF4000;
 border-top: 1px solid #FF4000;
 border-bottom: 1px solid #FF4000;
}

/***FOOTER***/
#footer{
 font-size: 1em;
 color: #555555;
 text-align: center;
 background: #00FF00;
}

#footer a, #footer a:link{
 text-decoration: none;
 color: #555555;
 text-align: center;
}

#footer a:hover{
 color: #FF3456;
}


Habe schon einiges Probiert. Habe das DIV "Box" in das DIV "Content" gepackt, habe nach rechts gefloatet, aber es hat nichts funkz. Wisst ihr einen Weg?

MFG
 
Hallo,

wo soll ich da anfangen.....

html5 befehle aber sagst "HTML 4.01 Transitional" am anfang
das ist noch nicht mal im ansatz richtig. einmal hast article mit ein div content und dan aside mit div aside.

verschiebe mal das div aside in das article nach dem div content. dann div content float left und das div aside float right. wenn dann die breite passt, also das nicht zu breit ist steht das nebeneinander.

oh schwer zu verstehen aber einfach abarbeiten :O)

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben