zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden HTML/CSS - 2 Kästen als Content

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2013, 18:18
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.03.2013
Beiträge: 30
nitram0598 befindet sich auf einem aufstrebenden Ast
Ausrufezeichen HTML/CSS - 2 Kästen als Content

Hallo!
ich möchte zwei kästen (div id="right und div id="left") nebeneinander, wie der name es sagt, ahben

bei mir funktioneirt das baer net, was habe ich falsch gemacht?

hier die dateien:
html: [HTML] index.html - Pastebin.com
css: [CSS] style.css - Pastebin.com

danke für eure hilfe
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2013, 19:35
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Fehler: viele position, Boxmodell nicht beachtet und noch ein paar Dinge..
Demo:
HTML-Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>nitware</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        color: #333;
        font: 100%/1.5 Arial, sans-serif;
    }
    #container {    
        width: 1200px;
        margin: 0 auto;
    }
    #nav {
        float: left;
        width: 100%;
    }
    #nav ul {

    }
    #nav li {
        width: 100px;
        text-align: center;
        list-style-type: none;
        float: left;                
        border-left: solid 1px #777;
    }
    #nav a {
        display: block;
        text-decoration: none;
        color: #333;
        font-weight: bold;
        text-transform: uppercase;
        padding: 10px;                
    }
    #nav a:hover {
        color: #fff;
        background: #f00;
    }
    #left, #right {
        border: 5px solid #333;
        padding: 5px;
        float: left;
    }
    #left {
        width: 980px;
        background: #eee;
    }
    #right {
        border-left: 0;
        width: 185px;
        background: #ddd;
    }
    /* clearfix */
    .cf:before, .cf:after {
        content:" ";
        display:table;
    }
    .cf:after {
        clear:both;
    }
    .cf {
        *zoom:1;
    }
    </style>
</head>

<body>
    <div id="container" class="cf">
        <div id="nav">
            <ul>
                <li><a href="#home">home</a></li>
                <li><a href="#news">news</a></li>
                <li><a href="#kontakt">kontakt</a></li>
            </ul>
        </div>
        <div id="left">
            left
        </div>    
        <div id="right">
            right
        </div>
    </div>
</body>
</html>
gute Basislektüre zum lernen: Little Boxes
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2013, 19:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.03.2013
Beiträge: 30
nitram0598 befindet sich auf einem aufstrebenden Ast
Standard

danke, aber wie bekomme ich jetzt bei left udn right noch

height: auto;
top: 50px;
bottom: 200px;

dazu, wenn ich es hinzufüge passiert nix?
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2013, 20:20
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Die Eigenschaften bottom und top (ebenso auch left und right) wirken nur auf nicht-static positionierte Elemente. Durch die Überarbeitung von Manfred62 ist der Quellcode jetzt frei von solchen Elementen, weshalb diese Eigenschaften nun auch nicht mehr wirken. Wenn Du Abstände ergänzen willst, verwende margin oder padding.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2013, 20:23
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.03.2013
Beiträge: 30
nitram0598 befindet sich auf einem aufstrebenden Ast
Standard

ich verstehe nicht wie du das meinst
Mit Zitat antworten
  #6 (permalink)  
Alt 17.06.2013, 20:28
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.12.2006
Beiträge: 887
threadi sorgt für eine eindrucksvolle Atmosphärethreadi sorgt für eine eindrucksvolle Atmosphäre
Standard

Was margin und padding sind?
SELFHTML: Stylesheets / CSS-Eigenschaften / Auenrand und Abstand
SELFHTML: Stylesheets / CSS-Eigenschaften / Innenabstand

Beispiele findest Du unter den Links.

Beispiel bezogen auf deinen Code:
Code:
#left {
        margin-right: 20px;
        width: 980px;
        background: #eee;
    }
Mit Zitat antworten
  #7 (permalink)  
Alt 17.06.2013, 20:43
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

ich vermute mal, es geht um einen Abstand nach oben..?
Code:
#left, #right {
   ...
   ...
    margin-top: 50px;
}
Little Boxes solltest du unbedingt durcharbeiten.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.06.2013, 21:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.03.2013
Beiträge: 30
nitram0598 befindet sich auf einem aufstrebenden Ast
Standard

und die höhe bis 5px von unterem rand?

Geändert von nitram0598 (17.06.2013 um 21:44 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 17.06.2013, 22:02
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

google --> 'sticky footer'
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.06.2013, 22:31
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.03.2013
Beiträge: 30
nitram0598 befindet sich auf einem aufstrebenden Ast
Standard

wie man so einen footer macht weiß ich, danke
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, html, layout, spalten

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 18:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 15:20
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 19:19
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 17:30
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 16:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:53 Uhr.