Latest UI / UX Design Posts

Just a litle update. The CSS for .col:last-child in the media query could be simplified to this:

.col:last-child {
    align-self: flex-end;
}

Like I said it's not recommended to use position: absolute and its top and left properties set to percentages to layout elements such as your divs with the input elements. You get into trouble as you've noticed with the overlapping. Anyway don't use position absolute at all for these kind of things

As of in my example wher I've used flexbox to layout the divs, I would stack the divs on smaller screens on top of eachother by setting a flex-direction: column on the form element. And when the screen get's wide enough to layout the divs next to eachother I use a media query (on 500px in this case) to change and set a flex-direction: row on the form element.

So full CSS code would be then:

form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

label, input {
    display: block;
}

.col:not(:last-child) {
    margin-bottom: 10px;
}

@media screen and (min-width: 500px) {

    form {
        flex-direction: row;
    }

    .col:last-child {
        display: flex;
        align-items: flex-end;
    }

    .col:not(:last-child) {
        margin: 0 5px 0;
    }

}

I've updated the pen, so just resize the browser window to small to see the result.
https://codepen.io/gentlemedia/full/oQJbyd/

All DIVs have top and left parameters. This is because, these DIVs are resiziable and moveable. After DIV size and position (left & top) are set, above html code is applied to newly created html page.

Your solution excellent and works without top and left position parameters. Can you suggest somthing that automatically reposition DIVs (with top & left positions) when browser is resized.

Don't use position: absolute to layout your grid or items. The reason they overlap is because absolute postioned elemets are taken out of the normal document flow, which means they don't effect eachother anymore (CSS box model).
There are better methods to layout those divs next to eachoter either with floats, flexbox or grid. It all depends how far back you want/need to support older browsers and/or devices.

For this example I've used flexbox:
https://codepen.io/gentlemedia/pen/oQJbyd

Thus... don't use inline styles... it's messy, you keep repeating yourself and it's hard to maintain. Use an external stylsheet and you have inputs, so use proper label elements and it all should be inside a form element otherwise nothing can be send.

Hi,

Simple HTML code with few DIVs. See below the code.
When window resized, One DIV overlaps with other and it looks messy. I could not figure out the problem. I tried to change position to relative and no it overlaps.
Can someone please point out the problem in the code below and provide workable solution. Please first check your solution on your end and then post it here.

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="clncont0" style="position:absolute; display:inline-block;left:32%;top:23%;padding: 5px; border-image: none; width: auto; height: inherit;">
    <div id="hdrLabel0" style="height: 25px; vertical-align: top; cursor: pointer;">Username</div>
    <input name="box0" id="box0" style="padding: 5px; cursor: pointer;" type="text">
</div>
<div id="clncont1" style="position:absolute; display:inline-block;left:42%;top:23%;padding: 5px; : ; border-image: none; width: auto; height: inherit;">
    <div id="hdrLabel1" style="height: 25px; vertical-align: top; cursor: pointer;">Password</div>
    <input name="box1" id="box1" style="padding: 5px; cursor: pointer;" type="password">
</div>
<div id="clncont2" style="position:absolute; display:inline-block;left:52%;top:23%;padding: 5px; : ; border-image: none; width: auto; height: inherit;">
    <div id="hdrLabel2" style="cursor:pointer; vertical-align: top; height: 25px">Login</div>
    <input name="btn2" id="btn2" style="cursor:pointer;padding:5px;margin:5px;" type="button" value="Send">
    <div id="destination2" style="padding: 5px; display: none; cursor: pointer;"></div>
</div>
</body>
</html>

In many countries I think this is legal now. About WordPress, there's so much on the web now that you may want to post a complete question about what you need to know. Be sure to research ahead of time.

I want to joint

I see you work on promoting a video convertor out on the web. https://www.google.com/search?q=tipard+video+convertor+reviews finds you are already doing it. Can you tell us more?

The best way to get traffic is dependant on the type of site you have. Sites that are completely behind a login wall, for example, can't take advantage of SEO as much as open, information-based sites that get crawled by Google. Social media pages are also a good way of getting traffic. What have you done so far? Where are you stuck? How much traffic do you have? What are your goals?

Bonus information: http://www.iwanttouse.com/#input-datetime shows how badly this is implemented across browsers. Maybe a third of users won't be able to use a page with input datetime.

And my boyfriend doesn't understand why I don't use Safari. :-/

gentlemedia is right. https://caniuse.com/#feat=input-datetime

Thanks for asking. I didn't know this.

Desktop Safati doesn't support the date input (yet).

I am new in this feild so plz anybady help me .

I use <input type="date"> and it works fine to bring up a date picker in Chrome and Firefox. However, it behaves as a normal textbox in Safari.

Web languages — HTML, CSS and JavaSscript are the best choice for kids and for amateur programmers, because they are very simple, and with them you can create many interesting things: sites, mobile and desktop applications, web servers and robotics — what else an amateur programmer needs for happiness?

Visual programming!

Visual programming frees programmer from monitoring correctness of syntax program syntax, it is useful at beginning of training. This is the next stage in development of text-based programming languages.

And programming on the touch screen!

I suggest using the touch screen to create applications. You can create applications on the tablet, for example, lying on couch, or walking in park. I developed a new way of working with text on a touch screen, based on Flexbox.

But in the usual web programming there are two problems:

1) Web languages have a many of unnecessary features. To create real good programs you do not need to know these languages completely. In the beginning you can master core, the basic features. The rest you can learn later or never use.

2) In the professional web industry, besides knowledge of these languages, you need to know many other tools. To learn them you need to spend a many of time and effort. But kids do not need these complex tools, they need simplicity. The amateur programmer does not need to conform to industry standards.

We must clearly understand the beauty of web languages. The programming tool can be and should ...

Hi, i want to allow links in textarea in my website but still didnt get it. Thank you!

use bootstrap and set sceen on sm-md-lg....website screen will show prpoerly

nice posting

Bugs can be reported over in Community Feedback using a 'bug' tag, or in Area 51 if you have access (I know it used to be an invite only place, but I think it was made open to all? Shame I can't get my personal memory bug fixed :-)

Ah, one of my posts is editable and one isn't.

Screen_Shot_2018-04-26_at_09_43_11.png

The difference is that the first was made on my phone and the second on a computer.

If there was a bug tracker I'd raise one.

Has the edit button disappeared? My last post doesn't make sense, it should say 'your failing css'.

Learn how to combine CSS selectors. Clue, your failing for is looking for a table within #profitlosstbl.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

Hello,

I am trying to border-collapse on a specific table.

#profitlosstbl table {

    width: 200px;
    border-collapse: collapse;
}   

#profitlosstbl td {

    border-collapse: collapse;
    width: 100%;
    padding: 10px;
    font-size: 12px;
    border: 1px solid black;
}

the border-collapse: collapse;

It only works if I use

table {
    border-collapse: collapse;
}

but I cannot do this since it will mess up the other tables.

What should I do?

Thanks for shared great information. This information assist me

It's a margin of

            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>

try to replace e.g.

            <b class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </b>

and you will see that the extra margin of input element disappears

form { display: flex }

But you will need to add the necessary prefixes if you have/want to support older browsers and IE 10 uses even an older (discarded) version of the flexbox specification.
You could also use http://leaverou.github.io/prefixfree/ and be done with it.

thank you @gentlemedia , i know that we can fix it by adding vertical-align : top ( it is commented in the code ) , i m just curious about another fix of this problem .

Set on both inputs a vertical-align: top and you can ditch the display: inline declarations, because inline is already the default display value for inputs.

Another thing;; there's a specific type="search" for your search field instead of using type="text".

hello
i have set a form with tow tag : first is an input[text] and the seconde is input[submit] , what i try to do is to align the tow element in one line , the problem is i'm getting margin top of the first input tag (input[text]) , i don't know if this is a default margin of the input[text] element , this is my code
thank you in advance.