Member Avatar for neo_31591

hey,

I'm making a Portfolio website for myself, and its mostly being made to showcase my Photoshop skills, hence all my web pages have been made in Photoshop.

The ContactMe page, with the fields NAME,Email,Message have text box along with them, the text boxes have also been made in Photoshop ( the border, i mean).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body background="images/onlyback.jpg">
<center><img src='images/contactus.jpg' /></center>


<div style="position: absolute; left: 1400px; top: 340px;">
<input type="text" style="border:none; background:none; font-size:26px;color:#FFF; font-style:italic; width:360px" />
</div>


<div style="position: absolute; left: 1400px; top: 410px;">
<input type="text" style="border:none; background:none; font-size:26px;color:#FFF; font-style:italic;width:360px" />
</div>


<div style="position: absolute; left: 1400px; top: 480px;">

<textarea rows="13" cols="21" style="border:none; background:none; font-size:26px;color:#FFF; font-style:italic;" ></textarea>

</div>


</body>
</html>

The problem is, when i view this page in different browser resolutions, the TextBox, obviously changes position,

is there by any way, that i can make it stick to the same particular position, be it any resolution....

2.) also, is forcing a particular browser resolution possible?using JavaScript maybe? :/

  • 2 Contributors
  • 2 Replies
  • 116 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by neo_31591

Dani AI

Generated

The layout problem comes from pinning inputs to fixed viewport coordinates. used image-based layout and absolute coordinates, so the inputs move when the browser size changes. was right to flag that approach — the reliable fix is to make the image and inputs part of a single, responsive container so they scale together, and to rebuild the input chrome in CSS where possible instead of relying on image slices.

A practical pattern that works across resolutions: wrap the mockup image in a relatively positioned container sized to the image aspect ratio, use background-size (or an inline <img>) and place the form fields with percentage coordinates so they scale. Example (adjust the percent values to match your mockup):

<div class="mockup">
  <form class="contact">
    <input name="name" class="field name" />
    <input name="email" class="field email" />
    <textarea name="message" class="field message"></textarea>
  </form>
</div>

.mockup {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  background-image: url('images/contactus.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 60%; /* preserves image aspect ratio */
}
.contact .field {
  position: absolute;
  left: 55%; width: 35%;
  background: transparent; border: none; color: #fff;
}
.field.name { top: 30%; } .field.email { top: 45%; } .field.message { top: 60%; height: 25%; }

Do not try to force a visitor's resolution — browsers and devices control that. Instead detect viewport size (or use CSS media queries) and rearrange/stack fields for small screens. For mobile, include a viewport meta tag so scaling is correct. If you want the Photoshop look, recreate the borders with CSS (or border-image) for accessibility and responsiveness. For more on background scaling and the viewport meta tag see MDN: background-size and .

Recommended Answers

All 2 Replies

Member Avatar for drjohn

You are using position:absolute; Don't, it usually leads to endless problems.

Even if you had a real need to use it, why are you placing things at left 1400px!!!

This is right on the edge of the average monitor - how large is your monitor? I work with my browser open at a width of about 1000-1200px (note I didn't mention the size of my monitor). The main reason people have big monitors is so they can have two windows open next to each other, not so that they can run a browser window open at 2800px wide.

I suggest you start by looking at ordinary websites and studying the css. you'll discover that many sites use a wrapper div with a fixed width, while others use a wrapper div with a percentage width and a max-width, to prevent ending up with a huge long line of text 2500px long for example. Then they center the div using margin:auto. That gets the content in the middle of the page on the vast majority of screens, and browser viewports.

Don't lay out a screen using position:absolute. You are not painting pretty pictures on a screen, you should be using html and css to control the layout and check how the layout looks every time, by resizing the window looking for errors.

Also, a contact form needs the input boxes to be part of a <form>, so you'll have to read up on how they work. And a form needs an action, so you'll have to learn a bit about scripting, probably php.

Member Avatar for neo_31591

hey thanks for the tip, ill try to make the appropriate changes...
i did the <form> and the php coding afterwards...i find that to be the easy part :) :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.