zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit dreispaltigem Layout mit Hintergrundmuster und Footer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.07.2007, 18:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.07.2007
Beiträge: 2
G321 befindet sich auf einem aufstrebenden Ast
Standard Problem mit dreispaltigem Layout mit Hintergrundmuster und Footer

Hallo

Ich will ein dreispaltiges Layout mit Header mit Logo und Hauptmenu und Footer erstellen. wobei das Logo etwas breiter ist als der Rest der Seite.

Ich bekomme es einfach nicht richtig hin, und habe das Problem mal online gestellt: TEST

den gelben Rahmen um div#container dient zur Veranschaulichung - die drei Spalten sollen sich innerhalb des containers befinden und der container soll mindestens bis zum Seitenende gehen und unten den Footer haben.

bitte um Tipps zur Problemlösung - ich bin zu doof

PHP-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=iso-8859-1" />
<
title>TEST</title>
<
link rel="stylesheet" href="css.css" type="text/css" />
</
head>

<
body>
 
<
div id='page'>
    <
div id='logo'>LOGO</div>
    <
div id='mainmenu'>Mainmenu</div
    <
div id='container'>
            <
div id='leftcol'>links</div>
            <
div id='maincol'>Mitte</div>
            <
div id='rightcol'>RECHTS</div>
    </
div
    <
div id='footer'>Footer 1</div
</
div>

</
body>
</
html
CSS
PHP-Code:
* {
    
margin0;
    
padding0;
    
font-familyArialHelveticasans-serif;
}
html {
    
text-align:center;
    
height100%;
}

body {
    
text-aligncenter/* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
    
background-color:#981302;
    
height100%;
}

#page {
    
width862px;
    
margin:0 auto;
      
positionrelative;
      
min-height100%;
    
height:auto !important;/* moderne Browser */
    
height:100%; /* IE */
    
background-image:url(images/bg-muster_da.jpg);
    
border1px solid #FFFFFF;
}

div#container {
    
width800px;
    
min-height100%;
    
height:auto !important;/* moderne Browser */
    
height:100%; /* IE */
    
margin0 auto;
    
border1px solid #FFFF00;
}

div#logo {
    
position:relative;
    
width862;
    
height100px;
    
margin:0 auto;
    
background-color:#FFFFFF;
}

div#mainmenu {
    
position:relative;
    
width798px;                    
    
height116px;                    
    
margin:0 auto;
    
background-color:#ffc201;
    
border1px solid #FFFFFF;
}

div#leftcol, div#maincol, div#rightcol {
    
floatleft;
    
position:relative;
    
width154px;                    
    
border1px solid #FFFFFF;
    
margin-top10px;
}

div#maincol {
    
width466px;                     
    
margin10px 10px 0px 10px;
}

#footer {
    
clear:left;
    
positionabsolute;
    
width798px;
    
height20px;
    
border1px solid #FFFFFF;
    
border-bottom-color#670011;
    
background-color#670011;
    
margin:0 auto;

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.07.2007, 19:48
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.845
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Schau mal in den FAQ nach Footer Stick Alt.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.07.2007, 00:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.07.2007
Beiträge: 2
G321 befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für den Tipp, der Footer ist jetzt da wo er hingehört, jedoch habe ich mir jetzt ein neues Problem ein gehandelt, und zwar cleare ich die floats nicht richtig, kann aber den Fehler nicht finden - dahabe ich noch ein verständnis Problem wo das clearing hin muss damit der Hintergrung von Page "mitwächst": Kann mir bitte noch mal jemand auf die Sprünge helfen??!

link: TEST

PHP-Code:
<head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>TEST</title>
<
link rel="stylesheet" href="css.css" type="text/css" />
</
head>

<
body
 
<
div id='page'>
    <
div id="nonFooter">
        <
div id='logo'>LOuGO</div>
        <
div id='mainmenu'>Mainmenu</div
        <
div id='leftcol'>links</div
        <
div id='maincol'>
        
Lorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiLorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assumLorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiLorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commod
 
Lorem ipsum dolor sit amet
consectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiLorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiNam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assumLorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequatDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequatvel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisiLorem ipsum dolor sit ametconsectetuer adipiscing elitsed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpatUt wisi enim ad minim veniamquis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commod
         
         
</div>
        
        <
div id='rightcol'>RECHTS</div>

    </
div>
    <
div class="clearer">
</
div>
    
    <
div id='footer'>footer</div>      
 

</
body>
</
html
CSS
PHP-Code:
* {
    
margin0;
    
padding0;
    
font-familyArialHelveticasans-serif;
}

htmlbody {
     
height100%; /* wichtig */
    
background-color:#981302;
    
text-align:center;
}

#page {
    
position:relativ;
    
width862px;
    
margin:0 auto;
      
min-height100%;
    
/*height:auto !important; moderne Browser */
    
height:100%; /* IE */
    
background-image:url(images/bg-muster_da.jpg);


}

div#container {
    
width800px;
    
min-height100%;
    
height:auto !important;/* moderne Browser */
    
height:100%; /* IE */
    
margin0 auto;
    
border1px solid #FFFF00;
}

div#logo {
    
position:relative;
    
width862;
    
height100px;
    
margin:0 auto;
    
background-color:#FFFFFF;
}

div#mainmenu {
    
position:relative;
    
width798px;                    
    
height116px;                    
    
margin:0 auto;
    
background-color:#ffc201;
    
border1px solid #FFFFFF;

}

div#leftcol, div#maincol, div#rightcol {
    
floatleft;
    
position:relative;
    
width154px;                    
    
border1px solid #FFFFFF;
    
margin-top10px;
    
left32px;
    
background-color:#FFFFFF;
    
     
min-height:300px;

    
height:auto !important;  /* für moderne Browser */

    
height:300px;  /*für den IE */
}

div#maincol {
    
width466px;                     
    
margin10px 10px 0px 10px;
}


#nonFooter
    
{
        
positionrelative;
        
min-height100%;
        
margin-bottom30px;
    }

    * 
html #nonFooter
    
{
        
height100%;
    }

    
#footer
    
{
        
positionrelative;
        
margin: -22px auto 0 auto;
        
width798px;
    
height20px;
    
border1px solid #FFFFFF;
    
border-bottom-color#670011;
    
background-color#670011;
    
}

    
/* A CSS hack that only applies to IE -- specifies a different height for the footer */

    
html #footer
    
{
        
margin-top: -22px;
    }
    
.
clearer
{
    
clearboth;
    
displayblock;
    
height1px;
    
margin-bottom: -1px;
    
font-size1px;
    
line-height1px;

Mit Zitat antworten
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
fixed footer - problem mit absolut positioniertem div AudioX CSS 2 02.03.2009 07:38
css problem mit footer satriani CSS 34 18.12.2007 15:39
Problem mit Footer ans Ende kvn CSS 7 29.11.2007 23:23
Layout größen Problem powerpika CSS 2 19.10.2006 09:31
Problem mit mehrspaltigem Layout RalfEggert CSS 2 05.04.2004 16:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:16 Uhr.