Bullets

RonnieV1987 · 6 apr 2013

Hallo,

ik gebruik voor mijn website openen cart.
nu heb ik in word mijn product omschrijving gemaakt.
in word ziet het er uit als op de bijlage

Maar op mijn website word het zo
zie hier het verschil

geen pijltjes meer maar gewoon stippen.

ik denk dat ik die moet aanpassen in de css.
of hoe moet ik dit doen?

Naarling · 6 apr 2013

Je hebt gelijk dat je met CSS moet werken, maar er is geen ingebouwde maner om gelijk pijltjes te krijgen (CSS kent alleen rondjes, vierkantjes, letters en cijfers (in verschillende alfabetten, dat wel). Maar, je kunt met CSS wel een plaatje opgeven dat in plaats van de cirkels moet komen.

Code:

ul{
    list-style-image: url(link-naar-afbeelding.png);
}

Overigens moet je er nooit op rekenen dat je opmaak uit Word direct kunt overzetten naar je site. Het is daarom vaak handiger om gewoon gelijk in HTML te werken. Het bespaart je in elk geval wat teleurstelling.

RonnieV1987 · 6 apr 2013

Hehe een terleur stelling is het zeker

ben zo druk mee geweest in Word.

dus dat wil gewoon niet :S

waar moet ik dit plaatsen in de CSS?

ik kan wel computers bouwen.
maar snap niet egt veel van die css

en de css van openencart is helemaal zo lang

boven in de css ook staan voor het importeren van bepaalde fonts.
als ik daar nu de font van die pijltjes inzet kan het dan nog niet?

Code:

@import url(http://fonts.googleapis.com/css?family=Russo+One&subset=latin,latin-ext,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Questrial);
html {
	overflow: -moz-scrollbars-vertical;
	margin: 0;
	padding: 0;
}
body {
	background: #fff;
	color: #000000;
	font-family: 'Questrial', sans-serif;
	margin: 0px;
	padding: 0px;
}
body, td, th, input, textarea, select, a {
	font-size: 12px;
}
h1, .welcome {
	color: #636E75;
	font: Verdana;
	margin-top: 0px;
	margin-bottom: 20px;
	font-size: 32px;
	font-weight: normal;
	text-shadow: 0 0 1px rgba(0, 0, 0, .01);
}
h2 {
	color: #000000;
	font-size: 16px;
	margin-top: 0px;
	margin-bottom: 5px;
}
p {
	margin-top: 0px;
	margin-bottom: 20px;
}
a, a:visited, a b {
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}
a img {
	border: none;
}
form {
	padding: 0;
	margin: 0;
	display: inline;
}
input[type='text'], input[type='password'], textarea {
	background: #F8F8F8;
	border: 1px solid #00e4ffCCC;
	padding: 3px;
	margin-left: 0px;
	margin-right: 0px;
}
select {
	background: #F8F8F8;
	border: 1px solid #00e4ffCCC;
	padding: 2px;
}
label {
	cursor: pointer;
}
/* layout */
#container {
	width: 980px;
	margin:15px auto 0 auto;
	text-align: left; 
}
#column-left {
	float: left;
	width: 180px;
	margin:0 0 0 5px;
}
#column-right {
	float: right;
	width: 180px;
	margin:0 10px 0 0;
}
#content {
	min-height: 400px;
	padding:15px;
	margin-bottom: 25px;
	background:none;	
}
#mainsite{
	margin:0;
	padding:0;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
#column-left + #column-right + #content, #column-left + #content{
	margin-left: 195px;
}
#column-right + #content {
	margin-right: 195px;
}
/* header */
#header {
	margin:0 auto 0 auto;
	padding:0;
	width:980px;
	height: 100px;
	margin-bottom: 7px;
	padding-bottom: 4px;
	position: relative;
	z-index: 99;
}
#header #logo {
	position: absolute;
	margin:0;
	top: 25px;
	left:0px;
	overflow:hidden;
}
#language {
	position: absolute;
	top: 15px;
	left: 350px;
	width: 75px;
	color: #000;
	line-height: 17px;
}
#language img {
	cursor: pointer;
}
#currency {
	width: 75px;
	position: absolute;
	top: 15px;
	left: 450px;
	color: #000;
	line-height: 17px;
}
#currency a {
	display: inline-block;
	padding: 2px 4px;
	border: 1px solid #fff;
	color: #333;
	text-decoration: none;
	margin-right: 2px;
	margin-bottom: 2px;
}
#currency a b {
	color: #000;
	text-decoration: none;
}
#header #cart {
	position: absolute;
	margin:0;
	top:0px;
	left:480px;
	z-index: 9;
	min-width: 350px;
}
#header #cart .heading {
	float: right;
	margin-right: 172px;
	margin-top: 15px;
	padding-left: 14px;
	padding-right: 14px;
	background:none;
	position: relative;
	z-index: 1;
}
#header #cart .heading h4 {
	color: #000;
	font-size: 15px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 3px;
}
#header #cart .heading a {
	color: #000;
	text-decoration: none;
}
#header #cart .heading a span {
	background:url('../image/arrow-down.png') 100% 50% no-repeat;
	padding-right: 15px;
}
#header #cart .content {
	clear: both;
	display: none;
	position:relative;
	margin:0;
	top: 0px;
	right:200px;
	padding: 8px;
	min-height: 150px;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
	-webkit-box-shadow: 0px 2px 2px #554400;
	-moz-box-shadow: 0px 2px 2px #554400;
	box-shadow: 0px 2px 2px #554400;
	background: #FFF;
	z-index:25;
}

#header #cart.active .heading {
	margin-top: 5px;
	padding-top: 10px;
	padding-bottom: 6px;
	border-top: 1px solid #EEEEEE;
	border-left: 1px solid #EEEEEE;
	border-right: 1px solid #EEEEEE;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}
#header #cart.active .content {
	display: block;
}
#header #cart .cart {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 5px;
}
#header #cart .cart td {
	color: #000;
	vertical-align: top;
	padding: 10px 5px;
	border-bottom: 1px solid #EEEEEE;
}
#header #cart .cart .image {
	width: 1px;
}
#header #cart .cart .image img {
	border: 1px solid #EEEEEE;
	text-align: left;
}
#header #cart .cart .name small {
	color: #666;
}
#header #cart .cart .quantity {
	text-align: right;
}
#header #cart .cart td.total {
	text-align: right;
}
#header #cart .cart .remove {
	text-align: right;
}
#header #cart .cart .remove img {
	cursor: pointer;
}
#header #cart table.total {
	border-collapse: collapse;
	padding: 5px;
	float: right;
	clear: left;
	margin-bottom: 5px;
}
#header #cart table.total td {
	color: #000;
}
#header #cart .content .checkout {
	text-align: right;
	clear: both;
}
#header #cart .empty {
	padding-top: 50px;
	text-align: center;
}
#header #search {
	position: absolute;
	top: 3px;
	right: 5px;
	width: 222px;
	z-index: 15;
	border:none;
}
#header .button-search {
	position: absolute;
	right: 0px;
	background:url('../image/Search_buttton.png') no-repeat;
	width: 35px;
	height: 37px;
	cursor: pointer;
	border:none;
	z-index:2;
}
#header #search input {
	position: absolute;
	background:url('../image/Searchinput.png') no-repeat;
	padding: 1px 1px 1px 33px;
	width: 187px;
	left:0;
	height: 37px;
	z-index:1;
	border:none;	
}
#header #welcome {
	position: absolute;
	margin:0;
	top: 40px;
	right: 0px;
	z-index: 5;
	width: 298px;
	text-align: right;
	color: #333;
}
#welcome a{
	color:#000;				
}
#header .links {
	position: absolute;
	right:0px;
	bottom: 3px;
	font-size: 10px;
	padding-right: 10px;
}
#header .links a {
	margin:12px 0 0 4px;
	padding:7px 7px 7px 7px;
	float: left;
	display: block;
	color: #000;
	text-decoration: none;
	font-size: 12px;
}
#header .links a:hover{		
	color:#888;		
}
/* menu */
#menu {
	background: #38B0E3;
	border-bottom: 1px solid #000000;
	height: 37px;
	margin-bottom: 15px;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	-webkit-box-shadow: 0px 2px 2px #DDDDDD;
	-moz-box-shadow: 0px 2px 2px #DDDDDD;
	box-shadow: 0px 2px 2px #DDDDDD;
	padding: 0px 5px;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu > ul > li {
	position: relative;
	float: left;
	z-index: 20;
	padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
	font-size: 13px;
	color: #000;
	line-height: 14px;
	text-decoration: none;
	display: block;
	padding: 6px 10px 6px 10px;
	margin-bottom: 5px;
	z-index: 6;
	position: relative;
}
#menu > ul > li:hover > a {
	background: #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
#menu > ul > li > div {
	display: none;
	background: #FFFFFF;
	position: absolute;
	z-index: 5;
	padding: 5px;
	border: 1px solid #000000;
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	-khtml-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
	background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
	display: table;
}
#menu > ul > li > div > ul {
	display: table-cell;
}
#menu > ul > li ul + ul {
	padding-left: 20px;
}
#menu > ul > li ul > li > a {
	text-decoration: none;
	padding: 4px;
	color: #FFFFFF;
	display: block;
	white-space: nowrap;
	min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
	background: #000000;
}
#menu > ul > li > div > ul > li > a {
	color: #FFFFFF;
}
.breadcrumb {
	color: #CCCCCC;
	margin-bottom: 10px;
}
.success, .warning, .attention, .information {
	padding: 10px 10px 10px 33px;
	margin-bottom: 15px;
	color: #555555;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.success {
	background: #EAF7D9 url('../image/success.png') 10px center no-repeat;
	border: 1px solid #BBDF8D;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.warning {
	background: #FFD1D1 url('../image/warning.png') 10px center no-repeat;
	border: 1px solid #F8ACAC;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.attention {
	background: #FFF5CC url('../image/attention.png') 10px center no-repeat;
	border: 1px solid #F2DD8C;
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	-khtml-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}
.success .close, .warning .close, .attention .close, .information .close {
	float: right;
	padding-top: 4px;
	padding-right: 4px;
	cursor: pointer;
}
.required {
	color: #FF0000;
	font-weight: bold;
}
.error {
	display: block;
	color: #FF0000;
}
.help {
	color: #999;
	font-size: 10px;
	font-weight: normal;
	font-family: Verdana, Geneva, sans-serif;
	display: block;
}
table.form {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
table.form tr td:first-child {
	width: 150px;
}
table.form > * > * > td {
	color: #000000;
}
table.form td {
	padding: 4px;
}
input.large-field, select.large-field {
	width: 300px;
}
table.list {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid #DDDDDD;
	border-left: 1px solid #DDDDDD;
	margin-bottom: 20px;
}
table.list td {
	border-right: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}
table.list thead td {
	background-color: #EFEFEF;
	padding: 0px 5px;
}
table.list thead td a, .list thead td {
	text-decoration: none;
	color: #222222;
	font-weight: bold;
}
table.list tbody td {
	vertical-align: top;
	padding: 0px 5px;
}
table.list .left {
	text-align: left;
	padding: 7px;
}
table.list .right {
	text-align: right;
	padding: 7px;
}
table.list .center {
	text-align: center;
	padding: 7px;
}
table.radio {
	width: 100%;
	border-collapse: collapse;
}
table.radio td {
	padding: 5px;
	vertical-align: top;
}
table.radio td label {
	display: block;
}
table.radio tr td:first-child {
	width: 1px;
}
table.radio tr td:first-child input {
	margin-top: 1px;
}
table.radio tr.highlight:hover td {
	background: #F1FFDD;
	cursor: pointer;
}
.pagination {
	border-top: 1px solid #EEEEEE;
	padding-top: 8px;
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
}
.pagination .links {
	float: left;
}
.pagination .links a {
	display: inline-block;
	border: 1px solid #EEEEEE;
	padding: 4px 10px;
	text-decoration: none;
	color: #A3A3A3;
}
.pagination .links b {
	display: inline-block;
	border: 1px solid #269BC6;
	padding: 4px 10px;
	font-weight: normal;
	text-decoration: none;
	color: #269BC6;
	background: #FFFFFF;
}
.pagination .results {
	float: right;
	padding-top: 3px;
}
/* button */
.cart .button{
	background:#333;
	margin:7px 0 7px 0;
	padding:5px 4px 5px 4px;
	border:1px #000 solid;
	width:100%;
	color:#fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px; 
	-webkit-box-shadow: 0px 0px 4px 0px #333;
	-moz-box-shadow: 0px 0px 4px 0px #333;
	box-shadow: 0px 0px 4px 0px #333; 
					
}
.cart .button:hover{
	background:#000;			
}
a.button span {
	color: #fff;
	margin:7px 0 7px 0;

	line-height: 12px;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	padding: 10px 4px 10px 4pxpx;
	background: url('../image/button-right.png') center center repeat-x;
}
a.button:hover span {
	color: #fff;
	background: url('../image/button-right-active.png') top right no-repeat;
}
.buttons {
	background: #FFFFFF;
	border: 1px solid #EEEEEE;
	overflow: auto;
	padding: 6px;
	margin-bottom: 20px;
}
.buttons .left {
	float: left;
	text-align: left;
}
.buttons .right {
	float: right;
	text-align: right;
}
.buttons .center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.htabs {
	height: 30px;		
	line-height: 16px;
	border-bottom: 1px solid #554400;	
}
.htabs a {
	border-top: 1px solid #554400;
	border-left: 1px solid #554400;
	border-right: 1px solid #554400; 
	background: #FFFFFF url('../image/tab.png') repeat-x;
	padding: 7px 15px 6px 15px;
	float: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #000000;
	margin-right: 2px;
	display: none;
}
.htabs a.selected {
	padding-bottom: 7px;
	background: #FFFFFF;
}
.tab-content {
	border-left: 1px solid #554400;
	border-right: 1px solid #554400;
	border-bottom: 1px solid #554400;
	padding: 10px;
	margin-bottom: 20px;
	z-index: 2;
	overflow: auto;
}
/* box */
.box {
	margin:0 auto 20px auto;
}
.box .box-heading {
	-webkit-border-radius: 7px 7px 0px 0px;
	-moz-border-radius: 7px 7px 0px 0px;
	-khtml-border-radius: 7px 7px 0px 0px;
	border-radius: 7px 7px 0px 0px;
	border: 1px solid #f49b0d;
	background: url('../image/background.png') repeat-x;
	padding: 10px 10px 10px 10px;
	font-family: 'Russo One', sans-serif;	
	font-size: 16px;
	font-weight:normal;
	line-height: 14px;
	color: #333;
}
.box .box-content {
	background:#fff;
	margin:0 auto 0 auto;
	-webkit-border-radius: 0px 0px 7px 7px;
	-moz-border-radius: 0px 0px 7px 7px;
	-khtml-border-radius: 0px 0px 7px 7px;
	border-radius: 0px 0px 7px 7px;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 10px;
}
.boxcategory {
	margin:0 auto 20px auto;
}
.boxcategory .box-heading {
	-webkit-border-radius: 7px 7px 0px 0px;
	-moz-border-radius: 7px 7px 0px 0px;
	-khtml-border-radius: 7px 7px 0px 0px;
	border-radius: 7px 7px 0px 0px;
	border: 1px solid #000;
	background: url('../image/background-dark.png') repeat-x;
	padding: 16px 10px 14px 10px;
	font-family: 'Russo One', sans-serif;	
	font-size: 18px;
	font-weight:normal;
	line-height: 14px;
	color: #fff;
}
.boxcategory .box-content {
	background:#444;
	margin:0 auto 0 auto;
	-webkit-border-radius: 0px 0px 7px 7px;
	-moz-border-radius: 0px 0px 7px 7px;
	-khtml-border-radius: 0px 0px 7px 7px;
	border-radius: 0px 0px 7px 7px;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 10px;
}
/* box products */
#body-shop{
	display:none;
}
.box-product {
	overflow: auto;
	margin:0 auto 0 auto;
	text-align:center;
}
.box-product > div {
	width:150px;
	display: inline-block;
	vertical-align: top;
	text-align:center;
	margin:10px;
}
#column-left + #column-right + #content .box-product > div {
	width: 150px;
}
.box-product .image {
	display: block;
	margin-bottom: 0px;
}
.box-product .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.box-product .name a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
}
.box-product .price {
	display: block;
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.box-product .price-old {
	color: #F00;
	text-decoration: line-through;
}
.box-product .price-new {
	font-weight: bold;
}
.box-product .rating {
	display: block;
	margin-bottom: 4px;
}
/* box category */

.box-category {
	margin-top: -5px;
}
.box-category ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.box-category > ul > li {
	padding: 8px 8px 8px 0px;
}
.box-category > ul > li + li {
	border-top: 1px solid #333;
}
.box-category > ul > li > a {
	text-decoration: none;
	color: #000;
	font-family: 'Questrial', sans-serif;
}
.box-category > ul > li > a:hover{
	color:#ffcc00;			
}
.box-category > ul > li:hover {
	padding: 8px 8px 8px 0px;
}
.box-category > ul > li ul {
	display: none;
}
.box-category > ul > li a.active {
	font-weight: bold;
}
.box-category > ul > li a.active + ul {
	display: block;
}
.box-category > ul > li ul > li {
	padding: 5px 5px 0px 10px;
	background:none;
}
.box-category > ul > li ul > li > a {
	text-decoration: none;
	display: block;
	color:#fff;
}
.box-category > ul > li ul > li > a.active {
	font-weight: bold;
}
/* content */
#content .content {
	padding: 10px;
	overflow: auto;
	margin-bottom: 20px;
	border: 1px solid #EEEEEE;
}
#content .content .left {
	float: left;
	width: 49%;
}
#content .content .right {
	float: right;
	width: 49%;
}
/* category */
.category-info {
	overflow: auto;
	margin-bottom: 20px;
}
.category-info .image {
	float: left;
	padding: 5px;
	margin-right: 15px;
	border: 1px solid #E7E7E7;
}
.category-list {
	overflow: auto;
	margin-bottom: 20px;
}
.category-list ul {
	float: left;
	width: 18%;
}
.category-list .div a {
	text-decoration: underline;
	font-weight: bold;
}
/* manufacturer */
.manufacturer-list {
	border: 1px solid #DBDEE1;
	padding: 5px;
	overflow: auto;
	margin-bottom: 20px;
}
.manufacturer-heading {
	background: #F8F8F8;
	font-size: 15px;
	font-weight: bold;
	padding: 5px 8px;
	margin-bottom: 6px;
}
.manufacturer-content {
	padding: 8px;
}
.manufacturer-list ul {
	float: left;
	width: 25%;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 10px;
}
/* product */
.product-filter {
	border-bottom: 1px solid #EEEEEE;
	padding-bottom: 5px;
	overflow: auto;
}
.product-filter .display {
	margin-right: 15px;
	float: left;
	padding-top: 4px;
	color: #333;
}
.product-filter .display a {
	font-weight: bold;
}
.product-filter .sort {
	float: right;
	color: #333;
}
.product-filter .limit {
	margin-left: 15px;
	float: right;
	color: #333;
}
.product-compare {
	padding-top: 6px;
	margin-bottom: 25px;
	font-weight: bold;
}
.product-compare a {
	text-decoration: none;
	font-weight: bold;
}
.product-list > div {
	overflow: auto;
	padding:4px;
	margin-bottom: 15px;
	border:#b6b5b5 1px solid;
	background:#c5c5c5 url('../image/product-list-bg.jpg') repeat-x;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}
.product-list .right {
	float: right;
	margin-left: 15px;
}
.product-list > div + div {
		padding-top: 16px;
}
.product-list .image {
	float: left;
	margin-right: 10px;
}
.product-list .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-list .name {
	margin-bottom: 3px;
}
.product-list .name a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}
.product-list .description {
	line-height: 15px;
	margin-bottom: 5px;
	color: #4D4D4D;
}
.product-list .rating {
	color: #7B7B7B;
}
.product-list .price {
	float: right;
	height: 50px;
	margin-left: 8px;
	text-align: right;
	color: #333333;
	font-size: 12px;
}
.product-list .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-list .price-new {
	font-weight: bold;
}
.product-list .price-tax {
	font-size: 12px;
	font-weight: normal;
	color: #333;
}
.product-list .cart {
	margin-bottom: 3px;
}
.product-list .wishlist, .product-list .compare {
	margin-bottom: 3px;
}
.product-list .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: block;
	background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: block;
	background: url('../image/add.png') left 60% no-repeat;
}
.product-grid {
	width: 100%;
	overflow: auto;
}
.product-grid > div {
	width: 150px;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 15px;
	text-align:center;
}
.product-grid > div img{
	-webkit-transition: all 0.2s ;
-moz-transition: all 0.2s ;
-ms-transition: all 0.2s ;
-o-transition: all 0.2s ;
transition: all 0.2s ;			
}
.product-grid > div img:hover{
	opacity:0.5;			
}
#autor{
	margin:0;
	position: fixed;
	bottom:0px;
	left:0px;
	clear:both;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	z-index:0;

}
#autor p{
	margin:0;
	padding:0;
}
#autor a{
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	text-decoration:none;			
}
#autor a:hover{
	color:#fff;				
}
#column-left + #column-right + #content .product-grid > div {
	width: 125px;
}
.product-grid .image {
	display: block;
	margin-bottom: 0px;
}
.product-grid .image img {
	padding: 3px;
	border: 1px solid #E7E7E7;
}
.product-grid .name a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
}
.product-grid .description {
	display: none;
}
.product-grid .rating {
	display: block;
	margin-bottom: 4px;
}
.product-grid .price {
	display: block;
	font-weight: bold;
	color: #333333;
	margin-bottom: 4px;
}
.product-grid .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-grid .price-new {
	font-weight: bold;
}
.product-grid .price .price-tax {
	display: none;
}
.product-grid .cart {
	margin-bottom: 3px;
}
.product-grid .wishlist, .product-grid .compare {
	margin-bottom: 3px;
}
.product-grid .wishlist a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: block;
	background: url('../image/add.png') left center no-repeat;
}
.product-grid .compare a {
	color: #333333;
	text-decoration: none;
	padding-left: 18px;
	display: block;
	background: url('../image/add.png') left center no-repeat;
}
/* Product */
.product-info {
	overflow: auto;
	margin-bottom: 20px;
}
.product-info > .left {
	float: left;
	margin-right: 15px;
}
.product-info > .left + .right {
	margin-left: 265px;
}
.product-info .image {
	border: 1px solid #E7E7E7;
	float: left;
	margin-bottom: 20px;
	padding: 10px;
	text-align: center;
}
.product-info .image-additional {
	width: 260px;
	margin-left: -10px;
	clear: both;
	overflow: hidden;
}
.product-info .image-additional img {
	border: 1px solid #E7E7E7;
}
.product-info .image-additional a {
	float: left;
	display: block;
	margin-left: 10px;
	margin-bottom: 10px;
}
.product-info .description {
	border-top: 1px solid #E7E7E7;
	border-bottom: 1px solid #E7E7E7;
	padding: 5px 5px 10px 5px;
	margin-bottom: 10px;
	line-height: 20px;
	color: #4D4D4D;
}
.product-info .description span {
	color: #554400;
}
.product-info .description a {
	color: #4D4D4D;
	text-decoration: none;
}
.product-info .price {
	overflow: auto;
	border-bottom: 1px solid #E7E7E7;
	padding: 0px 5px 10px 5px;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: bold;
	color: #333333;
}
.product-info .price-old {
	color: #F00;
	text-decoration: line-through;
}
.product-info .price-new {
	
}
.product-info .price-tax {
	font-size: 12px;
	font-weight: normal;
	color: #554400;
}
.product-info .price .reward {
	font-size: 12px;
	font-weight: normal;
	color: #554400;
}
.product-info .price .discount {
	font-weight: normal;
	font-size: 12px;
	color: #4D4D4D;
}
.product-info .options {
	border-bottom: 1px solid #E7E7E7;
	padding: 0px 5px 10px 5px;
	margin-bottom: 10px;
	color: #000000;
}
.product-info .option-image {
	margin-top: 3px;
	margin-bottom: 10px;
}
.product-info .option-image label {
	display: block;
	width: 100%;
	height: 100%;
}
.product-info .option-image img {
	margin-right: 5px;
	border: 1px solid #00e4ffCCC;
	cursor: pointer;
}
.product-info .cart {
	border-bottom: 1px solid #E7E7E7;
	padding: 0px 5px 10px 5px;
	margin-bottom: 20px;
	color: #4D4D4D;
	overflow: auto;
}
.product-info .cart div {
	float: left;
	vertical-align: middle;
}
.product-info .cart div > span {
	padding-top: 7px;
	display: block;
	color: #554400;
}
.product-info .cart .minimum {
	padding-top: 5px;
	font-size: 11px;
	color: #554400;
	clear: both;
}
.product-info .review {
	color: #4D4D4D;
	border-top: 1px solid #E7E7E7;
	border-left: 1px solid #E7E7E7;
	border-right: 1px solid #E7E7E7;
	margin-bottom: 10px;
}
.product-info .review > div {
	padding: 8px;
	border-bottom: 1px solid #E7E7E7;
	line-height: 20px;
}
.product-info .review > div > span {
	color: #554400;
}
.product-info .review .share {
	overflow: auto;
	line-height: normal;
}
.product-info .review .share a {
	text-decoration: none;
}
.attribute {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid #554400;
	border-left: 1px solid #554400;
	margin-bottom: 20px;
}
.attribute thead td, .attribute thead tr td:first-child {
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	background: #F7F7F7;
	text-align: left;
}
.attribute tr td:first-child {
	color: #000000;
	font-weight: bold;
	text-align: right;
	width: 20%;
}
.attribute td {
	padding: 7px;
	color: #4D4D4D;
	text-align: center;
	vertical-align: top;
	border-right: 1px solid #554400;
	border-bottom: 1px solid #554400;
}
.compare-info {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid #554400;
	border-left: 1px solid #554400;
	margin-bottom: 20px;
}
.compare-info thead td, .compare-info thead tr td:first-child {
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	background: #F7F7F7;
	text-align: left;
}
.compare-info tr td:first-child {
	color: #000000;
	font-weight: bold;
	text-align: right;
}
.compare-info td {
	padding: 7px;
	width: 20%;
	color: #4D4D4D;
	text-align: center;
	vertical-align: top;
	border-right: 1px solid #554400;
	border-bottom: 1px solid #554400;
}
.compare-info .name a {
	font-weight: bold;
}
.compare-info .price-old {
	font-weight: bold;
	color: #F00;
	text-decoration: line-through;
}
.compare-info .price-new {
	font-weight: bold;
}
/* wishlist */
.wishlist-product table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #554400;
	border-left: 1px solid #554400;
	border-right: 1px solid #554400;
	margin-bottom: 20px;
}
.wishlist-product td {
	padding: 7px;
}
.wishlist-product thead td {
	color: #4D4D4D;
	font-weight: bold;
	background-color: #F7F7F7;
	border-bottom: 1px solid #554400;
}
.wishlist-product thead .remove, .wishlist-product thead .image, .wishlist-product thead .cart {
	text-align: center;
}
.wishlist-product thead .name, .wishlist-product thead .model, .wishlist-product thead .stock {
	text-align: left;
}
.wishlist-product thead .quantity, .wishlist-product thead .price, .wishlist-product thead .total {
	text-align: right;
}
.wishlist-product tbody td {
	vertical-align: top;
	border-bottom: 1px solid #554400;
}
.wishlist-product tbody .remove {
	vertical-align: middle;
}
.wishlist-product tbody .remove, .wishlist-product tbody .image, .wishlist-product tbody .cart {
	text-align: center;
}
.wishlist-product tbody .name, .wishlist-product tbody .model, .wishlist-product tbody .stock {
	text-align: left;
}
.wishlist-product tbody .quantity, .wishlist-product tbody .price, .wishlist-product tbody .total {
	text-align: right;
}
.wishlist-product tbody .price s {
	color: #F00;
}
.login-content {
	margin-bottom: 20px;
	overflow: auto;
}
.login-content .left {
	float: left;
	width: 48%;
}
.login-content .right {
	float: right;
	width: 48%
}
.login-content .left .content, .login-content .right .content {
	min-height: 190px;
}
/* orders */
.order-list {
	margin-bottom: 10px;
}
.order-list .order-id {
	width: 49%;
	float: left;
	margin-bottom: 2px;
}
.order-list .order-status {
	width: 49%;
	float: right;
	text-align: right;
	margin-bottom: 2px;
}
.order-list .order-content {
	padding: 10px 0px;
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
}
.order-list .order-content div {
	float: left;
	width: 33.3%;
}
.order-list .order-info {
	text-align: right;
}
.order-detail {
	background: #EFEFEF;
	font-weight: bold;
}
/* returns */
.return-list {
	margin-bottom: 10px;
}
.return-list .return-id {
	width: 49%;
	float: left;
	margin-bottom: 2px;
}
.return-list .return-status {
	width: 49%;
	float: right;
	text-align: right;
	margin-bottom: 2px;
}
.return-list .return-content {
	padding: 10px 0px;
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
}
.return-list .return-content div {
	float: left;
	width: 33.3%;
}
.return-list .return-info {
	text-align: right;
}
.return-product {
	overflow: auto;
	margin-bottom: 20px;
}
.return-name {
	float: left;
	width: 33.3%;
}
.return-model {
	float: left;
	width: 33.3%;
}
.return-quantity {
	float: left;
	width: 33.3%;
}
.return-detail {
	overflow: auto;
	margin-bottom: 20px;
}
.return-reason {
	float: left;
	width: 33.3%;
}
.return-opened {
	float: left;
	width: 33.3%;
}
.return-opened textarea {
	width: 98%;
	vertical-align: top;
}
.return-remove {
	float: left;
	width: 33.3%;
	padding-top: 90px;
	text-align: center;
	vertical-align: middle;
}
.return-additional {
	overflow: auto;
	margin-bottom: 20px;
}
.return-comment {
	float: left;
	width: 49%;
}
.return-captcha {
	float: right;
	width: 49%;
}
.download-list {
	margin-bottom: 10px;
}
.download-list .download-id {
	width: 49%;
	float: left;
	margin-bottom: 2px;
}
.download-list .download-status {
	width: 49%;
	float: right;
	text-align: right;
	margin-bottom: 2px;
}
.download-list .download-content {
	padding: 10px 0px;
	display: inline-block;
	width: 100%;
	margin-bottom: 20px;
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
}
.download-list .download-content div {
	float: left;
	width: 33.3%;
}
.download-list .download-info {
	text-align: right;
}
/* cart */
.cart-info table {
	width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
	border-top: 1px solid #554400;
	border-left: 1px solid #554400;
	border-right: 1px solid #554400;
}
.cart-info td {
	padding: 7px;
}
.cart-info thead td {
	color: #4D4D4D;
	font-weight: bold;
	background-color: #F7F7F7;
	border-bottom: 1px solid #554400;
}
.cart-info thead .remove, .cart-info thead .image {
	text-align: center;
}
.cart-info thead .name, .cart-info thead .model {
	text-align: left;
}
.cart-info thead .quantity, .cart-info thead .price, .cart-info thead .total {
	text-align: right;
}
.cart-info tbody td {
	vertical-align: top;
	border-bottom: 1px solid #554400;
}
.cart-info tbody .remove {
	vertical-align: middle;
}
.cart-info tbody .remove, .cart-info tbody .image {
	text-align: center;
}
.cart-info tbody .name, .cart-info tbody .model {
	text-align: left;
}
.cart-info tbody .quantity, .cart-info tbody .price, .cart-info tbody .total {
	text-align: right;
}
.cart-info tbody span.stock {
	color: #F00;
	font-weight: bold;
}
.cart-module .cart-heading {
	border: 1px solid #DBDEE1;
	padding: 8px 8px 8px 22px;
	font-weight: bold;
	font-size: 13px;
	color: #555555;
	margin-bottom: 15px;
	cursor: pointer;
	background: #F8F8F8 url('../image/arrow-right.png') 10px 50% no-repeat;
}
.cart-module .active {
	background: #F8F8F8 url('../image/arrow-down.png') 7px 50% no-repeat;
}
.cart-module .cart-content {
	padding: 0px 0px 15px 0px;
	display: none;
	overflow: auto;
}
.cart-total {
	border-top: 1px solid #554400;
	overflow: auto;
	padding-top: 8px;
	margin-bottom: 15px;
}
.cart-total table {
	float: right;
}
.cart-total td {
	padding: 3px;
	text-align: right;
}
/* checkout */
.checkout-heading {
	background: #F8F8F8;
	border: 1px solid #DBDEE1;
	padding: 8px;
	font-weight: bold;
	font-size: 13px;
	color: #555555;
	margin-bottom: 15px;
}
.checkout-heading a {
	float: right;
	margin-top: 1px;
	font-weight: normal;
	text-decoration: none;
}
.checkout-content {
	padding: 0px 0px 15px 0px;
	display: none;
	overflow: auto;
}
.checkout-content .left {
	float: left;
	width: 48%;
}
.checkout-content .right {
	float: right;
	width: 48%;
}
.checkout-content .buttons {
	clear: both;
}
.checkout-product table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px solid #554400;
	border-left: 1px solid #554400;
	border-right: 1px solid #554400;
	margin-bottom: 20px;
}
.checkout-product td {
	padding: 7px;
}
.checkout-product thead td {
	color: #4D4D4D;
	font-weight: bold;
	background-color: #F7F7F7;
	border-bottom: 1px solid #554400;
}
.checkout-product thead .name, .checkout-product thead .model {
	text-align: left;
}
.checkout-product thead .quantity, .checkout-product thead .price, .checkout-product thead .total {
	text-align: right;
}
.checkout-product tbody td {
	vertical-align: top;
	border-bottom: 1px solid #554400;
}
.checkout-product tbody .name, .checkout-product tbody .model {
	text-align: left;
}
.checkout-product tbody .quantity, .checkout-product tbody .price, .checkout-product tbody .total {
	text-align: right;
}
.checkout-product tfoot td {
	text-align: right;
	border-bottom: 1px solid #554400;
}
.contact-info {
	overflow: auto;
}
.contact-info .left {
	float: left;
	width: 48%;
}
.contact-info .right {
	float: left;
	width: 48%;
}
.sitemap-info {
	overflow: auto;
	margin-bottom: 40px;
}
.sitemap-info .left {
	float: left;
	width: 48%;
}
.sitemap-info .right {
	float: left;
	width: 48%;
}
/* footer */ 
#footer {
	clear: both;
	overflow: auto;
	min-height: 100px;
	padding: 20px;
	border-top: 1px solid #DBDEE1;
	border-bottom: 1px solid #DBDEE1;
	background: #F8F8F8;
}
#footer h3 {
	color: #000000;
	font-size: 14px;
	margin-top: 0px;
	margin-bottom: 8px;
}
#footer .column {
	float: left;
	width: 25%;
	min-height: 100px;
}
#footer .column ul {
	margin-top: 0px;
	margin-left: 8px;
	padding-left: 12px;
}
#footer .column ul li {
	margin-bottom: 3px;
}
#footer .column a {
	text-decoration: none;
	color: #000;
}
#footer .column a:hover {
	text-decoration: underline;
}
#powered {
	margin-top: 5px;
	text-align: right;
	clear: both;
}
/* banner */
.banner div {
	text-align: center;
	width: 100%;
	display: none;
}
.banner div img {
	margin-bottom: 20px;
}

Naarling · 6 apr 2013

Wat je precies waar neer wilt zetten hangt er van af wat je wilt. Moeten alle (niet-numerieke) lijsten die pijltjes gebruiken, alleen de lijsten bij de beschrijvingen, of alleen die ene lijst?

EDIT: Met fonts ga je dit probleem trouwens niet oplossen ben ik bang.

RonnieV1987 · 6 apr 2013

ik wil eigenlijk de hele website voor zien van die afbeeldings dan.
ik denk dat dat dan veel mooier staat
dus ik denk dat het dan alle niet numerieke

RonnieV1987 · 6 apr 2013

neej heb al gekeken op die site met die fonts snap ik ook al helemaal niks van

dus dat word hem zkr niet

RonnieV1987 · 6 apr 2013

moet het dan in dit stukje?

Code:

}
.product-list > div {
	overflow: auto;
	padding:4px;
	margin-bottom: 15px;
	border:#b6b5b5 1px solid;
	background:#c5c5c5 url('../image/product-list-bg.jpg') repeat-x;
	-webkit-border-radius: 7px 7px 7px 7px;
	-moz-border-radius: 7px 7px 7px 7px;
	-khtml-border-radius: 7px 7px 7px 7px;
	border-radius: 7px 7px 7px 7px;
}

Naarling · 6 apr 2013

RonnieV1987 zei:
ik wil eigenlijk de hele website voor zien van die afbeeldings dan.

In dat geval kun je de code gebruiken die ik al geplaatst had. Waar je die precies in het bestand zet maakt feitelijk niet uit, maar het netst is het om het bij de rest van de algemene regels aan het begin van het document te zetten.

Code:

label {
	cursor: pointer;
}

/* layout */

Wordt dan bijvoorbeeld

Code:

label {
	cursor: pointer;
}

ul{
    list-style-image: url(link-naar-afbeelding.png);
}
/* layout */

RonnieV1987 · 6 apr 2013

ik heb het nu zo staan

Code:

label {
	cursor: pointer;
}

ul{
    list-style-image: url(www.voorhorst-computers.nl/images/1.gif);
}

/* layout */

nog werkt het niet
het zijn nog steeds stippen

zie hier

RonnieV1987 · 6 apr 2013

maar kan het zijn om dat open cart meerdre css heeft?

ie7.css

Code:

/* God I hate Microsoft! */
#header #cart {
	width: 400px;
}
#header #cart .heading {
	position: relative;
	right: 172px;
	margin-right: 0px;
}
#header #cart .content {

}
#header #search {
	position: inherit;
	float: right;
}
#header .button-search {
	top: 1px;
}
#header #search input {
	padding: 3px 1px 1px 33px;
	height: 19px;
}
/* menu */
#menu ul li {
	position: relative;
}
#menu ul li div {
	z-index: 5;
}
#menu ul li.active div {
	display: block;
}
.success, .warning, .attention, .information {
	position: relative;
}
.success .close, .warning .close, .attention .close, .information .close {
	position: absolute;
	right: 10px;
}
.box-product > div {
	display: inline;
}
.product-grid > div {
	display: inline;
}
/* button */
.product-info a.button span {
	line-height: 12px;
	display: block;
}

RonnieV1987 · 6 apr 2013

neej ook niet heb jou code ook in deze css gezet werkt nog niet

Naarling · 6 apr 2013

Het werkt niet omdat hij het bestand niet kan vinden. Als je het volledige pad wilt geven moet je ook het http:// gedeelte meenemen, anders gaat hij op zoek naar de map www.

RonnieV1987 · 6 apr 2013

U bent geweldig

danku Danku

:thumb:

Bullets

RonnieV1987

Gebruiker

Naarling

Terugkerende gebruiker

RonnieV1987

Gebruiker

Naarling

Terugkerende gebruiker

RonnieV1987

Gebruiker

RonnieV1987

Gebruiker

RonnieV1987

Gebruiker

Naarling

Terugkerende gebruiker

RonnieV1987

Gebruiker

RonnieV1987

Gebruiker

RonnieV1987

Gebruiker

Naarling

Terugkerende gebruiker

RonnieV1987

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy