Latest UI / UX Design Posts

What according to you is the best way to get noticed and get stuck in people’s mind? Is less really more or is big, loud and busy the way to leave your impression on people’s mind? Discover it yourself by exploring the beauty of the two extremes of web designing - Minimalism and Maximalism.

I wish i knew about it

Hello i want to create in html and css something like the picture i shared here. An image over two divs. Equally divided through the two divs like the picture here. Any sugestion?

sample.png

Dani's link looks great. I want to share something from an industry I worked as an engineer in for years.

Look at the date and time stamp as it changes from white to black at this link:
https://i.imgur.com/TvPksPt.mp4

Took me a few passes before I figured out why. Neat feature.

Dani 1,730

I think you're going to have a very hard time finding a font color that will be okay on backgrounds that are near-white, black, and any color inbetween. What I would recommend is to have the user specify if they want a light font or a dark font at the same time as they upload the image of their choosing. There might be some third-party APIs that detect the color palette of an image, and then you can select a font that complements that color palette. Something like this might help.

Screenshot_2019-03-28.png

Hello i want to show font on an image. Now, the image could be whatever a user uploads- that means white of black background. The font is not looking good. I want to try out something that will look clear on both on dark or light background. I put text shadow on it but the font is not clear. It doesnt looks good. I shared a photo of the problem

I am starting a website where an image shows on the home page and when I scroll to hover over the image it opens a newpage. I’m trying to figure out a way to do a slow dissolve from the home page to new page and also if the user has a pop up blocker on how to get around from home page to new page that if there is a way. Here is the code I have now html:

 <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Daily Process</title> <script src="Scripts/jquery-1.10.2.min.js"></script>"> <link type="text/css" href="Content/dailyprocessbootstrap.css" rel="stylesheet" /> </head> <body> <div > 

            <img src="images/White%20Daily%20Sig.png" class="center"/> </div> </body> <script>
       $(function () {
       var count = 0;
       $("img").mouseenter(function () {
         if (count == 0) {
            setTimeout(function () {
                window.open("/About.aspx");
                    },5000)

            count++;
        } 

     })
    })
</script> </html>

and css:

img {
   /*max-width: 200%;*/
    width: 80%;
    height: auto;
    background-color: #000;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic
}
.center {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 95%;
}

You might have deleted it accidently? Anyway... if you can't find it, how on earth are we supposed to find it for you?
Perhaps they, http://forums.mobirise.com/, can assist you.

Hi guys, I have the further problem. I created the project in Mpobirise app nad published it to my server via FileZilla.

In some time I needed to change the project a bit. Now I can't find it neither on my PC nor in the application. Could you please help me?

Check the code:
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="clncont0" style="position:relative; 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; display:inline-block;">
Username : <input name="box0" id="box0" style="padding: 5px; cursor: pointer;" type="text"></div>
<div id="hdrLabel1" style="height: 25px; vertical-align: top; cursor: pointer; display:inline-block;">  Password : <input name="box1" id="box1" style="padding: 5px; cursor: pointer;" type="password"></div>
<div id="hdrLabel2" style="cursor:pointer; vertical-align: top; height: 25px; display:block;">  
<input name="btn2" id="btn2" style="cursor:pointer;padding:5px;margin:5px;" type="button" value="Login">
</div>
</div>
</body>
</html>

Thank to refering

Hi alexgrover,
I hope this code may be useful, Please check.

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div style="text-align:center; padding-top:50vh">
  <div style="margin-top:-27px;">
    <div id="clncont0" style="display:inline-block;padding:0;">
      <div id="hdrLabel0" style="height: 25px; cursor: pointer; text-align:left;">Username</div>
      <input name="box0" id="box0" style="padding: 6px; cursor: pointer; border: solid 1px #ccc;" type="text">
    </div>
    <div id="clncont1" style="display:inline-block;padding:0;margin-left:-5px;">
      <div id="hdrLabel1" style="height: 25px; vertical-align: top; cursor: pointer;text-align:left;">Password</div>
      <input name="box1" id="box1" style="padding: 6px; cursor: pointer; border: solid 1px #ccc;" type="password">
    </div>
    <div id="clncont2" style="display:inline-block;padding:0;margin-left:-4px;">
      <div id="hdrLabel2" style="cursor:pointer; vertical-align: top; height: 25px;text-align:left;">Login</div>
      <input name="btn2" id="btn2" style="cursor:pointer;padding:8px 10px;margin:0; line-height:1; border:none; background-color:#ccc;" type="button" value="Send">
      <div id="destination2" style="padding: 5px; display: none; cursor: pointer;"></div>
    </div>
  </div>
</div>
</body>
</html>

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?

Dani 1,730

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.

Texx commented: I've never seen iwanttouse.com before. An excellent way to present information of browser compatibility of features to execs/mgrs/clients that don't +0
Dani 1,730

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 .

Dani 1,730

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!