Door
James de Graaf
op 16-01-2014 15:24
gewijzigd op 16-01-2014 15:32
2.249 views
Voor mijn mobiele website wil ik graag de positionering van mijn icoontjes aanpassen.
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!
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.
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.
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.
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 ?
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.
[size=xsmall]Toevoeging op 16/01/2014 17:01:07:[/size]
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.
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.
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.
Nou dat is vrij simpel wat na style= staat is je css code.
"<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.
[quote="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 ?
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.
[size=xsmall]Toevoeging op 16/01/2014 17:01:07:[/size]
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.
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.
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.
[/quote]
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.
[size=xsmall]Toevoeging op 17/01/2014 11:41:46:[/size]
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.
[size=xsmall]Toevoeging op 17/01/2014 11:41:46:[/size]
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.
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.
[size=xsmall]Toevoeging op 17/01/2014 13:05:39:[/size]
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.
[size=xsmall]Toevoeging op 17/01/2014 13:05:39:[/size]
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:
