Styling in React

I have an existing React project, a multi-page application that is now quite large. My biggest weakness is the styling, I have never taken the time to learn it properly and my customers won't accept my work even if the functions are great but the layout is terrible. What are my options?

Since it was not really possible to change the positioning of the menu, I removed the button's tooltip and instead used CSS to create a DIV element which behaved exactly like a tooltip, containing the original tooltip's text. That way, I could control the element's position and ensure no elements are hidden. The element was also styled to resemble a typical browser tooltip.


Understanding Floats in CSS

I started programming for about 20 years now. Back in the days CSS was new and very exceiting for me. Coding web pages via the builtin tags to create different visual output (excatly webdesign) was pretty hard, there was a lot of code copy. A little bit later, web pages was built around the 'table' tag, so every webpage was with nested tables, which was extremely hard to manipulate and the overview over the whole document was loose. With CSS (Cascading Style Sheets) everything was new and different, finally you could split code from design and vise verca. One of the most interesting new features of CSS was using the 'float' element. Now you could sorround a text around a picture. A difficult aspect general when using CSS the first time is, you have to know how to use 'div' and 'span' tags. They are like empty boxes or containers, so you can define them and manipulate them. The most standard tags are also "boxes" but they react different when manipulating them. For example when you have some text and you want to have on the left side a picture, you only on the div/span tag the CSS line "float:left". Floats can be a little bit tricky, especially when you want use more than one float element. They elements gear on there previous elements.
Subscribe to #css