zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden <div> - Elemente und Scrollbalken / <div> - Elemente durch Inhalt verschiebbar

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2008, 10:42
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard <div> - Elemente und Scrollbalken / <div> - Elemente durch Inhalt verschiebbar

Gegeben ist diese Seite: test

Das Layout steht so weit, wie ich mir das vorstelle. Oben ein Header, darunter der Content-Bereich mit einem Menü linksseitig und dem eigentlichen Content rechtsseitig.
Unten dann ein Footer mit Kontaktdaten.

Im Mittelbereich liegen jeweils noch zwei <div>s mit einem Verlauf in die Farben von Header und Footer.

Nun habe ich noch zwei Probleme: Das erste ist, dass Header und Footer nicht scrollbar sein sollen. Allerdings hat overflow:auto nicht das gewünschte Resultat gebracht. Muss ich das in jeden <div> einbauen oder reicht eine globale Definition?

Das zweite Problem ist, dass die unteren <div>s, also der untere Verlauf und der Footer zwar schön am Ende der Seite kleben, aber eben auch da bleiben, trotz längerem Content. Vielleicht löst sich das Problem ja automatisch durch funktionierende Scrollbalken?!
Der untere Verlauf steht auch noch vor dem Content, da er als <div> im html-Code extra steht. Ein z-index: -1; hat die Kontaktdaten gleich mit in den Hintergrund gerückt, obwohl die ja auf jeden Fall im Vordergrund stehen bleiben sollten.

Der CSS-Code:
Code:
/* Text formatieren */
html, body, body.content {
  background-color:     white;
  font-family:          Arial,Verdana,sans-serif;
  font-size:            11pt;
  color:                #eee;
  margin:               0px;
  padding;              0px;
}

h1, h2, h3 {
  font-size:            15pt;
}

table, tr, td {
  color:                #eee;
  font-family:          Arial,Verdana,sans-serif;
  font-size:            10pt;
  margin:               0px;
}


/* Links formatieren */
a, a:link, a:visited {
  color:                #eee;
  text-decoration:      none;
}

a:hover {
  color:                #fff;
  font-weight:          bold;
  text-decoration:      none;
}


/* Menue formatieren */
ul.menu {
  font-family:          Arial,Verdana,sans-serif;
  font-size:            11pt;
  list-style-type:      none;
  margin:               0px;
  padding:              0px; 
  width:                215px; 
  height:               25px;
}

ul.menu a, ul.menu a:visited, ul.menu a:active {
  text-decoration:      none; 
  display:              block;
  width:                215px; 
  height:               25px;
  line-height:          25px;
  text-indent:          5px;
  background:           #025798; 
  color:                #eee; 
  border-bottom:        1px solid #fff; 
}

ul.menu a:hover {
  background:           #1276c3; 
  color:                #fff;
}

/* Verlaufsbilder */

#verlaufoben {
  height:               200px;
  background-image:     url(verlauf_oben.png);
  background-repeat:    repeat-x;
  text-align:           left;
  width:                100%;
}

#verlaufunten {
  height:               200px;
  width:                100%;
  background-image:     url(verlauf_unten.png);
  background-repeat:    repeat-x;
  text-align:           center;
  vertical-align:       middle;
  position:             absolute;
  bottom:               0px;
}

/* Gestaltung des Headers */
#header {
  padding:              0px;
  margin:               0px;
  width:                100%;
  height:               50px; 
  color:                #ccc;
  text-align:           center;
  background-color:     #025798;
}

/* Gestaltung des Mittelteils */
#menu {
  background:           #fff;
  padding:              0px;
  margin:               0px;
  width:                215px;
  border:               1px solid #fff;
  float:                left;
}

#content {
  border:               1px;
  border-color:         #000;
  moz-border-radius:    1px;
  color:                #111;
  width:                50%;
  border:               1px;
  margin:               5px;
  background-color:     #ddd;
  float:                left;
}

/* Gestaltung des Footers */
#footer {
  padding:              0;
  margin:               0;
  border:               none;
  width:                100%;
  bottom:               0 !important;
  bottom:               -1px; /* fuer IE */
  height:               50px;
  position:             absolute;
  color:                #ccc;
  text-align:           center;
  clear:                both;
}

/* Hintergrundgrafik zum Mitwachsen des Menüs */
#wrap {
  background:           #ccc url(pixel_black.gif) repeat-y 20px 0;
}
Der html-Code
Code:
<body>

          <div id="header"></div>

          <div id="verlaufoben">

                 <div id="menu">
                                              Menü
                 </div>

                 <div id="content">
                                              Inhalt
                 </div>

          </div>

          <div id="verlaufunten"></div>

          <div id="footer"></div>

</body>

</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2008, 15:06
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
Das erste ist, dass Header und Footer nicht scrollbar sein sollen. Allerdings hat overflow:auto nicht das gewünschte Resultat gebracht. Muss ich das in jeden <div> einbauen oder reicht eine globale Definition?
Wird so auch nicht gehen. Dafür gibt es position: fixed. Teste das mal in "guten" Browsern.

Aber die IE <7 haben damit Probleme. Es gibt einen Workaround dafür ( google)

Zitat:
Das zweite Problem ist, dass die unteren <div>s, also der untere Verlauf und der Footer zwar schön am Ende der Seite kleben, aber eben auch da bleiben, trotz längerem Content
Das liegt am bisherigen pos. absolute. Aber die fliegen ja raus
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2008, 15:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

Das Problem mit dem unteren Verlauf habe ich mittlerweile gelöst (siehe Link auf die test-Seite). Ich habe ihn in das falsche <div> bzw. in gar keines gesteckt. Somit funktioniert nun alles so, wie es soll. Stellt sich nur noch die Frage, ob man durch das position:fixed, was du angesprochen hast, es hinbekommen würde, dass man nur im content-Bereich scrollen kann?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2008, 15:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

stu nicholls | CSS PLaY | cross browser fixed header/footer/ centred single column layout
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2008, 16:08
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

Danke, der Link wäre genau das, was ich will. Allerdings schmeisst mir das position:absolute; wieder alles durcheinander, wenn ich es einbaue.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2008, 16:12
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Übernimm den Code von dort und passe ihn an.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2008, 16:15
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

Ja, das würde ich dann machen. Das Problem ist, dass ich nicht exakt denselben Seitenaufbau habe, sondern bei mir auch noch die zwei Verläufe mit drin sind. Die wollen dann auch noch mit angepasst werden.
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2008, 16:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Na dann mal frisch ans Werk
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #9 (permalink)  
Alt 13.12.2008, 16:25
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

Mal schauen, ob mir der Aufwand lohnt. Heute werde ich wohl auch nicht mehr dazu kommen, wenn dann vermutlich erst morgen. Ich melde mich dann nochmal, wenn ich den Code umgebaut haben sollte.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 15.12.2008, 21:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.12.2008
Beiträge: 39
scrub befindet sich auf einem aufstrebenden Ast
Standard

Ich hab eine Lösung gefunden, allerdings nur im FF. Im IE 6 produziert es Fehler.

Die Seite: test2

Kann mir jemand sagen, woran es liegt?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 08:39
Problem mit position:relative; McCoRmIcK CSS 0 08.04.2007 16:23
dreispaltiges layout, footer soll immer mitwandern sirrpa CSS 14 24.11.2005 18:57
div box bekomme ich nett zentriert??? Hard@Bowl CSS 1 23.05.2005 11:22
height: 100% beim IE [M.o.C]Co CSS 3 12.05.2005 12:58


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:00 Uhr.