Hoe stel ik dit in?

maxxxie · 10 sep 2011

Hallo iedereen, Ik heb sindskort een website gemaakt, maar mijn idee was dat ik een bovendeel maak, waar alles in staat, en een footer, daartussen zet ik dan een image file die steeds de website langer maakt wanneer dat nodig is.

Hieronder zie je het probleem:

Mijn oplossing daarvoor is om dat gat op te vullen met een image die steeds zichzelf kopieert wanneer de div's groter worden.

Hieronder zie je die image:

Misschien kan iemand mij het uitleggen of het stukje css voor me schrijven?

Mvg,

Max

Example5 · 10 sep 2011

heel simpel, geef die div de code mee:

background-repeat: repeat-y;

maxxxie · 10 sep 2011

kan je het misschien iets duidelijker uitleggen?

Example5 · 10 sep 2011

nou je maakt meerdere divs voor de header, de zijkanten en het midden stuk. als je een container div daaromheen zet of een div tussen de het middenstuk en de footer maakt, waar je de code hierboven inzet, dan herhaalt de ingesteld background zit verticaal.

als je er nog niet uitkomt post dan even de css code van je template

maxxxie · 10 sep 2011

Example5 zei:
nou je maakt meerdere divs voor de header, de zijkanten en het midden stuk. als je een container div daaromheen zet of een div tussen de het middenstuk en de footer maakt, waar je de code hierboven inzet, dan herhaalt de ingesteld background zit verticaal.

als je er nog niet uitkomt post dan even de css code van je template

Ik had dit geprobeerd: #main {
background:url("../img/ui/bg_main_repeat.jpg") repeat-y top center;
maar helaas, werkt niet

PHP:

body {
	background: url(img/bg.jpg) no-repeat top center #000;
	margin:0;
	padding:0;
		font-family:Georgia, "Times New Roman", Times, serif;

	font-size:12px;
	color:#8e8e8e;

}
#content {
	width:500px;
	vertical-align:top;
	margin:0px 60px  auto;
	
}

#main {
	background:url("../img/ui/bg_main_repeat.jpg") repeat-y top center;
}

.postui2 {
	background:url(img/content.png);
	margin:0 auto;
	width:500px;
	text-shadow:0px 1px 4px #000;
}

	.text-title {
		height:55px;
		text-shadow:0px 1px 4px #000;
	}
	
	.text-end {
		background-position:left bottom;
		height:10px;
		margin-bottom:26px;
	}
	
	.text-con {
		background-position:center right;
		background-repeat:repeat-y;
		line-height:1.8;

		text-align:left;
	}
	
	.con-wrap {
		padding:2px 20px;
	}
	
		.text-title h2 {
			float:left;
			font-size:16px;
		    text-shadow:0 2px 4px #000;
			line-height:22px;
			text-indent:20px;
		}
		a {
		color:#82877c;
		text-decoration:none;
	}
	
		a:hover {
			color:#FFF;
		}
	
		a:active {
			color:#afc09e;
		}
		
 table {
    border:0;
    margin:0 auto;
    margin-bottom: 10px;
	font-size:11px;
	width:100%;
}

.thell { 
    background: #000000;
    color:#82828;
    padding:5px; 
    border-bottom: 1px dashed #565656; 
}
.tdunkel {
	 background: #1D1D1D; 
	 color:#C1C1C1; padding:5px; 
	 border-bottom: 1px dashed #565656; 
}
.tred {
	 background: #900; 
	 color:#8e8e8e; 
	 padding:5px; 
	 border-bottom: 1px dashed #565656; 
}
.topLine { 
    background: #101010; 
    color:#FFF; 
    padding:5px; 
    border-bottom: 1px dashed #565656; 
}


ul {
	list-style: square;
}
#sidebar-left {
	float:left;
	width:190px;
    vertical-align:top;
}
#sidebar-right {
	float:right;
	width:190px;
	vertical-align:top;
}

.sb-ui {
	background:url("img/sidebar_ui.png");
}

.sb-title {
	height:60px;
	text-align:center;
	padding-right:2px;

}
		
.sb-bt {
			height:15px;
			background-position:bottom left;
			margin-bottom:0px;
			width:190px;
}
		
.sb-cont {
			background-position:center right;
			background-repeat:repeat-y;
}
		
.sb-title span {
				color: #8e8e8e;
				text-shadow:0 2px 4px #000;
				font-size:16px;
				line-height:50px;
				font-weight:400;
}
			
.sb-middle {
				margin:0px auto;
				width:170px;
				color:#cbcbcb;
				text-align:left;
	
}
.sb-tren {
            height:2px;
			width:170px;
			margin-top:5px auto;
			clear:both;
			background:url(img/sb-tren.png) no-repeat;
}
.on, .sb-cont {
				color:#546b21;
				text-align:center;
			}
			
			.off, .sb-cont {
				color:#530d10;
				text-align:center;
			}
			
			.info, .sb-cont{
				color:#8e8e8e;
				text-align:center;

			}
			.info a, .sb-cont{
				color:#530d10;
				text-align:center;

			}
			.info a:hover, .sb-cont{
				color:#39F;
				text-align:center;

			}
input.button1 {
height:34px;
width:79px;
background:url(img/btn.png);
color:#CCC;
font-size:10px;
border:none;
text-align:center;
line-height:22px;
text-shadow:0 2px 3px #000;


		}

			input.button1:hover {
			background:url(img/btnh.png) no-repeat;
		    color:#CCC;
		}
			input.button1:active {
			background:url(img/btna.png) no-repeat;
		    color:#FFF;
		}
		
		input.button2 {
height:34px;
width:120px;
background:url(img/isbutton.png);
color:#CCC;
font-size:11px;
border:none;
text-align:center;
line-height:22px;
text-shadow:0 2px 3px #000;
margin:2px;


		}

			input.button2:hover {
			background:url(img/isbuttonh.png) no-repeat;
		    color:#CCC;
		}
			input.button2:active {
			background:url(img/isbuttona.png) no-repeat;
		    color:#FFF;
		}
		input.txt {
			width:160px;
			height:30px;
			color:#CCC;
			text-indent:5px;
			font-size:12px;
			background:url(img/input.png);
			border:none;
			margin: 0 0 1px;
		}
				input.txt:hover {
					background:url(img/inputh.png);
		}
	#main {
	width:1000px;
	background:url ("/img/main.png");
	padding-top:-100px;
}
	
	
		a.sb-link {
		color:#82877c;
		margin:5px 0;
		display:block;
		font-size:11px;

		text-decoration:none;
		text-align:left;
	}
	
		a.sb-link:hover {
			color:#FFF;
		}
	
		a.sb-link:active {
			color:#afc09e;
		}
		#board {
			background:url(img/board.png);
			width:190px;
			height:75px;
		}
			#board:hover {
			background:url(img/board_h.png);
		}
				#download {
			background:url(img/download.png);
			width:190px;
			height:75px;
		}
			#download:hover {
			background:url(img/download_h.png);
		}

		div#navi {
  height:99px;
  background:#038C4C;
  color:#FFF;
  background: url(img/navi.png);
  text-align:center;
  width:1280px;
  font-size:16px;
  margin:0px auto;
}

div#navi ul {
  margin:auto;
  margin-left:100px;
  list-style:none;
  width:800px;
}

div#navi ul li {
  float:left;
  font-size: 1.0em;
  width:110px;
  margin-right:0px;
  border: 
}

div#navi a {
  display:block;
  line-height:130px;
  height:54px;
  width:110px;
  text-decoration:none;
  color:#999;
  text-shadow:0px 1px 4px #000;
  background:url("img/border.png") no-repeat  right;
  padding:0 0px 0 0px;
  margin:0 0px;
  font-size:13px;
    text-shadow:0px 1px 4px #000;
 
}

div#navi a:hover {
  color: #CCC;
  text-decoration:none;
     text-shadow:
					0px 0px 20px  #200e0e,
					0px 0px 14px  #200e0e,
					0px 0px 38px  #200e0e,						
					0px 0px 22px  #200e0e,
					0px 0px 46px  #200e0e		
					;

}

div#navi a:active {
  color: #666; 
  text-decoration:none;

}
.last {
	background: none !important;
}

#footer {
	background: url("img/footer.png");
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#9a9a9a;
	height:162px;
	margin-top:-100px;
	line-height:50px;
	overflow:hidden;
	text-shadow:0 1px 5px #000, 0 0 3px #000;
	width:1280px;
}

#bg_bt{
	background:url(img/bgbt.png);
	width:1100px;
	height:250px;
	margin-top:100px;
	overflow:hidden;
}
#is {
	background:url(img/is.png);
	width:190px;
	height:71px;
}
#buy {
	background:url(img/buy.png);
	width:190px;
	height:71px;
}
#spenden {
	background:url(img/spend.png);
	width:190px;
	height:71px;
}
#buy:hover {
	background:url(img/buyh.png);

}#is:hover {
	background:url(img/ish.png);
	
}#spenden:hover {
	background:url(img/spendh.png);
}

/* Links - News */
.news_head{
	background-image:url(images/news_head.png);
	width:527px;
	height:41px;
	color:#d4c198;
	font-size:14px;
	font-variant:small-caps;
	text-shadow: 0 0 0.2em #746d5e, 0 0 0.2em #746d5e;
	padding:26px 15px 21px 15px;
}
.news_head a{
	color:#d4c198;
	font-variant:normal;
	text-decoration:none;
}
.news_main{
	background-image:url(images/news_main.png);
	width:527px;
	color:#cecece;
	font-size:13px;
	padding:12px 15px 12px 15px;
}
.news_main table{
	padding:5px 18px;
}
.news_main select {
	height:23px;
	width:154px;
	background-image:url(images/regis.png);
	border:none;
	color:#858585;
}
.news_main a{
	color:#d4c198;
	font-variant:normal;
	text-decoration:none;
}
.news_main a:hover{
	text-decoration:none;
}
.news_main img{
	float:left;
	margin-right:12px;
}
.news_foot{
	width:527px;
	height:28px;
	background-image:url(images/news_foot.png);
	font-variant:small-caps;
	color:#cecece;
	text-align:right;
	font-size:11px;
	padding:11px 15px 14px 15px;
	margin-bottom:10px;
}
.news_foot a{
	color:#d4c198;
	font-variant:normal;
	text-decoration:none;
}
	.news_foot a:hover{
	text-decoration:underline
}

maxxxie · 10 sep 2011

Ik weet niet of je morgen misschien even tijd voor me hebt? Heb nog ongeveer 4 kleine dingen waar ik niet uitkom? Dmv teamviewer kan ik het meteen leren en is het zo gebeurd?

Mvg,
Max

Hoe stel ik dit in?

maxxxie

Gebruiker

Example5

Terugkerende gebruiker

maxxxie

Gebruiker

Example5

Terugkerende gebruiker

maxxxie

Gebruiker

maxxxie

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy