Achtergrond

RonnieV1987 · 3 sep 2011

Hallo,

Ik wil graag een achtergrond op mijn website met verschillende producten die ik verkoop.
maar dan alleen aan de linker kant

nu wil ik eigenlijk weten hoe breed is dat stuk met dat blauwe tot aan het witte.

Mag geen link plaatsen vanwege commercieel gedoe

tecsman · 3 sep 2011

RonnieV1987 zei:
nu wil ik eigenlijk weten hoe breed is dat stuk met dat blauwe tot aan het witte.
Mag geen link plaatsen vanwege commercieel gedoe

Hoe moeten wij dat nu weten zonder link?
Wij zien geen blauw en geen wit

aloew · 3 sep 2011

lol inderdaad , je kan gewoon links plaatsten

zolang het maar niet met illegale dingen te maken heeft

je zou ook een print screen kunnen maken

tecsman · 3 sep 2011

Oh, wacht effe, ik weet het al,
je bent een keer gewaarschuwd omdat je een bepaalde link te vaak had genoemd.

Maar jouw website gaat over bestratingen als ik me niet vergis.

Dat stuk blauw links van het wit is van variabele breedte.
De site is zo opgebouwd dat hij automatisch in het midden wordt geplaatst.
Maar de blauwe 'marges' zijn dus afhankelijk van het scherm waarin de site wordt getoond.
En dat is natuurlijk bij iedereen anders.
Niet iedereen heeft dezelfde resolutie.

En per beeldscherm kan het ook nog eens varieren, als iemand de ene keer zijn browserscherm voluit heeft staan en een andere keer het browservenster tot de helft van het beeldscherm beperkt.

RonnieV1987 · 3 sep 2011

jah die website jah

stomme gedoe

hmm maar is er dan niet oko een soort tag die het aanpast per scherm resolutie dan want het is wel een raar gezicht als het de ene keer wel klop ebn de andre keer niet

www.voorhorst-besblablabla.nl

csshunter · 3 sep 2011

RonnieV1987: nu wil ik eigenlijk weten hoe breed is dat stuk met dat blauwe tot aan het witte.

tecsman: Dat stuk blauw links van het wit is van variabele breedte. (enz.)

Nu snap ik 'm niet meer. :shocked:
Op voorhorst-bestratingen punt nl zie ik helemaal geen stuk blauw links van het wit. En ik zie ook geen variabele breedte van de linkerkolom; de #sidebar1 is volgens de css (en Firebug) gewoon 235px breed.

Of kijk ik scheef?
CSShunter
______
PS: het vergrootglaasje al ontdekt?

csshunter · 3 sep 2011

Herstel !

Ik zie het al: mijn browser staat op 1024*768px resolutie, en dan is er "links van het wit" (d.w.z. naast de pagina) nog maar een strookje van 8mm breed met de donkerblauwe achtergrond.
Daar past niets op!
Als je toch iets links van de pagina wilt hebben, zou je de pagina zelf moeten verbreden (anders geldt wat tecsman al zei), en een nieuwe sidebar naast de oude zetten. - Maar daarmee wordt de site net zeveel breder als de nieuwe sidebar > en is de site dus bv. bij 1024*768px niet meer compleet op het scherm te zien: dan zou de bezoeker steeds links-rechts moeten scrollen. En de ervaring leert: dat is niet gebruikersvriendelijk en/of dan haken er bezoekers af...

Met vriendelijke groet,
CSShunter

RonnieV1987 · 3 sep 2011

Dus hoe kan ik het nu wel doen want als je nu kijkt ios het ook wel heel erg dood

het is een saaie site op deze manier

en dacht juist dat ik hem hier redelijk mee kon opvrolijken

RonnieV1987 · 3 sep 2011

Kan ik niet anders een veel te grote afbeelding maken dat bie wel links van de pagina komt of er door heen

csshunter · 3 sep 2011

Ja, dat kan natuurlijk. Ik zou dan links en rechts een figuurtje pakken, anders valt rechts zo uit de toon.
De steentjes lenen zich er bv. uitstekend voor om met één klein img te volstaan.
Als je bv. zoiets neemt:

steentjes.png

... waarbij alle zijkanten op elkaar passen, dan herhalen die zich automatisch met
html {background: url(images/steentjes/png;}
en wordt het hele vlak buiten de pagina mooi opgevuld:

Al het donkergrijsblauw kan dan vervallen.

RonnieV1987 · 4 sep 2011

dus ik moet dan {background: url(images/steentjes/png;} verwerken in de css?
en is het dan ook mogelijk dat je om de 15 seconden een ander plaatje doet?
heb gekeken op die sites als leejoo maar dat is allemaal veroudert toch?

RonnieV1987 · 4 sep 2011

csshunter zei:
PS: het vergrootglaasje al ontdekt?

Jah had hem al ondekt maar toen ik die vraag stelde had ik een andre layout met gewoon zoon standaart button die je ook in die contact forms hebt.

daar stond dan alleen >> in de button

Maar zkr bedankt

csshunter · 4 sep 2011

dus ik moet dan {background: url(images/steentjes/png;} verwerken in de css?

Ja, probeer maar:

Code:

html {background: url(images/steentjes.png;}
of:
body {background: url(images/steentjes.png;}

(hierboven stond per abuis steentjes/png: het / moet natuurlijk een puntje zijn!)

=====

is het dan ook mogelijk dat je om de 15 seconden een ander plaatje doet?

Ja, op zich zou dat kunnen: met een javascript image-wisselaar. Maar dat zou ik niet doen. Een steeds veranderende background van een pagina maakt een erg onrustige indruk, en leidt af van waar het om gaat (waar de bezoeker naar moet kijken): de inhoud van de pagina's!

Met vriendelijke groet,
CSShunter

RonnieV1987 · 11 sep 2011

Hallo,

ik heb het geprobeerd Maar word dan egt veel te druk!
maar nu zit ik met een ander probleem.

ik wou dit design laten aan passen. maar dan reken ze gouw 70 tot 85 € per uur :O
Dus ben zelf aan het klussen gegaan.
en het lukte ook aardig de website was eerst 966px breed en nu 1100px
het nare is je hebt allemaal plaatjes

al die lijntjes enzo dus de veranderen niet mee die zijn allemaal gemaakt op het aantal px wat in mijn css staat.
ik heb de plaatjes aan gepast en het werkt.

het werkt wel bij de boven kant maar de onder kant wil niet, ik heb alles geprobeert maar krijg er geen verandering in hoe kan dit
De Css:

HTML:

/*------------------------ ALGEMEEN ------------------------------*/
*{
	margin:0 auto;
	padding:0;
}

body  {
	font: 12px Arial, Helvetica, sans-serif;
	background: #283243;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
} 
.bg{ 
	background:url(banner_bg.jpg) no-repeat center top;
	margin:0 auto;
	padding:0;
}

a {
  color: #333; background: inherit;
}

a:hover {
  color: #000; background: inherit;
}

h1{ 
	font-weight:600;
	padding:2px 5px 5px 10px;
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
	

}
h1 a{ 
	color: #333;
	text-decoration:underline;
}
h1 a:hover{ 
	color: #333;
	text-decoration: none;
}

.head1{ 
  font-weight:600;
  padding:2px 5px 5px 10px;
  font-size:12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  

}
.head1 a{ 
  color: #333;
  text-decoration:underline;
}
.head1 a:hover{ 
  color: #333;
  text-decoration: none;
}



.bodyDef #container { 
	width: 1100px; 
	margin: 0 auto; 
	text-align: left;
} 


.top_head{
	background:#fff url(top_bg.jpg) no-repeat top;
	margin-top:15px;
}
.top_head1{
	padding:15px;
}

.bodyDef #header {
	border-bottom:2px solid #e7e7e7;
	margin-bottom:15px;

}
.logo{
	float:left;
}



.bodyDef #sidebar1 {
	float: left; 
	width: 235px;
	padding: 0 0 5px; 
}

.te1{
	background:url(left_cont.jpg) repeat-y;
}
.te2{
	background:url(left_top.jpg) no-repeat top;
	padding:8px;
}

.te2 h2{
	font-size:13px; 
	font-weight:bold;
	color:#333;
	padding:2px 0;
	border-bottom:2px solid #e7e7e7;
	margin-bottom:8px;
}

.te2 .head2{
  font-size:13px; 
  font-weight:bold;
  color:#333;
  padding:2px 0;
  border-bottom:2px solid #e7e7e7;
  margin-bottom:8px;
}
.hold_t{
	margin-bottom:15px;
}

.bodyDef #sidebar2 {
	float: right; 
	width: 235px;
	padding: 5px 0; 
}




.bodyDef #sidebar1 h2{
	color:#333;
	font-size:13px;
	font-weight: bold;
	text-align:left;
	padding:13px 5px 8px 10px;
}
#sidebar1 h2 a{
	color:#333;
	font-size:13px;
	font-weight: bold;
	text-align:left;
	padding:0 5px 8px 0px;
}	

.bodyDef #sidebar1 .head2{
  color:#333;
  font-size: 16px;
  font-weight: bold;
  text-align:left;
  padding: 2px 0;
}
#sidebar1 .head2 a{
  color:#333;
  font-size:13px;
  font-weight: bold;
  text-align:left;
  padding:0 5px 8px 0px;
}  



.bodyDef #mainContent {
 	margin: 0 240px; 
}
.hold_c{
	width:440px;
}
.ce1{
	background:url(cent_cont.jpg) repeat-y;
}

.ce2{
	background:url(cent_top.jpg) no-repeat top;
	padding:10px;
}

.bodyDef #mainContent h2{
	color:#444444;
	font-size:13px;
	padding:10px 0;
	text-transform: capitalize;
}

.bodyDef #mainContent .head2{
  color:#444444;
  font-size:13px;
  padding:10px 0;
  border-bottom:2px solid #e7e7e7;
  text-transform: capitalize;
}

.bodyDef #mainContent ul{ 
	margin:0;
	padding:0;
	list-style:none;
}

.bodyDef #mainContent li{ 
	list-style:none;	
	font:12px Arial, Helvetica, sans-serif;
	padding:6px 10px 6px 20px;
	background:url(arrow1.gif) 5px 10px no-repeat;
	color: #424243;
	display: block;
	text-decoration:none;
}
.bodyDef #footer_bg{
	width:1100px;
}
.bodyDef #footer { 
	text-align: center;
	color: #333;
	padding-bottom:40px;
	padding-top:10px;

}
.bodyDef #footer a{ 
	color: #333;
	text-decoration:none;
}
.bodyDef #footer a:hover{ 
	color: #333;
	text-decoration: underline;
}
.bodyDef #footer u{
	color:#0099d5;

}
 
.bodyDef #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 5px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}


A.topExtrapages:hover {
	text-decoration: underline;
}

A.topExtrapages {
  	text-decoration: none;
}

A.topLanguages:hover {
	text-decoration: underline;
}

A.topLanguages {
	text-decoration: none;
}

A.menuExtrapages:hover {
  color: #ff0000;
}

A.menuExtrapages {
	margin: 0px;
	text-decoration: none;
	background-image: url(box4.gif);
	background-repeat: no-repeat;
	width: 145px;
	line-height: 27px;
	float: left;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 35px;
}

.menuLoginheader {
	font-weight: bold;
}

.menuLogin {
	font-weight: normal;
}

A.menuLogin:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.menuLogin {
	text-decoration: none;
	font-weight: normal;
}

.menuShoppingcart {
	height: 40px;
	color: #333;
	margin: 0px;
	width: 145px;
	padding-right: 145px;
	background-image: url(box3.gif);
	background-repeat: no-repeat;
	font-family: arial;
	font-size: 12px;
	line-height: 32px;
	font-weight: bold;
	vertical-align: middle;
	float: left;
	padding-top: 0px;
	padding-left: 10px;

}

A.menuShoppingcart:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.menuShoppingcart {
	text-decoration: none;
	font-weight: bold;
}

.menuShoppingcartitemheader {
	font-style: italic;
}

.menuShoppingcartitem {
	font-weight: normal;
	color:#333;
	font-size:12px;
	text-align:center;
	
}

td.menuShoppingcartitem {
	text-align: right;
	vertical-align: top;
}

.menuShoppingcartempty {
	font-weight: normal;
	color:#333;
	padding:15px 5px 0 5px;
	text-align:center;
}

td.menuShoppingcartempty {
}

.menuSearchheader {
	font-weight: bold;
}

.menuSearch {
	font-weight: normal;
}

A.menuSearch:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.menuSearch {
	text-decoration: none;
	font-weight: normal;
}

.menuNewsletterheader {
	margin: 0px;
	height: 40px;
	color:#fff;
	margin: 0px;
	width: 145px;
	padding-right: 145px;
	background-image: url(box3.gif);
	background-repeat: no-repeat;
	font-family: arial;
	font-size: 12px;
	line-height: 32px;
	font-weight: bold;
	vertical-align: middle;
	float: left;
	padding-top: 0px;
	padding-left: 10px;
}

.menuNewsletter {
	font-weight: normal;
}

.bottomExtrapages {
	font-weight: normal;
}

A.bottomExtrapages:hover {
	text-decoration: underline;
	font-weight: normal;
	color:#fff;
}

A.bottomExtrapages {
	text-decoration: none;
	font-weight: normal;
}

P.bottomExtrapages {
	text-align: center;
}

.bottomFootertext {
	text-decoration: none;
	font-weight: normal;
}

P.bottomFootertext {
	text-align: center;
}

.pageWelcomeheader {
	text-decoration: none;
	font-weight: bold;
}

.pageWelcome {
	text-decoration: none;
	font-weight: normal;
}

.pageAttentionarticlesheader {
	text-decoration: none;
	font-weight: bold;
}

.pageAttentionarticles {
	text-decoration: none;
	font-weight: normal;
}

A.pageAttentionarticles:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageAttentionarticles {
	text-decoration: none;
	font-weight: normal;
}

img.pageAttentionarticles {
	border: 0px;	
	margin-bottom: 10px;
	margin-right: 10px;
}

.pagePromotionarticlesheader {
	text-decoration: none;
	font-weight: bold;
}

.pagePromotionarticles {
	text-decoration: none;
	font-weight: normal;
}

A.pagePromotionarticles:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pagePromotionarticles {
	text-decoration: none;
	font-weight: normal;
}

img.pagePromotionarticles {
	border: 0px;	
	margin-bottom: 10px;
	margin-right: 10px;
}

.pageProductlistingheader {
	text-decoration: none;
	font-weight: bold;
}

.pageProductlistingcurgroupstruct {
	text-decoration: none;
	font-weight: normal;
}

A.pageProductlistingcurgroupstruct:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageProductlistingcurgroupstruct {
	text-decoration: none;
	font-weight: normal;
}


.pageProductlisting {
	text-decoration: none;
	font-weight: normal;
}

A.pageProductlisting:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageProductlisting {
	text-decoration: none;
	font-weight: normal;
}

img.pageProductlisting {
	border: 0px;	
	margin-bottom: 10px;
	margin-right: 10px;
}

img.pageProductlistinggroupimage {
	border: 0px;
	vertical-align: text-top;
	padding: 5px;
	margin-bottom: 10px;
	margin-right: 10px;
}

.pageProductlistingsubgroup {
	text-decoration: none;
	font-weight: normal;
}

A.pageProductlistingsubgroup:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageProductlistingsubgroup {
	text-decoration: none;
	font-weight: normal;
}

ul.pageProductlistingsubgroup {
}

li.pageProductlistingsubgroup {
}

.pageProductlistingpages {
	text-decoration: none;
	font-weight: bold;
}

A.pageProductlistingpages:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageProductlistingpages {
	text-decoration: none;
	font-weight: normal;
}

A.pageProductlistingpagesprevious:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageProductlistingpagesprevious {
	text-decoration: none;
	font-weight: normal;
}

A.pageProductlistingpagesnext:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageProductlistingpagesnext {
	text-decoration: none;
	font-weight: normal;
}

.article {
	text-decoration: none;
	font-weight: normal;
}

A.article:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.article {
	text-decoration: none;
	font-weight: normal;
}

img.article {
	border: 0px;
	vertical-align: text-top;
	float: left;
	margin-bottom: 10px;
	margin-right: 10px;
}

img.articleNofloat {
	border: 0px;
	vertical-align: text-top;
	margin-bottom: 10px;
	margin-right: 10px;
}

.articleDescription {
	text-decoration: none;
	font-weight: normal;
}

A.articleDescription:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.articleDescription {
	text-decoration: none;
	font-weight: normal;
}


.articlePrice {
	text-decoration: none;
	font-weight: bold;
}

.articlePriceseccurr {
	text-decoration: none;
	font-weight: bold;
}

.articlePricerecommended {
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
}

.articlePriceecotaxes {
	text-decoration: none;
	font-style: italic;
}

.pageProductheader {
	text-decoration: none;
	font-weight: bold;
}

.articleRelatedartocleheader {
	text-decoration: none;
	font-weight: bold;
}

.articleCrossmarketingheader {
	text-decoration: none;
	font-weight: bold;
}

.pageCartheader {
	text-decoration: none;
	font-weight: bold;
}

td.pageCartheader {
	text-decoration: none;
	font-weight: bold;
	text-align: left;
}

td.pageCartheaderright {
	text-decoration: none;
	font-weight: bold;
	text-align: right;
}


.pageCart {
	text-decoration: none;
}

A.pageCart:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageCart {
	text-decoration: none;
	font-weight: normal;
}

table.pageCart {
	text-decoration: none;
	width: 95%;
}

td.pageCart {
	text-decoration: none;
	text-align: left;
}

td.pageCartright {
	text-decoration: none;
	text-align: right;
}

td.pageCartcenter {
	text-decoration: none;
	text-align: center;
}

.pageCartsteps {
	text-decoration: none;
}

.pageCartstepscurrentstep {
	text-decoration: none;
	font-weight: bold;
	color: #FF0000;
}

.pageStandardheader {
	text-decoration: none;
	font-weight: bold;
}

.pageStandard {
	text-decoration: none;
}

.pageStandardmarked {
	text-decoration: none;
	background-color: yellow;
}

table.pageStandard {
	text-decoration: none;
	width: 95%;
}

td.pageStandard {
	text-decoration: none;
	text-align: left;
}

td.pageStandardheader {
	text-decoration: none;
	text-align: left;
	font-weight: bold;
}

td.pageStandardcenter {
	text-decoration: none;
	text-align: center;
}

td.pageStandardright {
	text-decoration: none;
	text-align: right;
}

td.pageStandardgray {
	text-decoration: none;
	text-align: left;
	background-color: #CCCCCC;
}

A.pageStandard:hover {
	text-decoration: underline;
	font-weight: normal;
}

A.pageStandard {
	text-decoration: none;
	font-weight: normal;
}


.error {
	text-decoration: none;
	color: #FF0000;
	text-align: center;
}

.dropdown {
}

.clearfloat {
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/*new*/

#menu{
	padding-left:10px;
	padding-top:1px;
	height:30px;
	margin-top:50px;
	float:right;



}
#menu ul{
	margin:0;
	padding:0;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:13px;
	list-style-type: none;
	color: #444444;

	
}

#menu li{
	display: inline;
	padding:0;
	margin: 0;

	
}

#menu li a{
	float: left;
	display: block;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:12px;
	text-decoration: none;
	background:url(arrow.jpg) no-repeat left;
	margin:0;
	padding: 5px 15px 8px 15px;
	color: #444444;



}
#menu li a:hover{
	text-decoration: underline;
	color: #444444;

	
}
.language{ 
	float:left;
	padding-left:5px;
	padding-top:5px;
}

.search{
	margin-bottom:15px;

}
.sbg{

}
.searchfield{ 
	float:left;
	padding-right:2px;

}
.trs{
	border:1px solid #a0a0a0;
	padding:1px;
	width: 130px;
	background:#f4f4f4;
}
.SRCH_TITLE{
	float:left;
	padding:3px 5px 3px 2px;
	font-weight:bold;
}
.SRCH_TITLE A{
  text-decoration: none;
}
.shop_cart{
	padding:3px 5px 3px 2px;
}
.shop_cart1{
	float:right;
	padding-top:5px;
	padding-right:8px;
}
.shop_cart1 IMG{
  border: 0px;
}
.searchbut{ 
	float:left;

}
.field{
	background:url(seachfield.jpg) no-repeat;
	border:none;
	height:27px;

}


INPUT[type="checkbox"].login
{
  width: 10px;
}
INPUT[type="button"].login, INPUT[type="submit"].login, BUTTON.login
{
  background: url(buttons.jpg) no-repeat;
  padding: 2px 0 3px 3px;
  text-align: center;
  height: 19px;
  width: 150px;
  border: 0;
  font-size: 9px;
  color: #FFF;
  font-weight: bold;
  text-transform: uppercase;
}
.login
{
  width: 210px;
  border: 1px solid #A0A0A0;
  padding: 1px;
  background: #F4F4F4;
}


.login1{ 
	padding-top:5px;
}
.loginerror{ 
	font:12px Arial, Helvetica, sans-serif; text-align:left;
	color:red;
}
.lOg{ 
	width:210px; 
	border:1px solid #a0a0a0;
	padding:1px;
	background:#f4f4f4;
}
.tXt{ 
	font-size:12px;
	color: #333;
	padding-bottom:3px;
	padding-top:10px;
}
.basKet{ 
	padding-top:10px;
	font-size:12px;
	color:#333;
}

.top_box{ 
	background:url(cont_box.jpg) repeat-y;
	margin-top:5px;
	padding-bottom:20px;
	width:235px;

	

}
.cont_box{ 
	background:url(top_box.jpg) no-repeat top;
	padding-top:8px;

}
.fot_box{ 
	background:url(buttom_box.jpg) no-repeat bottom;
	height:5px;
	width:218px;
	margin-bottom:10px;
}
.pad{ 
	padding:2px;
}
.pad1{ 
	padding:10px 0 0 0;
}

/*addons*/

.hold_cart{
	 
		padding:0px; 
		min-height:100px;
		display:block;
		margin: 5px 0;
		width:420px;
		border-bottom:1px dashed #e7e7e7;
		float:left;
	
}
.hold_box{
	float:left;
	padding:5px;
	
}
.price_item{
	margin-top:10px;
	font-weight:bold;
}
.hold_family{
	font-family: Arial, Helvetica, sans-serif; 
	color:#333;
	padding-top:15px;
	margin-left:80px;
	
}
.pdct_number a{
	color:#0099cc;
	font-weight:bold;
	text-decoration:none;
	font-size:12px;
}
.hold_bg{ 
	background:#fff;
	
	}
.price_details{
	text-align:right;
	padding-top:10px;
}


#submenu{ 
	margin-top:3px;

}
#submenu ul{ 
	margin:0;
	padding:0;
	list-style:none;
}

#submenu li{ 
	margin:0 7px;
	list-style:none;
	border-bottom:1px dotted #ccc;
}
	
#submenu li a{
	font:bold 12px Arial, Helvetica, sans-serif;
	list-style:none;
	padding:6px 5px 6px 15px;
	color:#333;
	display: block;
	background:url(arrow1.gif) 2px 10px no-repeat;
	text-decoration:none;
	cursor: pointer;

}

#submenu li a:hover{ 
	color:#333;
	text-decoration: underline;
}
.newsletter1{ 
	padding-top:5px;

}

.language
{
  float: right;
  padding-right: 5px;
  padding-top: 5px;
}
.clearright
{
  clear: right;
}

hier gaat het om
/images/fot_bg.jpg

die krijg ik niet op de zelfde maat. En ik snap het niet want hij is ook gewoon 1100px

csshunter · 11 sep 2011

Ah, dat blijkt gelukkig eenvoudig. Het ligt niet aan het image, en ook niet aan de css.
Het image is mooi 1100px breed: images/fot_bg.jpg.
Als je in de css gaat zoeken naar "fot_bg.jpg", dan komt daar de hele "fot_bg.jpg" niet in voor!

Het moet dus in de html zitten.
In de html staat op alle pagina's:

HTML:

<div class="top_head2">
    <img height="30" width="966" border="0" src="images/fot_bg.jpg">
</div>

Zo wordt deze "images/fot_bg.jpg" er dan ook in gezet: met een geforceerde breedte van 966px, terwijl de afbeelding zelf netjes 1100px is.
Dus:

HTML:

<div class="top_head2">
    <img height="30" width="1100" border="0" src="images/fot_bg.jpg">
</div>

en het leed is geleden.

Met vriendelijke groet,
CSShunter

RonnieV1987 · 11 sep 2011

Hmmm dit had ik zelf ook nog wel kunnen zien.

weet je wat het is. ik gebruik een software voor mijn site logivert is speciaal voor webwinkels.
maar daardoor is alles echt moeilijk te vinden.

ik zal het aan passen.
heej CSSHunter bedankt hoor!!!

Volgens mij beantwoord jij altijd al mijn vragen

RonnieV1987 · 11 sep 2011

maar ik wil dit alles tog liever in mijn css hebben is dat ook mogelijk.
want het is volgens mij nooit goed dat je zowel opmaak in je broncode hebt en in je css toch?

csshunter · 11 sep 2011

Ja, dat klopt wel. Maar het zal er zo door het template ingezet zijn, en is nu ook weer niet heel erg, lijkt me.

Anders moet je in plaats van:

HTML:

<div class="top_head2">
    <img height="30" width="1100" border="0" src="images/fot_bg.jpg">
</div>

... in de html zetten:

HTML:

<div id="bottom_corners"><!-- beneden-hoekjes --></div>

En dan in de css:

HTML:

#bottom_corners {
   height: 30px; /* de breedte is vanzelf 1100px */
   background: url(mages/fot_bg.jpg);
   }

Iets dergelijks kan je dan ook doen met de top-hoekjes.

Het kan nog mooier door een bestaande <div> onderin wat extra padding-bottom te geven. Dan kan het betreffende strookje met benedenhoekjes daar in gezet worden als background-image, met een {background-repeat: no-repeat;} en een {background-position: 0 100%;} om 'm onderaan te krijgen. Dan kan in de html de <div class="top_head2"> gemist worden.

Maar, zoals gezegd, het hoeft allemaal niet persé: niemand zal er een traan om laten!

Met vriendelijke groet,
CSShunter

mikelelystad · 7 apr 2013

Ronnie je bent een topper thanks dat je me loge goed heb gemaakt 1000 maal dank

Achtergrond

Gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Terugkerende gebruiker

Gebruiker

Meubilair

Meubilair

Gebruiker

Gebruiker

Meubilair

Gebruiker

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Gebruiker

Meubilair

Nieuwe gebruiker

Wij waarderen jouw privacy