tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
2
ZUGRIFFE
1091
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 03.09.09 16:22 #1
    mrbong mrbong ist offline Mitglied Bronze
    Registriert seit
    May 2004
    Beiträge
    27
    Hallo,

    habe da leider ein kleines Problem, habe hier einen Seiten-Div per position:absolute (test 1,2,3) eingebaut, jedoch vergrössert sich der Content - Layer nicht. Welchen Fehler hab ich da gemacht , bzw wie könnte man das lösen ?

    Vielen Dank im Voraus !

    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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style>
body,td,th {
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

html, body {height: 100%;}

* {
    margin: 0;
    padding: 0;
}

.header_in_left{
float:left;
width:200px;
height:99px;
background-color:#ff0000;
text-align:center;
}

.header_in_right{
float:left;
width:200px;
height:99px;
background-color:#00ff00;
text-align:center;
}

.header_in_middle{
float:left;
width:600px;
height:99px;
background-color:#0000ff;
text-align:center;
}

.wrapper{
position:absolute; 
width:1000px;
left:50%; 
margin-left:-500px; 
background-color:#FF00FF;
}

.clear {clear:both;}

.header{
width:1000px;
background-color:#eee;
height:110px;
}

.contentwrapper{
width:1000px;
background-color:#00ff00;
}

.footer{
width:1000px;
background-color:#ff0000;
height:30px;
}

.menue{
width:1000px;
height:78px;
background-color:#FFFF00;
}

.content{
background-color:#000000;
color:#fff;
height:1000px;
}

.content_header{
width:690px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text{
width:690px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}

.content_header_doppelt{
width:340px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text_doppelt{
width:340px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}


.ads_header{
width:300px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
}

.ads{
width:300px;
min-height:200px;
background-color:#00FFFF;
margin-top:10px;
}

.content_ads
{
position:absolute;
top:188px;
left:700px;
float:right;
width:300px;
min-height:1000px;
background-color:#CC0000;
}

</style>


</head>

<body>
<div class="wrapper">
<div class="header">
<div class="header_in_left">LOGO</div>
<div class="header_in_middle">Banner 1</div>
<div class="header_in_right">Banner 2</div>
</div>
<div class="contentwrapper">
<div class="menue">Menu</div>
<div class="content">
	<div class="content_leibnitz">
		<div class="content_header">Überschrift</div>
		<div class="content_text">text</div>
		<div class="content_header_doppelt">Überschrift</div>
		<div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
		<div class="clear"></div>
		<div class="content_text_doppelt">text1</div>
		<div class="content_text_doppelt" style="margin-left:10px;">text2</div>
		<div class="clear"></div>
		<div class="content_header_doppelt">Überschrift</div>
		<div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
		<div class="clear"></div>
		<div class="content_text_doppelt">text1</div>
		<div class="content_text_doppelt" style="margin-left:10px;">text2</div>
		<div class="clear"></div>
		<div class="content_header">Überschrift</div>
		<div class="content_text">text</div>
		<div class="content_header">Überschrift</div>
		<div class="content_text">text</div>
		<div class="content_header">Überschrift</div>
		<div class="content_text">textis</div>
		
	</div>

	<div class="content_ads">
		<div class="ads_header">test 1</div>
		<div class="ads">banner 1</div>
		<div class="ads">banner 2</div>
		<div class="ads">banner 3</div>
		<div class="ads_header">test 2</div>
		<div class="ads">banner 1</div>
		<div class="ads_header">test 3</div>
		<div class="ads">banner 1</div>
	</div>
</div> <!-- content -->
</div> <!-- contentwrapper -->
<div class="footer">footer</div>
</div>
</body>
</html>
    Vorschau auf Host
     
    Zitieren Zitieren
  2. 03.09.09 16:43 #2
    Maik Tutorials.de Gastzugang
    Hi,

    ich hab hier mal die absolute Positionierung des Blocks .content_ads aufgehoben, die für dein Vorhaben hinderlich ist, indem der linke Spaltenblock .content_leibnitz mit einer float:left-Deklaration aus dem normalen Textfluß genommen wird, sowie die absolute Höhenangabe für .content in eine Mindesthöhe umgewandelt:
    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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style>
body,td,th {
        font-family: Geneva, Arial, Helvetica, sans-serif;
}

html, body {height: 100%;}

* {
    margin: 0;
    padding: 0;
}

.header_in_left{
float:left;
width:200px;
height:99px;
background-color:#ff0000;
text-align:center;
}

.header_in_right{
float:left;
width:200px;
height:99px;
background-color:#00ff00;
text-align:center;
}

.header_in_middle{
float:left;
width:600px;
height:99px;
background-color:#0000ff;
text-align:center;
}

.wrapper{
position:absolute;
width:1000px;
left:50%;
margin-left:-500px;
background-color:#FF00FF;
}

.clear {clear:both;}

.header{
width:1000px;
background-color:#eee;
height:110px;
}

.contentwrapper{
width:1000px;
background-color:#00ff00;
}

.footer{
width:1000px;
background-color:#ff0000;
height:30px;
}

.menue{
width:1000px;
height:78px;
background-color:#FFFF00;
}

.content{
background-color:#000000;
color:#fff;
min-height:1000px;
}

.content_leibnitz {
float:left;
width:700px;
}

.content_header{
width:690px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text{
width:690px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}

.content_header_doppelt{
width:340px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
float:left;
}

.content_text_doppelt{
width:340px;
min-height:100px;
background-color:#000FFF;
margin-top:10px;
float:left;
}

.ads_header{
width:300px;
height:20px;
background-color:#FF00FF;
margin-top:10px;
}

.ads{
width:300px;
min-height:200px;
background-color:#00FFFF;
margin-top:10px;
}

.content_ads{
float:right;
width:300px;
min-height:1000px;
background-color:#CC0000;
}


.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
</style>


</head>

<body>
<div class="wrapper">
<div class="header">
<div class="header_in_left">LOGO</div>
<div class="header_in_middle">Banner 1</div>
<div class="header_in_right">Banner 2</div>
</div>
<div class="contentwrapper">
<div class="menue">Menu</div>
<div class="content clearfix">
        <div class="content_leibnitz">
                <div class="content_header">Überschrift</div>
                <div class="content_text">text</div>
                <div class="content_header_doppelt">Überschrift</div>
                <div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
                <div class="clear"></div>
                <div class="content_text_doppelt">text1</div>
                <div class="content_text_doppelt" style="margin-left:10px;">text2</div>
                <div class="clear"></div>
                <div class="content_header_doppelt">Überschrift</div>
                <div class="content_header_doppelt" style="margin-left:10px;">Überschrift</div>
                <div class="clear"></div>
                <div class="content_text_doppelt">text1</div>
                <div class="content_text_doppelt" style="margin-left:10px;">text2</div>
                <div class="clear"></div>
                <div class="content_header">Überschrift</div>
                <div class="content_text">text</div>
                <div class="content_header">Überschrift</div>
                <div class="content_text">text</div>
                <div class="content_header">Überschrift</div>
                <div class="content_text">textis</div>

        </div>

        <div class="content_ads">
                <div class="ads_header">test 1</div>
                <div class="ads">banner 1</div>
                <div class="ads">banner 2</div>
                <div class="ads">banner 3</div>
                <div class="ads_header">test 2</div>
                <div class="ads">banner 1</div>
                <div class="ads_header">test 3</div>
                <div class="ads">banner 1</div>
        </div>
</div> <!-- content -->
</div> <!-- contentwrapper -->
<div class="footer">footer</div>
</div>
</body>
</html>

    mfg Maik
     
    Zitieren Zitieren
  3. 04.09.09 15:04 #3
    mrbong mrbong ist offline Mitglied Bronze
    Registriert seit
    May 2004
    Beiträge
    27
    Vielen Dank Maik!
     
    Zitieren Zitieren
« Wechselndes Hintergrundbild - wie umsetzen? | Flash Object, bei IE funktionierts, Firefox Darstellungsproblem »

Ähnliche Themen

  1. [Dreamweaver] Hyperlink soll sich im Main Content öffnen
    Von Vera- im Forum HTML-Editoren
    Antworten: 8
    Letzter Beitrag: 01.08.10, 19:46
  2. Menü soll sich dem content anpassen
    Von Frosty5o im Forum CSS
    Antworten: 11
    Letzter Beitrag: 24.11.09, 16:06
  3. div soll sich automatisch refreschen?
    Von hups1803 im Forum Javascript & Ajax
    Antworten: 8
    Letzter Beitrag: 08.03.09, 18:42
  4. DIV-Container soll sich automatisch anpassen
    Von Stelo im Forum CSS
    Antworten: 3
    Letzter Beitrag: 23.07.08, 15:09
  5. SELECT-Feld soll sich automatisch aktualsiieren
    Von Ruediger im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 24.09.04, 10:29