Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Zwei Objekte die immer die selbe höhe haben

  1. #1
    HTML Newbie
    Registriert seit
    12.08.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Zwei Objekte die immer die selbe höhe haben

    Guten Abend.

    Mein Problem ist das ich den Section und Aside Block nicht automatisch auf die exakt selbe höhe bekomme.
    Müsste der Section Bereich in seiner höhe nicht Variable sein wäre, das ja kein Problem aber naja so ist es halt leider nicht
    HTML-Code:
    <!DOCTYPE html>
    <html>
    <head>
    
        <title>Titel und so</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <dir id="site">
       <header>Titel und so</header>
       <div id="steuerung">Steuerung</div>
    
       <section>
            <article><h1>fdlfsjsfdjodfjjdfjdf</h1><br />dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"</article>
       </section>
    
        <aside>ASIDE</aside>
    
       <footer>FOOTER</footer>
    </dir>
    
    </body>
    </html>
    und hier die css:

    HTML-Code:
    header{
        width: 900px;
        height: 200px;
        background-color: orange;
        float: left;
    }
    
    
    
    section{
        width: 700px;
        background-color: blue;
        float: left;
        word-wrap:break-word;
    
    }
    
    aside{
        margin-bottom: 10px;
    
        width: 200px;
        background-color: red;
        float: right;
    
    }
    
    footer{
           height: 2em;
           width: 100%;
           background-color: pink;
           clear: both;
    }
    
    
    
    #site{
        width: 900px;
          background-color: black;
          margin: auto;
    
    }
    
    #steuerung{
        background-color: brown;
        width: 100%;
        float: left;
    }
    
    
    
    body{
        background-color: black;
    }
    
    
    *{
        padding: 0px;
        margin: 0px;
    }
    
    Bild: http://postimg.org/image/lwrgb6bi9/

    Das Blaue ist der Section und das Rote der Aside Bereich.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Thomas_Report (13.08.2013 um 00:49 Uhr)

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Warum setzt du den Code nicht hier hinein, Es gibt extra Schalter für die Code-Tags, zu finden im Editor in der zweiten Zeile rechts.
    Bitte hole das nach, wenn du eine Antwort haben möchtest.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    12.08.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Ist gemacht

    - - - Aktualisiert - - -

    Ok ich hab eine Lösung die über jQuery funktioniert gefunden. Falls jemand eine rein HTML/CSS Lösung noch kennt bitte posten
    Hier ist die Lösung.

    Code:
    <script>
       $(document).ready(function() {
      var article = $('article'),
          aside = $('aside'),
          articleHeight = article.css('height');
          aside.css({
            'height':articleHeight
          });
    });
     </script>
    Das wird einfach direkt vor </body> gepostet

    und in den <head> Bereich kommt noch.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Vergiss Javascript, das kommt ganz zum Schluss. Ausserdem solltest du immer auch an die Leute denken, die Javascript ausgeschaltet haben.

    Hier ist die Variante lediglich mit CSS. Der Wrapper wurde zusätzlich eingefügt, da er notwendig ist.
    Die Breite der Seite wurde auf das Body-Element angewendet, dadurch Ersparnis eines DIV.

    HTML-Code:
    /* CSS */
    
    *{
        margin: 0;
        padding:0;
    }
    html{
        background-color: black;
    }
    body{
        width: 900px;
        margin: 0 auto;
    }
    #steuerung{
        background-color: brown;
        width: 100%;
    }
    header{
        height: 200px;
        background-color: orange;
    }
    #wrapper {
        overflow:hidden;
    }  
    section{
        width: 700px;
        background-color: blue;
        float: left;
        word-wrap:break-word;
        padding-bottom: 32767px;
        margin-bottom: -32767px;
    }
    aside{
        width: 200px;
        background-color: red;
        float: left;
        padding-bottom: 32767px;
        margin-bottom: -32767px;
    }
    footer{
        height: 2em;
        background-color: pink;
        clear: both;
    }
    HTML-Code:
    <!DOCTYPE HTML>
    <html lang="de">       
        <head>           
            <meta charset="UTF-8">           
            <title>   
               Titel und so     
            </title>  
    
    </head>
    <body>
        <header>
            <h1>Titel und so</h1>
        </header>
    
        <div id="steuerung">
            <p>Steuerung</p>
        </div>
    
        <div id="wrapper">
            <section>
                <article>
                    <h1>fdlfsjsfdjodfjjdfjdf</h1>
                    <p>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd<p>
                </article>
            </section>
            <aside>
                <p>ASIDE</p>
            </aside>
        </div> 
    
        <footer>
            <p>FOOTER</p>
        </footer>
    </body>
    </html>

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    12.08.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Hat funktioniert vielen dank

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Explanator, es ist mir völlig unklar, warum du so eine Lösung anbietest(uralt). Der Nachteil der Variante ist der, dass Inhalte verloren gehen, wenn sich auf der Seite interne verweise befinden.

  7. #7
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    @djtheke
    Schön wäre es gewesen, wenn du gleich dazu noch die optimale Lösung dazu geschrieben hättest. Ist ja nicht so, dass ich nicht auch gerne dazulerne.

  8. #8
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Sorry war nicht so gemeint.
    Hier ein altbekanntes Beispiel (float/margin)
    Code:
    <!DOCTYPE>
    <html><head>
    <meta charset=UTF-8">
    <title>Fload/Margin-Layout </title>
    <style type="text/css">
    
    * {
     margin:0;
     padding:0;
    }
    
    #wrapper {
     width:900px;
     margin:10px auto;
     border:1px solid #000;
     background:#eee;
    }
    
    #header {
     border-bottom:1px solid #000;
     background:#aa9;
     color:#fff;
    }
    
    #left {
     width:700px;
     float:left;
    } 
    
    #right {
      margin-left:700px;
      background:#edd;
    } 
    
    #right:after {
     content:"";
     display:block;
     clear:both; 
    }
    
    #footer {
     clear:both;
     border-top:1px solid #000;
     background:#aa9;
     color:#fff;
    }
    
    h1 , p {
     padding:10px;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    <div id="header">
     <h1>Homepage</h1>
    </div>
    
    <div id="left">
     <p>Linke Spalte</p>
    </div>
    
    <div id="right">
     <p>Rechte Spalte</p> 
    </div>
    
    
    <div id="footer">
     <p>Footer</p>
    </div>
    </div>
    
    
    </body></html>


    Flexbox oder display:table wären villeicht noch zwei Alternativen.

  9. #9
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Ok, kenne ich. Das Problem hier besteht darin, dass die Linke Box nicht wirklich mitwächst, es wird nur durch den Hintergrund des Wrappers der Eindruck erweckt als wären es wirklich 2 Spalten. Dem ist ja nicht so.

    Wenn man es genau nimmt, gibt es hier nur eine Lösung ohne Nachteile und das wäre eine Tabelle mit 2 Zellen. Und genau das wird ja auch oft nachgebildet mit Div-Elternelement und display:table und den beiden innewohnenden Containern mit display:cell.

    Mir persönlich gefällt diese Pseudolösung irgendwie nicht, weil sie nicht ehrlich ist. Tabellenlayout ist out aber Tabellen nachbilden ist ok. Warum dann nicht gleich eine Tabelle verwenden, dann stimmt wenigstens auch das Markup dazu.

    Alle anderen Varianten haben alle irgendwie Nachteile.

    Das Optimale scheint hier wohl in Zukunft Flexbox zu sein, kommt nur ein wenig spät angesichts der seit Jahren bestehenden massiven Probleme beim Layout.

  10. #10
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Zwei Objekte die immer die selbe höhe haben

    Auch wenns schon geklärt ist: Das ist doch ein uraltes Problem, hier noch eine Lösung: Faux Columns

    Bzgl. dem JavaScript: Korrekt, was das Layout angeht sollte kein JavaScript zum einsatz kommen. Man weiss nie, ob sie laufen und wenn ja, ob fehlerfrei (IE, wir lieben dich).

    EDIT:
    Zitat Zitat von explanator Beitrag anzeigen
    Mir persönlich gefällt diese Pseudolösung irgendwie nicht, weil sie nicht ehrlich ist.
    Nicht im Ernst, oder? Du bewegst dich im Internet, wenn hier 10% der Angaben derart präzise ehrlich sind, ist es viel. Und einem User ist es wirklich völlig sch**ssegal, ob zwei Bereiche jetzt gleich hoch sind oder nur gleich hoch aussehen.
    Und Tabellen sollten nur dann zum Einsatz kommen, wenn der Inhalt wirklich aus Tabellen besteht, mit dem Layout haben sie nichts zu tun. Das ist nicht nur semantisch idealistisch, sondern auch SEO-Technisch ein wichtiger punkt.
    Geändert von Tobse (13.08.2013 um 13:04 Uhr)
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

Ähnliche Themen

  1. Zwei Javascript Codes haben Probleme?
    Von Shorty1968 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 17.02.2012, 05:07
  2. Objekte haben nicht den gleichen Anstand
    Von dieRaute im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.06.2009, 16:04
  3. JOIN auf selbe Tabelle
    Von Mir nicht im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 12.09.2008, 17:53
  4. Hat einer das selbe Problem?
    Von Gast im Forum Off Topic und Quasselbox
    Antworten: 33
    Letzter Beitrag: 07.07.2005, 16:59
  5. Bei jedem programm die selbe fehlermeldung!!!! hiiiilfeeeeee
    Von gast im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 07.12.2004, 00:04

Stichworte

Berechtigungen

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