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

semantisches markup und float

Boogieman

Neues Mitglied
Hallo an alle.
Ich habe eine kleine frage die mich jetzt schon zu lange beschäftigt und ich hoffe das Ihr mir mit der ein bisschen helfen könnt.

Ich habe den <article> und ein <aside> wenn ich das Fenster jetzt zusammenschiebe (horizontal) sollen diese beide Inhalte nebeneinander bleiben und wenn man das Fenster wieder groß macht sollen die wieder sichtbar werden.
Ich will es mit Float machen, ich gebe mal mein CSS:

Code:
html
            {
                height:100%;
             }
          
            body
            {
                margin:0%;
                height:100%;
            }
          
            header
            {
                background-color:#BDBDBD;
                margin:0%;
                padding:1%;
              
            }
          
            footer
            {
                background-color:#BDBDBD;
                margin:0%;
                padding:1%;
                clear:both;
            }
          
            article
            {
                float:left;
                padding:2%;
                width:50%;
                min-width:50%;
          }
          
            aside
            {
                width:45%;
                float:right;
              
            }

wenn ich jetzt das Fenster verkleinere schiebt es den aside unter den article und das soll es nicht.
Für eine kleine Antwort wäre ich sehr Dankbar :)

MfG
Boogieman
 
Zuletzt bearbeitet:
sry is offline hier der code:
Code:
<!DOCTYPE html>
<html>

    <head>
        <title>Mount Olympus News</title>
        <style type="text/css">
   
            html
            {
                height:100%;
               
               
               
            }
           
            body
            {
                margin:0%;
                height:100%;
               
               
            }
           
            header
            {
                background-color:#BDBDBD;
                margin:0%;
                padding:1%;
               
            }
           
            footer
            {
                background-color:#BDBDBD;
                margin:0%;
                padding:1%;
                clear:both;
            }
           
            article
            {
                float:left;
                padding:2%;
                width:50%;
                min-width:50%;
               
               
            }
           
            aside
            {
                width:45%;
                float:right;
               
            }           
            ul
            {
                list-style:none;
            }
           
            #clear
            {
                clear:both;
            }
           
           
           
       
        </style>
   
    </head>

    <body>

   
        <header>
            <h1>Mount Olympus News</h1>
        </header>

        <div id="text">
        <section>
            <article>
                <h2>Prometheus Heats Things Up</h2>
                <p>Prometheus did not care to live amid the clouds on the mountain top. He was too
                busy for that. While the Mighty Folk were spending their time in idleness, drinking
                nectar and eating ambrosia, he was intent upon plans for making the world wiser and
                better than it had ever been before.</p>
                <p>He went out amongst men to live with them and help them. Ah, how very poor and wretched they were! He found
                them living in caves and in holes of the earth, shivering with the cold because there
                was no fire, dying of starvation, hunted by wild beasts and by one another-the most
                miserable of all living creatures.</p>
                <p>"If they only had fire," said Prometheus to himself, "they could at least warm
                themselves and cook their food; and after a while they could learn to make tools and
                build themselves houses. Without fire, they are worse off than the beasts."</p>
                <p>Then he went boldly to Jupiter and begged him to give fire to men, that so they
                might have a little comfort through the long, dreary months of winter.</p>
                <p>"Not a spark will I give," said Jupiter. "No, indeed! Why, if men had fire they
                might become strong and wise like ourselves, and after a while they would drive us
                out of our kingdom. It
                is best for them to be poor and ignorant, that so we Mighty Ones may thrive and be
                happy."</p>
                <p>Prometheus made no answer; but he had set his heart on helping mankind, and he did
                not give up. He turned away, and left Jupiter and his mighty company forever.</p>
           
                <p>As he was walking by the shore of the sea he found a reed, or, as some say, a tall
                stalk of fennel, growing; and when he had broken it off he saw that its hollow center
                was filled with a dry, soft pith which would burn slowly and keep on fire a long
                time. He took the long stalk in his hands, and started with it towards the dwelling
                of the sun in the far east.</p>
                <p>"Mankind shall have fire in spite of the tyrant who sits on the mountain top," he
                said.</p>
                <p>He reached the place of the sun in the early morning just as the glowing, golden
                orb was rising from the earth and beginning his daily journey through the sky. He
                touched the end of the long reed to the flames, and the dry pith caught on fire and
                burned slowly. He called some of the shivering men from their caves and built a fire for them,
                and showed them how to warm themselves by it and how to build other fires from the
                coals. Soon there was a cheerful blaze in every rude home in the land, and men and
                women gathered round it and were warm and happy, and thankful to Prometheus for the
                wonderful gift which he had brought to them from the sun.</p>
            </article>   
        </section>
        </div>
       
        <aside>
            <h2>Links to Stories</h2>
            <ul id="stories">
                <li><a href="">Jupiter & His Mighty Company</a></li>
                <li><a href="">The Golden Age</a></li>
                <li><a href="">The Story of Prometheus</a></li>
                <li><a href="">The Flood</a></li>
                <li><a href="">The Story of Io</a></li>
                <li><a href="">The Wonderful Weaver</a></li>
                <li><a href="">Cadmus and Europa</a></li>
                <li><a href="">The Quest for Medusa's Head</a></li>
                <li><a href="">The Story of Atlanta</a></li>
                <li><a href="">The Horse and the Olive</a></li>
            </ul>

            <h2>News</h2>
            <ul>
                <li><strong>Pandora opens the box!</strong><br /> Disease and sorrow released to plague mankind for eternity. <a href="foo">More...</a></li>
                <li><strong>Welcome to Hellenes.</strong><br /> Son of Prometheus escapes the great flood and creates a new society from tossed stones. <a href="foo">More...</a></li>
                <li><strong>A Tangled Web</strong><br/>
                Arachne loses weave-off; is changed into a spider. <a href="">More...</a></li>
            </ul>
           
        </aside>
    <footer>
       
            <p>Content taken from <cite>Old Greek Stories</cite> by James Baldwin (1914). It is a copyright free text available at <a href="http://www.gutenberg.net/1/1/5/8/11582/">Project Gutenberg</a>.
    </footer>

    </body>
</html>
 
Hallo

wenn ich jetzt das Fenster verkleinere schiebt es den aside unter den article und das soll es nicht.

Du kannst ein Media Query einrichten, die die Container untereinander setzt bevor sie Kontakt miteinander bekommen. Dazu kannst du direkt vor dem schließenden style-Tag zum Beispiel folgendes einfügen:

Code:
@media only screen and (max-width: 800px) {
   article {
      float: none;
      width: 100%;
   }
   aside {
      float: none;
      width: 100%;
   }
}

Gruss

MrMurphy
 
danke noch einmal :)
aber die sollen gar nicht untereinander ich will einfach drüber hinweg scrollen sozu sagen
danke für die hilfe :)
Also ich will die immer nebeneinander haben.
Der rechte Container soll nie unter den linken mit dem Text :)

danke euch!
 
Zuletzt bearbeitet:
Zurück
Oben