[CSS] Einsteiger braucht bisschen Hilfe :/

gamerheino · 11. Mai 2011

Einsteiger braucht bisschen Hilfe :/

Hallo Leute !

Das ist meine erste Website, die ich versuch in CSS Basis umzusetzen. ( an das CMS Joomla ! )
Die Website ansich ist simple aufgebaut, bestehen aus einem

• HEAD BEREICH
mit Header, darunter einem Top Menue, darunter eine Liste mit Modulen ( Search, CurrencySwitch )

• CONTENT BEREICH
mit links einer Navigationsleiste, rechts daneben der Content, über dem Content eine Flash Slideshow

und • FOOTER
links werden Grafiken mit PayMethods eingeblendet, rechts allgemeine Links wie Impressum/Kontakt

Ich versuche das Ganze also in DREI Hauptteile einzuteilen, die sich dann jeweils nochmal in 3 Teile untergliedern.

Das Ergebnis sollte in Etwa so aussehen :

{img-src: //i55.tinypic.com/10hlsva.jpg}

Sieht im Moment aber noch so aus

{img-src: //i52.tinypic.com/qovs5f.jpg}

OK, die Einzelheiten wie Schriftfarbe, Hoovers, active Links usw. krieg ich sicher noch irgendwie hin ...

mein Hauptproblem ist nur, dass ich es einfach nicht hinbekomm, dass sich die einzelnen Teile, die ich oben beschrieben habe, so überlappen, dass Hintergrundgrafik, Position usw. passen.
Ich probiere schon den ganzen Tag rum, und krieg das einfach nicht gebacken !

Könnte mir vll jemand Tipps geben, wie ich zu einer übersichtlichen, ordentlichen Darstellung kommen kann ?

Hier mein aktueller index.php Quellcode :

PHP:

    <? php
   
 
//kein direkter Zugriff
  defined ( '_JEXEC' ) or die( 'Zugriff verboten!' )
 
  ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php  echo  $this -> language ;  ?>" xml:lang"<?php  echo  $this -> language ;  ?>">
    <head>    
    
 <?php
$headerstuff = $this -> getHeadData ();
  reset ( $headerstuff [ 'scripts' ]);
unset( $headerstuff [ 'scripts' ][ $this -> baseurl  .  '/media/system/js/mootools.js' ]);
unset( $headerstuff [ 'scripts' ][ $this -> baseurl  .  '/media/system/js/caption.js' ]);
  $this -> setHeadData ( $headerstuff );
 
   
 
  ?>
         <jdoc:include type="head" />
        <link rel="stylesheet" type="text/css" href="<?php  echo  $this -> baseurl ?>/templates/lorenz-lebold_v2/css/template.css" />
        <link rel="stylesheet" type="text/css" href="<?php  echo  $this -> baseurl ?>/templates/system/css/system.css" />
        <link rel="stylesheet" type="text/css" href="<?php  echo  $this -> baseurl ?>/templates/system/css/general.css" />
        
        
    <meta http-equiv="Content-Type" content=text/html; charset=utf-8" />
    </head>
<body>
    <div id="container">
    
      <div id="oben">
          <div id="header">
        <img src="templates/lorenz-lebold_v2/images/header.jpg" alt="header" width="1110px" height="139px" border="0"/>
        </div>
        <div id="topmenu">
          topmenu
        </div>
        <div id="submodules">
        submodules
        </div>
      </div>
      
 
          <div id="linkesmenu">
              <jdoc:include type="modules" name="left" style="xhtml" />
          </div>
 
       
    <div id="content">
        <div id="slider">
        <img src="templates/lorenz-lebold_v2/images/flashdummy.jpg" />
        </div>
        <div id="texter">
        <jdoc:include type="component" />
        </div>
    </div>
      
    <div id="footer">      
        <div id="paymentbanners">
        payment_banners
        </div>
        <div id="footmenu">
        footmenu
        </div>
    </div>
  </div>    
</body>
</html>

und mein template.css Code

Code:

/* Grundlegendes */

html{
 min-hight: 101%;
}

body{
 fonz-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 background-color:#000;
}

#container{
 background:url(../images/containerbg.jpg) repeat-y; 
 width: 1015px;
 margin: 0 auto;
 padding: 0px;
 height: 1200px;
}

#oben{
 width: 1110px;
 height: 222px;
 padding-top: 0px; 
}

#header{
 width: 1110px;
 height: 139px;
 padding-top: 0px; 
 float:right;
}

#topmenu{
 width: 1012px;
 height: 45px;
 background: url(../images/topmenubg.jpg);
 display:inline;
}

#submodules{
 width: 1012px;
 height: 38px;
 background:#000;
 display:inline;
}

#linkesmenu{
 width: 230px;
 background-image: url(../images/menubg.jpg) repeat-y;
 padding: 0px;
 float: left;
 text-align:center;
}

#content{
 width: 785px;
 margin: 0px;
 float: right;
 background: url(../images/contentbg.jpg) repeat-y;
}

#slider{
 
 width: 785px;
 height: 479px;
 float: right;
 background:#CCC;

}

#texter{
 width: 785px;
 float: right
 margin: 0px;
}

#footer{
 width: 1015px;
 height: 130px;
 margin: 0px;
 background:url(../images/footerbg.jpg) repeat-y!important;
}

#paymentbanners{
 width: 300px;
 float: left;
 background-color:#535353;
}
#footmenu{
 width: 300px;
 float: right;
 background-color:#5F5F5F;
}

Wäre über jede Hilfe sehr dankbar !!!

Gruß!

Anzeige

iPlayboy · 12. Mai 2011

AW: Einsteiger braucht bisschen Hilfe :/

1. falsch geschrieben 2. total idiotisch .

so ist's richtig.

zudem würde ich dir einen css-reset empfehlen. warum und wofür, einfach diesen artikel lesen:

That Web Guy - Resetting your CSS and your sanity

zudem empfehle ich dir das firefox plugin "firebug" zu laden und dir z.b. auf cssmania.com den aufbau von webseiten anzuschauen, wie die es gemacht haben. sowas hat mir früher geholfen.

gamerheino · 12. Mai 2011

AW: Einsteiger braucht bisschen Hilfe :/

warum idiotisch? sofortiger Scrollbalken im FF, damit die Seite nicht kurz hüpft, wenn er sich bei einer längeren Unterseite erst dazuschaltet. Darum die 101% :/

Danke wegs dem Link, schau ich mir mal an !

Nanobyte · 12. Mai 2011

AW: Einsteiger braucht bisschen Hilfe :/

Wenn du die Scrollleiste unbedingt haben willst, dann mach:
overflow-y: scroll

onip · 12. Mai 2011

AW: Einsteiger braucht bisschen Hilfe :/

mach es so wie Nanobyte sagt:

HTML:

body {
 overflow-y: scroll;
}

Nützliche Suchen

[CSS] Einsteiger braucht bisschen Hilfe :/

Videos zum Themenbereich