Stuck in positioning elements

Hi friends I wrote this code but I couldn't position my elements I need help I want to position them on same line at the top but am stuck. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> div { width: 34px; height: 6px; margin: 5px 0px ; background-color:black ; } #joggers { Width: 100%; height: 38px; background-color: yellow ; text-align:center ; Padding-top: 15px ; } </style> </head> <body>  <div></div> <div></div> <div></div>  <div id="joggers" ><strong>joggers </strong></div>  <p style = "background-color: black; color:white; border-radius:30px; padding: 2px 10px 2px 10px; margin:10px 290px 10px 20px;" > <strong>login<strong></p> </body> </html>

html css

24th Jan 2022, 10:02 PM

Ambrose Adokwu

4 odpowiedzi

+ 1

This helped me a lot, to dont read over and over documentation and search for style i need. https://umaar.com/dev-tips/243-css-grid-flexbox-editor/

24th Jan 2022, 11:31 PM

PanicS

Easiest is to wrap everything in container and set display: flex to that container (div) display: flex will by default put children in one line. You can change it later with more code I also wrap your menu bar (3 lines) inside new container and set it to display: block, this will remove some style what it inherit from main flex container, if you remove it you wont see menu bar. It is good habit to wrap all similar code as some container or segmatic element, this can help you, to style easier, and also help search engine and screen readers to understand your code better. https://code.sololearn.com/W7yIeaULee8N/?ref=app

24th Jan 2022, 11:24 PM

PanicS

I suggest you to practice position with flex and grid in css. It can be hard in beggining. One tip,on google chrome when we set something to be flex or grid (added in version of chrome, v87 grid and v90 flex) when open developer menu and select element, we can easy add aditional code for flex and grid and make layout very easy with few clicks, this make work with tham much easier than to remember what each of tham do. It have some icons to show you what each do.

24th Jan 2022, 11:27 PM

PanicS

its here..... use ......position with your top, right, left, bottom div{ background-color: red; position: absolute; top: 40px; left: 40px; }

25th Jan 2022, 2:59 PM

RashidBik