登录 | 注册 | FAQ
Anonymous

2 DIVS nebeneinander

+ 发表回复

2 篇帖子 分页: 1 / 1


2 DIVS nebeneinander

M4x » 周二 1月 25, 2011 8:42 pm

Hey Leute ich hoffe ihr könnt mir weiterhelfen ich bin noch recht neu hier habe aber gleich ein Problem undzwar habe ich hier eine ganz schöne beispielseite ich hoste glecih mal den HTML sowie CSS Code ;) Mein problem ist das ich einfach rechts von diesem Wrapper-Div-container einen euen Navi-Div-Cotainer einfügen möchte, dies habe ich einfach mal gemacht nur bekomme ich diese jetzt nciht nebeneinander ich kann zwar beide div container anzeigen lassen auch einen rechts ausrichten und einen links aber das problem ist dann das die untereinander sind also der eine ist oben link der andere unten rechts :S Wie bekomme ich die direkt nebeinanderne ?

Grüße Max

HTML:
代码: 全选
<!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="de" lang="de">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <title>★ Lorem ipsum dolor ★</title>
   
   <meta name="keywords" content="Stichworte" />
   <meta name="copyright" content="Urheberrecht" />
   <meta name="author" content="Autor" />
   <meta name="description" content="Beschreibung" />
   <meta name="language" content="de-de" />
   
   <link rel="stylesheet" type="text/css" media="screen,projection" href="./style/style.css" charset="utf-8" />
   <link rel="stylesheet" type="text/css" media="screen,projection" href="./style/jquery.fancybox.css" charset="utf-8" />
   <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" media="screen,projection" href="./style/ie-style.css" charset="utf-8" />
   <![endif]-->
   
   <script type="text/javascript" src="./script/jquery.js" charset="utf-8"></script>
   <script type="text/javascript" src="./script/script.js" charset="utf-8"></script>
</head>
<body>
   <div id="wrapper">
      <h1>★ Lorem ipsum dolor ★</h1>   
      <div id="content">
         <a href="./media/flutlicht.jpg" class="teaser"><img src="./media/flutlicht-klein.jpg" alt="Ähren vor untergehende Sonne" title="Flutlicht" /></a>
         <h2>Lorem ipsum dolor</h2>
         <p>
            Lorem ipsum dolor sit amet, <strong>consectetur adipisicing</strong> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <a href="#">reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <em>cupidatat</em> non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </p>
         <h2>Lorem ipsum dolor</h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
            Duis aute irure dolor in reprehenderit in <a href="#">voluptate</a> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
         <ul>
            <li>Listenpunkt 1: Lorem ipsum dolor sit amet</li>
            <li>Listenpunkt 2: Lorem ipsum dolor sit amet</li>
            <li>Listenpunkt 3: Lorem ipsum dolor sit amet</li>
            <li>Listenpunkt 4: Lorem ipsum dolor sit amet</li>
            <li>Listenpunkt 5: Lorem ipsum dolor sit amet</li>
         </ul>
         <div class="columns">
            <div class="left">
               <h3>Lorem ipsum dolor</h3>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
            </div>
            <div class="right">
               <h3>Lorem ipsum dolor</h3>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
            </div>
         </div>
      </div>
   </div>
</body>
</html>


CSS:
代码: 全选
/*-----------------------------------------------------*/
/*----------------------- Haupt -----------------------*/
/*-----------------------------------------------------*/


* {
   
   margin: 0;
   padding: 0;
   border: 0 none;
   
}

body {
   
   background: #909092 url('./../layout/background.png') repeat-x;
   
}

#wrapper {
   
   width: 600px;
   margin: 0 auto;
   padding: 30px 0 0 0;
   
}

#content {
   
   background: #E7E7E8;
   border: 1px solid #fff;
   border-radius: 25px;
   
   /* proprietär */
   -khtml-border-radius: 25px; /* ältere Safari-Versionen, Konqueror */
   -moz-border-radius: 25px; /* Firefox */
   -webkit-border-radius: 25px; /* Safari */
   /* proprietär */
   
   box-shadow: 100px 0 50px #ccc;
   
   /* proprietär */
   -moz-box-shadow: 0 0 50px #ccc; /* Firefox */
   -webkit-box-shadow: 0 0 50px #ccc; /* Safari */
   /* proprietär */
   
   margin: 30px 0 0 0;
   padding: 30px 30px 12px 30px;
   
}


/*-----------------------------------------------------*/
/*--------------------- Schrift -----------------------*/
/*-----------------------------------------------------*/


body {
   
   color: #909092;
   font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
   font-size: 100%;
   
}

a {
   
   color: #2a2a2a;
   text-decoration: none;
   
}

a:hover, a:focus {
   
   color: #d59935;
   
}

h1 {
   
   color: #fff;
   text-align: center;
   font-weight: normal;
   
}

h2 {
   
   font-size: 1.125em;
   font-weight: normal;
   line-height: 1.4em;
   
   margin-bottom: .3em;
   
}

h3 {
   
   font-size: .813em;
   font-weight: bold;
   line-height: 1.4em;
   
   margin-bottom: .2em;
   
}

#content p,
#content li {
   
   font-size: .813em;
   line-height: 1.5em;
   
   margin-bottom: 1.4em;
   
}

#content li {
   
   margin-bottom: .2em;
   
}


/*-----------------------------------------------------*/
/*----------------------- Teil ------------------------*/
/*-----------------------------------------------------*/


#content .teaser {
   
   border: 5px solid #fff;
   border-radius: 5px;
   
   /* proprietär */
   -khtml-border-radius: 5px; /* ältere Safari-Versionen, Konqueror */
   -moz-border-radius: 5px; /* Firefox */
   -webkit-border-radius: 5px; /* Safari */
   /* proprietär */
   
   margin: .3em 15px 5px 0;
   
   display: block;
   float: left;
   
}

#content .teaser img {
   
   display: block;
   
}

#content ul {
   
   margin: 0 0 1.4em .9em;
   
}

#content .left {
   
   width: 45%;
   float: left;
   
}

#content .right {
   
   width: 45%;
   float: right;
   
}


/*-----------------------------------------------------*/
/*---------------------- Detail -----------------------*/
/*-----------------------------------------------------*/


/*-----------------------------------------------------*/
/*--------------------- CSS-Hacks ---------------------*/
/*-----------------------------------------------------*/


.clearfix:after,
#content .columns:after {
   
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
   
}
头像

M4x

  • 帖子: 2
  • 注册: 周二 1月 25, 2011 8:30 pm

Re: 2 DIVS nebeneinander

HTML.net » 周三 1月 26, 2011 11:21 am

Ich bin mir nicht sicher, ob ich verstehen. Wollen Sie die beiden divs (<div class="left"> & <div class="right">) auf jeder Seite des Inhalts? Vielleicht können Sie eine Zeichnung?

- Andreas, HTML.net
头像

HTML.net
Site Admin

  • 帖子: 1194
  • 注册: 周六 9月 11, 2010 11:24 am
--
Show some love for HTML.net on Twitter, Facebook and Google: Use the buttons on top of all pages.


+ 发表回复

分页: 1 / 1