• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

vermutlich verschactelungsproblem

E

eS-COM

Neues Mitglied
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>
 
HAllo,

so kann dir aber keiner Helfen bzw. hat/konnte das keiner.

Es geht um HTML und CSS im zusammen spiel, wie sollen wir da jetzt dir da helfen mit den infos.
(pack jetzt aber nicht in neuen beitrag die css rein, wir brauch das online in aktion.)
Hast dir mal Create a new Fiddle - jsFiddle angeschaut? geht auch ohne FTP und reicht bei kleineren sachen.

Also nur als tipp: footer position absolute und inhalt margin-bottom: höhe footer px. damit geht der inhalt nie unter dem footer.
mehr geht nicht mit den wenigen infos.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben