The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I have a HTML problem, HTML
DariusBaws
post Dec 1 2018, 07:21 PM
Post #1





Group: Members
Posts: 2
Joined: 1-December 18
Member No.: 26,766



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 1 2018, 10:16 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
DariusBaws
post Dec 3 2018, 05:20 PM
Post #3





Group: Members
Posts: 2
Joined: 1-December 18
Member No.: 26,766



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Dec 4 2018, 12:33 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,096
Joined: 9-August 06
Member No.: 6



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 }

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th December 2018 - 10:51 AM