Hi everyone,
I’m trying to update my first project. However I don’t find a way to keep the gif image next to the title. I’ve tried with “float:right” but that takes the image to the right border, not next to the text that is in the centre. The current format looks ok till you zoom the browser. It’s just adjusted to the same distance from the top right corner of the “div”.
I’m also trying not write “strong” tag so many times in the unordered lists, basically I’ve used bold and normal font-weight in the same list every time for the years (bold) and description (normal). So I can’t use class tag because they are in the same line/list.
Any ideas?
http://codepen.io/manukempo/pen/yVEjRZ
Thanks mates!
Not an expert but I think that for just two elements like that (title + image) you could use Flexbox. So you have a container, give it the Flex property in Css, and the box with title and the box with the image.
It’s then a lot easier to move around.
Also I see that you have nested containers. I’ve read somewhere that containers where not “nestable” elements - you might want to check that ?
As for your list problem - I don’t understand, you want to style what part exactly?
If it’s some li elements and not others, give them yet another class.
Hi Timotheap,
Thanks for your ideas. I didn’t know about Flexbox, I think it’s a very interesting css property. However I think the results are similar since the boxes are flexible. If they are in different boxes the distance between them is gonna be different when you change the size of the web or window.
Concerning the second problem, this is an example:
1974: First prototype of the Rubik’s Cube.
1975: Patent on the puzzle.
1978: Budapest International Trade Fair, Prize for the Cube.
1979: Licensed the Magic Cube to the American Company Ideal Toys which rebranded The Magic Cube to the Rubik’s Cube.
As you can see they are paragraphs/lists in the same line where the year has bold-weight and the rest don’t. The problem is that I’ve got all the lists like that and I would like to get rid of the “strong” tag every single time. However I’m not sure if there is an easy solution. I was thinking of creating another list for the normal weight part. I think that’s even more tedious than the “strong” tags. The same problem if you give them yet another class. Instead of having 100 “strong” tags you will have 100 “class” tags.
I don’t know…small things are driving me crazy. I think I need to stop thinking of html and css like word processors. It looks so difficult for small but cool things to be done. I have so much to learn… 
…step by step! 
Hmm. I don’t know any more than you do…I think that you can write a javascript / jquery function that would target all the strong elements and replace them with what you want, but since I don’t think you’re there yet (doing Jquery stuff) maybe you could just go through the work of removing it manually ?
Sorry for not being more helpful.
Sorry for the delay @timotheap. I’ve been out for a couple of weeks.
Thanks for your help, and you’re totally right I’m still with html and css. I want to come back after javascript and try it again. Indeed I want to do the portfolio challenge with my knowledge from the course on freecodecamp and I’m not able to do the last part. User Story:“I navigate to different sections of the webpage by clicking buttons in the navigation”.
I’ve been looking up and it looks like I need to use bootstrap or jQuery that I haven’t really learn much here, aside from a few things, not really related with that challenge. When I feel like I should know for the order of the challenges. . I’m stuck!
No you’re not Do you know how to make a link ? Set the href to the part of the page you want to link to. For example href = "#bottom and of course give the corresponding ID to the bottom of your page. No Bootstrap, no jquery, html only!
1 Like
Oh my…So easy!!!..Thanks a lot! You’ve saved me so much time.
Thanks @timotheap !!
1 Like