tutorials.de Buch-Aktion 05/2012
Seite 1 von 2 12 LetzteLetzte
ERLEDIGT
JA
ANTWORTEN
26
ZUGRIFFE
1013
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 16.07.07 15:15 #1
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    Hallo,

    ich hab eine Seite http://beta.bebi.de

    Ich möchte nun links und rechts der Seite je ein Div mit Bilder positionieren. Allerdings verschiebt es mir immer das Layout.

    Was muss ich tun?

    Danke und Gruß
    Kerstel
     
  2. 16.07.07 16:20 #2
    Maik Tutorials.de Gastzugang
    Hi,

    meinst du mit links und rechts von der Seite die beiden äußeren Spalten?

    Ansonsten versuch mal, die Boxen anstelle der Positionierung mit der float-Eigenschaft links- und rechtsbündig zu setzen.
     
  3. 16.07.07 16:47 #3
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    Hi,

    Zitat Zitat von Maik Beitrag anzeigen
    meinst du mit links und rechts von der Seite die beiden äußeren Spalten?
    Ja, so meinte ich das
     
  4. 16.07.07 16:59 #4
    Maik Tutorials.de Gastzugang
    So wie ich das überblicke, wären das dann die beiden Tabellenzellen <td valign="top" class="containerleft"> und <td valign="top" class="containerright">, in denen du die Boxen einbinden müsstest - ohne Positionierung und ohne die zuvor empfohlene float-Eigenschaft.

    Also einfach unterhalb der bislang eingebundenen Elemente notieren.
     
  5. 17.07.07 01:53 #5
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    hab ich auch schon überlegt, aber diese "Seitenleisten" sollen von ganz oben anfangen und bis runter gehen. Ich dachte irgendwie an Positionierung über DOM oder so, aber es verschiebt halt immer das Layout. Ich schaff es irgendwie nicht das diese Boxen unabhängig vom Rest sind.

    CSS ist irgendwie kacke
     
  6. 17.07.07 07:24 #6
    Maik Tutorials.de Gastzugang
    Hi,

    wenn die Boxen in den äußeren Spalten eingebettet sein sollen, frage ich mich, wie sie vom Rest (übriges Layout?) unabhängig sein sollen bzw. was du dir darunter konkret vorstellst?

    In meinem CSS-Tutorial CSS-Layout mit 100%-Höhe findest du eine Anleitung, wie sich ein Layout im Browserfenster vom oberen bis zum unteren Rand strecken lässt.
     
  7. 17.07.07 11:18 #7
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    hm, ich weiß nicht, evtl. drück ich mich falsch aus. Aussehen soll es so:
    http://www.kerstel-solutions.de/Autositze.jpg

    Die beiden Bänder mit den Blumen drin.
     
  8. 18.07.07 01:03 #8
    vendy vendy ist offline Mitglied Bronze
    Registriert seit
    Apr 2004
    Beiträge
    28
    Wenn du zwei verschiedene DIV-Container anlegst, einen links und einen rechts floatest müsste es doch funktionieren?
     
  9. 18.07.07 06:33 #9
    Maik Tutorials.de Gastzugang
    Hi,

    in diesem Fall müsste die Tabelle #main_table_fixed mit zwei weiteren Spalten ausgestattet werden.

    Übrigens, ein ID-Name darf nicht mit einer Ziffer beginnen:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

    /* Autositze */
 
#45e3f6bdef4f03_50215022 {
 
    background-color: #BDC8E9;
 
}
 
/* Baden & Wickeln */
 
#45e3f6bde91cf0_02988504 {
 
    background-color: #A77A93;
 
}
 
/* Essen & Trinken */
 
#45e3f6bdeadcd5_80065618 {
 
    background-color: #EBB6B8;
 
}
 
/* Junges Wohnen */
 
#45e3f6bdf25fa6_95858057 {
 
    background-color: #93C15A;
 
}
 
/* Kindermöbel */
 
#45e3f6bdec2ff0_56044849 {
 
    background-color: #8DA3D2;
 
}
 
/* Sicherheit */
 
#45e3f6bdef05b5_42552255 {
 
    background-color: #D4EF94;
 
}
 
/* Spiel & Spaß */
 
#45e3f6bdf175a3_52564099 {
 
    background-color: #FFCC66;
 
}
 
/* Unterwegs */
 
#45e3f6bdf10214_12141781 {
 
    background-color: #F4E292;
 
}
    ansonsten kommt bei der Navigation sowas bei heraus:
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Div positionieren-demo_kerstel.jpg  
     
  10. 19.07.07 11:33 #10
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    Hallo,

    die Seite http://beta.bebi.de läuft auf dem IE soweit einwandfrei. Ich habe nur Probleme unter Firefox (Mac und Win)

    Hat jemand ne Idee was ich da machen kann?

    Gruß
    Kerstel
     
  11. 19.07.07 11:49 #11
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    Hallo,

    danke für den Tipp mit den Buchstaben vor der ID, hatte mich schon gewundert

    Ich hab das mit den Balken jetzt über ein kleine JS geregelt, welches die Balken anhand des Banners positioniert. Funktioniert noch nicht richtig im Firefox

    Gruß
    Kerstel
     
  12. 19.07.07 17:21 #12
    Maik Tutorials.de Gastzugang
    Hi,

    wieso startest du nun ein neues Thema ("Browser Problem"), wenn es doch noch immer um die Positionierung der beiden äußeren DIVs geht?

    Aus diesem Grund wird dein Post in diesem Thema eingepflanzt, Stichwort: "Cross-Postings" vermeiden.

    Bevor ich mich daran mache, alle Fehler im HTML- und CSS-Code zu suchen und auszumerzen, damit die Seite nicht nur im IE, sondern auch in den übrigen Browsern läuft, zeige ich dir mal ein kleines grundlegendes Beispiel für ein 5-spaltiges Layout.

    Vielleicht hilft dir das weiter.

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title></title>
 
<style type="text/css">
<!--
div#wrapper {
width: 900px;
margin: 0 auto;
}
 
div#leftOut {
float: left;
width: 85px;
background: #8DA3D2;
}
 
div#leftIn {
float: left;
width: 150px;
background: #BDC8E9;
}
 
div#content {
float: left;
width: 430px;
background: #dedede;
}
 
div#rightOut {
float: right;
width: 85px;
background: #8DA3D2;
}
 
div#rightIn {
margin: 0 85px 0 665px;
background: #BDC8E9;
}
-->
</style>
 
</head>
<body>
 
<div id="wrapper">
     <div id="leftOut">leftOut</div>
     <div id="leftIn">leftIn</div>
     <div id="content">content</div>
     <div id="rightOut">rightOut</div>
     <div id="rightIn">rightIn</div>
</div>
 
</body>
</html>
     
  13. 19.07.07 21:06 #13
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    sorry, für mich war das ein anderes thema, da ich es ja gelösst hatte, aber es im firefox halt nicht klappt.

    Danke für Dein Beispiel, aber wie bekomm ich damit den Banner oben hin der über den 3 mittleren Divs steht
     
  14. 19.07.07 21:20 #14
    Maik Tutorials.de Gastzugang
    Hierfür packen wir die vier involvierten DIVs in ein übergeordnetes DIV #center, das nun die äußeren Spalten #leftOut und #rightOut umfliesst:

    Code :
    1
2
3
4
5
6
7
8
9
10

    <div id="wrapper">
     <div id="leftOut">leftOut</div>
     <div id="rightOut">rightOut</div>
     <div id="center">
          <div id="banner">banner</div>
          <div id="leftIn">leftIn</div>
          <div id="rightIn">rightIn</div>
          <div id="content">content</div>
     </div>
</div>
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

    div#wrapper {
width: 900px;
margin: 0 auto;
}
 
div#leftOut {
float: left;
width: 85px;
background: #8DA3D2;
color: #000;
}
 
div#rightOut {
float: right;
width: 85px;
background: #8DA3D2;
color: #000;
}
 
div#center {
margin: 0 85px;
}
 
div#banner {
background: #414b55;
color: #fff;
}
 
div#leftIn {
float: left;
width: 150px;
background: #BDC8E9;
color: #000;
}
 
div#rightIn {
float: right;
width: 150px;
background: #BDC8E9;
color: #000;
}
 
div#content {
margin: 0 150px;
background: #dedede;
color: #000;
}
     
  15. 27.07.07 04:19 #15
    kerstel kerstel ist offline Mitglied Gold
    Registriert seit
    Dec 2004
    Beiträge
    184
    eine frage noch, wie bekomme ich leftIn und leftOut so groß wie den "wrapper" aber mind. so groß wie den anzeigebildschirm?
     
« Fehler im Design: nur bei IE (CSS) | DIV mit 100% läuft aus Browserfenster raus »

Ähnliche Themen

  1. BG positionieren per CSS
    Von SixxKiller im Forum CSS
    Antworten: 2
    Letzter Beitrag: 07.10.07, 08:20
  2. Div positionieren
    Von notebook20000 im Forum CSS
    Antworten: 2
    Letzter Beitrag: 11.08.07, 09:37
  3. Box Positionieren
    Von emonem im Forum CSS
    Antworten: 2
    Letzter Beitrag: 05.05.06, 19:57
  4. Box in der Box positionieren
    Von krass2001 im Forum CSS
    Antworten: 2
    Letzter Beitrag: 01.06.05, 06:23
  5. Positionieren
    Von Peter Klein im Forum HTML & XHTML
    Antworten: 11
    Letzter Beitrag: 27.12.04, 00:33