DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Even een relatief simpel html/css-vraagje, maar ik krijg het niet voor elkaar:
Ik heb een <DIV> waarbinnen de inhoud van mijn pagina komt. Nu wil ik op een vaste positie rechts een blokje plaatsen, bij voorkeur ook een DIV.
Echter, de tekst gaat dwars door mijn DIV heen, en wordt er niet omheen geplaatst.
Heeft iemand een idee hoe ik dat voor elkaar krijg?
Hieronder de vereenvoudigde code (CSS heb ik er hier rechtstreeks in opgenomen).
Ik heb een <DIV> waarbinnen de inhoud van mijn pagina komt. Nu wil ik op een vaste positie rechts een blokje plaatsen, bij voorkeur ook een DIV.
Echter, de tekst gaat dwars door mijn DIV heen, en wordt er niet omheen geplaatst.
Heeft iemand een idee hoe ik dat voor elkaar krijg?
Hieronder de vereenvoudigde code (CSS heb ik er hier rechtstreeks in opgenomen).
| 1 2 3 4 5 6 7 8 9 10 11 12 | <DIV style="width:400px; position: relative; border:1px solid;"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test <div style="width:100px;height:100px;top:50px;right:0px; position: absolute; border:2px solid;display:inline;"></div> </div> |
Op dinsdag 16 maart 2010 18:45 schreef henrydg het volgende:
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Als je dingen absoluut positioneert gaat de tekst er niet om heen nee, daarvoor moet je gebruik maken van floats.
Nee.
Wat bedoel je nu, wat wil je precies en welke code heb je al???quote:Op zondag 31 juli 2011 13:47 schreef Chuck-N0rr1s het volgende:
css, heb mn naam rood, nu wil ik nog graag een tag
Tnx PimD, float:right icm margin-top is wat ik zocht.
DIV's kunnen je zo frustreren als ze niet precies doen wat je verwacht.
DIV's kunnen je zo frustreren als ze niet precies doen wat je verwacht.
Op dinsdag 16 maart 2010 18:45 schreef henrydg het volgende:
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
In plaats van teksten als "test test test test test" kun je trouwens beter Lorem Ipsum gebruiken. Dat ziet er veel meer uit als echte tekst en is dus beter testmateriaal.
Ja dat klopt, maar het was meer ter illustratie van wat het probleem was. Op de website waar het om gaat, staat al inhoudelijke tekst.quote:Op maandag 1 augustus 2011 11:32 schreef Tijn het volgende:
In plaats van teksten als "test test test test test" kun je trouwens beter Lorem Ipsum gebruiken. Dat ziet er veel meer uit als echte tekst en is dus beter testmateriaal.
Op dinsdag 16 maart 2010 18:45 schreef henrydg het volgende:
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Wat is er mis met de Prius?
[ afbeelding ]
Ik vind 't een hele mooie auto.
Nu was ik een simpele website aan het aanpassen in het CMS en heb ik iets verneukt. Er stond een simpele tekst met daaronder een hyperlink. Zodra je daarop klikte klapte eronder een stuk tekst uit.
Ik had het stuk tekst aangepast maar nu als ik die pagina bezoek staat alles reeds uitgeklapt. Hoe kan ik ervoor zorgen dat ie initieel weer verborgen is.
Ik had het stuk tekst aangepast maar nu als ik die pagina bezoek staat alles reeds uitgeklapt. Hoe kan ik ervoor zorgen dat ie initieel weer verborgen is.
Misschien een beetje brede vraag, maar weet anders ook niet of wat ik er anders achter ga komen.
Wat kunnen redenen zijn dat wanneer ik een CSS gebruik, hij wel bepaalde aspecten overneemt maar niet alles en dit alleen bij bepaalde tpl's?
Het zit zo. Ik ben bezig met een applicatie waar ik nu een CSS voor heb gemaakt.
Sommige pagina's pakt hij perfect, dus mooie achtergrond, goede lettertype en grootte enzo. Maar andere pagina's heeft hij wel de actergrond, maar zijn de letters enorm vergroot.
Als ik dan kijk met F12 in Explore dan herkent ie wel de lettertype en grootte die de CSS hem geeft.
Heb gekeken of alle heads/body's/tables goed worden afgesloten en dat is in het betreffende geval gebeurd.
Iemand enig idee waar ik het misschien anders in kan zoeken?
edit: heb even gekeken in google chrome. daarin doet hij 1 verkeerde pagina wel goed. Maar enkele andere verkeerde ook verkeerd.
[ Bericht 7% gewijzigd door Cue_ op 10-08-2011 13:57:05 ]
Wat kunnen redenen zijn dat wanneer ik een CSS gebruik, hij wel bepaalde aspecten overneemt maar niet alles en dit alleen bij bepaalde tpl's?
Het zit zo. Ik ben bezig met een applicatie waar ik nu een CSS voor heb gemaakt.
Sommige pagina's pakt hij perfect, dus mooie achtergrond, goede lettertype en grootte enzo. Maar andere pagina's heeft hij wel de actergrond, maar zijn de letters enorm vergroot.
Als ik dan kijk met F12 in Explore dan herkent ie wel de lettertype en grootte die de CSS hem geeft.
Heb gekeken of alle heads/body's/tables goed worden afgesloten en dat is in het betreffende geval gebeurd.
Iemand enig idee waar ik het misschien anders in kan zoeken?
edit: heb even gekeken in google chrome. daarin doet hij 1 verkeerde pagina wel goed. Maar enkele andere verkeerde ook verkeerd.
[ Bericht 7% gewijzigd door Cue_ op 10-08-2011 13:57:05 ]
eerst alle pagina's hard refreshen (ctrl+F5).
Dan kijken of je meerdere stylesheets hebt of inline style met hogere specificity.
Dan kijken of je meerdere stylesheets hebt of inline style met hogere specificity.
Explore helemaal herstart, ook hard refreshes helpen niet.quote:Op woensdag 10 augustus 2011 13:58 schreef KomtTijd... het volgende:
eerst alle pagina's hard refreshen (ctrl+F5).
Dan kijken of je meerdere stylesheets hebt of inline style met hogere specificity.
Verder gebruik ik geen inline styles (ja wel beetje, maar heeft te maken met kolombreedtes, en die ziet hij ook wel gewoon)
Al ik in het F12 menu de CSS uitschakel, veranderd hij wel. Dus hij ziet opzich wel de koppeling met de CSS. Alleen niet zoals aangegeven
[ Bericht 12% gewijzigd door Cue_ op 10-08-2011 14:39:14 ]
Blijkbaar heb je gewoon een andere stijl ergens gedefinieerd met hogere specificiteit dus.quote:
Hmm.. als ik een aparte class maak voor de <td> en <tr> van de tabel. dan doet hij het wel goed
ik heb een foto-pagina gemaakt voor mn site
het vervelende is dat er staande en liggende foto's zijn gemaakt, een erg rommelige opmaak krijg ik dan dus.
Ik had 2 oplossingen gezien:
1) Uit alle foto's een vierkant nemen, dus niet schalen maar een stuk afknippen van zijkant of bovenkant zodat alle foto's gelijk van grote zijn. Dit lijkt me het mooiste maar ik wil niet alle foto's gaan bewerken. Kan dit met een css of php trucje..
Dit heeft mijn voorkeur maar ik denk dat het lastig is..dus
2) Om elke foto een vierkantje zetten met de breedte van een ligggende foto en de hoogte van een staande foto.
Hoe ga ik dat aanpakken? Iemand suggesties?
het vervelende is dat er staande en liggende foto's zijn gemaakt, een erg rommelige opmaak krijg ik dan dus.
Ik had 2 oplossingen gezien:
1) Uit alle foto's een vierkant nemen, dus niet schalen maar een stuk afknippen van zijkant of bovenkant zodat alle foto's gelijk van grote zijn. Dit lijkt me het mooiste maar ik wil niet alle foto's gaan bewerken. Kan dit met een css of php trucje..
Dit heeft mijn voorkeur maar ik denk dat het lastig is..dus
2) Om elke foto een vierkantje zetten met de breedte van een ligggende foto en de hoogte van een staande foto.
Hoe ga ik dat aanpakken? Iemand suggesties?
zoiets had ik ook al bedachtquote:
Ik zou voor optie twee gaan. En dan wel 'onzichtbaar' vierkant tov de achtergrond.
hoe kan ik dat slim aanpakken? want ik wil niet aan elke foto apart een class oid gaan hangen. Niet erg voor 1x maar niet als ik redelijk foto's ga uploaden.
Sowieso iemand een goed voorbeeld van een goede opmaak+script voor een slideshow fotopagina?
Ik heb nu een overzichtspagina, met thumbs, als je daarop klikt krijg je een grotere foto die je door kan klikken naar de volgende foto
ik ben nu een beetje aan het pielen maar volgens mij kan niet wat ik wil 
is het mogelijk om de border of vierkantje om een staande EN liggende foto evengroot te krijgen.
een border voegt een rand toe aan de foto
ik heb ze maar geschaalt...niet zo mooi..maar wel snel resultaat
nog een vraag
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
[ Bericht 44% gewijzigd door MrNiles op 11-08-2011 13:32:09 ]
is het mogelijk om de border of vierkantje om een staande EN liggende foto evengroot te krijgen.
een border voegt een rand toe aan de foto
ik heb ze maar geschaalt...niet zo mooi..maar wel snel resultaat
nog een vraag
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
[ Bericht 44% gewijzigd door MrNiles op 11-08-2011 13:32:09 ]
http://www.iconarchive.com/ is misschien wat voor jou.quote:
ik ben op zoek naar een icoon voor een mapje foto's
op een android telefoon zag ik een icoon wat zogenaamd een stapeltje foto's was
waarbij de eerste foto in het mapje, de bovenste van de stapel is
kent iemand zo'n icoon??
zelf maken kan altijd nog..maar als het al bestaat das natuurlijk makkelijker
Wat zijn je opties als je voor bepaalder koppen en navigatie een font wilt gebruiken wat geen webfont is? Uiteraard kan ik het slicen uit photoshop, maar is er een standaard methode om de gebruiker toch de tekst te laten zien in de font die je wilt gebruiken? Dat is veel fijner als je nieuwe content wilt maken namelijk.
@font-facequote:
Wat zijn je opties als je voor bepaalder koppen en navigatie een font wilt gebruiken wat geen webfont is? Uiteraard kan ik het slicen uit photoshop, maar is er een standaard methode om de gebruiker toch de tekst te laten zien in de font die je wilt gebruiken? Dat is veel fijner als je nieuwe content wilt maken namelijk.
kun je alle lettertypes gebruiken
lettertype zet je bij je css files
Fijn ga ik me even in verdiepen, mijn dank is groot.quote:
[..]
@font-face
kun je alle lettertypes gebruiken
lettertype zet je bij je css files
tis heel simpelquote:
[..]
Fijn ga ik me even in verdiepen, mijn dank is groot.
je zit zoiets in je css
@font-face {
font-family: Eroded;
src: url('28days.ttf');
}
en in je class/div van je waar je je lettertype wilt hebben zet je iets van
font-family: Eroded
je moet het lettertype wel uitgepakt op je server hebben staan
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed, hoewel je natuurlijk gauw tegen problemen met licenties aan kunt lopen.
[ Bericht 10% gewijzigd door PimD op 11-08-2011 17:52:35 ]
[ Bericht 10% gewijzigd door PimD op 11-08-2011 17:52:35 ]
Nee.
hmm..quote:
Zo simpel als MrNiles het schetst is het niet. (Bijna) iedere browser verwacht een ander font: voor IE6 e.d. heb je een EOT-file nodig etc. Ik zou gewoon gebruik maken van www.fontsquirrel.com - dat werkt over het algemeen verdomd goed.
Ik was ook al aan het stoeien want ik had een .otf bestand bij mijn font en Chrome kon de pagina niet weergeven. Ik dacht dat ik het misschien verkeerd gecodeerd had of dat ik een .ttf moest vinden maar dat lukt me nog niet.
En op fontsquirrel is mijn font ook niet te vinden. Hé vervelend, maar ik ga die site wel even doorbladeren, misschien is er een vergelijkbaar font.
Google heeft een vrij chille fontservice, je selecteert bij hen de fonts die je wilt gebruiken. Krijgt een @-import regel die je aan het begin van je css-bestand zet en je hoeft alleen nog de naam tussen quotaties te zetten.
http://www.google.com/webfonts
http://www.google.com/webfonts
“Specialization is for insects”.—Robert Heinlein
Dit werkt in elk geval erg gemakkelijk, niet precies het juiste font gevonden maar dan maar even genoegen nemen met iets minder. Wel heel fijn, niks installeren en maar 1 regel in de header en klaar! Super tip. Ga ik straks nog even die andere opties bekijken want enige nadeel is dat je vast zit aan de fonts van google, wel 200+ stuks weliswaar maar toch..quote:Op donderdag 11 augustus 2011 18:02 schreef n8n het volgende:
Google heeft een vrij chille fontservice, je selecteert bij hen de fonts die je wilt gebruiken. Krijgt een @-import regel die je aan het begin van je css-bestand zet en je hoeft alleen nog de naam tussen quotaties te zetten.
http://www.google.com/webfonts
http://shiftingpixel.com/2008/03/03/smart-image-resizer/quote:
[..]
zoiets had ik ook al bedacht
hoe kan ik dat slim aanpakken? want ik wil niet aan elke foto apart een class oid gaan hangen. Niet erg voor 1x maar niet als ik redelijk foto's ga uploaden.
Sowieso iemand een goed voorbeeld van een goede opmaak+script voor een slideshow fotopagina?
Ik heb nu een overzichtspagina, met thumbs, als je daarop klikt krijg je een grotere foto die je door kan klikken naar de volgende foto
combineer met lightbox ofzo et voilla.
Is wel een nadeel inderdaad, ze moeten het hebben van de licentievrije fonts, worden er vast gestaag meerquote:
[..]
Dit werkt in elk geval erg gemakkelijk, niet precies het juiste font gevonden maar dan maar even genoegen nemen met iets minder. Wel heel fijn, niks installeren en maar 1 regel in de header en klaar! Super tip. Ga ik straks nog even die andere opties bekijken want enige nadeel is dat je vast zit aan de fonts van google, wel 200+ stuks weliswaar maar toch..
“Specialization is for insects”.—Robert Heinlein
