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

Thema: divs anordnen

  1. #1
    Meister(in)
    Registriert seit
    07.08.2006
    Beiträge
    270
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard divs anordnen

    Hi,

    ich kriege das mit den divs einfach nicht richtig hin
    ich möchte folgendes machen

    div1 div2
    div3 div4
    div5

    das heißt div 1 ist ein bild was in der mitte der seite sein soll, ein div mit nem video drin rechts daneben, also rechts angeordnet
    div3 enthält das menü und div4 den jeweiligen gewählten inhalt, div4 soll sich links an div1 ausrichten
    div5 soll einfach wieder zentriert unter allem anderen sein
    ich kriege das einfach nicht hin,
    hoffe es kann mir jemand helfen
    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
    Mr.619
    Gast

    Standard

    So kannst du divs nebeneinander platzieren:

    Bei div1 float:right und bei div2 float:left

    und das Ganze eben untereinander wiederholen.

  3. #3
    Meister(in)
    Themenstarter

    Registriert seit
    07.08.2006
    Beiträge
    270
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    meinte das eher so

    -------div1-----div2
    div3--div4----------
    -------div5----------

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    auf die Schnelle, ohne Test und ohne Garantie:

    div 1 float: left;
    div 2: margin-left: mit Breite von div 1 + evtl. margin left von div 1 + Abstand zwischen div 1 und 2

    div 3: clear: left; flaot: left
    div 4 wie div 2 (mit anderen Werten)

    div 5: clear: left; margin: 0 auto;

  5. #5
    Interessierte/r
    Registriert seit
    06.08.2007
    Beiträge
    103
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    so wie sejuma hätte ich das auch gmacht ausser das die werte vonn div4 mit div 2 gleich sein müssen, nach meiner meinung !

  6. #6
    Meister(in)
    Themenstarter

    Registriert seit
    07.08.2006
    Beiträge
    270
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    habe das probiert, aber durch das erste (div1 float:left), steht doch alles oben links, div1 soll aber zentriert sein

    es soll so aussehen

    ----------div1---------div2
    div3-----div4---------div2
    ----------div5---------div2

    div1 ist ein bild das zentriert sein soll
    div zwei enthält ein flash welches rechts von unten nach oben geht
    div 3 enthält die navi
    div 4 das fenster mit den texten, welches genauso breit sein soll wie das bild in div1
    und div 5 enthält nur eine zeile mit text die auch zentriert sein soll

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Jetzt wird so langsam klar, was du willst.
    Probier mal dieses Grundgerüst. Details musst du noch anpassen.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http&#58;//www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
    
    <title> 
    Test
    </title>
    
    <style type="text/css">
      
    #box2
    &#123;float&#58;right;
    width&#58; 100px;
    height&#58; 500px;
    border&#58; 1px solid black;
    &#125;
    
    #box1
    &#123;width&#58; 700px;
    height&#58; 80px;
    margin&#58; 0 auto;
    border&#58; 1px solid black;
    &#125;
    
    #box3
    &#123;float&#58; left;
    width&#58; 150px;
    height&#58;400px;
    border&#58; 1px solid black;
    &#125;
    
    #box4
    &#123;border&#58; 1px solid black;
    margin-left&#58; 160px;
    margin-right&#58; 110px;&#125;
    
    #box5
    &#123;clear&#58; both;
    border&#58; 1px solid black;
    &#125;
    </style>
    
    </head>
    
    <body>
    <div id="box2">box 2</div>
    <div id="box1">box 1</div>
    <div id="box3">box 3</div>
    <div id="box4">box 4</div>
    <div id="box5">box 5</div>
    
    </body>
    </html>

  8. #8
    Meister(in)
    Themenstarter

    Registriert seit
    07.08.2006
    Beiträge
    270
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    habe es jetzt so umgesetzt, aber das menue ist immer noch oben links und nicht weiter unten, das menü zentriert sein und da aufhören wo die ecke das logos beginnt:

    #flash {
    float:right;
    width:auto;
    height:auto;
    }

    #logo {
    width:774px;
    height:206px;
    margin:auto
    }

    #menue{
    float:left;
    margin-left:100px;
    margin-top:auto;
    width:100px;
    height:200px;
    }

    #hauptfenster {
    margin-left:200px;
    margin-right:200px;
    height:100%;
    }

    #etc {
    clear:both;
    }

  9. #9
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Kannst du mal bitte einen Link oder den gesamten Quelltext einstellen, damit wir mal einen einheitlichen Stand haben.

  10. #10
    Meister(in)
    Themenstarter

    Registriert seit
    07.08.2006
    Beiträge
    270
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Logventure</title>
    <style type="text/css">

    body {
    background-image: url(bilder/back.gif);
    background-repeat:no-repeat;
    }
    body,td,th {
    font-family: Times New Roman, Times, serif;
    }
    #flash {
    float:right;
    width:auto;
    height:auto;
    background-color:transparent;
    }

    #logo {
    width:774px;
    height:206px;
    margin:auto;
    }

    #menue{
    float:left;
    margin-left:100px;
    margin-top:0px;
    width:120px;
    height:200px;
    }

    #hauptfenster {
    margin-left:200px;
    margin-right:200px;
    height:100%;
    }

    #etc {
    clear:both;
    }

    </style>

    <script type="text/javascript">
    function archiv(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='archiv.html' style='height:100%; width:100%'></iframe>";
    }
    function home(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='home.html' style='height:100%; width:100%'></iframe>";
    }
    function organisation(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML="<iframe src='organisation.html' style='height:100%; width:100%'></iframe>";
    }
    function idee(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='idee.html' style='height:100%; width:100%'></iframe>";
    }
    function team(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='team.html' style='height:100%; width:100%'></iframe>";
    }
    function schwerpunkte(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='schwerpunkte.html' style='height:100%; width:100%'></iframe>";
    }
    function kompetenzen(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='kompetenzen.html' style='height:100%; width:100%'></iframe>";
    }
    function partner(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='partner.html' style='height:100%; width:100%'></iframe>";
    }
    function referenzen(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='referenzen.html' style='height:100%; width:100%'></iframe>";
    }
    function kontakt(){
    var zielobjekt =document.getElementById("hauptfenster");
    zielobjekt.innerHTML= "<iframe src='kontaktformular.php' style='height:100%; width:100%'></iframe>";
    }
    </script>
    </head>

    <body>
    <div id="flash">
    <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="1205">
    <param name="movie" value="flash/fsblasen.swf" />
    <param name="wmode" value="transparent" />
    <param name="quality" value="high" />
    <embed src="flash/fsblasen.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="1205"></embed>
    </object>
    </div>

    <div id="logo">[img]bilder/logventure_Logo2.jpg[/img]</div>

    <div id="menue">
    <dl id="menu">


    <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="630";awmAltUrl=""; </script><script charset="UTF-8" src="menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script>

    </dl>
    </div>

    <div id="hauptfenster">

    </p>
    </div>

    <div id= "etc">Impressum, Webmaster: Matthias Geißler, letzte Änderung: 10.08.2007</div>
    </body>
    </html>

Ähnliche Themen

  1. Divs anordnen
    Von derano im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 24.08.2007, 23:49
  2. In den hintergrund anordnen
    Von Stefan_01 im Forum Flash Forum
    Antworten: 1
    Letzter Beitrag: 28.12.2006, 20:27
  3. Anordnen von Div-Holdern
    Von andras im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 25.06.2006, 21:48
  4. hintergrund in tabelle anordnen HELP!!
    Von firefox22 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 22.08.2005, 07:34
  5. Fotos anordnen
    Von gast1 im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 25.08.2004, 16:16

Stichworte

Berechtigungen

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