- This topic is empty.
July 1, 2018 at 9:59 am #273494
I created an invoice in CSS grid though i think i took the long way around instead of the short one the problem i have is that the purple area is dynamical along with its cost so it could be one item as it could be 50 so i don’t know if i managed that part correctly as i would have wanted to have headers and footers for the invoices to stay in place and the invoice them selves to fill up
https://codepen.io/kuipou/pen/qKgpyz/ here’s my codepen any help would appreciatedJuly 3, 2018 at 4:39 am #273575
Codepen doesn’t load for me….can you simplify it.July 3, 2018 at 6:22 am #273577
I resimplified it but i dont know why my grid isnt showing up though the css is all thereJuly 3, 2018 at 6:45 am #273580
There were some formatting issues and you had selected SASS instead of CSS.
I’m not sure what you have here, it seems to be some mishmash of both CSS & SASS.
Perhaps sort that out first…at least something shows up now.
Do you have an image of what this is supposed to look like?July 3, 2018 at 7:25 am #273581
it’s supposed to look like this : https://imgur.com/nrz0Af0
originally my file is a sass file but for sake of breviety i copy pasted each file of my sass in one file to codepen
thought the Total cost should be at the bottom with an entire black line going down but since each item is added dynamically i didnt know if i code the grid rightJuly 3, 2018 at 8:12 am #273585
I’d take each part at a time…you seem to be mixing element names and id’s etc. so you might want make sure what is what.
It looks like the hard part is the lines on the invoice amounts which, as it turns out is pretty simple.July 3, 2018 at 8:19 am #273586
Can you explain though how you did
when i look at it in Firefox it fails though and theres the black left border for cost that is missing but because no new element is added the bar wont appear right?July 3, 2018 at 8:42 am #273590
I haven’t added all the borders….I’m sure you can add those to get the look you are after.July 3, 2018 at 8:56 am #273591
Though why does it fails in firefox and can you explain what you did please?July 3, 2018 at 9:06 am #273592
Looks OK to me in FF….but I’d have to rebuild quite a lot for full functonality and, unfortunately, I don’t have time right now.
I just used the basics…Chris has an excellent guide to CSS-Grid you can read.
Start with each component…don’t try to build the whole page in one go….
I’d also argue that you’re overusing sections/articles//asides/headers & footers. Most of the time, simple divs & spans will do; especially for something as simple as an invoice template.
- The forum ‘CSS’ is closed to new topics and replies.