CSS von % auf Pixel

Für Fragen und Diskussionen zum Layout und Design, Templates und Stylesheets sowie Themes
Post Reply
11001001
Forum Members
Forum Members
Posts: 41
Joined: Thu Oct 01, 2009 11:27 am

CSS von % auf Pixel

Post 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 ***********/
antibart
Power Poster
Power Poster
Posts: 1162
Joined: Sun Aug 17, 2008 9:29 am

Re: CSS von % auf Pixel

Post 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.
Last edited by antibart on Fri Oct 02, 2009 5:15 am, edited 1 time in total.
11001001
Forum Members
Forum Members
Posts: 41
Joined: Thu Oct 01, 2009 11:27 am

Re: CSS von % auf Pixel

Post 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
dogo
New Member
New Member
Posts: 8
Joined: Wed Jun 25, 2008 8:19 am

Re: CSS von % auf Pixel

Post 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
Last edited by dogo on Fri Oct 02, 2009 8:13 am, edited 1 time in total.
11001001
Forum Members
Forum Members
Posts: 41
Joined: Thu Oct 01, 2009 11:27 am

Re: CSS von % auf Pixel

Post 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
dogo
New Member
New Member
Posts: 8
Joined: Wed Jun 25, 2008 8:19 am

Re: CSS von % auf Pixel

Post by dogo »

nichts, da ist beim export was schiefgegangen.
11001001
Forum Members
Forum Members
Posts: 41
Joined: Thu Oct 01, 2009 11:27 am

Re: CSS von % auf Pixel

Post by 11001001 »

Hallo.
Habe das schon 6 Mal probiert, immer die gleiche Fehlermeldung.

Habe das womba2.xml gespeichert und dann versucht zu exportieren.
dogo
New Member
New Member
Posts: 8
Joined: Wed Jun 25, 2008 8:19 am

Re: CSS von % auf Pixel

Post 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
11001001
Forum Members
Forum Members
Posts: 41
Joined: Thu Oct 01, 2009 11:27 am

Re: CSS von % auf Pixel

Post 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
dogo
New Member
New Member
Posts: 8
Joined: Wed Jun 25, 2008 8:19 am

Re: CSS von % auf Pixel

Post 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
11001001
Forum Members
Forum Members
Posts: 41
Joined: Thu Oct 01, 2009 11:27 am

Re: CSS von % auf Pixel

Post 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
dogo
New Member
New Member
Posts: 8
Joined: Wed Jun 25, 2008 8:19 am

Re: CSS von % auf Pixel

Post 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
Post Reply

Return to “Layout und Design”