CSS von % auf Pixel
CSS von % auf Pixel
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 ***********/
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
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.
Last edited by antibart on Fri Oct 02, 2009 5:15 am, edited 1 time in total.
Re: CSS von % auf Pixel
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
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
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, die müsstest Du ändern in
.
hth
dogo
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;}
Code: Select all
.main{width:1000px; margin:1em auto;position:relative;}
hth
dogo
Last edited by dogo on Fri Oct 02, 2009 8:13 am, edited 1 time in total.
Re: CSS von % auf Pixel
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
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
nichts, da ist beim export was schiefgegangen.
Re: CSS von % auf Pixel
Hallo.
Habe das schon 6 Mal probiert, immer die gleiche Fehlermeldung.
Habe das womba2.xml gespeichert und dann versucht zu exportieren.
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
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
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
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
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
.content{padding:0.5em 2em;border:1px solid #373737;font-size:1.125em;}Wenn ich Dich noch etwas nerven darf, wie kann ich den Abstand vom Rand zum Text etwas kleiner machen?
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
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
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
ok, sehr schön.
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
bitte tu das.Danke, auch für den Link. Werde mir das mal durch lesen.
Wie im ursprünglichen Beschreibungstext zum Theme Womba beschrieben, ist die Seite mehrsprachig, realisiert mit CMSMS MLE.Ab und zu steht auf der Seite oben diese Fehlermeldung:...
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