Ergebnis 1 bis 4 von 4
  1. #1
    Danni ist offline Foren As
    registriert
    14-12-2006
    Beiträge
    78

    CSS Floated Layout

    Ich hab mich mal wieder an ein 3 spaltiges Laout begeben. Leider will es sich nicht so verhalten, wie geplant. Die Seitenspalten positionieren sich links und rechts unterhalb des Contentbereichs.

    HTML-Code:
    <body>
        <div id="wrapper">
        	<div id="header"><div id="header-bottom">
                ...
              </div> <!-- header-bottom -->
            </div> <!-- header -->
          <div id="main">        
            <div id="content">
              <div id="mainfeature">
            	...
              </div> <!-- mainfeature -->
              <div class="inner">
                ...
              </div>
            </div> <!-- content -->
            
            <div id="sidebar">
              <div class="inner">
                ...
               </div>
               <div class="inner">
                ...
               </div>
               <div class="inner">
                ...
               </div>
            </div> <!-- sidebar -->
            <div id="sidebar2">
            	<div class="inner">
                	...
               </div>
             </div> <!-- sidebar2 -->
           </div> <!-- main -->
           <div id="footer">
           		...
          </div> <!-- footer -->
        </div> 
        <!-- wrapper -->
        </body>
    HTML-Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body {
    	margin: 0;
    	padding: 0;
    	background-color: #050845;
    	color: white;
    	background-image: url(img/bg.jpg);
    	background-repeat: repeat-x;
    	font: small Arial, Helvetica, Verdana, sans-serif;
    }
    
    #wrapper {
    	background-color: #fdf8f2;
    	color: black;
    	margin: 30px 40px 30px 40px;
    	padding: 10px;
    }
    
    #header-bottom {
    	border-top: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    }
    
    #header-bottom ul {
    	margin: 0;
    	padding: 0 30px 0 0;
    	text-align: right;
    }
    #header-bottom li {
    	display: inline;
    	background-color: #fdf8f2;
    	color: #050845;
    }
    #header-bottom a, #header-bottom a:visited {
    	text-decoration: none;
    	background-color: #fdf8f2;
    	color: #050845;
    }
    #tagline {
    	font-weight: bold;
    	background-color: #fdf8f2;
    	color: #050845;
    	font-style: italic;
    	margin: 0;
    	padding: 0 0 0 20px;
    	width: 300px;
    	float: left;
    }
    
    #ball {
    	position: absolute;
    	top: 110px;
    	right: 55px;
    }
    
    #main {
    	width: 100%;
    	margin-top: 10px;
    }
    
    #content {
    	margin: 0 240px 0 160px;
    	border: 1px solid #b9d2e3;
    	background-color: white;
    	color: black;
    }
    
    #mainfeature {
    	background-image: url(img/mainimg.jpg);
    	background-repeat: no-repeat;
    	background-color: #112236;
    	color: white;
    	padding: 2em 2em 1em 200px;
    }
    #mainfeature h2 {
    	margin: 0;
    	font-weight: normal;
    	font-size: 140%;
    }
    #mainfeature p {
    	font-size: 110%;
    }
    #mainfeature p.more {
    	margin-top: 0;
    	text-align: right;
    }
    #mainfeature p.more a, #mainfeature p.more a:visited {
    	color: white;
    	background-image: url(img/more-bullet.gif);
    	background-repeat: no-repeat;
    	background-position: center left;
    	padding-left: 14px;
    }
    
    #content .inner {
    	margin: 10px 20px 10px 40px;
    }
    #content .inner h2 {
    	color: #245185;
    	padding-bottom: 0.2em;
    	border-bottom: 1px solid #b9d2e3;
    	font-size: 110%;
    }
    #content .inner ul.features {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #content .inner h3 {
    	font-size: 130%;
    }
    #content .inner h3 a, #content .inner h3 a:visited {
    	color: #245185;
    }
    #content .inner p {
    	color: #666;
    	font-size: 90%;
    }
    
    #content .inner .features li img {
    	float: left;
    	margin: 0 5px 5px 0;
    }
    
    #content .inner p.author {
    	font-weight: bold;
    }
    
    #content .inner p.more {
    	margin-top: 0;
    	text-align: right;
    }
    #content .inner p.more a, #content .inner p.more a:visited {
    	background-image: url(img/more-bullet.gif);
    	background-repeat: no-repeat;
    	background-position: center left;
    	padding-left: 14px;
    	font-size: 90%;
    	color: #1e4c82;
    }
    
    #sidebar {
    	float: right;
    	width: 220px;
    	background-color: #256290;
    	color: white;
    	margin: 0;
    	padding: 0;
    }
    #sidebar h3 {
    	font-size: 110%;
    	background-image: url(img/sidebar-header-bg.jpg);
    	background-repeat: no-repeat;
    	margin: 0;
    	padding: 0.2em 0 0.2em 10px;
    	font-weight: normal;
    }
    #sidebar .inner {
    	padding: 10px;
    }
    #sidebar ul {
    	list-style-image: url(img/more-bullet.gif);
    	margin-left: 0;
    	padding-left: 20px;
    }
    #sidebar p, #sidebar li {
    	font-size: 90%;
    	line-height: 1.4em;
    }
    #sidebar ul a, #sidebar ul a:visited {
    	color: white;
    }
    #sidebar .date {
    	font-weight: bold;
    }
    #searchform .text {
    	width: 196px;
    	border: 1px solid #45bac0;
    }
    #searchform .searchbutton {
    	text-align: right;
    	margin-top: 4px;
    }
    #searchform .btn {
    	border: 1px solid #45bac0;
    	background-color: #256290;
    	color: white;
    }
    #sidebar .motm-image {
    	float: right;
    	margin: 0 30px 0 20px;
    }
    #sidebar p.more {
    	clear: right;
    	margin: 0 30px 0 0;
    	text-align: right;
    }
    #sidebar p.more a, #sidebar p.more a:visited {
    	color: white;
    	background-image: url (img/more-bullet.gif);
    	background-repeat: no-repeat;
    	background-position: center left;
    	padding-left: 14px;
    }
    
    #sidebar2 {
    	float: left;
    	width: 159px;
    	border-top: 1px solid #b9d2e3;
    	border-left: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    	background-color: white;
    	color: black;
    	margin: 0;
    	padding: 0;
    }
    #sidebar2 .inner {
    	margin: 10px;
    }
    #sidebar2 p {
    	font-size: 90%;
    	color: #666;
    }
    #sidebar2 a, #sidebar2 a:visited {
    	color: #245185;
    	font-weight: bold;
    }
    #sidebar2 h3 {
    	color: #245185;
    	padding-bottom: .2em;
    	border-bottom: 1px solid #b9d2e3;
    	font-size: 110%;
    }
    #nav {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    #nav li {
    	border-bottom: 1px solid #b9d2e3;
    	padding: 0.4em 0 0.2em 0;
    	font-size: 90%;
    }
    #nav li a, #nav li a:visited {
    	text-decoration: none;
    	color: #245185;
    	font-weight: normal;
    }
    
    #bloglatest h4 {
    	color: #ff4e00;
    	font-size: 100%;
    	font-weight: bold;
    }
    #blog {
    	margin: 0;
    	padding: 0 0 0 20px;
    	list-style: url(img/more-bullet.gif);
    }
    #blog li {
    	font-size: 90%;
    	padding-bottom: .5em;
    	color: #ff4e00;
    	font-weight: bold;
    }
    
    #newsletterform .text {
    	width: 135px;
    	border: 1px solid #45bac0;
    }
    #newsletterform .searchbutton {
    	text-align: right;
    	margin-top: 4px;
    }
    #newsletterform .btn {
    	border: 1px solid #45bac0;
    	background-color: #256290;
    	color: white;
    	font-size: 80%;
    }
    
    #footer {
    	width: 100%;
    	border-top: 1px solid #b9d2e3;
    	border-bottom: 1px solid #b9d2e3;
    	margin-top: 10px;
    	clear: both;
    }
    #footer p {
    	font-size: 90%;
    	color: #256290;
    	margin: 0;
    	padding: .2em 0 0.2em 0;
    }
    Hab im Stylesheet mal alles drin gelassen und aus dem HTML-Teil den Inhalt geloescht (der Übersichtlichkeit halber). Hoffe ihr koennt damit etwas anfangen. Ich komm hier einfach nicht mehr weiter. Schon mal vielen Dank für Eure Hilfe.

    Gruesse
    Danni

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: CSS Floated Layout

    Der "content" muss im HTML hinter die "sidebars".

  3. #3
    Danni ist offline Foren As
    registriert
    14-12-2006
    Beiträge
    78

    AW: CSS Floated Layout

    Zitat Zitat von kkapsner Beitrag anzeigen
    Der "content" muss im HTML hinter die "sidebars".
    Danke. Jetz läuft alles

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: CSS Floated Layout

    Bitte.

Ähnliche Themen

  1. CSS Layout erstellen: Hilfe
    Von Jonas23 im Forum CSS und (X)HTML
    Antworten: 138
    Letzter Beitrag: 07-03-2009, 18:40
  2. reines CSS Layout wird im Mac nicht angezeigt
    Von thonsen im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 27-08-2006, 14:28
  3. Hilfe mit CSS Layout
    Von Red-Dragon im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 03-01-2006, 22:21
  4. [HELP] Layout Problem mit CSS :-/
    Von flashfreak im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 10-10-2005, 17:48
  5. Antworten: 3
    Letzter Beitrag: 13-06-2005, 00:02

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •