mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 27.04.2024 19:23 Benutzername: Passwort: Auto-Login

Thema: 3 divs nebeneinander vom 24.09.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> 3 divs nebeneinander
Seite: Zurück  1, 2, 3, 4, 5  Weiter
Autor Nachricht
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.09.2010 13:35
Titel

Antworten mit Zitat Zum Seitenanfang

Dreamweaver schreibt Dir folgenden Code:
Code:
<body>
<div id="apDiv1"><img src="head.gif" width="956" height="245" /></div>
<p>&nbsp;
</p>

  <tr>
    <td><div id="apDiv2">
      <table cellspacing="0" cellpadding="0" id="menu1" class="dmx">
        <tr>
          <td><a class="item1" href="index.html" >Home         </a>

          <td><a class="item1" href="javascript:void(0)">Verein     </a>
            <div class="section"> <a class="item2" href="example1.html">Ansprechpartner</a><a class="item2" href="example1.html">Vereinsdaten</a>
           
            </div></td>
(...)

divs hin oder her, das ist Tabellendesign ersten Ranges = 90er-Jahre. (Und die Tabelle wird noch nicht mal geöffnet.)


Zuletzt bearbeitet von heiko_rs am Fr 24.09.2010 13:37, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
ripper_2001
Threadersteller

Dabei seit: 24.09.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 24.09.2010 13:38
Titel

Antworten mit Zitat Zum Seitenanfang

ok diese Tabelle die du ansprichst ist mein Menübaum, aber der funkt ja wie man sieht.

Was mich verrückt macht ist dass ich mit float versucht habe die DIvs ganz einfach nur nebeneinander abzubilden und dabei schmeisst er mir die divs willkürlich durch die Page * Ich geb auf... *
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Zeithase

Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht: Männlich
Verfasst Fr 24.09.2010 13:41
Titel

Antworten mit Zitat Zum Seitenanfang

ripper_2001 hat geschrieben:
Was mich verrückt macht ist dass ich mit float versucht habe die DIvs ganz einfach nur nebeneinander abzubilden und dabei schmeisst er mir die divs willkürlich durch die Page * Ich geb auf... *


Dir fehlen die Grundlagen. Du floatest, positionierst wahrscheinlich gleichzeitig absolut und hast überschneidende Größen, die den Rahmen sprengen.
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 24.09.2010 13:41
Titel

Antworten mit Zitat Zum Seitenanfang

Zeig doch mal deinen Ansatz. Aber bitte nur den relevanten Teil
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Fr 24.09.2010 13:45
Titel

Antworten mit Zitat Zum Seitenanfang

ripper_2001 hat geschrieben:
ok diese Tabelle die du ansprichst ist mein Menübaum

Ich wollte natürlich nicht den kompletten Code posten, aber schaue ihn Dir selber an: Tabellen von oben bis unten, außer der Header-Grafik steckt alles in Tabellenzellen.
  View user's profile Private Nachricht senden
ripper_2001
Threadersteller

Dabei seit: 24.09.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 24.09.2010 13:55
Titel

Antworten mit Zitat Zum Seitenanfang

so hab ich meine divs dargestellt:

Hab das float erstmal wieder rausgenommen

Die 3 Divs sollen nebeneinander stehen

Gruß

ripper_2001
Code:
#apDiv6 {
   position:absolute;
   width:500px;
   height:115px;
   z-index:2;
   left: 39px;
   top: 93px;
}


Code:
#apDiv12 {
   position:absolute;
   width:165px;
   height:271px;
   z-index:2;
   left: 770px;
   top: 95px;
}


Code:
#apDiv5 {
   position:absolute;
   width:147px;
   height:279px;
   z-index:2;
   left: 400px;
   top: 95px;

}


Zuletzt bearbeitet von ripper_2001 am Fr 24.09.2010 13:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Nothingness

Dabei seit: 20.03.2007
Ort: -
Alter: 35
Geschlecht: Weiblich
Verfasst Fr 24.09.2010 14:00
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo ripper_2001,

vielleicht hilft dir dieses Beispiel? Eine ähnliche Struktur wie deine Webseite.

Code:
<html>
<head>
<title>Titel</title>
</head>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
#container{
    width:600px;
    height:800px;
    border: 1px solid pink;
}

#head{
    width:600px;
    height:200px;
    border: 1px solid red;
}

#navi{
    float:left;
    width:600px;
    height:30px;
    background:pink;
}

#links{
    float:left;
    width:200px;
    padding:8px;
    border: 1px solid red;
}

#rechts{
    float:left;
    width:350px;
    padding:8px;
    margin-left:10px;
    border: 1px solid green;
}

#bild{
    width:100px;
    height:100px;
    margin:5px;
    float:left;
    border:1px solid green;
    font-size:10pt;
    color:#cccccc;
}

ul li{
    float:left;
    list-style:none;
    margin-left:30px;
}
</style>
<body>
<div id="container">
    <div id="head"></div>
    <div id="navi">
        <ul>
            <li><a href="#">Punkt eins</a></li>
            <li><a href="#">Punkt zwei</a></li>
            <li><a href="#">Punkt drei</a></li>
            <li><a href="#">Punkt 4</a></li>
            <li><a href="#">Punkt 5</a></li>
            <li><a href="#">Punkt 6</a></li>
        </ul>
    </div>
    <div id="links"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
    <div id="rechts">
        <div id="bild">Hier könnte ein Bild sein</div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div>
</div>
</body>
</html>

Das CSS solltest du natürlich auslagern in eine externe Datei.
Wichtig ist, dass du von den Tabellen wegkommst. Es lässt sich alles durch Divs lösen.
  View user's profile Private Nachricht senden
bacon

Dabei seit: 24.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 24.09.2010 14:04
Titel

Antworten mit Zitat Zum Seitenanfang

Zitat:
margin-left:10px;


+ floats sind im IE speziell, in der Horizontalen würde ich drauf verzichten.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] 4 DIVS nebeneinander
[css] divs nebeneinander zentrieren
CSS / Newbie / DIVs nebeneinander positionieren?
3 Divs nebeneinander im Container auf einer Höhe?
2 Divs nebeneinander die zum Elternelement relativ sind?
mehrere divs nebeneinander ohne umbruch
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2, 3, 4, 5  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.