Archief - xHTML/CSS: absolute positionering div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
g

grooverider

Legacy Member
Ben even bezig geweest met een nieuw design maar ik zit met een probleem.

Om rounded borders te krijgen gebruik ik absoluut gepositioneerde div's, met daarin de nodige image (zo doe ik het eigenlijk altijd, en tot nu toe nooit problemen gehad).
In FF ziet het eruit zoals ik het in mij hoofd had, maar in IE 6 blijken de div's gewoon verdwenen te zijn. Ik heb al geprobeerd ze een opvallende border te geven, of ergens anders te positioneren, maar ik krijg ze bijna nooit te zien (en als ik ze toch zichtbaar krijg is het op totaal onlogische plaatsen).

screenshot FF
screenshot IE 6

link naar de pagina

Iemand een idee waar de (hopelijk stomme) fout zit?

alvast bedankt
P

PiXeL

Legacy Member
De site staat gewoon niet online dus is het normaal dat er geen div's te zien zijn.
g

grooverider

Legacy Member
had perongeluk alles van mijn server gegooid, en nadien terug geupload (maar dus naar de foute locatie)
de site staat nu op http://www.2brothers.be (en de images zal ik zo snel mogelijk ook terug plaatsen)

edit: screenshots zijn ook terug werkende
t

tinbie

Legacy Member
Je gebruikt dus
div { background-image:url(image);}

dit zou altijd moeten werken volgens mij, FF en IE compatible
zet er eens een background-kleur bij

div {background-color:#000000;
background-image:url(image);}


kijk eens of dit effect heeft, anders post je jouw CSS bestand eens
g

grooverider

Legacy Member
geen effect (want zoals in mn openingspost al vermeld: ik had al geprobeerd er een border aan te geven, maar nog kwamen ze niet te voorschijn.) Het moet dus louter iets zijn met de positionering (of z-index?)

css (ook te vinden op http://www.2brothers.be/style.css):

Code: 
* {margin: 0; padding: 0;}

body {
	font-family: 'Trebuchet MS', verdana, sans-serif;
	background-color: #ccc;
	color: #333;
}

#shade {
	width: 774px;
	margin: auto;
	background: url(img/shadow.png);
}

#wrapper {
	width: 760px;
	margin: auto;
	background-color: #fff;
}

#header {
	background: url(img/header.png) no-repeat top;
	height: 146px;
}

#nav {	height: 34px;
	background: url(img/header.png) no-repeat bottom;
	font-size: 1.2em;
	font-weight: bold;
}

#nav ul {
	float: right;
	margin-right: 35px;
}

#nav li {
	display: inline;
	float: left;
	position: relative;
	text-align: center;
	margin-left: 5px;
}

#nav a {
	display: block;
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	color: #fff;
	width: 70px;
}

#nav a:hover {
	color: #00aaff;
}

#nav a.current {
	background-color: #fff;
	color: #0066aa;
}

#nav2 {
	font-size: 1.1em;
}

#nav2 ul {
	list-style: none;
}

#nav2 li {
	display: inline;
	margin-right: 15px;
}

#nav2 a {
	color: #0066aa;
	text-decoration: none;
}

#content {
	position: relative;
}

#roundedTopLeft {
	background: url(img/rounded.png) no-repeat top left;
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
}

#roundedTopRight {
	background: url(img/rounded.png) no-repeat top right;
	position: absolute;
	top: 0;
	right: 0;
	height: 25px;
	width: 25px;
}

#roundedBottomLeft {
	background: url(img/rounded.png) no-repeat bottom left;
	height: 25px;
	width: 25px;
	position: absolute;
	left: 0;
	bottom: 0;

}

#roundedBottomRight {
	background: url(img/rounded.png) no-repeat bottom right;
	width: 25px;
	height: 25px;
	position: absolute;
	right: 0;
	bottom: 0;
}

#colLeft {
	width: 460px;
	padding: 25px;
	font-size: 0.9em;
	line-height: 1.2em;
	float: left;
}

#colLeft h1 {
	margin: 20px auto 15px auto;
}

#colLeft h2 {
	margin-top: 20px;
	margin-bottom: 10px;
}

#colLeft p {
	font-family: verdana, sans-serif;
	text-align: justify;
	margin-bottom: 10px;
}

#colLeft a, #colRight a {
	color: #0066aa;
	text-decoration: none;
	border-bottom: 1px dashed #0066aa;
}

#colLeft a:hover, #colRight a:hover {
	color: #00aaff;
	border-bottom: 1px solid #00aaff;
}

#colLeft ul {
	margin-left: 25px;
	margin-bottom: 20px;
}

#colLeft li {
	margin-bottom: 4px;
}

#colRight {
	float: left;
	border-left: 1px solid #0066aa;
	margin-top: 50px;
	padding-left: 25px;
	margin-bottom: 15px;
}

#colRight h3 {
	margin-top: 15px;
}

#colRight img {
	border: none;
	margin-top: 10px;
}

#colRight ul {
	list-style: none;
}

#colRight a {
	font-size: 0.8em;
}

#colRight li a, #colRight li a:hover {
	border: none;
}

#info {	text-align: center;
	font-size: 0.8em;
	position: relative;
	padding-bottom: 8px;
	clear: both;
}

#info a {
	color: #0066aa;
	text-decoration: none;
	border-bottom: 1px dashed #0066aa;
}

#info a:hover {
	color: #00aaff;
	border-bottom: 1px solid #00aaff;
}

#footer {
	background-color: #000;
	text-align: center;
	padding-top: 8px;
	border: none;
	height: 28px;
	font-size: 0.8em;
	color: #fff;
}

#footer a {
	color: #fff;
	border-bottom: 1px dashed #fff;
	text-decoration: none;
}

#footer a:hover {
	color: #00aaff;
	border-bottom: 1px solid #00aaff;
}
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan