Positioneren icoontjes
Het gaat hierbij om een navigatiebutton bestaande uit een icoontje en een paginatitel. Momenteel worden de icoontjes links van de paginatitels weergegeven, terwijl ik deze graag rechts gepositioneerd wil hebben. CSS lijkt de positie niet te beinvloeden. De eerstgenoemde code hieronder echter wel. Tot nu toe zonder het gewenste resultaat.
Zou iemand me hierin kunnen helpen, aangezien ik een beginner ben. Alvast bedankt!
Code
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
if($page->buttonicon){
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
CSS
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#icon1 {
position:relative;
width:44px;
height:21px;
z-index:1;
left:0px;
top: 28px;
}
position:relative;
width:44px;
height:21px;
z-index:1;
left:0px;
top: 28px;
}
Gewijzigd op 16/01/2014 15:32:05 door James de Graaf
Maakt het een stuk leesbaarder :)
Zou je het stuk waarin je id icon1 gebruikt kunnen laten zien?
Graag in [code.] [/code.] tags (zonder .)
Neem aan dat dit de div is waarin de icon zit.
Als je left:0 verandert in right:0 ?
Ik raad je aan om ook die inline css in je .css file te zetten en er een class aan geven.
Anders kun je wijzigingen op alle pagina's met de hand doorvoeren.
Voor je probleem, wat je kunt gebruiken om je icoontje rechts te krijgen is margin-right: -xxxpx; (zie het - teken ervoor!).
Wat je ook kunt doen is je icoontje in een eigen div zetten en dan in css met position: relative; werken en marges om de uitlijning juist te krijgen.
Gewijzigd op 16/01/2014 15:37:22 door Chris PHP
Michael - op 16/01/2014 15:29:44:
Als je begint met een single quote ' hoef je die dubbele quotes " niet te escape \"
Maakt het een stuk leesbaarder :)
Zou je het stuk waarin je id icon1 gebruikt kunnen laten zien?
Graag in [code.] [/code.] tags (zonder .)
Neem aan dat dit de div is waarin de icon zit.
Als je left:0 verandert in right:0 ?
Maakt het een stuk leesbaarder :)
Zou je het stuk waarin je id icon1 gebruikt kunnen laten zien?
Graag in [code.] [/code.] tags (zonder .)
Neem aan dat dit de div is waarin de icon zit.
Als je left:0 verandert in right:0 ?
Bedankt voor je reactie. De CSS code lijkt de positionering niet te beinvloeden.
Kan de #icon1 nergens aan linken wat duidt op de button-icoontjes. Ik heb dit ook getest door het volledig te verwijderen uit de stylesheet en dit heeft geen invloed op de button-icoontjes. M.a.w. ook na verwijdering worden ze nog steeds afgebeeld.
Waar het - naar mijn ingeving - op neer komt is het volgende.
Het gewenste icoontje wordt geselecteerd uit de dropdown menu. Dit icoontje wordt geplaatst in de navigatiebutton, momenteel links dus van de paginatitel.
Voor de buttonopmaak wordt de CSS stylsheet aangeroepen, maar voor het icoontje binnen de navigatiebutton zelf gebeurt dit niet. Positionering van het icoontje gebeurt op basis van de eerstgenoemde code.
Toevoeging op 16/01/2014 17:01:07:
Chris NVT op 16/01/2014 15:36:20:
Waarom gebruik je inline css?
Ik raad je aan om ook die inline css in je .css file te zetten en er een class aan geven.
Ik raad je aan om ook die inline css in je .css file te zetten en er een class aan geven.
Hi Chris, bedankt voor je reactie. Inline CSS wordt gebruikt omdat dat simpelweg al de bestaande code is. Heb op dit vlak zelf te weinig kennis, om een aparte CSS code te schrijven. Wil het daarom, indien haalbaar en relatief gemakkelijk, bij de aanpassing van de huidige code laten.
Quote:
Anders kun je wijzigingen op alle pagina's met de hand doorvoeren.
Het gewenste icoontje zelf wordt nu op basis van een dropdown menu worden geselecteerd. Hiervoor hoeft dus niet een aanpassing per pagina gemaakt te worden - als we het nu over hetzelfde hebben althans.
Bedankt.
Gewijzigd op 16/01/2014 17:02:39 door James de Graaf
"<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
Je hebt een .css sheet die je include voor de opmaak, het enige wat je daar doet is hetvolgende.
Je voegt een class toe in je css sheet (bijvoorbeeld .icon), als je een . voor het woord zet is het een class, met een # is het een id. Classes mogen meerdere keren voorkomen op 1 pagina, een id in principe niet.
Wanneer je dus de class gemaakt hebt komt dat er zo uit te zien.
.icon { position:relative; top:33px; }
En je code in je pagina komt er dan zo uit te zien.
"<img src=\"images/noicon.png\" class=\"icon\">";
Ik adviseer je trouwens ook om in PHP enkele quotes te gebruiken, dan hoef je niet telkens alles te escapen. Zo dus:
'<img src="images/noicon.png" class="icon">';
Jij zegt dat je dit daar nooit hoeft te wijzigen, maar misschien ga je over een jaar je layout wel aanpassen, en moet die position:relative of top:33px misschien wel aangepast worden. Dan moet je dit dus op elke pagina doen wanneer je niet met classes en css werkt. Het gaat dan niet om het icoontje, maar de positionering ervan.
James de Graaf op 16/01/2014 16:08:43:
Bedankt voor je reactie. De CSS code lijkt de positionering niet te beinvloeden.
Kan de #icon1 nergens aan linken wat duidt op de button-icoontjes. Ik heb dit ook getest door het volledig te verwijderen uit de stylesheet en dit heeft geen invloed op de button-icoontjes. M.a.w. ook na verwijdering worden ze nog steeds afgebeeld.
Waar het - naar mijn ingeving - op neer komt is het volgende.
Het gewenste icoontje wordt geselecteerd uit de dropdown menu. Dit icoontje wordt geplaatst in de navigatiebutton, momenteel links dus van de paginatitel.
Voor de buttonopmaak wordt de CSS stylsheet aangeroepen, maar voor het icoontje binnen de navigatiebutton zelf gebeurt dit niet. Positionering van het icoontje gebeurt op basis van de eerstgenoemde code.
Toevoeging op 16/01/2014 17:01:07:
Hi Chris, bedankt voor je reactie. Inline CSS wordt gebruikt omdat dat simpelweg al de bestaande code is. Heb op dit vlak zelf te weinig kennis, om een aparte CSS code te schrijven. Wil het daarom, indien haalbaar en relatief gemakkelijk, bij de aanpassing van de huidige code laten.
Het gewenste icoontje zelf wordt nu op basis van een dropdown menu worden geselecteerd. Hiervoor hoeft dus niet een aanpassing per pagina gemaakt te worden - als we het nu over hetzelfde hebben althans.
Bedankt.
Michael - op 16/01/2014 15:29:44:
Als je begint met een single quote ' hoef je die dubbele quotes " niet te escape \"
Maakt het een stuk leesbaarder :)
Zou je het stuk waarin je id icon1 gebruikt kunnen laten zien?
Graag in [code.] [/code.] tags (zonder .)
Neem aan dat dit de div is waarin de icon zit.
Als je left:0 verandert in right:0 ?
Maakt het een stuk leesbaarder :)
Zou je het stuk waarin je id icon1 gebruikt kunnen laten zien?
Graag in [code.] [/code.] tags (zonder .)
Neem aan dat dit de div is waarin de icon zit.
Als je left:0 verandert in right:0 ?
Bedankt voor je reactie. De CSS code lijkt de positionering niet te beinvloeden.
Kan de #icon1 nergens aan linken wat duidt op de button-icoontjes. Ik heb dit ook getest door het volledig te verwijderen uit de stylesheet en dit heeft geen invloed op de button-icoontjes. M.a.w. ook na verwijdering worden ze nog steeds afgebeeld.
Waar het - naar mijn ingeving - op neer komt is het volgende.
Het gewenste icoontje wordt geselecteerd uit de dropdown menu. Dit icoontje wordt geplaatst in de navigatiebutton, momenteel links dus van de paginatitel.
Voor de buttonopmaak wordt de CSS stylsheet aangeroepen, maar voor het icoontje binnen de navigatiebutton zelf gebeurt dit niet. Positionering van het icoontje gebeurt op basis van de eerstgenoemde code.
Toevoeging op 16/01/2014 17:01:07:
Chris NVT op 16/01/2014 15:36:20:
Waarom gebruik je inline css?
Ik raad je aan om ook die inline css in je .css file te zetten en er een class aan geven.
Ik raad je aan om ook die inline css in je .css file te zetten en er een class aan geven.
Hi Chris, bedankt voor je reactie. Inline CSS wordt gebruikt omdat dat simpelweg al de bestaande code is. Heb op dit vlak zelf te weinig kennis, om een aparte CSS code te schrijven. Wil het daarom, indien haalbaar en relatief gemakkelijk, bij de aanpassing van de huidige code laten.
Quote:
Anders kun je wijzigingen op alle pagina's met de hand doorvoeren.
Het gewenste icoontje zelf wordt nu op basis van een dropdown menu worden geselecteerd. Hiervoor hoeft dus niet een aanpassing per pagina gemaakt te worden - als we het nu over hetzelfde hebben althans.
Bedankt.
Het is logisch dat het verwijderen van #icon1 er niet voor zorgt dat het ineens niet meer zichtbaar is. Dit zegt alleen wat over de opmaak en positie van het element waar dat id aan hangt.
Als je #icon1 een border:1px solid #f00; meegeeft, zou je ergens een rood kadertje omheen moeten zien. Het positioneren kan middels right:0 (bij een position absolute) of een float:right; die left:0 is dan sowieso niet juist wanneer je hem rechts wilt.
Toevoeging op 17/01/2014 11:41:46:
Je code met enkele quotes
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
if($page->buttonicon){
$icon = '<img src="icons/'.$page->buttonicon.'" style="position:relative;top:33px">';
}
else{
$icon = '<img src="images/noicon.png" style="position:relative; top:33px">';
}
$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" '.$target.' >'.$page->title.'</a></li>';
?>
if($page->buttonicon){
$icon = '<img src="icons/'.$page->buttonicon.'" style="position:relative;top:33px">';
}
else{
$icon = '<img src="images/noicon.png" style="position:relative; top:33px">';
}
$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" '.$target.' >'.$page->title.'</a></li>';
?>
Michael - op 16/01/2014 15:29:44:
Het is logisch dat het verwijderen van #icon1 er niet voor zorgt dat het ineens niet meer zichtbaar is. Dit zegt alleen wat over de opmaak en positie van het element waar dat id aan hangt.
Als je #icon1 een border:1px solid #f00; meegeeft, zou je ergens een rood kadertje omheen moeten zien. Het positioneren kan middels right:0 (bij een position absolute) of een float:right; die left:0 is dan sowieso niet juist wanneer je hem rechts wilt.
Toevoeging op 17/01/2014 11:41:46:
Je code met enkele quotes
Het is logisch dat het verwijderen van #icon1 er niet voor zorgt dat het ineens niet meer zichtbaar is. Dit zegt alleen wat over de opmaak en positie van het element waar dat id aan hangt.
Als je #icon1 een border:1px solid #f00; meegeeft, zou je ergens een rood kadertje omheen moeten zien. Het positioneren kan middels right:0 (bij een position absolute) of een float:right; die left:0 is dan sowieso niet juist wanneer je hem rechts wilt.
Toevoeging op 17/01/2014 11:41:46:
Je code met enkele quotes
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
if($page->buttonicon){
$icon = '<img src="icons/'.$page->buttonicon.'" style="position:relative;top:33px">';
}
else{
$icon = '<img src="images/noicon.png" style="position:relative; top:33px">';
}
$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" '.$target.' >'.$page->title.'</a></li>';
?>
if($page->buttonicon){
$icon = '<img src="icons/'.$page->buttonicon.'" style="position:relative;top:33px">';
}
else{
$icon = '<img src="images/noicon.png" style="position:relative; top:33px">';
}
$menurow = '<li id="row_'.$page->id.'" style="display:'.$rstyle.'">'.$icon.'<a class="'.$bs.'" href="'.trim($page->url).'" '.$target.' >'.$page->title.'</a></li>';
?>
Dank je. Heb de aanpassingen doorgevoerd voor #icon1, zowel absolute als relative, inclusief rechts uitlijnen en de border. Echter, ik zie geen verandering.
Ook de code met enkele quotes verandert de positie niet.
Het is denk ik handig om wat meer informatie te geven, liefst een voorbeeld van hoe het er nu uit ziet. Ik heb geen idee waar de #icon1 nou staat en hoe de rest eruit ziet. Het blijft op deze manieren gokken.
Toevoeging op 17/01/2014 13:05:39:
Een tutorial over positioneren kan ook geen kwaad
Michael - op 17/01/2014 13:04:26:
De enkele quotes verandert niks. Dit is alleen beter leesbaar omdat je niet alles hoeft te escapen.
Het is denk ik handig om wat meer informatie te geven, liefst een voorbeeld van hoe het er nu uit ziet. Ik heb geen idee waar de #icon1 nou staat en hoe de rest eruit ziet. Het blijft op deze manieren gokken.
Toevoeging op 17/01/2014 13:05:39:
Een tutorial over positioneren kan ook geen kwaad
Het is denk ik handig om wat meer informatie te geven, liefst een voorbeeld van hoe het er nu uit ziet. Ik heb geen idee waar de #icon1 nou staat en hoe de rest eruit ziet. Het blijft op deze manieren gokken.
Toevoeging op 17/01/2014 13:05:39:
Een tutorial over positioneren kan ook geen kwaad
Links is de huidige situatie, rechts de gewenste situatie.
Ben overgens redelijk op de hoogte wat betreft basic CSS positioning. Dat heb ik als eerste geprobeerd. Wat ik ook doe, de positie veranderd niet. Wat ik tot nu toe heb gemerkt is het enige wat effect heeft sleutelen aan:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
if($page->buttonicon){
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
$icon = "<img src=\"icons/".$page->buttonicon."\" style=\"position:relative; top:33px\">";
}
else{
$icon = "<img src=\"images/noicon.png\" style=\"position:relative; top:33px\">";
}
$menurow = "<li id=row_".$page->id." style=\"display:$rstyle\">$icon<a class=\"".$bs."\" href=\"".trim($page->url)."\" $target >".$page->title."</a></li>\n";
Poging
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?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>';
?>
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.
Gewijzigd op 17/01/2014 13:47:11 door Michael -
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
Klopt helemaal Jan, aangepast.
Poging
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?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>';
?>
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:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
#icon1 {
position:relative;
width:44px;
height:21px;
z-index:1;
left:0px;
top: 28px;
}
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;"
- 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...
Gewijzigd op 17/01/2014 14:51:56 door Joakim Broden
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...
- 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.