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
  • 106 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by neo_31591
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.