zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Content verschiebt sich Header nicht.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.03.2010, 18:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 12.07.2009
Beiträge: 969
rs-web befindet sich auf einem aufstrebenden Ast
Standard Content verschiebt sich Header nicht.

Hi Leute,
ich habe folgendes Problem:
Ich habe eine Header Grafik und einen Contentbereich. Außerdem habe ich eine Hinweisbox definiert. Wenn die Hinweisbox aktiv ist, dann rutscht der Content nach unten aber nicht der Header. Ich bin nun am Ende mit meinem Latein. Bitte helft mir. Hir mal das Css:
Code:
/*Als erstes wird das Fenster definiert, dass erscheint, wenn man Javascript deaktiviert hat*/
.hinweis {
background-image : url(images/javaaktiv.png);
text-align: center;
width : 1000px;
height : 27px;
font-size : 15px;
margin-top : 0;
color : #fff;
font-weight : bold;
margin : 0 auto;
z-index: 100;
}
.hinweis a {
color : #000;
}
/*Jetzt wird der Bodybereich und der Header definiert*/
body {
margin : 0 auto;
padding : 0;
background-color : #ffffff;
background-image : url('images/hintergrund.jpg');
background-repeat : repeat-x;
background-attachment : scroll;
background-position : left top;
}
#style-main {
position : relative;
width : 100%;
left : 0;
top : 0;
}
#style-site-background-lite {
position : absolute;
width : 100%;
height : 100px;
left : 0;
top: 0;
}

#style-site-background-lite-image {
background-image : url('images/header.png');
background-repeat : no-repeat;
height : 100px;
width : 1000px;
margin : 0 auto;
}

html:first-child #style-site-background-lite {
border : 1px solid transparent;
}

.cleared {
float : none;
clear : both;
margin : 0;
padding : 0;
border : none;
font-size : 1px;
}

.style-way {
position : relative;
z-index : 0;
margin : 0 auto;
width : 1000px;
min-width : 69px;
min-height : 69px;
}
.style-way-body {
position : relative;
z-index : 1;
padding : 36px;
}
.style-way-tr, .style-way-tl, .style-way-br, .style-way-bl, .style-way-tc, .style-way-bc, .style-way-cr, .style-way-cl {
position : absolute;
z-index : -1;
}
.style-way-tr, .style-way-tl, .style-way-br, .style-way-bl {
width : 96px;
height : 96px;
background-image : url('images/ecken.png');
}
.style-way-tl {
top : 0;
left : 0;
clip : rect(auto,48px,48px,auto);
}
.style-way-tr {
top : 0;
right : 0;
clip : rect(auto,auto,48px,48px);
}
.style-way-bl {
bottom : 0;
left : 0;
clip : rect(48px,48px,auto,auto);
}
.style-way-br {
bottom : 0;
right : 0;
clip : rect(48px,auto,auto,48px);
}
.style-way-tc, .style-way-bc {
left : 48px;
right : 48px;
height : 96px;
background-image : url('images/olul.png');
}
.style-way-tc {
top : 0;
clip : rect(auto,auto,48px,auto);
}
.style-way-bc {
bottom : 0;
clip : rect(48px,auto,auto,auto);
}
.style-way-cr, .style-way-cl {
top : 48px;
bottom : 48px;
width : 96px;
background-image : url('images/llrl.png');
}
.style-way-cr {
right : 0;
clip : rect(auto,auto,auto,48px);
}
.style-way-cl {
left : 0;
clip : rect(auto,48px,auto,auto);
}
.style-way-cc {
position : absolute;
z-index : -1;
top : 48px;
left : 48px;
right : 48px;
bottom : 48px;
background-color : #ffffff;
}
.style-way {
margin-top : 135px !important ;
}
#style-site-background-simple-look, #style-site-background-look, #style-site-background-lite {
min-width : 1000px;
}
/*Ende Header und Body*/


/*Nun kommt das Menü*/
.style-menue a, .style-menue a:link, .style-menue a:visited, .style-menue a:hover {
text-align : left;
text-decoration : none;
outline : none;
letter-spacing : normal;
word-spacing : normal;
}
.style-menue, .style-menue ul {
margin : 0;
padding : 0;
border : 0;
list-style-type : none;
display : block;
}
.style-menue li {
margin : 0;
padding : 0;
border : 0;
display : block;
float : left;
position : relative;
z-index : 5;
background : none;
}
.style-menue li:hover {
z-index : 10000;
white-space : normal;
}
.style-menue li li {
float : none;
}
.style-menue ul {
visibility : hidden;
position : absolute;
z-index : 10;
left : 0;
top : 0;
background : none;
}
.style-menue li:hover > ul {
visibility : visible;
top : 100%;
}
.style-menue li li:hover > ul {
top : 0;
left : 100%;
}
.style-menue:after, .style-menue ul:after {
content : ".";
height : 0;
display : block;
visibility : hidden;
overflow : hidden;
clear : both;
}
.style-menue, .style-menue ul {
min-height : 0;
}
.style-menue ul {
background-image : url('images/leer.gif');
padding : 10px 30px 30px 30px;
margin : -10px 0 0 -30px;
}
.style-menue ul ul {
padding : 30px 30px 30px 10px;
margin : -30px 0 0 -10px;
}
.style-menue {
padding : 16px 16px 16px 16px;
}
.style-menuee {
position : relative;
height : 64px;
z-index : 100;
}
.style-menuee .l, .style-menuee .r {
position : absolute;
z-index : -1;
top : 0;
height : 64px;
background-image : url('images/menue.png');
}
.style-menuee .l {
left : 0;
right : 5px;
}
.style-menuee .r {
right : 0;
width : 928px;
clip : rect(auto,auto,auto,923px);
}
.style-menue ul li {
clear : both;
}
.style-menue a {
position : relative;
display : block;
overflow : hidden;
height : 32px;
cursor : pointer;
text-decoration : none;
margin-right : 4px;
margin-left : 4px;
}
.style-menue a .r, .style-menue a .l {
position : absolute;
display : block;
top : 0;
z-index : -1;
height : 96px;
background-image : url('images/menuepunkt.png');
}
.style-menue a .l {
left : 0;
right : 6px;
}
.style-menue a .r {
width : 412px;
right : 0;
clip : rect(auto,auto,auto,406px);
}
.style-menue a .t {
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size : 14px;
font-style : normal;
font-weight : bold;
letter-spacing : -1px;
text-transform : none;
font-variant : small-caps;
color : #ffffff;
padding : 0 16px;
margin : 0 6px;
line-height : 32px;
text-align : center;
}
.style-menue a:hover .l, .style-menue a:hover .r {
top : -32px;
}
.style-menue li:hover > a .l, .style-menue li:hover > a .r {
top : -32px;
}
.style-menue li:hover a .l, .style-menue li:hover a .r {
top : -32px;
}
.style-menue a:hover .t {
color : #e7e9e7;
}
.style-menue li:hover a .t {
color : #e7e9e7;
}
.style-menue li:hover > a .t {
color : #e7e9e7;
}
.style-menue a.active .l, .style-menue a.active .r {
top : -64px;
}
.style-menue a.active .t {
color : #919a8d;
}
.style-menue ul a {
display : block;
text-align : center;
white-space : nowrap;
height : 32px;
width : 180px;
overflow : hidden;
line-height : 32px;
margin-right : auto;
background-image : url('images/untermenue.png');
background-position : left top;
background-repeat : repeat-x;
border-width : 0;
border-style : solid;
}
.style-menuee ul.style-menue ul span, .style-menuee ul.style-menue ul span span {
display : inline;
float : none;
margin : inherit;
padding : inherit;
background-image : none;
text-align : inherit;
text-decoration : inherit;
}
.style-menue ul a, .style-menue ul a:link, .style-menue ul a:visited, .style-menue ul a:hover, .style-menue ul a:active, .style-menuee ul.style-menue ul span, .style-menuee ul.style-menue ul span span {
text-align : left;
text-indent : 12px;
text-decoration : none;
line-height : 32px;
color : #f6f5ee;
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size : 12px;
font-style : normal;
font-weight : bold;
letter-spacing : -1px;
text-transform : uppercase;
}
.style-menue ul ul a {
margin-left : auto;
}
.style-menue ul li a:hover {
color : #f0ede0;
background-position : 0% -32px;
}
.style-menue ul li:hover > a {
color : #f0ede0;
background-position : 0% -32px;
}
.style-menuee .style-menue ul li a:hover span, .style-menuee .style-menue ul li a:hover span span {
color : #f0ede0;
}
.style-menuee .style-menue ul li:hover > a span, .style-menuee .style-menue ul li:hover > a span span {
color : #f0ede0;
}
/*Das Menü ist jetzt zu Ende*/
.style-contentLayout {
position : relative;
margin-bottom : 9px;
width : 928px;
}
.style-messageHeader {
text-decoration : none;
margin : 0.2em 0;
padding : 0;
font-weight : normal;
font-style : normal;
letter-spacing : normal;
word-spacing : normal;
font-variant : normal;
text-decoration : none;
font-variant : normal;
text-transform : none;
text-align : left;
text-indent : 0;
line-height : inherit;
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size : 24px;
font-style : normal;
font-weight : bold;
letter-spacing : -1px;
font-variant : small-caps;
text-align : left;
color : #3e443c;
}
.style-messageHeader a, .style-messageHeader a:link, .style-messageHeader a:visited, .style-messageHeader a:hover {
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size : 24px;
font-style : normal;
font-weight : bold;
letter-spacing : -1px;
font-variant : small-caps;
text-align : left;
margin : 0;
color : #3e443c;
}
.style-messageHeader img {
border : none;
vertical-align : middle;
margin : 0;
}
.style-messageHeader a:link {
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-decoration : none;
text-align : left;
color : #920110;
}
.style-messageHeader a:visited, .style-messageHeader a.visited {
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-decoration : none;
text-align : left;
color : #000000;
}
.style-messageHeader a:hover, .style-messageHeader a.hovered {
font-family : Verdana, Geneva, Arial, Helvetica, Sans-Serif;
text-decoration : none;
text-align : left;
color : #000000;
}
body {
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
font-size : 12px;
font-style : normal;
font-weight : normal;
color : #52594f;
}


a {
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : underline;
color : #920110;
}
a:link {
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : underline;
color : #920110;
}
a:visited, a.visited {
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : underline;
color : #393e37;
}
a:hover, a.hover {
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : none;
color : #000000;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
font-weight : normal;
font-style : normal;
text-decoration : none;
}




/*Hier wird der Footer definiert*/
.style-Footer {
position : relative;
z-index : 0;
overflow : hidden;
width : 928px;
margin : 5px auto 0 auto;
text-decoration : none;
}
.style-Footer .style-Footer-inner {
height : 1%;
position : relative;
z-index : 0;
padding: 20px;
text-align:center;
font-size : 14px;
text-decoration : none;

}
.style-Footer .style-Footer-background {
position : absolute;
z-index : -1;
background-repeat : no-repeat;
background-image : url('images/footer.png');
width : 928px;
height : 50px;
bottom : 0;
left : 0;
}

.style-Footer .style-Footer-text p {
margin : 0;
}
.style-Footer .style-Footer-text {
display : inline-block;
color : #ffffff;
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
padding-left: 20px;
font-size : 14px;
text-decoration : none;
}
.style-Footer .style-Footer-text a:link {
text-decoration : none;
color:#FFF;
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : none;
font-size : 14px;
}
.style-Footer .style-Footer-text a:visited {
text-decoration : none;
color:#FFF;
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : none;
font-size : 14px;
}
.style-Footer .style-Footer-text a:hover {
text-decoration : none;
color : #fdfbf2;
font-family : Tahoma, Arial, Helvetica, Sans-Serif;
text-decoration : none;
font-size : 14px;
}
.style-site-footer {
margin : 1em;
text-align : center;
text-decoration : none;
color : #887a44;
text-decoration : none;
}
#copyright{
	color: #999;
	text-align: center;
	text-decoration:none;
	
}
und der html teil:
HTML-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" xml:lang="de" lang="de" >
 <head>
 <title>Home</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<!--Als erstes prüfen wir, ob Javascript aktiviert ist oder nicht. Wenn es nicht aktiviert ist, wird ein  Hiweis angezeigt es zu aktivieren. Wenn Javascript deaktiviert ist, wird alles was zwischen <noscript> </noscript> steht angezeigt. Wenn es aktiviert ist wird dieser Teil ignoriert.-->
<noscript>
<div class="hinweis">
Bitte aktiviere Javascript, damit du alle Vorteile von Quizpower.de nutzen kannst. Eine Anleitung findest du 
<!--Nun überprüfe ich, welcher Browser benutzt wird, damit javascript.php weis zu was eine Anleitung gegeben werden muss-->
<a href="javascript.php?b=mozilla&v=1.9.2.2"/>hier.</div>
</noscript>
    <div id="style-site-background-look"></div>
<div id="style-site-background-lite">
    <div id="style-site-background-lite-image"></div>
</div>
<div id="style-main">

<div class="style-way">
    <div class="style-way-tl"></div>
    <div class="style-way-tr"></div>

    <div class="style-way-bl"></div>
    <div class="style-way-br"></div>
    <div class="style-way-tc"></div>
    <div class="style-way-bc"></div>
    <div class="style-way-cl"></div>
    <div class="style-way-cr"></div>

    <div class="style-way-cc"></div>
    <div class="style-way-body">

<div class="style-menuee">
	<div class="l"></div>
	<div class="r"></div>
<ul class="style-menue">
<li id="current" class="active item15"><a href="http://.de/" class="active"><span class="l"> </span><span class="r"> </span><span class="t">Home</span></a></li>
<li ><a href="/Meinprofil"><span class="l"> </span><span class="r"> </span><span class="t">Mein Profil</span></a></li>
<li ><a href="/login"><span class="l"> </span><span class="r"> </span><span class="t">punkt 1</span></a></li>

<li ><a href="/FAQ"><span class="l"> </span><span class="r"> </span><span class="t">punkt 3</span></a></li>
<li ><a href="/proxy"><span class="l"> </span><span class="r"> </span><span class="t">punkt 4</span></a></li>
<li ><a href="/Chat"><span class="l"> </span><span class="r"> </span><span class="t">punkt 5</span></a></li>
<span class="l"> </span><span class="r"> </span><span class="t"></span>
<span class="l"> </span><span class="r"> </span><span class="t"></span>

<span class="l"> </span><span class="r"> </span><span class="t"></span></ul>
</div>


<p>Hallo und herzlich willkommen ,</p>
<p>hier kannst du in Kürze viele tolle Spiele spielen Rätseln lösen und vieles mehr. Im Moment steht dir aber schon ein Proxy zur Verfügung. Du benötigst dazu nur einen kostenlosen Account und schon gehts los.</p>
<p>Viel Spaß</p>
<div class="cleared"></div>

<div class="style-Footer">
 <div class="style-Footer-inner">

    <div class="style-Footer-text">
     <a href="impressum.php" />Impressum &nbsp;&#x007C;&nbsp;
     <a href="kontakt.php" />Kontakt &nbsp;&#x007C;&nbsp;
     <a href="haftung.php" />Haftungsausschluss
     </div>
 </div>

 <div class="style-Footer-background"></div>
</div>

		<div class="cleared"></div>
    </div>
</div>
<div class="cleared"></div>
<div id="copyright">&copy; 2010 </div>
</div>

</body> 
</html>
Und noch was:
Der copyright wird rot unterstrichen angezeigt erst beim drüberfahren wird er normal warum?!
Danke schon Mal
LG rs-web

Geändert von rs-web (28.03.2010 um 18:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 29.03.2010, 04:38
Michael Walter
XHTMLforum-Mitglied
 
Registriert seit: 16.02.2010
Ort: Berlin
Beiträge: 237
Walter IT-Services befindet sich auf einem aufstrebenden Ast
Standard

HTML-Code:
#style-site-background-lite {
position : absolute;
width : 100%;
height : 100px;
left : 0;
top: 0;
}
Damit wird das immer ganz oben positioniert.
Brauchst du doch gar nicht, wenn ich das richtig sehe.
Nimm es einfach raus Oo
__________________
Walter IT-Services
Michael Walter

http://www.walter-it.de
http://blog.walter-it.de
Mit Zitat antworten
Sponsored Links
Antwort


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
Tabellen als Div Container SpecialFighter (X)HTML 7 12.10.2010 17:40
Ungewöhnlicher abstand beim clearen von floats adrianno CSS 14 16.09.2009 14:20
Dynamische Höhe im Content und DIV immer unten keaton CSS 8 13.12.2006 18:19
DIV Länge automatisch anpassen judicious CSS 10 08.05.2006 16:30
Seitenaufbau mit DIVs und 100% Höhe vespasquire CSS 6 12.09.2004 15:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:53 Uhr.