tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
9
ZUGRIFFE
1311
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 02.06.07 19:42 #1
    MirakFH MirakFH ist offline Mitglied Silber
    Registriert seit
    Jul 2004
    Beiträge
    64
    Hey, also ich will folgendes:

    Ich habe ein Design, das geht bei 1024*768 von ganz links nach ganz rechts.

    Wenn ich meine Auflösung jetzt größer stelle, dann will ich das mein Design mittig ist. Also das links und rechts (in meinem Fall) eine weiße Fläche dazu kommt.

    Habe hier noch 2 Screens:

    Bei 1024 http://xup.raidrush.to/view.php?id=2...4fffe055d2acff

    Bei 1280 http://xup.raidrush.to/view.php?id=9...5b057fa7b9539a

    Hier noch mein Code:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <html>
 
<head>
 
</head>
 
<body bgcolor="#efeeed" style="text-align:center;" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
 
<div id="Layer1" style="position:absolute; width:979px; height:129px; z-index:2;left: 0px; top: px; background-image:url(img/1.jpg); background-repeat:no-repeat;"></div>
<div id="Layer2" style="position:relativ; width:100%; height:129px; z-index:1;left: 0px; top: 0px; background-image:url(img/2.jpg);"></div>
 
 
 
</body>
 
</html>

    Eine Ebene mit 100% mit dem Hintergrundbild (passen zum Header links und rechts) und die vordere Ebene mit dem Logo ca 979 Pixel.

    Ja, ich habe die Bilder geklaut, aber nur zum Üben.

    Also kann HPs doch ein wenig, aber bis jetzt habe ich immer mit Tabellen gearbeitet.

    Greetz und danke, Mirak
    Geändert von MirakFH (02.06.07 um 19:57 Uhr)
     
  2. 02.06.07 19:47 #2
    Maik Tutorials.de Gastzugang
    Hi,

    das Layout liesse sich im Anzeigebereich folgendermaßen horizontal zentrieren:

    Code :
    1
2
3
4

    #layout {
width: 1024px;
margin: 0 auto;
}
    Die ID layout ist in diesem Beispiel von mir frei gewählt und bezieht sich auf das umschliessende DIV.
     
  3. 02.06.07 19:51 #3
    MirakFH MirakFH ist offline Mitglied Silber
    Registriert seit
    Jul 2004
    Beiträge
    64
    habe einfach mal im den style=".."-Bereich der betreffenden Ebene gepackt, aber passiert nix
     
  4. 02.06.07 19:53 #4
    Maik Tutorials.de Gastzugang
    In welcher der beiden Ebenen hast du denn das Stylesheet angewendet?

    Zudem muss eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden, sprich: die doppelt vorhandene ID Layer1 muss umbenannt werden.
     
  5. 02.06.07 19:55 #5
    MirakFH MirakFH ist offline Mitglied Silber
    Registriert seit
    Jul 2004
    Beiträge
    64
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <html>
 
<head>
 
<style>
 
</style>
 
</head>
 
<body bgcolor="#efeeed" style="text-align:center;" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
 
<div id="Layer1" style="position:absolute; [B]margin: 0 auto; width:1024px;[/B]  height:129px; z-index:2;left: 0px; top: px; background-image:url(img/1.jpg); background-repeat:no-repeat;"></div>
<div id="Layer2" style="position:relativ; width:100%; height:129px; z-index:1;left: 0px; top: 0px; background-image:url(img/2.jpg);"></div>
 
</body>
 
</html>

    Layer1 ist das Logo, das soll immer an der gleichen Position bleiben.
    Layer2 ist der Hintergrund, der soll einfach immer 100% bleiben.
     
  6. 02.06.07 19:59 #6
    Maik Tutorials.de Gastzugang
    Versuch es mal hiermit:

    Code :
    1

    <div id="Layer1" style="margin: 0 auto; width:1024px; height:129px;  background-image:url(img/1.jpg); background-repeat:no-repeat;"></div>
    Solange Layer2 eine Breite von 100% besitzt und in keinem übergeordneten DIV mit fixer Breite eingebunden ist, lässt sich er sich auch nicht im Viewport horizontal zentrieren.
     
  7. 02.06.07 20:03 #7
    MirakFH MirakFH ist offline Mitglied Silber
    Registriert seit
    Jul 2004
    Beiträge
    64
    Hatte ich es nicht so?

    Weil wenn ich deins ohne position:absolute; nehme, dann sind die Ebenen trotz z-index untereinander.

    Hier wäre noch der Quelltext:

    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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

    /* CSS Document */
 
 
/* Grundlayout ----------------------------------------------------------------------------------- */
 
BODY{
    background-color:#EFEEED;
    background-image:url(../images/kachel-kopf.jpg);
    background-repeat:repeat-x;
}
 
div#main_frame{
    position: absolute; left:0px; top:0px;
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
}
  
[B]div#center_frame{
    width:999px;
    margin: 0px auto;
    padding:0px 0px 0px 10px;
    height:100%;
    background-image:url(../images/seitenkopf.jpg);
    background-repeat: no-repeat;[/B]
}
 
[B]div#seitenkopf{
    height:129px;   [/B]
}
  
div#banner{
    width:468px;
    height:60px;    
    /*border:0px solid #FFFFFF;*/
    float:right;
}
 
div#seitenfuss{
    width:100%;
    padding-bottom:20px;
    padding-top:20px;
    text-align:center;  
}
 
div#suche{
    padding-top:2px;
    float:right;
    height:18px;    
}
 
div#login{
    float:right;
    padding:0;  
}
 
/* Hauptnavigation Ebene1 ----------------------------------------------------------------------------------- */
 
div#hauptnavigation{
    height:21px;
        border-left:0px solid #FFFFFF;
        width:999px;
}
 
.hauptnavigation-off A:link{
    text-align:center;
    display:block;
    width:80px;
    height:21px;    
    padding:0px 15px 0px 15px;
    font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
    font-size:12px; 
    color:#FFFFFF; 
    line-height:20px;
    font-weight: bold; 
    text-decoration: none;
    background-color: none;
    border-right:1px solid #FFFFFF;
    float:left;
}
 
.hauptnavigation-off A:visited{
    text-align:center;
    display:block;
    width:80px;
    height:21px;    
    padding:0px 15px 0px 15px;
    font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
    font-size:12px; 
    color:#FFFFFF;
    line-height:20px;
    font-weight: bold; 
    text-decoration: none;
    background-color: #none;
    border-right:1px solid #FFFFFF;
    float:left;
}
 
.hauptnavigation-off A:hover{
    text-align:center;
    display:block;
    width:80px;
    height:21px;    
    padding:0px 15px 0px 15px;
    font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
    font-size:12px; 
    color:#42255E; 
    line-height:20px;
    font-weight: bold; 
    text-decoration: none;
    background-color: #B284B5;
    border-right:1px solid #FFFFFF;
    float:left;
}
 
.hauptnavigation-hi{
    text-align:center;
    display:block;
    width:80px;
    height:21px;    
    padding:0px 15px 0px 15px;
    font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif; 
    font-size:12px; 
    color:#42255E; 
    line-height:20px;
    font-weight: bold; 
    text-decoration: none;
    background-color: #B284B5;
    border-right:1px solid #FFFFFF;
    border-bottom:1px solid #B284B5;
    float:left;


    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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

    <!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" />
<meta name="Author" content="Lars Weber">
<meta name="Publisher" content="Lars Weber">
<meta name="Copyright" content="Lars Weber">
<meta name="Keywords" content="partyfotos,impressionen,people,portrait,detail akt,akt,natur,produkte,fotografie,bodensee,setcard,fotos,foto,fotostudio,gogo,gogos,gogo'S,kunst,minolta,dimage 7,panoramen,stitch,stitching,sch&ouml;nheiten,frauen,maenner,m&auml;nner,hintergrund,beleuchtung,lars,weber,lars weber">
<meta name="Description" content="Lars Weber IFIDI - Bildergallerie von Partyfotos &uuml;ber Impressionen, Portraits, Akte, Natur und Produktfotos">
<meta name="Page-topic" content="Lars Weber IFIDI - Bildergallerie von Partyfotos &uuml;ber Impressionen, Portraits, Akte, Natur und Produktfotos">
<meta name="Audience" content="Alle">
<meta name="Content-language" content="DE">
<meta name="Page-type" content="Private Homepage">
<meta name="Robots" content="INDEX,FOLLOW">
<title>IFIDI.de - Fotos und mehr... Events - Parties - Partypeople - Impressionen - Fashion - Styling - Fotos - Bodensee</title>
<link href="css/struct.css" rel="stylesheet" type="text/css" />
 
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="/javascript/navigate3.js" type="text/javascript"></script>
<script src="/javascript/mailbox2.js" type="text/javascript"></script>
<script src="/javascript/bbcode2.js" type="text/javascript"></script>
<script src="/javascript/comments2.js" type="text/javascript"></script>
</head>
 
<body>
 <div id="main_frame">
  <div id="center_frame">
    [B]<div id="seitenkopf">[/B]
 
            <div id="banner">
                <!-- begin ad tag -->
                    <script language="JavaScript" type="text/javascript">
                        ord=Math.random()*10000000000000000;
                        document.write('<script language="JavaScript" src="http://ad.de.doubleclick.net/adj/10063.de-ifidi.de/DE-Fullsize;kw=;sz=468x60;ord=' + ord + '?" type="text/javascript"></scr' + 'ipt>');
                    </script><noscript><a href="http://ad.de.doubleclick.net/jump/10063.de-ifidi.de/DE-Fullsize;kw=;sz=468x60;ord=123456789?" target="_blank"><img src="http://ad.de.doubleclick.net/ad/10063.de-ifidi.de/DE-Fullsize;kw=;sz=468x60;ord=123456789?" width="468" height="60" border="0" alt=""></a></noscript>
                <!-- End ad tag -->
            </div>
            <div style="clear:both"></div>
        </div>
        <div id="hauptnavigation">
 
         <div class="hauptnavigation-off"><a href="/?section=home&s=&u=">Home</a></div>
         <div class="hauptnavigation-off"><a href="/?section=pictures&s=&u=">Fotos</a></div>
         <div class="hauptnavigation-off"><a href="/?section=partynews&s=&u=">Kalender</a></div>
         <div class="hauptnavigation-hi">Community</div>
         <div class="hauptnavigation-off"><a href="/?section=market&s=&u=">Marktplatz</a></div>
         <div class="hauptnavigation-off"><a href="/?section=interactive&s=&u=">Interaktiv</a></div>
 
         <div id="suche">
            <form method="post" ACTION="?section=interactive&action=showSearch&u=&s=">
                <input name="searchString" type="text" class="suche" style="float:left" value=" IFIDI Schnellsuche" onBlur="if(this.value=='') this.value=' IFIDI Schnellsuche';" onFocus="if(this.value==' IFIDI Schnellsuche') this.value='';" />&nbsp;
                <INPUT TYPE="image" SRC="http://www.tutorials.de/forum/images/btn-suchen.gif" width="18" height="18" BORDER="0" ALT="suchen...">
                <input type="hidden" name="section" value="interactive">
                <input type="hidden" name="action" value="showSearch">
                <input type="hidden" name="s" value="">
                <input type="hidden" name="u" value="">
            </form>
 
            </div>
         </div>
        
        <div id="hauptnavigation-ebene2" style="clear:left; padding-left:40px" class="hauptnavigation-ebene2-off">&nbsp;</div>
 
<div id="content">
 
<div id="linke-spalte" style="float:left">
            
            <div id="linke-spalte-kopf"></div>
            <div id="linke-spalte-mitte">
                <div id="box-menue-links">
                    <div id="box-benutzer-kopf">Benutzer</div>
 
                    <div id="box-benutzer-mitte" style="padding:8px 0px 0px 14px" class="menu">
                            <a href="/?section=benutzer&action=showsearch&s=&u=">Benutzer suchen</a><br />
                            <a href="/?section=benutzer&action=showUserImageRefresh&s=&u=">Profilbilder</a><br />
                    </div>
                    <div id="box-benutzer-fuss"></div>
            </div>
            
            <br />
 
            <div id="box-menue-links">
                    <div id="box-menue-links-kopf">Community Login</div>
                    <div id="box-menue-links-mitte" style="padding:8px 0px 0px 14px" class="menu">
                            <form method="post">
                                <div>Nickname oder E-Mail:</div>
                                <div><input type="text" style="width:160px;" name="Ident"></div>
                                <div>Passwort:</div>
 
                                <div><input type="password" style="width:160px;" name="Password"></div>
                                <br/>
                                <input type="submit" value="Login" class="button" style="width:163px;">
                                <input type="hidden" name="section" value="community">
                                <input type="hidden" name="action" value="dologin">
                            </form>
                            <br/>
                            <a href="?section=community&action=showregister">Kostenlos registrieren</a></br/>
 
                            <a href="?section=community&action=showlostpassword">Passwort vergessen</a>
                    </div>
                    <div id="box-menue-links-fuss"></div>
            </div>
                
            </div>
 
            <div id="linke-spalte-fuss"></div>
 
        </div>
 
<div id="mittlere-spalte" style="float:left">
            <div id="mittlere-spalte-kopf"></div>
            <div id="mittlere-spalte-mitte">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" class="text">
                    <tr>
                        <td class="headline" style="padding:0px 0px 0px 15px"><b>Community</b></td>
                    </tr>
                    <tr>
                        <td style="padding:15px 15px 0px 15px; border-bottom:0px solid #E4E4E4">    
                            Wilkommen im Community-Bereich von ifidi.de<br/><br/>
 
                            Du kannst Dich hier kostenlos registrieren, um alle Funktionen der Seite nutzen zu k&ouml;nnen.<br/><br/>
                            Darunter ist z.B. das Mail-System mit dessen Hilfe Du anderen Benutzer Mails schreiben kannst oder auch das Kommentar-System, welches Dir erlaubt, zu verfassten News Kommentare zu schreiben.<br/><br/>
                            &Uuml;berzeugt? Dann kannst Du Dich <a href="/?section=community&action=showregister">hier</a> anmelden!<br/>
                        </td>
                    </tr>
 
                    </table>
                </div>
            <div id="mittlere-spalte-fuss"></div>
        </div>
 
        <div id="rechte-spalte" style="float:left">
            <div id="rechte-spalte-kopf"></div>
            <div id="rechte-spalte-mitte">
                <img src="http://www.tutorials.de/forum/images/head-newsdesmonats.gif" alt="News des Monats" /><br />
 
                <a href="/?section=partynews&action=showdetails&newsid=1376&s=&u=">
<img src="http://www.tutorials.de/forum/images/partyNews/banner/Banner_2007-06-06_1376_club-hugos_1205314619.jpg" width="160px" height="600px" border="0" border="0" alt="">
</a><br />
            </div>
            <div id="rechte-spalte-fuss"></div>
        </div>
    </div>
    <p style="clear:both"></p>
    <div id="seitenfuss" class="text">Copyright &copy; 2004&ndash;2007 www.ifidi.de<br />
 
            <a href="/?section=kontakt&action=showimprint&s=&u=">Impressum</a> &nbsp;|&nbsp; <a href="/?section=kontakt&action=&s=&u=">Kontakt</a></div>
  </div>
 </div>
</body>
</html>
    Geändert von MirakFH (02.06.07 um 20:08 Uhr)
     
  8. 02.06.07 20:07 #8
    Maik Tutorials.de Gastzugang
    Nein, du hattest es nicht so, denn durch die Positionsangabe left:0 wird das DIV am linken Fensterrand positioniert.

    Wenn du die beiden Ebenen übereinander legen / positionieren willst, dann pack sie in ein umschliessendes DIV und zentriere es auf meine vorgeschlagene Weise.
     
  9. 02.06.07 20:13 #9
    MirakFH MirakFH ist offline Mitglied Silber
    Registriert seit
    Jul 2004
    Beiträge
    64
    Hatte deins aber auch kopiert und es ging nicht. Ich versuche jetzt mal den Code so lange auseinander zu nehmen bis nur noch mein relevater Teil da ist.

    Vielen Dank
     
  10. 02.06.07 20:15 #10
    Maik Tutorials.de Gastzugang
    Dann schau dir das hier mal an:

    Code :
    1
2
3
4

    <div id="layout" style="width:1024px;position:relative;margin:0 auto;background:yellow;">
        <div id="Layer1" style="position:absolute; width:979px; height:129px; z-index:2;left: 0px; top: 0px; background-image:url(img/1.jpg); background-repeat:no-repeat;text-align:left;">layer 1</div>
        <div id="Layer2" style="position:relative; width:100%; height:129px; z-index:1;left: 0px; top: 0px; background-image:url(img/2.jpg);text-align:left;">layer 2</div>
</div>
    Beim nächsten mal poste bitte gleich zu Beginn den Quellcode, um den es geht, und ändere bzw. korrigiere deine Beiträge nicht immer, nachdem ich dir geantwortet habe, denn von deinem zuletzt nachträglich reingesetzten Quellcode war hier bislang nicht die Rede.
     
« Navi Box in IE positionieren | div zentrieren mit: "margin:0px auto;" im IE6 »

Ähnliche Themen

  1. Frage zur Größe eines Bildes bei 800/600 mit verschiedenen Auflösungen
    Von Black-Sniper im Forum Photoshop
    Antworten: 10
    Letzter Beitrag: 15.07.07, 14:50
  2. Probleme mit Layern in verschiedenen Auflösungen?
    Von soyo im Forum CSS
    Antworten: 5
    Letzter Beitrag: 05.12.06, 11:17
  3. 2 monitore: 2 Grafikkarten - gleiche auflösungen?
    Von keon im Forum Videoschnitt, Videotechnik & -produktion
    Antworten: 1
    Letzter Beitrag: 20.07.05, 12:23
  4. Problem bei verschiedenen Auflösungen
    Von jogisarge im Forum CSS
    Antworten: 2
    Letzter Beitrag: 16.03.05, 08:42
  5. Anzeige bei verschiedenen Auflösungen
    Von texcon im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 06.09.02, 19:35