(Opgelost)Template Flowered: fixed width maken

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
User avatar
Silvie
Power Poster
Power Poster
Posts: 307
Joined: Wed Jun 18, 2008 12:45 pm

(Opgelost)Template Flowered: fixed width maken

Post 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%;
	}
Last edited by Silvie on Fri Feb 10, 2012 3:05 pm, edited 2 times in total.
Top
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm

Re: Template Flowers: fixed width maken

Post by timdebuurman »

Hoi Silvi,

Probeer eens de display: inline
bij #container weg te halen.
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
Top
User avatar
Silvie
Power Poster
Power Poster
Posts: 307
Joined: Wed Jun 18, 2008 12:45 pm

Re: Template Flowers: fixed width maken

Post 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.
Top
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm

Re: Template Flowers: fixed width maken

Post 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
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
Top
User avatar
Silvie
Power Poster
Power Poster
Posts: 307
Joined: Wed Jun 18, 2008 12:45 pm

Re: Template Flowers: fixed width maken

Post by Silvie »

Wow alvast bedankt Tim!!
Ik ga er morgen mee aan de slag en laat het je weten.
Top
User avatar
Silvie
Power Poster
Power Poster
Posts: 307
Joined: Wed Jun 18, 2008 12:45 pm

Re: Template Flowers: fixed width maken

Post 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.
Top
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm

Re: Template Flowers: fixed width maken

Post by timdebuurman »

Fijn dat het opgelost is.

Ik zal de afbeeldingen beschikbaar houden.
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
Top
User avatar
Silvie
Power Poster
Power Poster
Posts: 307
Joined: Wed Jun 18, 2008 12:45 pm

Re: Template Flowers: fixed width maken

Post by Silvie »

Ik heb ze hier ook opgeslagen.
Top
User avatar
timdebuurman
Power Poster
Power Poster
Posts: 891
Joined: Sun Nov 06, 2011 8:15 pm

Re: (Opgelost)Template Flowers: fixed width maken

Post by timdebuurman »

sylvie,

je kan misschien voor de duidelijkheid in de titel "Flowers" vervangen voor "Flowered"
NextDoorMedia - Online Marketing Partner
https://www.nextdoormedia.nl
Top
Post Reply

Return to “Dutch - Nederlands”