Ergebnis 1 bis 5 von 5

Thema: Mehrere <div> vermeiden?

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

    Standard Mehrere <div> vermeiden?

    Hallo liebe Community,
    ich habe folgendes Problem:

    Ich möchte,dass in dem roten Kreis:
    problem.jpg

    die News von mir reinkommen damit es so aussieht:

    problem2.jpg

    Ich hab dies schon realisiert doch dafür unnötig viele <div>-Container benutzt. Gibts es einen Trick dies anders, einfacher, zu erstellen?
    Danke schonmal im voraus!

    P.S.: Ich weiß, dass die Seite nicht ansprechend aussieht habe die Bilder inklusive Hintergrundbild provisorisch mit Paint gemalt Gestaltung kommt nach dem Code :P
    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 !!!!!

  2. #2
    Großmeister(in)
    Registriert seit
    09.12.2008
    Ort
    Berlin
    Alter
    38
    Beiträge
    666
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Mehrere <div> vermeiden?

    "unnötig viele <div>-container" ist ein völlig unbrauchbare Aussage.
    Zeig bitte deinen Code.
    "Programming today is a race between software engineers
    striving to build bigger and better idiot-proof programs,
    and the universe trying to build bigger and better idiots.
    So far, the universe is winning."
    Rick Cook

  3. #3
    HTML Newbie
    Themenstarter

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

    Standard AW: Mehrere <div> vermeiden?

    Hupps das hab ich vergessen ;P


    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>Skycraft</title>
    
    
    <style type="text/css">
    body { margin:0; padding:0; height:2100px; }
    div { border:0px solid #888; }
    
     
    #menu               { position:fixed;    top:0px;    left:250px; width:1100px; height:75px;   z-index:10;}
    
    #menupunkte         { position:fixed;    top:0px;    left:250px; width:1100px; height:75px;   z-index:10;}
    
    #Banner             { position:absolute; top:75px;   left:250px; width:1100px; height:226px;  z-index:1;}
    
    #Newsboxaussen      { position:absolute; top:301px;  left:250px; width:1100px; height:2100px; z-index:2; background-color:#00bfbf;}
    
    #Bilderreihe        { position:absolute; top:311px;  left:260px; width:1080px; height:390px;  z-index:4; background-color:#404040;}
    
    
    
    #schriftnews        { position:absolute; top:707px;  left:260px; width:1080px; height:40px;   z-index:4;}
    
    #Box1               { position:absolute; top:797px;  left:260px; width:1080px; height:105px;  z-index:4; background-color:#ffffff;}
    #Box2               { position:absolute; top:905px;  left:260px; width:1080px; height:105px;  z-index:4; background-color:#ffffff;}
    #Box3               { position:absolute; top:1015px; left:260px; width:1080px; height:105px;  z-index:4; background-color:#ffffff;}
    #Box4               { position:absolute; top:1125px; left:260px; width:1080px; height:105px;  z-index:4; background-color:#ffffff;}
    #Box5               { position:absolute; top:1235px; left:260px; width:1080px; height:105px;  z-index:4; background-color:#ffffff;}
    #Box6               { position:absolute; top:1345px; left:260px; width:1080px; height:105px;  z-index:4; background-color:#ffffff;}
    
    
    
    #SchriftPartner     { position:absolute; top:1465px; left:260px; width:1080px; height:40px;   z-index:5;}
    
    #Partner1           { position:absolute; top:1610px; left:460px; width:130px;  height:130px;  z-index:5;}
    #Partner2           { position:absolute; top:1610px; left:730px; width:130px;  height:130px;  z-index:5;}
    #Partner3           { position:absolute; top:1610px; left:990px; width:130px;  height:130px;  z-index:5;}
    #Partner4           { position:absolute; top:1850px; left:460px; width:130px;  height:130px;  z-index:5;}
    #Partner5           { position:absolute; top:1850px; left:730px; width:130px;  height:130px;  z-index:5;}
    #Partner6           { position:absolute; top:1850px; left:990px; width:130px;  height:130px;  z-index:5;}
    
    #Ende               { position:absolute; top:2000px; left:260px; width:1080px; height:40px;   z-index:4;}
    
    </style>
    
    
    
    <script>
    var Warten = 10000;
    var Bilder = new Array();
    Bilder[0] = '../bilder/minecraft.png';
    Bilder[1] = '../bilder/bild1.bmp';
    Bilder[2] = '../bilder/bild2.bmp';
    
    var Timer;
    var AktuellesBild = 0;
    
    var Anzahl = Bilder.length;
    var Vorladen = new Array();
    
    for (i = 0; i < Anzahl; i++){
    Vorladen[i] = new Image();
    Vorladen[i].src = Bilder[i];
    }
    
    function BildWechseln(){
    document.images.Bild.src = Vorladen[AktuellesBild].src;
    
    AktuellesBild++;
    
    if (AktuellesBild > (Anzahl-1)) AktuellesBild=0;
    
    Timer = setTimeout('BildWechseln()', Warten);
    }
    
    </script>
    
    
    
    
    
    </head>
    
    <body background="../bilder/bg.bmp" onload="BildWechseln()" link="#000000" vlink="#000000" alink="#6e7a87">
    
    
    
    <div id="menu">            <img src="../bilder/menu.bmp"> </div>
    <div id="menupunkte">      <center> <h1> <a href="Hp.html"> Home </a> &nbsp  &nbsp  <a href="Tutorials.html"> Tutorials </a> &nbsp &nbsp <a href="Videos.html"> Videos </a> &nbsp &nbsp  <a href="Bilder.html"> Bilder</a> &nbsp &nbsp <a href="Forum.html"> Forum </a>&nbsp &nbsp  <a href="Kontakt.html">Kontakt</a> </h1> </center></div>
    <div id="Banner">          <img src="../bilder/Banner.bmp"> </div>
    <div id="Newsboxaussen">   </div>
    <div id="Bilderreihe">     <img src="z1-3.jpg" name='Bild'> </div>
    <div id="schriftnews">     <h1> News </h1> <hr style="width:900px;"> </div> 
    <basefont face="Comic Sans MS">
    <div id="Box1">            <img style="position:absolute; top:1px; left:35px; border:none; z-index:3;"  src="../bilder/news/mc.jpg"> <font style="position:absolute; top:1px; left:155px;z-index:3;"> Es ist soweit! Skycraft startet sein erstes Let's Play. Es ist der Klassiker Minecraft! Doch alleine sind wir noch lange nicht so kreativ wie ihr: Deshalb schickt uns auch euere Eindrücke, Wünsche und Ideen. Wir würden uns freuen! Hier gehts zum Forum.</font> </div>
    <div id="Box2">            <img style="position:absolute; top:1px; left:35px; border:none; z-index:3;"  src="../bilder/news/yt.jpg"> <font style="position:absolute; top:1px; left:155px;z-index:3;"> Es ist EURE kreativität gefragt :) Wir brauchen noch einintro und ein Kanaldesign! Hätte jemand Lust was für uns zu erstellen? Bitte Melden im Forum :D  </font>   </div>
    <div id="Box3">            <img style="position:absolute; top:1px; left:35px; border:none; z-index:3;"  src="../bilder/news/cod.jpg"> <font style="position:absolute; top:1px; left:155px;z-index:3;"> COD Hot or Not? Wollt ihr ein Call of Duty Lets Play? Wir spielen grade mit dem Gedanken aber fest steht es noch nicht. Wollt ihr denn eins? Bitte schreibt im Forum :) </font>   </div>
    <div id="Box4">            <img style="position:absolute; top:1px; left:35px; border:none; z-index:3;"  src="../bilder/news/unbekannt.jpg"> <font style="position:absolute; top:1px; left:155px;z-index:3;"> Die Vorbereitungen für unser erstes Let's Play laufen :) Es dauert nicht mehr lange bis wir unser erstes Let's Play starten :) Doch was wird es sein? </font>  </div>
    <div id="Box5">            <img style="position:absolute; top:1px; left:1px;  border:none; z-index:3;"  src="../bilder/news/skycraft.jpg"> <font style="position:absolute; top:1px; left:155px;z-index:3;"> DAS TEAM: Unser Team besteht aus zwei zocksüchtigen und charmanten Jungen namens Oli(15) und Maxi(15). Ihr wollt mehr über uns erfahen? Fragt im Forum nach :)  </font>   </div>
    <div id="Box6">            <img style="position:absolute; top:1px; left:1px;  border:none; z-index:3;"  src="../bilder/news/skycraft.jpg"> <font style="position:absolute; top:1px; left:155px;z-index:3;"> Soeben wurde unser Youtube-Kanal <a href="http://www.google.de/"> Skycraft </a> eröffnet! Es werden viele Videos folgen. Habt Spaß :) </font>  </div>
    </basefont>
    <div id="SchriftPartner">  <h1> Unsere Partner </h1> <hr style="width:900px;"> </div> 
    
    <div id="Partner1"> <a href="http://www.google.de/"> <img src="../bilder/Partner/black.bmp"> </a>   </div>
    <div id="Partner2"> <a href="http://www.google.de/"> <img src="../bilder/Partner/g.bmp">     </a>  </div>
    <div id="Partner3"> <a href="http://www.google.de/"> <img src="../bilder/Partner/cool.bmp">  </a>     </div>
    <div id="Partner4"> <a href="http://www.google.de/"> <img src="../bilder/Partner/fight.bmp"> </a>      </div>
    <div id="Partner5"> <a href="http://www.google.de/"> <img src="../bilder/Partner/ghost.bmp"> </a>     </div>
    <div id="Partner6"> <a href="http://www.google.de/"> <img src="../bilder/Partner/cheatsneak.bmp">  </a>      </div>
    
    <div id="Ende"> <hr style="width:900px;"> <center> <h6> ©  2013   Alle Rechte vorbehalten, insbesondere das Recht auf Vervielfältigung und Verbreitung sowie Übersetzung. </h6> </center> </div> 
    
    
    
    </body></html>
    Also ich hab halt für die Schrift und für jede newsbox ein <div> (#Schriftnews,#Box1...#Box6)
    Die will ich irgendwie zusammenfassen

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

    Standard AW: Mehrere <div> vermeiden?

    Ich würde die ganze Seite mit HTML5 machen, dann kannst du für deinen Newsbereich folgendes verwenden:

    HTML-Code:
    <section id="news">
        <article>
            <img src="meinBild1.jpg">
            <p> Text zum Bild</p>
        </article>
        <article>
            <img src="meinBild2.jpg">
            <p> Text zum Bild</p>
        </article>
        <article>
            <img src="meinBild3.jpg">
            <p> Text zum Bild</p>
        </article>
    </section>
    
    Du kannst auch das neue Element main verwenden, wenn du willst => http://www.peterkroener.de/ein-neues...er-html5-main/


    Edit: da war ich wohl ne Minute zu spät oder so.
    Geändert von explanator (11.07.2013 um 15:30 Uhr)

  5. #5
    Bandit
    Gast

    Standard AW: Mehrere <div> vermeiden?

    Hier wurde dir schon eine Lösung angeboten: http://www.forum-hilfe.de/threads/55...581#post406581
    Und du kommst jetzt mit dem gleichen Käse wieder an? Was soll der Quatsch??? Ein Thread für diesen Blödsinn reicht, daher: *close*

Ähnliche Themen

  1. Antworten: 1
    Letzter Beitrag: 22.12.2008, 09:14
  2. Wie Errorcode möglichst simpel vermeiden?
    Von Darkxor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 10.10.2008, 11:36
  3. Mehrere Formulare
    Von komma im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 06.10.2007, 16:45
  4. Rollover-Effekte in Navigationsleiste vermeiden
    Von dulldeidi im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 3
    Letzter Beitrag: 09.10.2006, 12:20
  5. Öffnen neuer Pages vermeiden
    Von Dragon999 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 20.07.2005, 17:26

Stichworte

Berechtigungen

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