[GastForen Web allgemein HTML und CSS / Stylesheets Frage zum angehängter HTML Datei DIVs relativ zueinander positionieren

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Frage zum angehängter HTML Datei DIVs relativ zueinander positionieren

Imion
Beiträge gesamt: 141

13. Jan 2009, 13:09
Beitrag # 1 von 4
Bewertung:
(1275 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo zusammen,

ich versuche gerade etwas verzweifelt ein Layout aufzubauen, welches sich grundsätzlich länger als eine Browserseite sein darf.

Das ganze ist von einem Container DIV ummantelt und die DIVs darin sollen je nachdem um welches es sich handelt feste Größen haben oder sich eben anpassen.

Fest sollen sein das Banner und der Fuß. Der Content dazwischen soll so groß sein wie es der Inhalt erfordert. Grundsätzlich funktioniert das auch, allerdings gibt es immer einen seltsamen Abstand vom content zum foot den ich nicht nachvollziehen kann.

Die Frage ist warum das nicht funktioniert. Hat jemand eine Idee?

Hier die angehängte Datei zum schnellen draufschauen:


Code
<html> 
<head>
<title>Layout</title>
<style type="text/css">
#whole_site {
position : absolute;
top : 0px;
left : 50%;
bottom: 0px;
width : 800px;
margin-left : -400px;
background-color: #ff0000;}

#banner {
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 140px;
border-left: 0px;
border-top: 0px;
border-right: 0px;
background-color: #00ff00;}

#content_of_site {
position: absolute;
top: 140px;
left: 0px;
bottom: 0px;
width: 800px;
background-color: #00ffff;}

#navigation{
position: relative;
top: 0px;
left: 0px;
width: 140px;
height: 300px;
background-color: #0000ff;}

#content{
position: absolute;
top: 0px;
left: 145px;
width: 655px;
background-color: #ff00ff;}

#foot_of_site {
position: absolute;
bottom: 0px;
left: 0px;
width: 800px;
height: 100px;
background-color: #ffff00;}
</style>
</head>
<body>
<div id="whole_site">
<img id="banner" class="banner" src="#"/>
<div id="content_of_site">
<div id="navigation">Link 1<br/>Link 2<br/>Link 3</div>
<div id="content">lrkeaj aklšsg agšl <p>lijgskeaj aklšsg agšl <p>lijgskeaj aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lij aklšsg agšl <p>lijgs</div>
</div>
<div id="foot_of_site">fbdbyxvc<br>lih</div>
</div>
</body>
</html>


Anhang:
Layout.jpg (92.3 KB)   Layout.htm (1.44 KB)
X

Frage zum angehängter HTML Datei DIVs relativ zueinander positionieren

Imion
Beiträge gesamt: 141

13. Jan 2009, 15:10
Beitrag # 2 von 4
Beitrag ID: #380790
Bewertung:
(1253 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
So ich habe das ganze jetzt noch etwas bearbeitet und das Problem eingrenzen können.

Und zwar hängt das ganze am content. Wenn dieser Inhalt bekommt wird er um den Inhalt größer. Und um genau die gleiche Größe wird foot_of_site nach unten verschoben. Siehe Grafik im Anhang. 1 verhält sich proportional zu 2.

Die Frage ist nun, wie kann ich ohne JavaScript diese Verhalten vermeiden?


Code
<html> 
<head>
<title>Layout</title>
<style type="text/css">
#whole_site {
position : absolute;
top : 0px;
left : 50%;
width : 800px;
margin-left : -400px;
background-color: #ff0000;}

#banner {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 140px;
border-left: 0px;
border-top: 0px;
border-right: 0px;
background-color: #00ff00;}

#content_of_site {
position: relative;
top: 0px;
left: 0px;
bottom: 0px;
width: 800px;
background-color: #00ffff;}

#navigation{
position: relative;
top: 0px;
left: 0px;
width: 140px;
height: 300px;
background-color: #0000ff;}

#content{
position: relative;
top: -300px;
left: 145px;
width: 655px;
padding-bottom: 0px;
background-color: #ff00ff;}

#foot_of_site {
position: relative;
bottom: 0px;
left: 0px;
width: 800px;
height: 100px;
background-color: #ffff00;}
</style>
</head>
<body>
<div id="whole_site">
<div id="banner"></div>
<div id="content_of_site">
<div id="navigation"></div>
<div id="content">s<br>gs<br>gs<br>gs<br>gsgs<br>gs<br>g</div>
</div>
<div id="foot_of_site">fbdbyxvc<br>lih</div>
</div>
</body>
</html>



als Antwort auf: [#380763]
Anhang:
Layout.jpg (41.0 KB)

Frage zum angehängter HTML Datei DIVs relativ zueinander positionieren

FSt
  
Beiträge gesamt: 1961

29. Jan 2009, 08:36
Beitrag # 3 von 4
Beitrag ID: #383113
Bewertung:
(1174 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Imion

Versuchs mal so:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="michaelsinterface">
<title>CSS-Layout mit 100%-H&ouml;he (Header + Footer)</title>

<style type="text/css">
<!--
* { /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
margin: 0;
padding: 0;
font: bold 1em verdana, sans-serif;
}

body {
text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}

div {
text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}

html, body {
height: 100%;
}

/* DIV-Boxen */

div#wrapper {
position: relative;
margin: 0 auto;
width: 800px;
height: 100%;
min-height: 100%;
height: auto !important;

background: url(hintergrund.gif) repeat-y;
border-left: 1px solid #b8b8b8;
border-right: 1px solid #b8b8b8;
}

div#header {
height: 140px;
background: #00ffff;
border-bottom: 1px solid #b8b8b8;
}

div#leftCol {
width: 140px;
height: 300px;
background: #0000ff;
float: left;
}

div#centerCol {
margin: 0 0 0 145px;
background: #ff00ff;
}

div#leftCol, div#centerCol {
padding-bottom: 100px;
}

div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 800px;
height: 100px;
background: #ffff00;
border-top: 1px solid #b8b8b8;
}


/* clearfix zum Aufheben der Floatumgebung */

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
overflow:hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* Überschrift, Absatz */

h2 {
margin-left: 10px;
}
-->
</style>

</head>
<body>

<div id="wrapper" class="clearfix">
<div id="header">

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

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

</body>
</html>


Quelle: http://www.tutorials.de/forum/css-tutorials/280722-css-layout-mit-100-hoehe.html
geändert von 3- auf 2-spaltig

Du musst aber noch ein Hintergrundbild einfügen, um die linke Spalte vorzutäuschen.

Gruss
Martin


als Antwort auf: [#380790]

Frage zum angehängter HTML Datei DIVs relativ zueinander positionieren

Imion
Beiträge gesamt: 141

29. Jan 2009, 20:32
Beitrag # 4 von 4
Beitrag ID: #383263
Bewertung:
(1156 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Martin,

danke sehr, ich werde mir das einmal genauer ansehen, in jedem Fall macht es genau das, was ich wollte. :-)

Viele Grüße,

Andreas


als Antwort auf: [#383113]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/