CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

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

https://forum.cmsmadesimple.org/viewtopic.php?t=14805

Page 1 of 3

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

Posted: Tue Sep 04, 2007 6:07 pm
by newbie2k7
aus und kann mir eventuell bei der fehlerbeseitigung helfen. ??? ??? ???
lieben dank schon mal im voraus

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

Posted: Wed Sep 05, 2007 6:17 pm
by NaN
Schau doch mal unter folgenden Links nach:

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

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

Posted: Thu Sep 06, 2007 10:54 am
by newbie2k7
naja hab halt spezielle sorgen also folgendes:

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

Image

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

Image.

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

Image

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;
}

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

Posted: Thu Sep 06, 2007 11:59 am
by NaN
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.

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

Posted: Thu Sep 06, 2007 12:38 pm
by newbie2k7
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%

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

Posted: Thu Sep 06, 2007 1:19 pm
by NaN
100 % wovon?

Der Content-DIV hat width:auto; .

Und auto passte sich automatisch an den Inhalt an.

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

Posted: Thu Sep 06, 2007 2:40 pm
by newbie2k7
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

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

Posted: Thu Sep 06, 2007 2:52 pm
by NaN
Wie, ist das Problem jetzt gelöst?

Was genau steht denn alles in der Tabelle?

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

Posted: Thu Sep 06, 2007 2:56 pm
by newbie2k7
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

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

Posted: Thu Sep 06, 2007 3:00 pm
by NaN
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.

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

Posted: Thu Sep 06, 2007 3:03 pm
by newbie2k7
änderts aber leider nicht  ???

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

Posted: Thu Sep 06, 2007 3:08 pm
by NaN
Gib den Abständen mal eine Einheit.

Z.B.:

Code: Select all

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

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

Posted: Thu Sep 06, 2007 3:12 pm
by newbie2k7
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.

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

Posted: Thu Sep 06, 2007 3:12 pm
by NaN
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.

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

Posted: Thu Sep 06, 2007 3:16 pm
by NaN
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.
All times are UTC
Page 1 of 3

Powered by phpBB® Forum Software © phpBB Limited