<html>
<head>
<style type="text/css">
body
{ text-align:center;}
#wrapper
{ position:relative;
text-align:left;
margin:0 auto;
width:900px;
}
p
{ font-size:12px;
font-family:Tahoma;
font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">
<p style="position:absolute;left:305px; top:23px;">Search in</p>
<select style="position:absolute;left:370px; top:33px;">
<option>All departments</option>
<option>Women</option>
<option>Men</option>
<option>Kids</option>
<option>Home & Furniture</option>
<option>Technology</option>
<option>Flowers & Gifts</option>
<option>Food & Wine</option>
</select>
<p style="position:absolute;left:510px; top:23px;">for</p>
<form name="Foo" style="position:absolute;left:535px; top:33px;">
<input type="text" name="ID" size="30"
value="Enter some words"/>
</form>
</div>
</body>
</html>
Hi,
The above is just a trivial example but is similar to my actual problem. The page is centred when minimized. The problem is that when the page is minimized the positioning
of the text and the boxes get distorted so that there is
overlapping. How can I avoid this and maintain the positioning whether the page is minimized or maximized.
Also I have a horizontal navigation bar. When the page is minimized or maximized beyond a certain point the right most link is clipped and appears on another line below.
ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:900px;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ color:#000000;
}
<ul id="List" style="position:absolute;left:0px; top:90px;">
<li><a href="">*******</a></li>
.........</ul>
What can I do to prevent this from happening? I will be very grateful for all help.
<head>
<style type="text/css">
body
{ text-align:center;}
#wrapper
{ position:relative;
text-align:left;
margin:0 auto;
width:900px;
}
p
{ font-size:12px;
font-family:Tahoma;
font-weight:bold;
}
</style>
</head>
<body>
<div id="wrapper">
<p style="position:absolute;left:305px; top:23px;">Search in</p>
<select style="position:absolute;left:370px; top:33px;">
<option>All departments</option>
<option>Women</option>
<option>Men</option>
<option>Kids</option>
<option>Home & Furniture</option>
<option>Technology</option>
<option>Flowers & Gifts</option>
<option>Food & Wine</option>
</select>
<p style="position:absolute;left:510px; top:23px;">for</p>
<form name="Foo" style="position:absolute;left:535px; top:33px;">
<input type="text" name="ID" size="30"
value="Enter some words"/>
</form>
</div>
</body>
</html>
Hi,
The above is just a trivial example but is similar to my actual problem. The page is centred when minimized. The problem is that when the page is minimized the positioning
of the text and the boxes get distorted so that there is
overlapping. How can I avoid this and maintain the positioning whether the page is minimized or maximized.
Also I have a horizontal navigation bar. When the page is minimized or maximized beyond a certain point the right most link is clipped and appears on another line below.
ul#List
{ list-style-type:none;
margin:0;
padding:0;
width:900px;
}
ul#List li
{ display:inline;
}
ul#List li a
{ text-decoration:none;
padding:5px 0;
width:100px;
background:#000000;
color:#FFFFFF;
float:left;
text-align:center;
border-left:1px solid #fff;
}
ul#List li a:hover
{ color:#000000;
}
<ul id="List" style="position:absolute;left:0px; top:90px;">
<li><a href="">*******</a></li>
.........</ul>
What can I do to prevent this from happening? I will be very grateful for all help.