Help - Search - Members - Calendar
Full Version: I have a HTML problem
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
DariusBaws
I am a beginner in html and I want to ask you something (which probably is very easy for u).

So, I want my webpage to look something like that: https://i.imgur.com/9rOPhRM.jpg no matter what browser I use (opera, chrome, firefox etc), but I don't know how to do that. And more than that, I have a second problem (which I think is bigger) when trying to resize the window or zoom the page. I recorded it: https://www.youtube.com/watch?v=-Qcy-VIRAfY...eature=youtu.be This is my code: https://justpaste.it/6co8x (the things which are not relevant are bolded).

Can you help me, please?
pandy
Well, your menu is too wide and too rigid. As you show in the video people can resize their browser window and screens and displays come with very different resolutions. If you want to stick with rigid you need to make it very small. It's better to make it so the menu can reformat to two (or more) rows if the available with is too narrow.

And there's too much of everything. Too much CSS, too much HTML. You use CSS so you don't need tags like FONT. Use CSS instead for fonts and colors. That table isn't needed at all and each button doesn't need to be in it's own DIV.

If you instead place the all the buttons in one DIV (just so they aren't loose on the page) they will adapt to the window. Give the DIV and id and you can use it for styling, background and font colors for example. Something like so.

HTML
<div id="menu">
<button type="button"><font color="#856514">Acasa</font></button>
<button type="button"><font color="#856514">Acasa1</font></button>
<button type="button"><font color="#856514">Acasa2</font></button>
<button type="button"><font color="#856514">Acasa3</font></button>
<button type="button"><font color="#856514">Acasa4</font></button>
<button type="button"><font color="#856514">Acasa5</font></button>
<button type="button"><font color="#856514">Acasa6</font></button>
</div>
DariusBaws
QUOTE(pandy @ Dec 1 2018, 10:16 PM) *

Well, your menu is too wide and too rigid. As you show in the video people can resize their browser window and screens and displays come with very different resolutions. If you want to stick with rigid you need to make it very small. It's better to make it so the menu can reformat to two (or more) rows if the available with is too narrow.

And there's too much of everything. Too much CSS, too much HTML. You use CSS so you don't need tags like FONT. Use CSS instead for fonts and colors. That table isn't needed at all and each button doesn't need to be in it's own DIV.

If you instead place the all the buttons in one DIV (just so they aren't loose on the page) they will adapt to the window. Give the DIV and id and you can use it for styling, background and font colors for example. Something like so.

HTML
<div id="menu">
<button type="button"><font color="#856514">Acasa</font></button>
<button type="button"><font color="#856514">Acasa1</font></button>
<button type="button"><font color="#856514">Acasa2</font></button>
<button type="button"><font color="#856514">Acasa3</font></button>
<button type="button"><font color="#856514">Acasa4</font></button>
<button type="button"><font color="#856514">Acasa5</font></button>
<button type="button"><font color="#856514">Acasa6</font></button>
</div>


I tried to place all the buttons in one div, but I want some space between the menu buttons and I don't know how to do that if I don't use a table and make some free TD-s. You see? https://i.imgur.com/GhVSAvg.jpg
And.. about the resolution, I didn't understand what you suggested me to do.. I tried to speak with my Informatics teacher and he told me this may be a bootstrap problem. Is it?
pandy
You use CSS margin. If you use an id for the DIV as in my example you can target the buttons easily.

For example...
CODE
#menu button   { margin-right: 50px }

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.