Positioneren icoontjes

float icm top? top = position en hoort dus niet bij een float en gebruik dus margin.

En ik heb niet het hele topic. Maar hou eerst maar eens even je HTML en CSS gescheiden..

Michael - op 17/01/2014 13:36:30

Dat wordt al een heel stuk duidelijker :)

Poging
<?php
if($page->buttonicon){
$icon = '<img src="icons/'.$page->buttonicon.'" style="float:right;margin-top:33px">';
}
else{
$icon = '<img src="images/noicon.png" style="float:right;margin-top:33px">';
}

$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" style="float:left;" '.$target.'>'.$page->title.'</a></li>';
?>
Klopt helemaal Jan, aangepast.

Bedankt allen. Ik heb de bovenstaande - aangepaste code gebruikt. Al een stuk dichterbij. Uitkomst:


Ik heb overigens hiervoor de originele code uit de stylesheet gebruikt, dus:

#icon1 {
	position:relative;
	width:44px;
	height:21px;
	z-index:1;
	left:0px;
	top: 28px;
}

Deze heb ik ook - zonder effect - aangepast naar "right:0px;", en float: "right;"

Dit heeft niks met positionering te maken, gewoon hier float voor gebruiken. Even een paar tips wat betreft dit korte stukje CSS.

- Je wilt iets positioneren in een element, gebruik dan absolute en relative op de parent.
- z-index is nergens voor nodig want je wilt niks over elkaar heen liggen
- In dit geval hoef je niet te positioneren, float: right is genoeg ivm margin (zie mijn vorige reactie).

<a href="#" title="Pagina 1">Pagina 1<i class="icon"></i></a>

a .icon {
float right;
background: url();
}

a .icon:after {
clear: both;
float: none;
height: 0;
content: "";
}

Tevens ben ik geen fan van lege elementen (hoe meer elementen hoe slechter voor de SEO), je zou dit kunnen oplossen door het icoon via css toe te voegen via :after methode. Of de icoon op de achtergrond afbeelding te doen, of een span in de a (om de tekst) en daar de icon op de achtergrond te zetten. Ik zou hier sws geen extra img van maken...

Metal Hertog Jan op 17/01/2014 14:49:48

Dit heeft niks met positionering te maken, gewoon hier float voor gebruiken. Even een paar tips wat betreft dit korte stukje CSS.

- Je wilt iets positioneren in een element, gebruik dan absolute en relative op de parent.
- z-index is nergens voor nodig want je wilt niks over elkaar heen liggen
- In dit geval hoef je niet te positioneren, float: right is genoeg ivm margin (zie mijn vorige reactie).

<a href="#" title="Pagina 1">Pagina 1<i class="icon"></i></a>

a .icon {
float right;
background: url();
}

a .icon:after {
clear: both;
float: none;
height: 0;
content: "";
}

Tevens ben ik geen fan van lege elementen (hoe meer elementen hoe slechter voor de SEO), je zou dit kunnen oplossen door het icoon via css toe te voegen via :after methode. Of de icoon op de achtergrond afbeelding te doen, of een span in de a (om de tekst) en daar de icon op de achtergrond te zetten. Ik zou hier sws geen extra img van maken...

Bedankt voor je uitgebreide reactie en toelichting. Ben een beginner, dus om verwarring aan mijn kant te voorkomen, heb ik een sterke voorkeur voor het aanpassen van de bestaande code in plaats van het schrijven van andere codes. Ben om je suggestie te gebruiken nog niet gevorderd genoeg.

Nee dat snap ik, oefening baard kunst ;-) daarom geef ik dus je tips zodat je er van leert

Iemand? Volgens mij ben ik er bijna met bovenstaande codes..