[GELÖST] layout meines cms - kennt sich wer gut mit css ....

newbie2k7 · Post by **newbie2k7** » Tue Sep 04, 2007 6:07 pm

aus und kann mir eventuell bei der fehlerbeseitigung helfen.

lieben dank schon mal im voraus

NaN · Post by **NaN** » Wed Sep 05, 2007 6:17 pm

Schau doch mal unter folgenden Links nach:

http://de.selfhtml.org <- Sehr Umfangreiche Doku rund ums Webdesign
http://www.css-technik.de/rubrik/8/Tutorials-CSS.htm <- Sammlung verschiedener Lösungen
http://www.style-sheets.de/guide <- Gute Zusammenfassung eines kompletten CSS-Leitfadens
http://www.siteform.de/tutorials/Style.html <- vom W3C persönlich erklärt
http://www.subcide.com/tutorials/csslayout/page2.aspx <- CSS-Layout in 12 Schritten erklärt (englisch)

oder einfach mal unter "CSS Turorial", "CSS Layout", "CSS Guide", "Stylesheet..." usw. im Internet suchen.

Falls Du ein ganz spezielles Problem hast, kannst Du das auch hier posten (bestenfalls noch mit Screenshots und CSS-Code etc.).

newbie2k7 · Post by **newbie2k7** » Thu Sep 06, 2007 10:54 am

naja hab halt spezielle sorgen also folgendes:

habe einen container auf der seite in dem noch 3 weitere container sich befinden. aussehen solls so

aber sowohl im ff als auch im ie verrutschen die rechten layer nach unten

.

zweites problem habe nen contentlayer die bricht aber nicht automatisch beim erreichen des layerendes die zeile um

kann das an der tabelle liegen??

erstmal der html code der ersten seite

Code: Select all

<!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">
<head>
<link rel="icon" href="images/krw/favicon.ico" type="image/ico" />

{stylesheet}
{metadata}

</head>
</__body>
<div id="container">
  <div id="headerbox">
    <div id="headerleft"> </div>
    <div id="headerright"> </div>
    <div id="headermiddle">
      <div id="navbox"> 
        <ul id="navi">
          

{*cms_module module="menumanager"*}

         {menu template='KRW Menu' collapse='1'}
               {* End Navigation *}


        </ul>
      </div>
      <div id="navbox4maparea"> <img src="./images/krw/trans.gif" usemap="#map" class="imgmap">
        <map name="map">
          <area shape="rect" coords="3,5,80,65" href="index.php?page=luxus">
          <area shape="rect" coords="89,0,172,65" href="index.php?page=abenteuer" >
          <area shape="rect" coords="178,3,264,65" href="index.php?page=kreuzfahrt" >
          <area shape="rect" coords="270,4,345,64" href="index.php?page=staedte" >
          <area shape="rect" coords="360,5,440,66" href="index.php?page=musical" >
        </map>
      </div>
    </div>
  </div>
  <div id="contentbox">
    <div id="sideleft"> </div>
    <div id="sideright"> </div>
    <div id="content">
      <div id="sitepositionandsearchcontainer">
        <div id="searchbox"> 
          <div id="search"> 
 {search} 

          <div id="cssstyler"> CSS Styler</div>        </div>
        </div>
        <div id="siteposition" class="bold">        {breadcrumbs starttext='Sie befinden sich hier' root='Home' delimiter='»'}    </div>
      </div>



    {content}



    </div>
    <div id="ie_clearing"> </div>
  </div>
  <div id="footer">
    <p class="foot">                     	{global_content name='footer'}                     </p>
  </div>
</div>
<__body>
</__html>

und das is der csscode

Code: Select all

                                 /* Layout */

html, body, p{
 margin:0;
 padding:0;
}

body{
 min-height:101%;
 position:relative;
 color:#000;
 background:#fff;
 text-align:left;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 text-decoration: none;
 background-color:#f7f7c6;
}



#container{
 position:absolute;
 width:1024px;
 left:50%;
 margin-left:-512px;
}

#headerbox {
 position:relative;
 height:215px;
}

#contentbox {
 clear:both;
 width:auto;
 background: #ccc url(images/krw/faux.png) repeat 50% 0;	
}

#headerleft, #headerright {
 background-image: url(images/krw/topbg.gif);
 background-repeat: repeat;
}

#headerleft {
 float:left;
 height:215px;
 width:125px;
 border-right: 1px solid #104b12;
}

#headerright{
 float:right;
 height:215px;
 width:149px;
 border-left: 1px solid #104b12;
}

#headermiddle {
 width:auto;
 height:215px;
 margin-left:125px;
 margin-right:149px;
 background-image: url(images/krw/bg_middle.jpg);
}

#sideleft {
 float:left;
 width:125px;
 z-index:2;
}

#sideright {
 float:right;
 width:149px;
 z-index:3;
}

#navbox {
 position:absolute;
 width:540px;
 height:46px;
 top: 169px;
 overflow:hidden;
}

* html #navbox {
 left:117px;
 width: 580px;
}

#navbox4maparea {
 position:absolute;
 width:450px;
 height:70px;
 top: 0px;
}

#content {
 width:auto;
 margin-left:125px;
 margin-right:149px;
 z-index:1;
 background-color:#f7f7c6;
 padding-top:15px;
 padding-left:10px;
 border-left: 1px solid #104b12;
 border-right: 1px solid #104b12;
}

#sitepositionandsearchcontainer {
 position: relative;
 height: 50px;
 width:auto;
 margin: 0em 1.5em 2em 0em;
 border-bottom: 1px dotted #000;
}

#siteposition {
 float:left;
 width:70%;
 padding-bottom:10px;
}
#searchbox {
 float:right;
 top:0px;
 height:auto;
 width:30%;
 margin: 0em 0em 0em 0em;
 text-align:right;
}

#search {
 height:auto;
 width:100%;
 margin: 0em 0em 0em 0em;
 text-align:right;
 background-color:grey;
}
#cssstyler {
 height:auto;
 padding-top:5px;
 background-color:green;
}

#ie_clearing{
  display:none;
}

#footer {
 border-top: 2px solid green;
 clear:both;
 height:25px;
 background-color:#f7f7c6;
 text-align:center;
}

                                                     /* Navi */

#navi {
 position:absolute;
 top:0px;
 padding:0;
 margin:0 auto 0 0;
 text-align:center; 
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size:11px;
 font-weight: bold;
 letter-spacing: -1px;
 background: #bdbe97;
} 

#navi ul, #navi li {
 float:left;
 margin: 0;
 padding: 0;
 list-style-type: none;
 overflow:hidden;
} 

#navi a {
 width:89px;
 height:19px;
 top:0px;
 border: 1px; 
 border-left-color: #16be19; 
 border-right-color: #003300;
}

#navi a:link, #navi a:visited { 
 line-height: 19px;
 margin: 0;
 padding: 0px 0px;
 text-decoration: none;
 color: #ffffcc;
 background: url(images/krw/nav_bg.gif) repeat-x; 
 border-left: #104b12 1px solid ;
 display: block;
} 

#navi #akt { 
 color: #f3f100; 
}

#navi a:hover {
 color: #6af990;
}


#navi a:hover#akt { 
 color: ffffcc;
}

                                        /* Style */

p{
 color:#006633;
 margin-bottom:1em;
}

.foot { 
 font-size:10px;
 color: #006633;
 text-align: center;
}
.bold
{
 font-weight:bold;
}
a:link {
 font-weight: bold;
 text-decoration: underline;
}

a:hover {
 color: #008000;
}

.imgmap {
 border:0px;
 position:absolute;
 top: 0px;
 left:0px;
 height:70px;
 width:450px;
}

NaN · Post by **NaN** » Thu Sep 06, 2007 11:59 am

Ah... ja, das ist sehr umfangreich.

Mal sehen ob ich das zusammenkriege...

Die HTML-Ausgabe Deines Menüs dürfte bei Dir so aussehen

Code: Select all

<ul id="navi">
   <ul>
      <li>...</li>
   </ul>
</ul>

... könntest Du Dir eigentlich sparen, da der Menumanager automatisch eine Liste () erstellt.
Es sei denn Du hast in deinem eigenen Menü-Template die Sache mit der Liste entfernt.

Problem Nr.1:

Die drei ungleichen DIVs...

Wenn ich Dich richtig verstanden habe, willst Du erreichen, dass die Searchbox auf gleicher Höhe ist wie die Siteposition?

Nimm mal die Leerzeichen aus den DIVs "searchbox", "search" und "siteposition" raus.

heißt ja bekanntlich nonbreaking space (= ein Leerzeichen bei dem nicht umgebrochen wird).

Was eventuell dazu führen könnte, dass die Searchbox eine Zeile tiefer rutscht.

Noch ein kleiner Tipp: Wenn man DIVs die selbst keinen Inhalt haben mit Float-Eigenschaften versieht, kann das bei einigen Browsern zu unerwünschten Nebenwirkungen führen (Bsp. Opera, Safari). Die DIVs kollabieren dann ständig. Was genau man dagegen unternehmen kann weiß ich auch nicht hundertprozentig. Ich probier da meistens auch nur rum. Manchmal hilft es allerdings schon, wenn man diesen DIVs position:relative; gibt.

Problem Nr.2:

Der wiederspenstigen Tabelle...

Ich kann in Deinem Code keine Tabelle sehen. Scheint wohl im Content selbst zu sein.

Probleme bei Tabellen sind folgende:

Wenn Du der Tabelle keine Breite gibst, richtet sich die Breite jeweils nach dem Inhalt.

Wenn Du den Zellen in der Tabelle keine Breite gibst, teilt sich die Breite der Zellen automatisch zu gleichen Teilen auf. (50/50)

Wenn der Text länger ist als die gewünschte Breite, wird er in der Regel bei einem Leerzeichen automatisch umgebrochen.

Der Browser kann Tabellen, die nicht dementsprechend formatiert sind, nicht einfach umbrechen.

Selbst wenn das DIV in dem sich die Tabelle befindet eine feste Breite hat.

Um es kurz zu machen: Ja es liegt an der Tabelle.

Du müsstest der Tabelle/den Zellen eine entsprechende Breite vorgeben.

Entweder im WYSIWYG-Editor oder per CSS. Letzteres hat allerdings Einfluss auf alle im Content befindlichen Tabellen.

Ich hoffe das hilft Dir erstmal weiter.

newbie2k7 · Post by **newbie2k7** » Thu Sep 06, 2007 12:38 pm

danke erstmal also mit dem space war mein fehler manchmal stellt man sich dümmer an als naja...
und die tabelle hat die angegebene breite 100%

NaN · Post by **NaN** » Thu Sep 06, 2007 1:19 pm

100 % wovon?

Der Content-DIV hat width:auto; .

Und auto passte sich automatisch an den Inhalt an.

newbie2k7 · Post by **newbie2k7** » Thu Sep 06, 2007 2:40 pm

ja aber daran liegts nicht auch mit festem wert bricht er nicht um .

das scheint am img zu liegen wenn ich dem den wert align="left" gebe damit der text das bild umschliesst bricht die tabelle aus. sobald ich das wegnehme funzt es

NaN · Post by **NaN** » Thu Sep 06, 2007 2:52 pm

Wie, ist das Problem jetzt gelöst?

Was genau steht denn alles in der Tabelle?

newbie2k7 · Post by **newbie2k7** » Thu Sep 06, 2007 2:56 pm

falls du mal schaun magst das ist der link http://dnm.pytalhost.eu/cmsms/

und noch ne frage wie bekomm ich den abstand im headerlogo welcher im ie entsteht weg??

danke und grüße

NaN · Post by **NaN** » Thu Sep 06, 2007 3:00 pm

Abstände sind bei jedem Browser voreingestellt und unterscheiden sich natürlich.

Wenn Du am Anfang deines CSS anstelle von html, body und p einfach ein * notierst, werden für alle Browser alle Abstände auf 0 gesetzt.

newbie2k7 · Post by **newbie2k7** » Thu Sep 06, 2007 3:03 pm

änderts aber leider nicht

NaN · Post by **NaN** » Thu Sep 06, 2007 3:08 pm

Gib den Abständen mal eine Einheit.

Z.B.:

Code: Select all

*{
 margin: 0px;
 padding: 0px;
}

newbie2k7 · Post by **newbie2k7** » Thu Sep 06, 2007 3:12 pm

ja aber 0 ist 0 egal ob mit oder ob ohne einheit $:-\$ so langsam fang ich an zu verzweifeln.

naja also das problem is auch das der header oben im ie nen kleinen abstand zeigst und ich den nicht wegbekomm.

und das problem mit dem content layer wenn ich den bildern den align-tag wegnehme dann passt das. aber habe dann keinen textumlauf ums bild mehr. naja un will noch mhr tabellenarbeit verhindern.

NaN · Post by **NaN** » Thu Sep 06, 2007 3:12 pm

Mir ist gerade aufgefallen, dass links neben der Tabelle ja noch eine Grafik ist.

Dann darf die Tabelle ja nicht 100% breit sein.

Du müsstest von der Breite der Tabelle die Breite der Grafik abziehen.

NaN · Post by **NaN** » Thu Sep 06, 2007 3:16 pm

newbie2k7 wrote: ja aber 0 ist 0 egal ob mit oder ob ohne einheit ...

Eben nicht.

0 ist... Null was? Prozent, Pixel?

Gerade ältere Browser (z.B. IE6) können Maßangaben nur mit einer entsprechenden Einheit interpretieren.

Aber wenn das auch nicht hilft, bin ich mit meinem Latein bald auch am Ende.

CMS Made Simple Forums

[GELÖST] layout meines cms - kennt sich wer gut mit css ....

[GELÖST] layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....

Re: layout meines cms - kennt sich wer gut mit css ....