CSS von % auf Pixel
Posted: Thu Oct 01, 2009 12:38 pm
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 ***********/