Bit of an interesting one here. I'm trying to make a React/Tailwinds web app for guitar music theory. I want to create something that looks similar to the chart below. I decided to go with a grid and all is good except the notes are in the middle of the cells and I want them to be on the lines as is shown in the image. Was curious if anyone here had any good approaches. Thanks a ton in advance!
Related
I am administrating the homepage of our local sports club which can be found under svwalddorf.de
The page runs with typo3 10.4.22 with bootstrap package 11.0.3.
The basic template of bootstrap leaves a lot of empty space on each side of the centered content area
On our site this currently looks like this. (unfortunately not allowed to include images yet)
While this looks pretty nice, it wastes a lot of space. Therefore, I would like to change the size of the padding areas (marked red) to have more room for content.
I am pretty sure that I just need to find the right line in the correct css file. After all, the grey carousel element near the top uses the entire width. I just do not know what to look for.
Can someone point me in the right direction?
Thank you very much in advance!
I see a lot of designers that make shapes on the website. For example, a curvy purple line like shown in here: https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs3/146762996/original/c5c40fc15550b852236414d3984f178e6b976e51/create-a-unique-and-creative-website-for-your-brand.png
My question is, assuming that I am a front-end developer and my boss gives me the files from the designer and asks me to implement this design into the website, how do I do that?
Is it just a one picture that I will get in many different width's and will have to use as a background and fit the text in with breakpoints?
Sorry if that sounds like a stupid question, but I always wondered about websites with weird shapes
For "weird" shapes you can always play around with the clip-path property. Mozilla's dev tools give you awesome ways to play around with it and create a customized shape
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
I am really hoping someone can help me. I am trying to create a round menubar in CSS and I've searched and searched for solutions but have found nothing. I know how to create round areas (by setting the radius), and I know how to create a simple straight line menu using <ul> & <li> but, as said, I want to create a round one.
there is a picture of something alike what I'd love to get working:
If anyone could help me on this I'd be so thoroughly grateful.
Closest things I know of are these:
http://www.cssplay.co.uk/menus/cssplay-round-and-round.html
http://codepen.io/tgrant54/pen/lBHwK
Is that what you're after?
This menu looks almost like Path's Button.
You can find the link to Path's Button here.
You just need to modify it a bit so the menu displayed in full sphere.
This isn't something you really want to be doing in pure CSS.
You may be able to make circle shapes with border-radius, but you're not actually making a circular object -- it's still a regular box shape as far as the browser is concerned, just with the corners rounded off. This has absolutely no bearing at all on your ability to do anything else to do with circles or curves in CSS.
Yes, it's possible to do something along the lines you're after, by putting every character into its own element, and styling each of them with a specific position, but that's going to be painful, inflexible, and difficult to work with. If you really want to do this, there's a code generator you could try out here, but I'd say you're barking up the wrong tree.
If you want to do this kind of thing properly, what you really need to be thinking about is doing it in graphical format, using either Canvas or SVG, plus plenty of javascript code.
I'd suggest looking into a JS library like Raphael for this; there are people who have tried similar things already using Raphael, which may help you -- see here, for example: Radial Pie Menu With Raphael JS
Hope that helps.
I have this project that it's due in a few hours and I still have a report to write... The project has nothing to do with Dot, but we were asked to draw a Graph with Dot, which I did.
It looks something like this:
http://img683.imageshack.us/img683/9735/dotj.jpg
The longer arrows represent smaller weights and the shorter arrows represent bigger weights. There isn't any problem in submitting my project like this, it does what's is supposed to do and this Dot thing is just an extra.
But I would like to make it pretty, I just don't have time to learn about Dot right now. Basically, all I want is make pretty. Perhaps, a bigger height for the page, like A4 paper size. And have the graph display more to the bottom than everything to the side.
What should I put on my .dot file to make it look better?
There are a lot of options that can help to fix this problem. Setting the size option to be whatever the dimensions of an A4 sheet of paper are would be a good start. The GraphViz guide goes over most of the relevant options pretty thoroughly (see page 14 of this pdf, it's not as long as it looks, only 2 or 3 pages for the relevant info).