Page 1 of 1

CSS von % auf Pixel

Posted: Thu Oct 01, 2009 12:38 pm
by 11001001
Hallo.

Ist mein erstes  Posting. Ich habe cmsmadesimple installiert und bin auf der Suche nach einem einfachen Template. Ich habe jetzt das Wombat-Template genommen. Kann mir da jemand helfen, dass die Breite der Seite nich in % sondern absolut ist (1000 px)?
Denn jetzt verschieben sich die Bilder, wenn man die Seite mit einer kleineren Auflösung ansieht.
Ich habe hier das CSS dazu:

Danke

11001001

/*Box Model Hack by Tantek Çelik*/
/*http://tantek.com/CSS/Examples/boxmodelhack.html*/
/*http://www.thenoodleincident.com/tutori ... ic4.html*/
/********** Basic Layout ***********/
*{
margin:0;
padding:0;
}

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, sans-serif;
color: #000;
background-color: #385C72;
            }

#header {
margin: 21px 42px 42px 42px;
border: 1px solid #373737;
background: #385C72;         
  background-image:url(uploads/womba/ometepe.jpg);
  background-repeat:no-repeat;
  background-position:center;
  height: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 150px;
}
html>body #header {
height: 150px; /* ie5win fudge ends */
}
#navi {
position: absolute;
top: 215px;
left: 0px;
        margin-left: 42px;
        border: 1px solid #373737;
background: #eef;
        font-size: .9em;
width: 21%; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 21%;
}
html>body #navi {
width: 21%; /* ie5win fudge ends */
}

.center{
text-align:center;
margin:1em;
}

#main {
margin: 42px 42px 42px 27%;
padding: 2%;
border: 1px solid #373737;
background: #fff;
        min-height:500px;
}


#content {
padding: 2%;
}

.invisible{display: none !important;}


/********** End Basic Layout ***********/

/********** Basic Style ***********/

div#header h1  {
color:white;
margin-top:50px;
text-align: center;
line-height: 1em;
letter-spacing:0.3em;
}

div#main {
  font-size: 1em;
  line-height: 1.3em;
  text-align:justify;
}

span#lang{
  padding:1em;
  margin: 1em 0.5em;   
}

div#spende{
  padding:0px;
  margin: 0.5em;   
  border: 1px solid #373737;
  background-color: #ddd;
}

div#Sphead{
margin:0px;
padding:0.5em;
font-weight: bold;
background-color: red;
}

div#spende p{
font-size: .8em;
margin:0px;
padding:0.5em;
}

div#main p{
margin: 0 0 1em 0;
}

.rechts{
border: 1px solid #373737;
margin:0.3em 0 1em 1em;
}

.links{
border: 1px solid #373737;
margin:0.3em 1em 1em 0;
}

/* HEADINGS */

div#main h2 {
color: #294B5F;
font-size: 1.5em;
text-align: left;
padding-left: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #e7ab0b;
              line-height: 1.5em;
              margin: 0;
}
div#content h3 {
  color: #294B5F;
  font-size: 1.3em;
  line-height: 1.2em;
  margin: 1em 0 0 0;
}

div#content h4 {
  color: #294B5F;
  font-size: 1.2em;
  line-height: 1.1em;
  margin: 0 0 0.25em 0;
}
div#content h5 {
  color: #294B5F;
  font-size: 1.1em;
  line-height: 1em;
  margin: 0 0 0.25em 0;
}
h6 {
  color: #294B5F;
  font-size: 1em;
  line-height: 1.3em;
  margin: 1.3em 0 0 0;
}

/* END HEADINGS */

/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
  list-style-type:circle;
  margin: 0.5em 0 0.5em 0;
}

div#main ul li,
div#main ol li {
  margin: 0 0 0.25em 3em;
}

/* definition lists topics on bold */
div#main dl dt {
  font-weight: bold;
  margin: 0 0 0 1em;
}
div#main dl dd {
  margin: 0 0 1em 1em;
}

div#main dl {
  margin-bottom: 2em;
  padding-bottom: 1em;
  border-bottom: 1px solid #c0c0c0;
}

/* END LISTS */
/********** End Basic Style ***********/

Re: CSS von % auf Pixel

Posted: Thu Oct 01, 2009 3:23 pm
by antibart
Die Breite der Seite kannst bestimmen, in dem um alle vorhandenen Divs noch ein Div packst (zb: ... ) in jnem in den css width: 1000px; zuweist.

Re: CSS von % auf Pixel

Posted: Fri Oct 02, 2009 6:58 am
by 11001001
Hallo.

So ganz habe ich das noch nicht verstanden.
Ich hatte (nach Deinem ersten Posting) alle % durch px ersetzt, war keine Änderung zu sehen.

Wenn ich dies ...  um alle div machen soll, dann sind das ja einige. Kann ich machen.
Es soll ja so sein, dass die gesamte Tabelle dann 1000 px breit ist.

Oder hat jemand ein Beispiel CSS von einer Seite mit fester Breite?

Gruß

11001001

Re: CSS von % auf Pixel

Posted: Fri Oct 02, 2009 7:59 am
by dogo
Hallo 11001001,

ich bin der Autor des Themas womba, freut mich, daß Du damit arbeitest  :)
Womba ist nicht wirklich für feste Breiten gedacht gewesen, die Breite der des Contentbereichs wird sozusagen indirekt bestimmt, indem ich von der verfügbaren Fensterbreite rechts und links 42px abziehe. Das ist natürlich bei hohen Auflösungen unschön.
Aus diesem Grund hab ich das Thema weiterentwickelt (ok, neugeschrieben), bin nur noch nicht dazu gekommen, es in den FullThemes einzustellen. Du kannst es Dir unter
http://www.ometepe-projekt-nicaragua.de/upload/file/themes/womba2.xml
herunterladen. Bilder wurden entfernt.
womba2 basiert auf dem Emastic-Framework. Im Stylesheet womba2 findust Du die Anweisung

Code: Select all

.main{width:96%; max-width:84em; margin:1em auto;position:relative;}
, die müsstest Du ändern in

Code: Select all

.main{width:1000px; margin:1em auto;position:relative;}
.
hth
dogo

Re: CSS von % auf Pixel

Posted: Fri Oct 02, 2009 8:11 am
by 11001001
Hallo dogo.

Das ist ja witzig, bin ich ja bei der Quelle ;-)

Habe das womba2.xml gespeichert und wollte es importieren.
Da kam die Fehlermeldung:
Beim Entfernen und Wechsel der angegebenen Dateien in diesem Theme ist ein Problem aufgetreten
Was habe ich da falsch gemacht?

Grüße

11001001

Re: CSS von % auf Pixel

Posted: Fri Oct 02, 2009 8:15 am
by dogo
nichts, da ist beim export was schiefgegangen.

Re: CSS von % auf Pixel

Posted: Fri Oct 02, 2009 8:28 am
by 11001001
Hallo.
Habe das schon 6 Mal probiert, immer die gleiche Fehlermeldung.

Habe das womba2.xml gespeichert und dann versucht zu exportieren.

Re: CSS von % auf Pixel

Posted: Fri Oct 02, 2009 8:33 am
by dogo
ok. die erste version war falsch. lösche die die alte version. bitte rufe nochmals
http://www.ometepe-projekt-nicaragua.de ... womba2.xml auf und speichere die Datei.
habe diese datei gerade erfolgreich in 2 andere Projekte importiert.
bin gerade etwas kurz dran, muß auf arbeit. wenn's noch nicht funktioniert -> frühestens heute Abend.
hth
dogo

Re: CSS von % auf Pixel

Posted: Sat Oct 03, 2009 8:45 am
by 11001001
Danke!
Jetzt hat es geklappt.
Kann die Breite fix einstellen.

Wenn ich Dich noch etwas nerven darf, wie kann ich den Abstand vom Rand zum Text etwas kleiner machen?


Grüße

11001001

Re: CSS von % auf Pixel

Posted: Sat Oct 03, 2009 10:48 am
by dogo
Wenn ich Dich noch etwas nerven darf, wie kann ich den Abstand vom Rand zum Text etwas kleiner machen?
.content{padding:0.5em 2em;border:1px solid #373737;font-size:1.125em;}
diese Zeile steht 2 Zeilen unter der, die Du geändert hast, um die Breite fix zu machen.
dann lies bitte http://de.selfhtml.org/css/eigenschaften/innenabstand.htm ff.

hth
dogo

Re: CSS von % auf Pixel

Posted: Sat Oct 03, 2009 11:13 am
by 11001001
Danke, auch für den Link. Werde mir das mal durch lesen.

Ab und zu steht auf der Seite oben diese Fehlermeldung:
string(114) "Smarty error: [in tpl_body:47 line 7]: syntax error: unrecognized tag 'lang' (Smarty_Compiler.class.php, line 590)"
Bei Reload verschwindet sie meist  und taucht dann später wieder auf.

Grüße

11001001

Re: CSS von % auf Pixel

Posted: Sat Oct 03, 2009 2:49 pm
by dogo
ok, sehr schön.
Danke, auch für den Link. Werde mir das mal durch lesen.
bitte tu das.
Ab und zu steht auf der Seite oben diese Fehlermeldung:...
Wie im ursprünglichen Beschreibungstext zum Theme Womba beschrieben, ist die Seite mehrsprachig, realisiert mit CMSMS MLE.
Da Du sicherlich die Originalversion benutzt, fehlen die MLE-spezifischen Erweiterungen.
Es reicht also, im Template {lang} zu entfernen, welches für das Umschalten der Sprache benutzt wird.

dogo