4. [HTML / CSS] 100% Height mit Position:absolute

[HTML / CSS] 100% Height mit Position:absolute

  • R

    html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head></head>

	<body class="main">
		<div style="z-index:110; position:absolute; top:130px; left:0px; width:100%">
		<?php include ("subpages/navigation.php"); ?>
		</div>
		<div style="z-index:103;">
		<?php include ("subpages/bild.php"); ?>
		</div>
		<div style="z-index:102;">
		<?php include ("subpages/aboutus/organisation_main.php"); ?>
		</div>
	</body>
</html>

    organisation_main.php:

    <html><head></head>
    <body>
		<div id="organisationpage2">
		<table id="tablemainpage">
			<tr>
				<td class="maintitle">Organisation</td>
			</tr>
			<tr>
				<td class="maintext">Die Zentrale bliblablubb					
				</td>
			</tr>
		</table>
		</div>
    </body>
</html>

    css dazu:

    #organisationpage2
{
	position:fixed;
	left:270px;
	top:160px;
	height:100%;
	width:730px;
	background-color:#ffffff;

}

body.main
{
	background-color:#beddee;
	width:100%;
}

    Sollte alles notwendige beinhalten

    0
  • P

    Ride schrieb:

    html:

    organisation_main.php:

    <html><head></head>
    <body>
		<div id="organisationpage2">
		<table id="tablemainpage">
			<tr>
				<td class="maintitle">Organisation</td>
			</tr>
			<tr>
				<td class="maintext">Die Zentrale bliblablubb					
				</td>
			</tr>
		</table>
		</div>
    </body>
</html>

    grad nur überflogen weil zeit fehlt aber .. machst du das wirklich so!?

    0
  • R

    naja n grosser Teil Text fehlt aber von der Struktur gesehen her ja.
    Deswegeh weil der Text, der im DIV ist, das DIV nicht ganz ausfüllen soll und so weiter(grafikers idee nicht meine 😃 )

    0

  • 3. Gebot im Webdevelopment:
    Ihr sollet nicht missbrauchen Tabellen zum Zwecke der Gestaltung. 🙄

    0
  • J

    1. Gebot der allgemeinen Programmierung
    Ihr solltet nicht blind, ausnahmslos und pauschal jedes 'Gebot' von jedem selbsternannten Guru befolgen.

    0
  • P

    Ride schrieb:

    naja n grosser Teil Text fehlt aber von der Struktur gesehen her ja.
    Deswegeh weil der Text, der im DIV ist, das DIV nicht ganz ausfüllen soll und so weiter(grafikers idee nicht meine 😃 )

    mit gehts jetzt eher darum das du in einen html container einen weiteren html container lädst usw. ...

    mir fehlt leider gerade die zeit einen lösungsansatz zu suchen in dem ganzen..

    vll liegts ja schon daran? Ich sehe ja nur eine X-bar .. da muss ja dann wohl was nach rechts gerutscht sein.

    0

  • Jockelx schrieb:

    1. Gebot der allgemeinen Programmierung
    Ihr solltet nicht blind, ausnahmslos und pauschal jedes 'Gebot' von jedem selbsternannten Guru befolgen.

    Nicht selbsternannt und kein Guru: Quelle

    0
  • J

    War mir wohl klar, dass es diese Richtlinie gibt und sie nicht von dir kommt.
    Nur sollte man diese Richtlinien als Richtlinien sehen und nicht als Gebote oder Gesetze, die man niemals brechen darf.

    Wir hatten hier im Forum auch schon den Link, wo wieder ein Guru (und das meine ich gar nicht abwertend) den Gebrauch von Tabellen wieder 'erlaubt' hat.

    Du kannst dich gerne einschränken lassen und irgendetwas nicht nutzen, weil es irgendwer verboten hat.
    Nur wenn du diese Richtlinien als Gebote im Forum verbreitest, musst du halt mit Kontra rechnen 🙂

    0

  • Ich hab auch 'ne Seite am Laufen, wo ich zwei Tabellen als Layout missbrauche, nur da ist es mir bewusst. Aber das Problem hier kann daran liegen, und deshalb hab ich das angebracht. Die Gebotsaufmachung sollte dabei nur unterstreichen, dass es fuer das hier beschriebene Problem durchaus wichtig sein koennte, war also bewusst dramatisiert.

    0
  • J

    Ok, viel heisse Luft um nix 🙂

    0

  • Also, lieber TE ich habe mit 4 Divs nun etwa dein gewünschtes Layout.

    Ausarbeiten musst du es selbst. - Ansonsten hier, wie ichs machen würde:

    Im Head bzw. einer externen CSS-Datei:

    <style type="text/css">
         body { margin:auto; }
         #header {	
             position:absolute;
             left:0;
             top:0;     
             width: 99.85%;
             height: 20%;
             border: 1px solid #000;         
          }
         #menu {
            position: absolute;
            top: 20%;
            left: 0;
            width: 99.85%;
            height: 5%;
            border: 1px solid #000;     
         }
         #left {
            position:absolute;
            left: 0;
            width: 20%;
            height: 74.839%;
            top: 25%;
            border: 1px solid #000;
         }
         #content {
            width: 60%;
            position: absolute;
            left: 20%;
            top: 25%;
            height: 74.839%;
            border: 1px solid #000;         
         }
</style>

    Der Bodybereich:

    <div id="header">bla</div>
<div id="menu">Lorem | Ipsum | Dolor | Sit | Amet</div>
<div id="left">Blabla</div>
<div id="content">Lorem ipsum dolor sit amet,
 consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
 ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
 eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
 no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
 sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
 invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
 kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

    Ist jetzt nur ein Grundlayout in Schwarz-Weiss. - Ansonsten, viel Spaß damit.

    0
Anmelden zum Antworten