Archief - Overbodige lijntjes

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.
n

nck2040

Legacy Member
Ik ben een portfolio websiteje aan het opzetten. Alles ging goed maar nu bots ik op een klein foutje.

Voor mij drie knoppen heb ik telkens een div in CSS gemaakt alsvolgt:
Code: 
#portknop{
background-image:url('images/portfolio.jpg');
margin-left:5px;
width:196px;
height:121px;
float:left;
}

#portknop:hover{
background-image:url('images/pindruk.jpg');
}

#contactknop{
background-image:url('images/contact.jpg');
margin-left:5px;
width:196px;
height:121px;
float:left;
}

#contactknop:hover{
background-image:url('images/cindruk.jpg');
}

#linksknop{
background-image:url('images/links.jpg');
margin-left:5px;
width:196px;
height:121px;
float:left;
}

#linksknop:hover{
background-image:url('images/lindruk.jpg');
}

Wat dus als volgt in mijn HTML komt:
Code: 
			 			<div id="menu">
			 			<div id="portknop"></div>
			 			<div id="contactknop"></div>
			 			<div id="linksknop"></div>
						<div id="menufooter"></div>
  		 			</div>

Het vreemde is dus dat er onder en bij contact rechts bij de hover lijntjes van 1px te zien zijn. Die mogen daar dus niet staan maar geen idee waardoor dit komt :/
B

Berre

Legacy Member
Kan je misschien eens een afbeelding geven of de link naar de pagina in kwestie?
S

Shaddix

Legacy Member
geen tijd om te testen of het werkt, maar zet bovenaan uw css eens:

Code: 
*{
border: 0;
text-decoration: none;
}
E

Ex0dus

Legacy Member
Je kan misschien beginnen met je div's even groot te maken als je images en niet 1px groter zoals je ze nu hebt gezet.

Zet in elke div je height op 120px ipv 121px.. Ik neem aan dat dit typo's waren :s

Dat balkje dat rechts verschijnt op die 'Contact' knop is niets meer dan het effect dat je krijgt wanneer cindruk.jpg maar 195px breed is in tegenstelling tot al je andere afbeeldingen, die namelijk 196px breed zijn...

Onnozele foutjes, simpele oplossingen ;)
-

-BVR-

Legacy Member
Werk aub met css sprites.

Ook is het beter om uw menu als volgt op te stellen:
Voorbeeld:
Code: 
<div id="menuwrapper">
  <ul id="menulist">
    <li><a href="/index.php" title="Portfolio" id="portfolio"><span>Portfolio</span></a></li>
    <li><a href="/contact.php" title="Contacteer mij" id="contact"><span>Contact</span></a></li>
    <li><a href="/links.php" title="Nuttige links" id="links"><span>Nieuws</span></a></li>
  </ul>
</div>
<!-- end menuwrapper -->

CSS
Code: 
/*Heel het menu is één hele sprite */

#menulist {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

#menulist li {
	display: inline-block;
	float: left;
	width: auto;
}

#menulist li a {
	display: inline-block;
	float: left;
	border: 0px none #FFF;
}
	
#menulist a span {
	position: absolute;
	top: -10000px;
}


/*buttons*/
/*portfolio button*/
#menulist #portfolio{
	width: 203px;
	height: 65px;
	display: block;
	background-image: url(/files/template/1280+/menubalkfull.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#menulist #portfolio:hover {
	background-position: left bottom;
}

/*contact button*/
#menulist #contact{
	width: 115px;
	height: 65px;
	display: block;
	background-image: url(/files/template/1280+/menubalkfull.png);
	background-repeat: no-repeat;
	background-position: -203px top;
}

#menulist #contact:hover {
	background-position: -203px bottom;
}

/*links button*/
#menulist #links{
	width: 86px;
	height: 65px;
	display: block;
	background-image: url(/files/template/1280+/menubalkfull.png);
	background-repeat: no-repeat;
	background-position: -318px top;
}

#menulist #links:hover {
	background-position: -318px bottom;
}

Beter voor mogelijke mobiele weergaven, textreaders etc. Dat vind ik toch. Het is een moeilijkere oplossing, maar wel een betere imo.
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