vermutlich verschachtelungsproblem

eS-COM

in ordnung..
http://pageclan.funpic.de/
das is der aktuelle stand von dem 2. versuch das zu klären allerdings frag ich mich warum die link-grafiken nicht angezeigt werden - komisch (ja sind mit hochgeladen und im richtigen verzeichnis)
problem 1: der abstand in dem content ist mir zu gering zum rand der zelle
ich meine cellpadding war das wo der abstand zwischen inhalt und zellenrahmen angegeben wird aber funzt net
problem 2: bei der linken sidebar ist der abstand nach links zu groß - dafür hab ich aber keine idee woran das liegen kann
problem 3 (und das hauptptoblem): der footer soll fix sein so wie hier http://f.666kb.com/i/ceqn4hsko9odpbin5.jpg
es soll nur das was man auf dem screen sieht angezeigt werden (zusätzlich mit den hintergrundgrafiken)
der content soll eine scrollbar erhalten sprich overflow:auto; - das heist wenn man scrollt scrollt nicht die ganze seite sondern nur der inhalt vom content
die hintergrundgrafiken, die sidebars und der content sollen automatisch an die verfügbare fläche angepasst werden also an den viewport

der code:

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>eS-COM</title>
<style>
    .header {
        background-image:url(grafiken/oben.png);
        height:125px;
        width:100%;
        background-size:cover;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
    }


    .logo {
            z-index:2;
            width:400px;
            height:124px;
    }

    .footer {
        background-image:url(grafiken/oben.png);
        height:15px;
        width:100%;
        background-size:cover;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        padding: 10px 0;
    }

    ul.nav {
        list-style: none;
        margin-bottom: 15px;
        height: 100%;
    }


    ul.nav2 {
        list-style: none;
        height: 100%;
    }
    ul.nav a, ul.nav a:visited { 
        padding: 5px 5px 5px 15px;
        display: block; 
        text-decoration: none;
        height: 100%;
    }
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
        background: rgba(255,255,255);
        background-color: rgba(255,255,255,0.9);
        height: 100%;
    }
    .sidebar1 {
        background-color: rgba(255,255,255,0.3);
    }
    .sidebar2 {
        background-color: rgba(255,255,255,0.3);
    }
    .content {
        padding: 10px 0;
        margin-bottom:15px;
        overflow:auto;
        farbverlauf-code
    }
</style>


</head>
    <body style="margin:0" bgcolor="#000000">


    <div class="header">
        <center>
            <div class="logo">
                <a href="#"><img src="grafiken\es-com.png" alt="eS-COM" name="Insert_logo" id="Insert_logo"/></a>
            </div>
        </center>
    </div>

    <div style="width:35%; height:100%; background-size:cover; position:absolute; background-image:url(grafiken/links.png); z-index:-1;">
    </div>
    <div style="width:35%; height:100%; background-size:cover; position:absolute; background-image:url(grafiken/rechts.png); z-index:-1; margin-left:65%">
    </div>
        <div style="height:auto;">
            <div style="height:auto;">
    <table width="60%" align="center" cellspacing="0">
        <tr>
            <td width="25%" valign="top" class="sidebar1">
                 <ul class="nav">
      <li><a href="#"><img src="grafiken\home.png" alt="Home"></a></li>
      weitere nav-links
    </ul>

            </td>
            <td width="50%" class="content">
                 <h1>Lorem ipsum</h1>
    <p>riesen lorem ipsum</p>
            </td>
            <td width="25%" class="sidebar2">

            </td>
        </tr>
    </table>
    </div>
    </div>

    <div class="footer">
        <center>
            <div class="foot">
                <a href="#"><img src="grafiken\impressum.png" alt="Impressum"></a>
                weitere footerlinks
            </div>
        </center>
    </div>



</body>
</html>

Alles anzeigen

hinterher soll die seite noch mit php nachbearbeitet werden loginfenster und sowas (rechte sidebar) - ist aber nicht meine aufgabe sags nur falls es relevant ist
ich hoffe es ist verständlich erklärt

position:fixed; hat beim ersten layout die sidebars und den content links angeordnet und ich konnte es nicht mehr zentrieren beim zweiten ist der footer komplett verschwunden - ich hab fixed durchaus versucht wie schon erwähnt hat das nichts gebracht - ausser das es mir das layout zerschossen hat

Sweet_Angel

Crossposting / bereits erwähnte Hilfen hast du bisher nicht in Anspruch genommen. Nimm lieber schnell das Angebot von Synaptic an, sonst ist der Thread hier dicht.
Ein bissl Eigeninitiative sollte man schon an den Tag legen.....

Bleistift

Zitat von eS-COM

problem 1: der abstand in dem content ist mir zu gering zum rand der zelle
ich meine cellpadding war das wo der abstand zwischen inhalt und zellenrahmen angegeben wird aber funzt net

arbeite bei fixed mit left, top, ..

Zitat von eS-COM

problem 2: bei der linken sidebar ist der abstand nach links zu groß - dafür hab ich aber keine idee woran das liegen kann

Von wo denn zu weit links?
Ich sehe daneben nur weiß ?!
Skaliere deine TDs doch mit padding in CSS ?!

Zitat von eS-COM

problem 3 (und das hauptptoblem): der footer soll fix sein so wie hier http://f.666kb.com/i/ceqn4hsko9odpbin5.jpg

div#deinHeader {left: 0; width: 100%; height: 30px; position: fixed; }
Beim Footer muss ich sagen etwas schwierig du weißt ja nie genau wo unten nun wirklich ist
Daher würde ich persönlich das mit JS lösen und mir die genauen Positionen abfangen
Aber rein von der Theorie müsste das funzen:
div#deinFooter { left: 0; bottom: 0; width: 100%; height: 30px; position: fixed; }

Jedoch könnte dir auch das hier helfen..

Denke mal da werden Andere hier noch ein bisschen genaueres wissen :p

Zitat von eS-COM

position:fixed; hat beim ersten layout die sidebars und den content links angeordnet und ich konnte es nicht mehr zentrieren beim zweiten ist der footer komplett verschwunden - ich hab fixed durchaus versucht wie schon erwähnt hat das nichts gebracht - ausser das es mir das layout zerschossen hat

Wie gesagt, left, top, ..
position: fixed bedeutet einfach nur das es sich eine fixe Position sucht und dort bleibt.
Das kannste nicht einfach so in ein anderes Layout klatschen und sagen eh is kacke funzt nicht weil dann was durcheinander war.

eS-COM

ok ich hab nun endlich kapiert worauf du hinaus wolltest - ich wusste nich das man bei position genaue werte angeben kann dachte da geht nur 0 um aufzusetzen! sorry das wusst ich wirklich nicht
ich war mir nicht sicher ob das mit der tabelle klappt darum hab ich das mal bei dem ersten layout reingemacht und da geht es - und es gibt immernoch ein problem
der text wird bei dem footer am ende abgeschnitten
http://666kb.com/i/cerkhddzhmejqwgdx.jpg

woran könnte das liegen?

Bandit

Benutze den Firefox mit installiertem Addon Firebug, dann findest du solche Sachen auch selber.

Zu 1. Padding von .content anpassen
Zu 2. Padding von .nav anpassen
Zu 3. http://www.ohne-css.gehts-gar.net/0025.php

Bleistift

Was wird abgeschnitten? Ich kann da im Footer nix erkennen.
Wie du bestimmt schon gemerkt hast hab ich deine Quotes falsch kommentiert das 1. gehört zu 2. und das 2. zu 1.

eS-COM

naja ich bin ja nun wieder zum ersten layout da ic mir nicht sicher war ob position und tabellen funzen - daher sind die kommentare eh nicht mehr ganz zutreffend
es wird ein teil des scrollbalkens und des textes abgeschnitten:
[Blockierte Grafik: http://666kb.com/i/cerl1nfttmmyib9x1.jpg]
wenn ich fixed noch bottom:15px; (der footer is 15px hoch) dann schmeißt er mir alles durcheinander

wenn diese sache gelöst is funzt dann alles

Bleistift

height des contents um 15px reduzieren?

Unregistriert

Oder einfach padding-bottom erhöhen?

eS-COM

height hat prozentwerte oder kann ich sagen height:100%-15px;?
padding bottom hat nich gefunzt hat gar nix geändert

Bleistift

padding-bottom dürfte da nicht helfen, der Content ist ja eh unter dem Footer

Soweit ich weiß, Nein kannst du nicht, deswegen mach ich sowas mit JS

Kannst halt höchstens 99% nehmen was halt definitiv die 15px abdeckt.

eS-COM

naja bei meinem 17zoll monitor wäre dann immernoch was raus und bei größeren würde vermutlich en lücke entstehen
naja JS kann ich net ich kann C, C++, C#, Delphi, Assambler, DOS, HTML, CSS und Actionscript aber kein Javascript

Bleistift

Code

function errechneGUI() {
var wdt = window.innerWidth; // könnte im ie schwierig werden, da musst du den offset benutzen 
var hgt = window.innerHeight();


var content = document.createElement("div"); // erstellt content und speichert auf content
content.id = "meineContentId";
content.style.top = 15;
content.style.width = "50%";
content.style.height = (hgt - headerHeight - footerHeight);


document.body.appendChild(content); // fügt das element dem body hinzu 
}

Alles anzeigen

(evt. noch hinter den größen Angaben noch + "px")

Über style stehen dir deine CSS Eigenschaften zur Verfügung
JS - Code entweder im Head ablegen oder eine .js - Datei erstellen und im Head verlinken.

eS-COM

ich geh mal davon aus das ich das noch im script-tag verschachteln muss
muss ich da noch angaben anpassen oder ist das schon an meinen script angepasst?

Bleistift

nein musst du nicht.
<script type="text/javascript" src="deinesource.js"></script>
im head einbinden.
wenn du eine funktion erstellt hast musst du diese natürlich noch aufrufen.
im noscript tag kannst du deine css version angeben
damit sehen besucher die js deaktiviert haben deine css version.

eS-COM

also ich hab das von dir in den head gesetzt aktuell siehts so aus und ich hab das gefühl was falsch gemacht zu haben da es nichts verändert hat
sorry ich tu mich mit neuen sprachen anfangs immer schwer

HTML

<script type="text/javascript">
function errechneGUI() {
var wdt = window.innerWidth(); // könnte im ie schwierig werden, da musst du den offset benutzen 
var hgt = window.innerHeight();


var content = document.createElement("div"); // erstellt content und speichert auf content
content.id = "container";
content.style.top = 15;
content.style.width = "50%";
content.style.height = (hgt - headerHeight - footerHeight);


document.body.appendChild(content); // fügt das element dem body hinzu 
}
</script>




<div class="maincontainer" id="container">
<div class="bgleft">
    </div>
    <div class="bgright">
    </div>
<div class="container">


  <div class="sidebar1">
    <ul class="nav">
      links
    </ul>
  <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum</p>
    <!-- end .content --></div>
     <div class="sidebar2">
     <!-- end .sidebar2 --></div>
     <div class="footer2">
     <!-- end .footer2 --></div>
     <!-- end .container --></div>
     <!-- end .maincontainer --></div>

Alles anzeigen

Bleistift

Was soll sich da auch ändern?

Also nochmal:

Für Besucher die JS AKTIVIERT haben kannst du den Content mit JavaScript erstellen.
Dazu hast du da jetzt die Funktion errechneGUI.
Diese Funktion musst du aufrufen, was du nirgendswo tust.

Für Besuche dier JS deaktiviert haben kannst du im <noscript></noscript> - Tag deinen CSS-Container einbinden.

HTML

<html>
<head>
<script type="text/javascript" src="deinesource.js"></script>
</head>
<body onload="errechneGUI();">
<!-- header -->


<noscript><div id="deinCSSContainer"></div></noscript>


<!-- dein footer -->


</body>
</html>
</html>

Alles anzeigen

sollte funktionieren

Bandit

Das geht auch ohne JavaScript, siehe http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-get-100-height-css.php

Bleistift

Ich hatte ihm auch schon eine geschickt.
Sein Problem ist das er den Content nicht richtig skaliert bekommt.

Das wär dann jetzt die 3. Seite zu dem Thema, denke nicht das er sich das anschaut.

eS-COM

danke euch
bleistift sorry aber ich mach das lieber mit html/css da kenn ich mich wenigstens etwas aus
bandit ich hab das grad übernommen aber entweder stell ich mich zu dumm an oder ich hab nen fehler gemacht bei mir klappt das net richtig es verschwindet immernoch nen ganzes stück unter dem footer ungefähr soviel wie header und footer zuammen (sprich in meinem fall 140px)
bin ratlos woran das liegen kann

edit:
ok ihr könnt mich steinigen << ich hab ne transparenz in den sidebars die bis runtergehn soll darum hab ich in allen elternelementen height:100%; - in einigen elementen war es nicht gut das dort reinzuschreiben darum hat der die länge des headers und footers unten dran gehangen jetzt funzt es komplett
frag mich nur noch warum die verlinkten grafiken nich funzen auf einer webadresse...
http://pageclan.funpic.de/
die verlinkten grafiken sind im code so aufgebaut:

HTML

<a href="#"><img src="grafiken\home.png" alt="Home"></a>

die nichtverlinkten grafiken werden aber problemlos angezeigt

Tags