Beiträge von eS-COM

eS-COM

huch wie is das denn passiert falscher slash - danke
alles fertig nu könn die lehrer nich mehr sagen das das nix wird

eS-COM

hm auch grad mit 5 browsern getestet bei 2 gehen die grafiken in der sidebar und dem logo net - der firefox und der opera
http://666kb.com/i/cerqu4bmtq4cungfp.jpg
kann es daran liegen das die grafiken png's sind? dürfte aber eigentlich net der fall sein

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

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

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?

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

eS-COM

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

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

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?

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

eS-COM

ok dann gib mir doch einen tipp wie ich das hinbekommen soll
seit 10 sitz ich an diesem problem das heist 8 stunden (nur heute) und weder diese links die gepostet wurden noch position:fixed; haben was gebracht - andere hinweise/tips wurden nicht genannt
ich habe ca 5 generatoren und x info seiten durchgesehn und nirgends hat das was dort stand funktioniert oder ich hab es nicht recht verstanden darum bin ich ja hier ich suche HILFE und keine hinweise auf rechtschreibung oder sonst was
es geht rein um den footer und bisher hat keiner nen tipp oder hinweis geliefert der helfen kann
ich kann gern den aktuellen code in der gänze hier reinstellen der ist um einiges kürzer als der erste
ich sitz seit wochen an diesem problem ich hab meine 2 wochen ferien dafür geopfert und alles probiert was ich kenne und diverse schritt für schritt tutorials angeschaut
NICHTS hat geholfen
ich bin kein anfänger gut ich bin eingerostet aber dennoch kein anfänger
ich frag nach hilfe wenn ich sie wirklich brauche aber bisher waren vllt 5 hilfposts dabei wo auf 3 links und auf position:fixed eingegangen wird auf sonst nichts soweit ich das gesehen habe

ich hoffe jemand is nu bereit sich eine der dateien anzuschauen bzw die codes und mir dabei zu helfen das verdammte projekt fertig zu stellen
dienstag früh müssen wir das an unsrem stand vorstellen..
wirklich ich bin am verzweifeln selbst meine html lehrerin weis nich weiter (aber sie ist auch eher durchschnitt)

eS-COM

sorry bandit ich wusste net das der thread doch noch erstellt wurde nach gut 1h war mein thread auf html.de nicht angezeigt worden laut meinem konto hab ich auch keine beiträge gehabt da hats mir gelangt un ich hab nen andres forum gesucht konnt ja nich ahnen das es dort stunden dauert bis nen thread erstellt is...

vorlagen un generatoren hab ich schon benutzt das problem war immer der footer genau das problem was ich hier geschildert habe darum hab ich mir ja nen forum gesucht - erst html.de nund hier weil html.de mein thread erst nach stunden wies scheint erstellt hat

eS-COM

also das is eig kein unterrichtsstoff wir haben zwar html aber nur 90min pro woche un nur im ersten lehrjahr da gehts nur um grundlegende formatierung und html/css vorschriften als informatik-kaufmann geht man da net so tief rein aber ich hab das früher mal als hobby gemacht is aber nen stück her actionscript liegt mir mehr
ich hatte alles gepostet da ich langsam selbst nicht mehr durchgeblickt hab un alles x mal verschachtelt wurd...

im grunde hab ich jetzt neu angefangen wo nun auch fast alles sitzt - nur mit teilen der DW-vorlage die ich vorher nutzte
folgende probleme hab ich noch:
ich benutz jetzt eine tabelle bei einer spalte hab ich einen abstand drin den ich nicht möchte und eine andere hat keinen abstand zum inhalt bzw der inhalt zum rand
http://666kb.com/i/ceqn11yzydkx9f129.jpg
dort wo die links stehen ist ein zu großer abstand die sollen ein stück weiter vor
der text in der mitte ist mir zu nah am rand das man da 5-10px nimt zum abstand des tabellenrandes

HTML

<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>
      <li>nochn paar mehr verlinkugen</li>
    </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>


die klassen:
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;
        dicker farbverlaufcode
    }

Alles anzeigen

das größere problem ist das die seite fest sein soll wie ich shcon versuchte zu erklären in etwa so hier:
http://f.666kb.com/i/ceqn4hsko9odpbin5.jpg
nur hat es bei der alten version den text nach unten rausgehauen:
http://666kb.com/i/ceqn5tg7g5jvypqg1.jpg
in der neuen müsste der footer wieder hochgesetzt werden nur bin ich ratlos wie ich das in diesem fall machen soll aktuell siehts so aus:
http://666kb.com/i/ceqn9hj7a0rjo9wdd.jpg

das mit der tabelle ist relativ einfach sobald mir die attribute/eigenschaften wieder einfallen
das problem mit dem footer krieg ich bisjetzt nicht hin und ich fürchte dafür mus ich den gesamten code posten
das mit position:fixed; funzt in diesem fall net da verschwindet der footer ganz

eS-COM

Zitat von explanator

Ins CSS.

is mir schon klar nur welche klasse in meinem fall? der footer1 ist ja an der richtigen stelle also im footer2 oder wie?

Zitat von explanator

Tja und ich halte mich jetzt auch an meine Regel, Leuten nicht die Arbeit abzunehmen für die sie hinterher die Lorbeeren ernten werden.

wie gesagt wir haben nur kurzfristig erfahren das der projekttag am dienstag ist und somit alles vorgestellt werden muss lorbeeren bekommen wir dafür nicht mal es is einfach ne verpflichtung von der ausbildung her und so ziemlich jeder hat nun deswegen streß

eS-COM

Zitat von Bleistift

Aber so ist das natürlich mit position fixed zu lösen

und wo muss ich das reinschieben mit der position fixed?

sorry das ich mich nich an satzzeichen etc halte wir stehn unter zeitdruck da wir erst am dienstag erfahren haben das wir am 11. präsentieren dürfen

eS-COM

naja viewpoint dachte nennt sich das was ich meine net im code
anpassen soll es sich insofern das der footer 15px hoch ist der head 125px hoch ist und der gesamte raum dazwischen die site selbst ist footer und header aber immer angezeigt werden
das mit dem margin wird leider nicht so gut gehn da der footer1 wo die hintergrundgrafik ist zwar richtig ist aber ausserhalb des hauptcontainers (da dieser nicht die volle größe nimt)
der footer 2 ist im hauptcontainer und hat die selben attribute wie der footer1 aber ist nicht auf der selben höhe wie der footer1

die bilder für den hintergrund hab ich noch nicht eingebaut bzw wieder rausgenommen da die mein layout etwas verballert haben aber da setz ich mich nochmal drann

leider haben wir für heute keine stunden mehr für das projekt kann also erst morgen weiter machen

eS-COM

hallo
ich brauche hilfe bei einem projekt in der ausbildung

folgende 2 probleme:
1. der content soll an die fenstergröße (ich glaub heist viewport) angepasst werden footer und header fest ebenso der hintergrund und navigation ich schaffe es nicht das der content beim footer aufhört ich wollte eine unsichtbare klasse machen auf der selben höhe wie der footer und den content nur bis dahin laufen lassen aber leider hat das nicht gefunzt
2. sollen rechts und links hintergrundgrafiken hinkommen die aber auch hinter der navigation sind ich schätze mal das kann man mit 2 weiteren klassen machen die in ebene 2 verschoben werden nur hab ich grad keine idee wie ich das durchführen soll

kann mir jemand helfen? ich kann die bilder und den aktuellen stand uploaden als rar datei aber tpf ist hier definitiv geblockt

der code (ich kann hier kein ftp uploaden is vom proxy gesperrt)

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Vorlage</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="thrColLiqHdr.css" rel="stylesheet" type="text/css"><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* Dieser negative Rand mit 1 Pixel hat   in jeder Spalte in diesem Layout die gleiche korrigierende Auswirkung.   */
ul.nav a { zoom: 1; }  /* Mit der zoom-Eigenschaft erhält IE den   Auslöser hasLayout, der erforderlich ist, um den zusätzlichen Leerraum   zwischen den Hyperlinks zu korrigieren. */
</style>
<![endif]-->
</head>


<body>
<div class="header">


    <div class="container1">
     <a href="#"><img src="grafiken\es-com.png" alt="eS-COM"   name="Insert_logo" width="404" height="124"   id="Insert_logo"/></a>

    <!-- end .container1 --></div>
<!-- end .header --></div>
<div class="container">


  <div class="sidebar1">
    <ul class="nav">
      <li><a href="#"><img src="grafiken\home.png" alt="Home"></a></li>
      <li><a href="#"><img src="grafiken\partnersuche.png" alt="Partnersuche"></a></li>
      <li><a href="#"><img src="grafiken\nachhilfe.png" alt="Nachhilfe"></a></li>
      <li><a href="#"><img src="grafiken\freizeit.png" alt="Freizeit"></a></li>
      <li><a href="#"><img src="grafiken\extern.png" alt="Extern"></a></li>
      <li><a href="#"><img src="grafiken\intern.png" alt="Intern"></a></li>    
      <li><a href="#"><img src="grafiken\online.png" alt="Online"></a></li>
      <li><a href="#"><img src="grafiken\einkaufsgruppe.png" alt="Einkaufsgruppe"></a></li>
      <li><a href="#"><img src="grafiken\heimfahrten.png" alt="Heimfahrten"></a></li>
      <li><a href="#"><img src="grafiken\öffentlich.png" alt="Öffentlich"></a></li>
      <li><a href="#"><img src="grafiken\privat.png" alt="Privat"></a></li>
    </ul>
  <!-- end .sidebar1 --></div>
  <div class="content">
    <h1>&nbsp;</h1>
    <p>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. 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.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse   molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero   eros et accumsan et iusto odio dignissim qui blandit praesent luptatum   zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum   dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem   vel eum iriure dolor in hendrerit in vulputate velit esse molestie   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et   accumsan et iusto odio dignissim qui blandit praesent luptatum zzril   delenit augue duis dolore te feugait nulla facilisi.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet   doming id quod mazim placerat facer possim assum. Lorem ipsum dolor  sit  amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod   tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad  minim veniam, quis nostrud exerci tation ullamcorper suscipit  lobortis  nisl ut aliquip ex ea commodo consequat.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse   molestie consequat, vel illum dolore eu feugiat nulla facilisis.   


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. Lorem ipsum dolor sit amet, consetetur sadipscing  elitr, At  accusam aliquyam diam diam dolore dolores duo eirmod eos  erat, et nonumy  sed tempor et et invidunt justo labore Stet clita ea et  gubergren, kasd  magna no rebum. sanctus sea sed takimata ut vero  voluptua. 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.   


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. 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.   


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. 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.   


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse   molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero   eros et accumsan et iusto odio dignissim qui blandit praesent luptatum   zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum   dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh   euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   


Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper   suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem   vel eum iriure dolor in hendrerit in vulputate velit esse molestie   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et   accumsan et iusto odio dignissim qui blandit praesent luptatum zzril   delenit augue duis dolore te feugait nulla facilisi.   


Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet   doming id quod mazim placerat facer possim assum. Lorem ipsum dolor  sit  amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod   tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim  ad  minim veniam, quis nostrud exerci tation ullamcorper suscipit  lobortis  nisl ut aliquip ex ea commodo</p>
    <!-- end .content --></div>
     <div class="sidebar2">
     <!-- end .sidebar2 --></div>
     <div class="footer2">
     </div>
     <!-- end .container --></div>
     <div class="footer">
     <div class="container1">
    <a href="#"><img src="grafiken\impressum.png"   alt="Impressum"></a><a href="#"><img   src="grafiken\agb.png" alt="AGB's"></a><a   href="#"><img src="grafiken\partner.png"   alt="Partner"></a><a href="#"><img   src="grafiken\kontakt.png" alt="Kontakt"></a>
    <!-- end .container1 --></div>
    <!-- end .footer --></div>


</body>
</html>

Alles anzeigen

- - - Aktualisiert - - -

Code

@charset "utf-8";
html
{
    height:100%;
}
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCC;
    margin: 0;
    padding: 0;
    color: #000;
    height:100%;
}


/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
    padding-right: 15px;
    padding-left: 15px; /* Durch Hinzufügen der Auffüllung zu den Seiten der Elemente innerhalb der div-Tags anstelle der div-Tags selbst entfallen jegliche Box-Modell-Berechnungen. Alternativ kann auch ein verschachteltes div-Tag mit seitlicher Auffüllung verwendet werden. */
    position: static;
    color: #000;
    font-size: 9px;
}
a img { /* Dieser Selektor entfernt den standardmäßigen blauen Rahmen, der in einigen Browsern um ein Bild angezeigt wird, wenn es von einem Hyperlink umschlossen ist. */
    border: none;
}


/* ~~ Die Reihenfolge der Stildefinitionen für die Hyperlinks der Site, einschließlich der Gruppe der Selektoren zum Erzeugen des Hover-Effekts, muss erhalten bleiben. ~~ */
a:link {
    text-decoration: underline; /* Sofern Ihre Hyperlinks nicht besonders hervorgehoben werden sollen, empfiehlt es sich, zur schnellen visuellen Erkennung Unterstreichungen zu verwenden. */

}
a:visited {
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
    text-decoration: underline;    
}


/* ~~ Dieser Container umschließt alle anderen div-Tags und weist ihnen ihre als Prozentwert definierte Breite zu. ~~ */
.container {
    width: 60%;
    height:100%;
    position: relative;
    max-width: 1260px;/* Es empfiehlt sich die Eingabe einer maximalen Breite (Eigenschaft max-width), damit dieses Layout auf einem großen Bildschirm nicht zu breit angezeigt wird. Dadurch bleibt die Zeilenlänge besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    min-width: 780px;/* Es empfiehlt sich die Eingabe einer minimalen Breite (Eigenschaft min-width), damit dieses Layout nicht zu schmal angezeigt wird. Dadurch bleibt die Zeilenlänge in den seitlichen Spalten besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. Er ist nicht erforderlich, wenn Sie die Breite von .container auf 100 Prozent setzen. */
}


/* ~~ Für die Kopfzeile wird keine Breite angegeben. Sie erstreckt sich über die gesamte Breite des Layouts. Sie enthält einen Bild-Platzhalter, der durch Ihr eigenes, mit Hyperlink versehenes Logo ersetzt werden sollte. ~~ */
.header {
    background-color: rgba(255,255,255,0);
    background-image: url(grafiken/oben.png);
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    width: 100%;
    height: auto;
    height: 125px;
}


.container1 {
    width: 60%;
    position:relative;
    max-width: 1260px;/* Es empfiehlt sich die Eingabe einer maximalen Breite (Eigenschaft max-width), damit dieses Layout auf einem großen Bildschirm nicht zu breit angezeigt wird. Dadurch bleibt die Zeilenlänge besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    min-width: 780px;/* Es empfiehlt sich die Eingabe einer minimalen Breite (Eigenschaft min-width), damit dieses Layout nicht zu schmal angezeigt wird. Dadurch bleibt die Zeilenlänge in den seitlichen Spalten besser lesbar. IE6 berücksichtigt diese Deklaration nicht. */
    margin: 0 auto; /* Der mit der Breite gekoppelte automatische Wert an den Seiten zentriert das Layout. Er ist nicht erforderlich, wenn Sie die Breite von .container auf 100 Prozent setzen. */
}


/* ~~ Dies sind die Spalten für das Layout. ~~ 


1) Eine Auffüllung wird nur oben und/oder unten in den div-Tags positioniert. Die Elemente innerhalb dieser div-Tags verfügen über eine seitliche Auffüllung. Dadurch müssen Sie keine Box-Modell-Berechnungen durchführen. Zu beachten: Wenn Sie dem div-Tag eine seitliche Auffüllung oder einen Rahmen hinzufügen, werden diese zu der festgelegten Breite addiert und ergeben die *gesamte* Breite. Sie können auch die Auffüllung für das Element im div-Tag entfernen und ein zweites div-Tag ohne Breite und mit der gewünschten Auffüllung im ersten div-Tag einfügen.


2) Für die Spalten wurde kein Rand angegeben, da es sich um fließende Spalten handelt. Wenn Sie unbedingt einen Rand hinzufügen möchten, platzieren Sie ihn nicht auf der Seite in Flussrichtung (z. B. ein rechter Rand in einem div-Tag, das so festgelegt ist, dass das Element nach rechts fließt). In vielen Fällen kann stattdessen eine Auffüllung verwendet werden. Bei div-Tags, bei denen diese Regel gebrochen werden muss, sollten Sie der Regel des div-Tags eine display:inline-Deklaration hinzufügen, um das Problem zu umgehen, dass in einigen Versionen von Internet Explorer der Rand doppelt angezeigt wird.


3) Da Klassen in einem Dokument mehrmals verwendet werden können (und zudem auf ein Element mehrere Klassen angewendet werden können), wurden den Spalten Klassennamen statt IDs zugewiesen. Beispielsweise können zwei div-Tags für eine Seitenleiste bei Bedarf gestapelt werden. Diese div-Tags können problemlos in IDs geändert werden, solange Sie sie nur einmal pro Dokument verwenden.


4) Wenn Sie die Navigation auf der rechten statt auf der linken Seite platzieren möchten, lassen Sie diese Spalten einfach in die andere Richtung fließen (alle nach rechts anstatt alle nach links). Die Spalten werden dann in umgekehrter Reihenfolge dargestellt. Die div-Tags in der HTML-Quelle müssen nicht verschoben werden.


*/
.sidebar1 {
    padding: 10px 0;
    float: left;
    width: 25%;
    padding-bottom: 10px;
    height:100%;


    background-color: rgba(255,255,255,0.3);

}
.content {
    padding: 10px 0;
    width: 50%;
    overflow:auto;
    float: left;
    height:100%;
    background: linear-gradient(to bottom, #E6F4F6 0%,#98C0C0 100%);
    background: #e6f4f6; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U2ZjRmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OGMwYzAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #e6f4f6 0%, #98c0c0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f4f6), color-stop(100%,#98c0c0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e6f4f6 0%,#98c0c0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e6f4f6 0%,#98c0c0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e6f4f6 0%,#98c0c0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f4f6', endColorstr='#98c0c0',GradientType=0 ); /* IE6-8 */


}
.sidebar2 {
    float: right;
    width: 25%;
    padding-bottom: 10px;
    height:100%;
    background: rgba(255,255,255);
    background-color: rgba(255,255,255,0.3);
    padding: 10px 0;
}


/* ~~ Dieser gruppierte Selektor gibt die Listen im .content-Bereich an. ~~ */
.content ul, .content ol { 
    padding: 0 15px 15px 40px; /* Diese Auffüllung setzt die rechte Auffüllung in der obigen Regel für Überschriften und Absätze fort. Die Auffüllung wurde unten für den Abstand zwischen anderen Elementen in den Listen und links für den Einzug platziert. Sie können die Werte nach Bedarf ändern. */
    height: 100%;
}


/* ~~ Stile für die Navigationslisten (können entfernt werden, wenn Sie ein vordefiniertes Ausklappmenü wie Spry verwenden) ~~ */
ul.nav {
    list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
    margin-bottom: 15px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den Inhalten unten erstellt. */
    height: 100%;


}


ul.nav2 {
    list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
    height: 100%;
}
ul.nav a, ul.nav a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
    padding: 5px 5px 5px 15px;
    display: block;  /*Hiermit werden die Blockeigenschaften für den Hyperlink angegeben, sodass das gesamte umschließende LI-Element aufgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
    text-decoration: none;
    height: 100%;



}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {/*  Hiermit wird der Hintergrund und die Textfarbe bei der Navigation mit der Maus und der Tastatur geändert. */    
    background: rgba(255,255,255);
    background-color: rgba(255,255,255,0.9);
    height: 100%;



}


/* ~~ Fußzeile ~~ */
.footer {
    padding: 10px 0;
    background-color: rgba(255,255,255,0);
    background-image: url(grafiken/oben.png);
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    position: absolute; bottom: 0px;
    clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
    font-size: 8px;
    margin-bottom:auto;
    width: 100%;
    color: #000;
    height: 15px;
    z-index:2;
}
.footer2{
    padding: 10px 0;
    position: absolute; bottom: 0px;
    clear: both; /* Diese clear-Eigenschaft bewirkt, dass .container das Ende der fließenden Spalten erkennt und ihren Inhalt aufnimmt. */
    font-size: 8px;
    margin-bottom:-30px;
    width: 100%;
    height: 15px;
    background-color:#000;
}


/* ~~ Verschiedene float/clear-Klassen ~~ */
.fltrt {  /* Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen. Das fließende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* Diese Klasse kann in einem <br />-Tag oder leeren div-Tag als letztes Element nach dem letzten fließenden div-Tag (im #container) platziert werden, wenn #footer entfernt oder aus dem #container herausgenommen wird. */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Alles anzeigen

Beiträge von eS-COM

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem

vermutlich verschachtelungsproblem