XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars! (http://xhtmlforum.de/showthread.php?t=52409)

Mavarik 25.06.2008 10:50

Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars!
 
Hallo Zusammen!

Nachdem ich eigentlich immer – wegen den Problemen – Layouts mit Tabellen erstellt habe, möchte ich auf CSS umstellen.

Leider mußte ich feststellen, dass egal welche Hacks und welche Tricks ich anwende, NIE das gewünschte Seitenverhalten zu erstellen war.

Ich will auch überhaupt keine Diskussion starten ob CSS oder Tabellen besser sind oder welcher Browser schlecht und welcher gut ist.

Aufgabenstellung ist ein Layout mit:

Header width:100%, height:179px
Kontentbereich mit Leftmenü Width:200px, Height 100% (wobei hier die 100% Browserfenster, abzüglich header und footer ist.
Footer width 100%, height:25px

Soweit so gut.

Wenn ich einen DIV Container für den Kontentbereich erzeugen mit height:100% und vorher html,body height:100% gesetzt habe, erhalte ich immer eine vertikale scrollleiste die in der Höhe des Headers ist und unter dem Footer ist auch noch der Inhalt des Kontentbereiches…

Oder

Firefox stellt das Menue nicht mit 100% da und es fehlt somit der Hintergrund. (Immer vorausgesetzt der Kontent ist kurz und schiebt nicht sowieso den Footer bis unten)

Hat jemand eine Idee wie ich das hinkriege?

Beispiel : www.delphiprofi.de oder nordic-and-more.de

Grüße Frank :icon_cry:

Natürlich funktioniert das ganze im IE & Firefox ohne DOC-Type und mit Tabellen! :oops:

sjBlack 25.06.2008 11:55

gibste die hintergrundfarbe/hintergrundgrafik body oder html, wirds auf die leinwand projeziert, brauchste die 100% height nimmer.

wow, du brauchst nen 100% width divider. was muss man tun, damit nen div vollstmögliche breite annimt? mal überlegen... nix ;) automatische breite von divs im normal flow bezieht sich auf extend to shrank, nimmt volle breite ein. also bloß die gewünsche höhe und de hintergrundgrafik (den banner)

Zitat:

Wenn ich einen DIV Container für den Kontentbereich erzeugen mit height:100% und vorher html,body height:100% gesetzt
brauchst du einen content bereich?

Zitat:

mit height:100% und vorher html,body height:100% gesetzt habe, erhalte ich immer eine vertikale scrollleiste die in der Höhe des Headers ist und unter dem Footer ist auch noch der Inhalt des Kontentbereiches…
ja, wegen dem boxmodell. außenabstände und innenabstände werden einem block dazugerechnet. dann schießt das ganze ausm viewport.

wenn du realvnc hast und skype, kann ich ja mal remote vorbeischaun.

Mavarik 25.06.2008 12:05

Zitat:

Zitat von sjBlack (Beitrag 391286)
wow, du brauchst nen 100% width divider. was muss man tun, damit nen div vollstmögliche breite annimt? mal überlegen... nix ;) automatische breite von divs im normal flow bezieht sich auf extend to shrank, nimmt volle breite ein. also bloß die gewünsche höhe und de hintergrundgrafik (den banner)

width? um die Width geht es doch gar nicht, sonder um die height!
Zitat:

Zitat von sjBlack (Beitrag 391286)
brauchst du einen content bereich?

hmm.. Logisch...(Also ich bezeichne als content das was als Inhalt auf die Seite kommt, mal abgesehen davon, dass ich ASP.NET Seiten 2.0 erstelle und das Layout in der Masterseite ist und der Content in den einzelnen...

Zitat:

Zitat von sjBlack (Beitrag 391286)
wenn du realvnc hast und skype, kann ich ja mal remote vorbeischaun.

Skype ginge.. (Danke für das Angebot)

Grüsse Mavarik66 ;)

sjBlack 25.06.2008 12:32

ehrlich gesagt bin ich gerade zu müde, um zu verstehen, was genau du erreichen willst. sowas ähnliches wie auf meiner seite? - simpleml.bplaced.net - xhtml und css tutorials, artikel, video tutorials, referenzen und nachschlagwerke

paar divs und das wars, kannste im stylesheet abgucken.

Zitat:

Skype ginge.. (Danke für das Angebot)
ja doll, nur was bringt's ohne remote desktop. naja, wenn du linux user bist wirds eh nix mit'm rdp

sjBlack 25.06.2008 12:35

// edit
falscher topic. pls delete - diesen post selbstverständlich

Mavarik 25.06.2008 12:45

[QUOTE=sjBlack;391293]ehrlich gesagt bin ich gerade zu müde, um zu verstehen, was genau du erreichen willst. sowas ähnliches wie auf meiner seite?[/url]

Nein so wie das Layout, welches ich zur Zeit mit Tabellen mache!

Zitat:

Zitat von sjBlack (Beitrag 391293)
ja doll, nur was bringt's ohne remote desktop. naja, wenn du linux user bist wirds eh nix mit'm rdp

Nein.. nicht *nix Vista...

Habe dich in meinem MSN Messenger eingetragen!

Hiernochmal meine Tests

So sollte es aussehen, jedoch kein content unter footer und ohne Scrollleisten
Scolleisten und footer zu tief
Scolleisten und footer zu tief ohne Positionierungsangaben

Grüsse Frank

Mavarik 27.06.2008 11:29

Zitat:

Zitat von sjBlack (Beitrag 391293)
paar divs und das wars, kannste im stylesheet abgucken.

Hast Du eine Lösung für mein Problem, oder gibt es da keine?

Grüsse Frank:roll:

Mavarik 21.07.2008 20:40

Header - Leftmenue, Kontent 100% - footer CSS und keine Scrollbars!
 
Push!:mrgreen:

Hallo! Keine Idee wie das geht?

Grüsse Frank

burnZ 26.07.2008 18:11

DIV bis GANZ untent
 
ICH BIN DUMM DAS SOLLTE EIN NEUER THREAD WERDEN BITTE LÖSCHEN :(

Hallöchen Leute,

muss doch nochmal im Hilfe bitten hab wirklich versucht zu suchen aber ich denke ich suche nur falsch kann mir nicht vorstellen das die Frage noch nie gefallen ist eher im Gegenteil ^^

Alsooo ich hab ein "Submenu" DIV und dein "Content" Div nebeneinander, das ganze ist verschachtelt in andere DIVs, html/body 100% Höhe der Wrapper ebenfalls. Dachte ich könnte mit relative/absolute arbeiten um zu erreichen was ich will. Und zwar sollen die besagten DIVs von unter dem Banner bis GANZ unten gehen also bis zum Ende des dynamischen Contents, und nicht nur bis zum Bottom des Browserinhalts, was wohl durch bottom: 0px; passiert. Ich hab das auch irgendwo schonmal ziemlich easy hinbekommen bin ich mir sicher aber ich finds einfach nicht mehr...

Aber trotzdem dank des Forums bin ich schon viel frischer in Sachen CSS/DIV statt Table Design ;) Danke an der Stelle dafür!

Ich poste einfach mal HTML sowie CSS, Backgrounds könnt ihr ja durch Farben ersetzen...

Code:

@charset "utf-8";
/*******************************************************************
        JPH-DEV.NET 1.0.0.0 2008
                MAIN STYLESHEET FILE
********************************************************************/

*
{
        margin        : 0px;
        padding        : 0px;
}

html, body
{
        width                : 100%;
        height                : 100%;
        background        : #000000;
}

#root
{
        position: relative;
        width        : 100%;
        height        : 100%;
}

#root .page
{
        position        : relative;
        width                : 1000px;
        height                : 100%;
        margin-left        : auto;
        margin-right: auto;
}

#root .banner
{
        background: url( "../images/banner.jpg" );
        width          : 1000px;
        height          : 90px;
}

#submenu
{
        position                        : absolute;
        background-repeat        : repeat-y;
        width                                : 228px;
        top                                        : 90px;
        bottom                                : 0px;
        left                                : 0px;
        background-image        : url(../images/submenu_repeat.jpg);
        background-position : 0px 33px;
}

#submenu .begin
{
        position                        : absolute;
        background                        : url( "../images/submenu_begin.jpg" );
        width                                : 228px;
        height                                : 33px;
        top                                        : 0px;
        left                                : 0px;       
        z-index                                : 0;
}

#submenu .container
{
        position: absolute;
        width        : 228px;
        height        : auto;
        z-index : 10;
        top                : 0px;
        left        : 0px;       
}

#submenu .normal
{
        background        : url( "../images/submenu_normal.jpg" );
        width                : 184px;
        height                : 21px;
        margin-top  : 2px;
        padding-left: 40px;
        padding-top        : 7px;
}

#submenu .active
{
        background        : url( "../images/submenu_active.jpg" );
        width                : 184px;
        height                : 21px;
        margin-top  : 2px;
        padding-left: 40px;
        padding-top        : 7px;
        font-family        : Arial, Helvetica, sans-serif;
        font-size        : 12px;
        color                : #FFFFFF;
}

#submenu .normal a
{
        font-family                : Arial, Helvetica, sans-serif;
        font-size                : 12px;
        color                        : #999999;
        text-decoration        : none;
}

#content
{
        background        : url( "../images/content_repeat.jpg" );       
        width                : 772px;
        position        : absolute;
        top                        : 90px;
        bottom                : 0px;
        left                : 228px;
}

#content .begin
{
        background        : url( "../images/content_begin.jpg" );       
        width                : 772px;
        height                : 103px;
        position        : absolute;
        top                        : 0px;
        left                : 0px;
        z-index                : 0;
}

#content .end
{
        background        : url( "../images/content_end.jpg" );       
        width                : 772px;
        height                : 417px;
        position        : absolute;
        bottom                : 0px;
        left                : 0px;
        z-index                : 0;
}

#content .content
{
        position: absolute;
        width        : 752px;
        bottom        : 10px;
        left        : 10px;
        right        : 10px;
        top                : 10px;
        z-index : 10;
}

Code:

<!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=utf-8" />
<title>JPH-DEV.NET MAIN TEMPLATE</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="root">
            <div class="page">
                <div class="banner"></div>
            <div id="submenu">
                    <div class="begin"></div>
                <div class="container">
                        <div class="normal"><a href="#">About Me</a></div>
                    <div class="active">About You</div>
                        <div class="normal"><a href="#">About Me</a></div>
                    <div class="active">About You</div>
                </div>
            </div>
            <div id="content">
                    <div class="begin"></div>
                <div class="end"></div>
                <div class="content">
                Nachdem Latein ursprünglich in Rom und der umliegenden Region (Latium) gesprochen worden war, verbreitete es sich nach und nach in den von Rom eroberten Gebieten. Neben Griechisch war Latein die Amtssprache des römischen Reiches. Dabei blieb die lateinische Hochsprache seit augusteischer Zeit (um Christi Geburt) in Syntax und Grammatik (ungeachtet stilistischer Veränderungen) weitgehend unverändert, während sich das gesprochene Vulgärlatein von einer flektierenden zu einer stärker analytischen Sprache weiter entwickelte. Der deutsche Altphilologe Wilfried Stroh zieht daraus den Schluss, dass das hochsprachliche Latein bereits seit dem 1. Jahrhundert n. Chr. faktisch eine tote Sprache war[1]. Wegen der kulturellen Überlegenheit des Ostens verlor das Lateinische zeitweise in Nordafrika und selbst in Rom in bestimmten Zusammenhängen seine Vorrangstellung. So war die Liturgiesprache der römischen Christen bis um 200 das Griechische. In dieser Zeit flossen zahlreiche griechische Lehnwörter ins Lateinische ein (hierbei war besonders der Einfluss Tertullians entscheidend). Insgesamt betrachtet war Latein aber seit dem 1. Jahrhundert die lingua franca der westlichen Reichshälfte und verdrängte vielfach die vorrömischen Sprachen.

Während der Spätantike (seit ca. 300) begannen sich verschiedene Volkssprachen und Mundarten phonetisch und grammatikalisch immer stärker von der lateinischen Hochsprache wegzuentwickeln. Diese auf dem Vulgärlatein basierenden regionalen Dialekte leben heute in den verschiedenen romanischen Sprachen fort. Obwohl das Hochlateinische in der ausgehenden Spätantike bzw. im frühen Mittelalter nicht mehr gesprochen wurde, entstanden noch im 6. Jahrhundert Werke in klassischem Latein (Boethius, Corippus). Noch Papst Gregor der Große ging um 600 davon aus, dass seine auf Latein verfassten Predigten vom einfachen Volk verstanden würden; alles spricht dafür, dass erst im späten 8. Jahrhundert Latein und die romanischen Volkssprachen als unterschiedliche Sprachen wahrgenommen wurden: Als epochales Datum gilt oft das Konzil von Tours im Jahr 813, auf dem beschlossen wurde, fortan Predigten in den „Volkssprachen“ zuzulassen, da die Gläubigen kein Latein mehr verstünden.

Im Oströmischen Reich war Latein bis ins frühe 7. Jahrhundert neben Griechisch eine der beiden offiziellen Amtssprachen. Danach wurde es in Byzanz nur noch von sehr wenigen Gelehrten verstanden.

Im Westen übernahmen die Germanen mit den Grundelementen der spätrömischen Verwaltung auch die lateinische Sprache, die in der Verwaltung bis in die frühe Neuzeit vorherrschend blieb. Seit der Völkerwanderung und Christianisierung der (zunächst zumeist arianischen) Germanenvölker wurde Latein im Westen des früheren Römischen Reiches und in den römisch-katholischen Folgestaaten Sprache des Klerus (Kirchenlatein), der Rechtswissenschaft (Glossatoren) und der sich bildenden Hochschulen (studia generalia) verwendet. Latein bildete somit die Schriftsprache, vor allem für das kirchliche und weltliche Urkundenwesen (Diplomatik) im frühen Europa.

In völkerrechtlichen Verträgen (z. B. im Westfälischen Frieden von 1648) dominierte Latein bis in das 17. Jahrhundert hinein. Es bildet noch bis ins 20. Jahrhundert den Affixvorrat für die Terminologie in den Wissenschaften und verliert durch die fortschreitende Absorption in die englische und andere Sprachen lediglich an direkter, nicht jedoch an indirekter Bedeutung. Es wird an vielen Schulen unterrichtet.

                Nachdem Latein ursprünglich in Rom und der umliegenden Region (Latium) gesprochen worden war, verbreitete es sich nach und nach in den von Rom eroberten Gebieten. Neben Griechisch war Latein die Amtssprache des römischen Reiches. Dabei blieb die lateinische Hochsprache seit augusteischer Zeit (um Christi Geburt) in Syntax und Grammatik (ungeachtet stilistischer Veränderungen) weitgehend unverändert, während sich das gesprochene Vulgärlatein von einer flektierenden zu einer stärker analytischen Sprache weiter entwickelte. Der deutsche Altphilologe Wilfried Stroh zieht daraus den Schluss, dass das hochsprachliche Latein bereits seit dem 1. Jahrhundert n. Chr. faktisch eine tote Sprache war[1]. Wegen der kulturellen Überlegenheit des Ostens verlor das Lateinische zeitweise in Nordafrika und selbst in Rom in bestimmten Zusammenhängen seine Vorrangstellung. So war die Liturgiesprache der römischen Christen bis um 200 das Griechische. In dieser Zeit flossen zahlreiche griechische Lehnwörter ins Lateinische ein (hierbei war besonders der Einfluss Tertullians entscheidend). Insgesamt betrachtet war Latein aber seit dem 1. Jahrhundert die lingua franca der westlichen Reichshälfte und verdrängte vielfach die vorrömischen Sprachen.

Während der Spätantike (seit ca. 300) begannen sich verschiedene Volkssprachen und Mundarten phonetisch und grammatikalisch immer stärker von der lateinischen Hochsprache wegzuentwickeln. Diese auf dem Vulgärlatein basierenden regionalen Dialekte leben heute in den verschiedenen romanischen Sprachen fort. Obwohl das Hochlateinische in der ausgehenden Spätantike bzw. im frühen Mittelalter nicht mehr gesprochen wurde, entstanden noch im 6. Jahrhundert Werke in klassischem Latein (Boethius, Corippus). Noch Papst Gregor der Große ging um 600 davon aus, dass seine auf Latein verfassten Predigten vom einfachen Volk verstanden würden; alles spricht dafür, dass erst im späten 8. Jahrhundert Latein und die romanischen Volkssprachen als unterschiedliche Sprachen wahrgenommen wurden: Als epochales Datum gilt oft das Konzil von Tours im Jahr 813, auf dem beschlossen wurde, fortan Predigten in den „Volkssprachen“ zuzulassen, da die Gläubigen kein Latein mehr verstünden.

Im Oströmischen Reich war Latein bis ins frühe 7. Jahrhundert neben Griechisch eine der beiden offiziellen Amtssprachen. Danach wurde es in Byzanz nur noch von sehr wenigen Gelehrten verstanden.

Im Westen übernahmen die Germanen mit den Grundelementen der spätrömischen Verwaltung auch die lateinische Sprache, die in der Verwaltung bis in die frühe Neuzeit vorherrschend blieb. Seit der Völkerwanderung und Christianisierung der (zunächst zumeist arianischen) Germanenvölker wurde Latein im Westen des früheren Römischen Reiches und in den römisch-katholischen Folgestaaten Sprache des Klerus (Kirchenlatein), der Rechtswissenschaft (Glossatoren) und der sich bildenden Hochschulen (studia generalia) verwendet. Latein bildete somit die Schriftsprache, vor allem für das kirchliche und weltliche Urkundenwesen (Diplomatik) im frühen Europa.

In völkerrechtlichen Verträgen (z. B. im Westfälischen Frieden von 1648) dominierte Latein bis in das 17. Jahrhundert hinein. Es bildet noch bis ins 20. Jahrhundert den Affixvorrat für die Terminologie in den Wissenschaften und verliert durch die fortschreitende Absorption in die englische und andere Sprachen lediglich an direkter, nicht jedoch an indirekter Bedeutung. Es wird an vielen Schulen unterrichtet.
                </div>
            </div>
        </div>
    </div>
</body>
</html>



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

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023