CMS Made Simple Forums

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

(Opgelost)Template Flowered: fixed width maken

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

Page 1 of 1

(Opgelost)Template Flowered: fixed width maken

Posted: Tue Feb 07, 2012 3:00 pm
by Silvie
Deze template heeft geen fixed width maar gaat met de schermbreedte mee. Ben nu al een paar uur aan het puzzelen maar kom er niet uit. Zie het even niet meer. Ik wil er graag een website met vaste breedte van maken van 800px. Weet iemand hierop het antwoord?

CCS:

Code: Select all

html {
background-image: url(uploads/images/templates/flowered/right_side.gif);
background-repeat: repeat-y;
background-position: top right;
}

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-image: url(uploads/images/templates/flowered/left_side1.gif);
background-repeat: repeat-y;
color: #000000;
}
#container {
	width: 800px;
	display: inline;
}
#main-title {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
letter-spacing: 5px;
text-align: right;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
padding-right: 50px;
background-color: #333333;
color: #ffffff;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}


#header-image {
background-color: #8d3371;
background-image: url(uploads/images/templates/flowered/flower.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 177px;
border-top: 2px #fff001 solid;
border-bottom: 2px #fff001 solid;
margin-left: 110px;
margin-right: 110px;
}

#navbar {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .65em;
text-align: center;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
background-color: #333333;
color: #ffffff;
word-spacing: 8px;
border-bottom: 2px #fff001 solid;
}

#navbar a:link, #navbar a:visited {
color: #ffffff;
word-spacing: none;
}

#navbar a.current {
color: #fff001;
}

#navbar a:hover {
color: #fff001;
text-decoration: underline;
}


#headline {
font-size: .65em;
padding-top: 30px;
text-align: justify;
background-color: #F2F2F2;
padding-left: 100px;
padding-right: 100px;
margin-left: 110px;
margin-right: 110px;
margin-bottom: 0;
line-height: 1.5em;}


p.byline {
text-align: right;
margin-bottom: 0;
}

h1 {
margin-left: 110px;
margin-right: 110px;
font-size: .8em;
padding-bottom: 3px;
padding-top: 23px;
padding-left: 50px;
padding-right: 0;
color: #000000;
border-bottom: 1px #fff001 solid;
letter-spacing: 5px;
font-weight: bold;
background-color: #F2F2F2;
margin-top: 0;
margin-bottom: 0;
}


#main-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
line-height: 1.8em;
background-color: #ffffff;
}

#main-text p {
text-align: justify;
margin-left: 50px;
margin-right: 50px;
}

h2 {
padding-bottom: 3px;
padding-right: 0;
color: #000000;
border-bottom: 1px #000000 solid;
letter-spacing: 5px;
margin-left: 50px;
margin-right: 50px;
font-size: 1em;
margin-top: 0;
padding-top: 10px;
}

p, ul, ol, table {
margin-top: 17px;
margin-bottom: 0;
}

ol, ul {
margin-left: 75px;
margin-right: 75px;
}

a:link, a:visited {
text-decoration: none;
font-weight: bold;
color: #ff0000;
}

a:hover {
text-decoration: underline;
}


#footer {
text-align: center;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 11px;
margin-top: 20px;
padding-right: 50px;
background-color: #8d3371;
color: #ffffff;
font-weight: bold;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}

#footer a:link, #footer a:visited {
color: #ffffff;
text-decoration: none;
}

#footer a:hover {
text-decoration: underline;
color: #ffffff;
}
.right {
float: right;
text-align: right;
width: 50%;
}
.left {
float: left;
text-align: left;
padding-left: 50px;
}
.right h3 {
margin-top: 0px;
font-size: 90%;
}

.stretch,
	.clear {
		clear:both;
		height:1px;
		margin:0;
		padding:0;
		font-size: .7em;
		line-height: 1px;
	}
	.clearfix:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block;
		width: 100%;
	}

	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */


/* replace */
	.replace {
		display:block;

		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	/* tidy these up */
	.replace * {
		text-indent: -10000px;
		display:block;

		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	.replace a {
		text-indent:0;
	}
	.replace a span {
		text-indent:-10000px;
	}
/* end replace */


/* accessibility */
     span.accesskey {
     	text-decoration:none;
     }
     .accessibility {
     	position: absolute;
     	top: -999em;
     	left: -999em;
     }
dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper clears the floating elements of the menu */

#menuwrapper {
        overflow: hidden;
        background-color: black;
        border-bottom: 1px solid #e5d205;
        width: 776px;
        font-size: .65em;
        color: white;
        margin-left: 110px;
        }

/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li {
        width: 200px;

       }


/* Unless you know what you do, do not touch this */

#primary-nav, #primary-nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
#primary-nav ul {
	position: absolute;
	top: auto;
	display: none;
	}
#primary-nav ul ul {
	margin-top: 1px;
 	margin-left: -1px;
	left: 100%;
	top: 0px;
	}

#primary-nav li {
	margin-left: -1px;
	float: left;
	}
#primary-nav li li {
	margin-left: 0px;
	margin-top: -1px;
	float: none;
	position: relative;
	}

/* Styling the basic apperance of the menu elements */

#primary-nav a {
	display: block;
	margin: 0px;
	padding: 5px 10px;
	text-decoration: none;
        color : white;
	}
#primary-nav li a {
	border-right: 1px solid #e5d205;
	border-left: 1px solid #e5d205;
        color : white;
	}
#primary-nav li li a {
	border: 1px solid #e5d205;
	}
#primary-nav li, #primary-nav li.menuparent {
	background-color: black;
        color : white;
	}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
	background-color: black;
        color: red;
	}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
	background-image: url(modules/MenuManager/images/arrow.gif);
	background-position: center right;
	background-repeat: no-repeat;
          color: red;
	}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
	background-color: black;
        color : red;
	}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
	display: none;
          color: red;
	}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
	display: block;
	}


/* IE Hacks */

#primary-nav li li {
	float: left;
	clear: both;
	}
#primary-nav li li a {
	height: 1%;
	}

Re: Template Flowers: fixed width maken

Posted: Tue Feb 07, 2012 3:34 pm
by timdebuurman
Hoi Silvi,

Probeer eens de display: inline
bij #container weg te halen.

Re: Template Flowers: fixed width maken

Posted: Tue Feb 07, 2012 3:49 pm
by Silvie
Bedankt voor je antwoord Tim.
Ik had het al geprobeerd.
De header en footer worden dan heel smal verliezen hun kleur en de rest blijft hetzelfde. Schermvullend en uit rekbaar.

Re: Template Flowers: fixed width maken

Posted: Tue Feb 07, 2012 9:04 pm
by timdebuurman
Hoi Silvie,

Waar je aan begint moet je afmaken, dus ik ben voor je bezig geweest.
Er waren inderdaad wel een stuk meer aanpassingen nodig.

Even stap-voor-stap

•Download deze afbeelding:
http://www.timdebuurman.nl/silvie/bg.jpg
en overschrijf de bg.jpg van de template.

•Download deze afbeelding:
http://www.timdebuurman.nl/silvie/mainbg.jpg
en plaats deze bij de andere afbeeldingen. (dus in .../templates/flowered/)

•Vervang deze onderdelen van de stylesheet:

Code: Select all

html {
background-image: url(uploads/images/templates/flowered/mainbg.jpg);
background-repeat: repeat;
}

body {
background-image: url(uploads/images/templates/flowered/bg.jpg);
background-repeat: repeat-y;
background-position: center top;
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-repeat: repeat-y;
color: #000000;
}

#container {
width: 800px;
margin-left: 50%;
position: relative;
left: -509px;
}

#main-title {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
letter-spacing: 5px;
text-align: right;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
padding-right: 50px;
background-color: #333333;
color: #ffffff;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
width: 750px;
}


#header-image {
background-color: #4d80b9;
background-image: url(uploads/images/templates/flowered/flower.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 177px;
border-top: 2px #ff4700 solid;
border-bottom: 2px #ff4700 solid;
margin-left: 110px;
margin-right: 110px;
width: 800px;
}

#main-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
line-height: 1.8em;
background-color: #ffffff;
width: 800px;
}
Dat was m.

groet Tim

Re: Template Flowers: fixed width maken

Posted: Tue Feb 07, 2012 9:39 pm
by Silvie
Wow alvast bedankt Tim!!
Ik ga er morgen mee aan de slag en laat het je weten.

Re: Template Flowers: fixed width maken

Posted: Fri Feb 10, 2012 1:38 pm
by Silvie
Kan die weer? ( chrome melde malware op deze site als ik berichten wou plaatsen)
Ik ga het gewoon proberen:

Tim, heel erg bedankt het werkt goed! Doe er je voordeel mee mensen, het is een mooie duidelijke template.

Re: Template Flowers: fixed width maken

Posted: Fri Feb 10, 2012 1:45 pm
by timdebuurman
Fijn dat het opgelost is.

Ik zal de afbeeldingen beschikbaar houden.

Re: Template Flowers: fixed width maken

Posted: Fri Feb 10, 2012 1:56 pm
by Silvie
Ik heb ze hier ook opgeslagen.

Re: (Opgelost)Template Flowers: fixed width maken

Posted: Fri Feb 10, 2012 2:03 pm
by timdebuurman
sylvie,

je kan misschien voor de duidelijkheid in de titel "Flowers" vervangen voor "Flowered"
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited