When I resize window menu doesn't remain fixed - html

I am not able to keep my menu fix whenever I resize my window my menu doesn't remain fix and it keep moving down towards left. I want all my text, pictures and menus to remain fix but can be moved to certain extent and after that it should be scrollable like other websites.
I am sharing screenshot with what happen when I scroll the webpage:
This is how when it is maximised which is fine
This is when it is minimised all the text, menu buttons moves but doesn't stay where they are.
I am sharing you the script for this:
.auto-style19 {
color: Highlight;
font-size: 18pt;
position: relative;
width:672px;
display: inline-block;
float: right;
margin-right: 10% auto;
font-family: 'Times New Roman', Times, serif;
top: 49px;
min-height: 196px;
margin-top: 0px;
left: -21px;
height:auto;
}
.auto-style26 {
position:relative;
min-width: 80%;
width:auto;
top: 0px;
left: 0px;
min-height: 505px;
overflow:hidden;
height:auto;
display:block;
}
.auto-style34 {
position: absolute;
left: 64px;
float: left;
width: 500px;
top: 14px;
}
.auto-style36 {
width: 677px;
}
<div style="margin-top:40px;margin:auto;" class="auto-style26">
<div style="display:inline-block;margin-top:50px;margin-right:20px;" class="auto-style34" >
<asp:Image ID="Image1" runat="server" height="300px" width="200px" CssClass="img1"/>
<asp:Image ID="Image2" runat="server" height="300px" width="200px" />
</div>
<div class="auto-style19" >
<table class="auto-style36">
<tr><td class="auto-style28"> <asp:Label ID="Label2" runat="server" ForeColor="Highlight" style="text-transform:capitalize;" Font-Size="14pt" Text="Address: " Font-Bold="True"></asp:Label></td>
<td class="auto-style29"> <asp:Label ID="LabelAddress" runat="server" ForeColor="White" style="text-transform:capitalize;" Font-Size="13pt" ></asp:Label></td>
<td rowspan:3 class="auto-style27"><ul id="edit"><li> <a id="edit1" href="#" runat="server" >Edit Info</a>
<ul>
<li><asp:HyperLink ID="HyperLink1" runat="server" Font-Size="16pt" Font-Underline="false" NavigateUrl="~/EditPic1.aspx">Edit Profile Pic 1</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink2" runat="server" Font-Size="16pt" Font-Underline="false" NavigateUrl="~/EditPic2.aspx">Edit Profile Pic 2</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink3" runat="server" Font-Size="16pt" Font-Underline="false" NavigateUrl="~/EditAddress.aspx">Edit Address and Phone</asp:HyperLink></li>
<li> <asp:HyperLink ID="HyperLink4" runat="server" Font-Size="16pt" Font-Underline="false" NavigateUrl="~/Change Password.aspx">Change Password</asp:HyperLink></li>
<li> <asp:HyperLink ID="HyperLink5" runat="server" Font-Size="16pt" Font-Underline="false" NavigateUrl="~/Change Payment Method.aspx">Change Payment Method</asp:HyperLink></li>
</ul>
</li>
</ul></td>
</tr>
<tr>
<td class="auto-style30"><asp:Label ID="Label5" runat="server" ForeColor="Highlight" style="text-transform:capitalize;" Font-Size="14pt" Text="Age: " Font-Bold="True"></asp:Label></td>

If you want the images and the menus on the right to scale with window size, don't specify a specific width for them. You could set a min-width to ensure that they do not go below a specific width, but other than that, give the two containers a percentage width of its parent container to have them scale in size as you resize the window.

Related

How do I move this icon/button? CSS?

I'm just learning asp.net, VB, SQL and CSS. I am writing a dating site and want the "likes" icon to sit next to the other 3 centralised icons just above it. The first 3 icons are simply images at the moment but the Likes icon is in DIVS and does function correctly but ends up on the row below even though there's plenty of space to fit it next to them. Many thanks for any help...
<asp:Image ID="Imagelove" runat="server" width="90px" ImageUrl="~/files/images/loveicon.png" />
<asp:Image ID="ImageGift" width="90px" runat="server" ImageUrl="~/files/images/gift.png" />
<asp:Image ID="ImageReport" width="90px" runat="server" ImageUrl="~/files/images/report.png" />
<div style="width:90px; height:89px; position:relative; background: url('/files/images/likebutton.png'); cursor: pointer;" onClick="addLike('<%# Eval("orderID")%>')">
<div style="font-size:12px; color:#000; background:#ffffff; border:1px solid #000; padding:0 3px; float:left; margin: 0px 0 0 55px;" id="<%# Eval("orderID")%>"><%# Eval("likeCounter")%>
</div>
</div>
I have found the solution myself thank you. I added display: inline-block; in to the DIV Style="" part.

How can vertical align bottom and top at the same time?

I want to vertical align some elements at the top of the td element and some other elements to be at the bottom of td element .
this is my code :
<ItemTemplate>
<td runat="server" style="position:relative;vertical-align:top;">
<a runat="server" href='#' class="Up">
</a>
<br />
<asp:Label ID="ProductNameLabel" CssClass="Up"/>
<br />
<asp:Label ID="SummaryLabel" CssClass="Up"/>
<br />
<asp:Label ID="PriceLabel" CssClass="Down" />
<br />
<a runat="server" href="#" class="Down">
</a>
<br />
<asp:Button ID="Button1" CssClass="Down" />
</td>
</ItemTemplate>
The elements from the "Up" class i want to be displayed at the top of the td and the elements in the "Down" class at the bottom of the td .
i tried this css :
.Up {
top:0px;
}
.Down {
bottom:0px;
}
And it didn't work . Can someone help me find the solution ?
It would help if you only provided HTML and CSS in your example.
In any case, I think what you are looking for is position:absolute
.Up {
position:absolute;
top:0;
}
.Down {
position:absolute;
bottom:0;
}
This will position them relative to the first parent that has a position:relative on it.
Note, I also removed the px from your 0 as it's not necessary to specify that when the value is 0. 0em = 0px = 0% = 0
Here is a more complete example.

Setting textbox's clickable background

I need to set textbox background image that is clickable so i used div(position:absolute) tag above textbox in which i included image, but the problem is that image is located above text, i tried to set z-index of image to -1 but then image got behind textarea
#smiley {
position:absolute;
z-index:1;
}
<telerik:RadPane ID="Radpane5" runat="server" Height="100%" Scrolling="None" Width="100%">
<div id="smiley">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/1013130_10200305067254687_188481208_n.jpg" alt="Smiley face" height="40" width="40">
</div>
<telerik:RadTextBox ID="chatBox" runat="server" TextMode="MultiLine" Resize="Both" Rows="100" Width="100%"
EmptyMessage="type here" AutoPostBack="true" BorderStyle="None" Style="z-index:5; border: none; margin: 0 auto; outline: none">
</telerik:RadTextBox>
Try this
HTML
<input type="text" id="smiley" />
<input type="text" id="smiley1" />
CSS
#smiley:focus{background: red;}
#smiley1:focus{background: url("http://surrey-arg.org.uk/SARG/08000-TheAnimals/Images/Prey/Small_fish.jpg");}
LINK

Expanding width of form <label> issue

I am trying to pull in the text from the right, 'I am filling out this form as an individual' so it is fits on one line. There seems to be a 'block' preventing it from stretching out. Here is a jsfiddle http://jsfiddle.net/9M8FQ/ If I adjust the width of the label, it adjusts every field but I really want it far over to the left anyway. Here is a screenshot of how i am trying to get it http://www.magnetikmedia.co.uk/images/screen.jpg
Here is the code:
<div class="myclass active" id="right_box">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="0" colspan="2" valign="middle"><label class="desc" id="Name" for="Name">Before filling out the form, please select an option below: <span id="req_2" class="req" style="color:#82cff5;">*</span></label>
</td>
</tr>
<tr height="0">
<td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"><input type="checkbox" id="individual" name="FilledInBy_Individual" value="Yes" onClick="unCheck(this.id);" <%=ind%> />
</td>
<td height="0" valign="middle" style="padding-left:7px;"><label for="option2">I am filling out this form as an Individual</label>
</td>
<tr height="0">
<td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"> <input type="checkbox" id="agencyconsultant" name="FilledInBy_Agency" value="Yes" onClick="unCheck(this.id);" <%=agent%>/>
</td>
<td height="0" valign="middle" style="padding-left:7px;"><label for="option2">I am filling out this form as an Agency Consultant</label>
</td>
</tr>
<tr height="0">
<td width="30" height="0" align="left" valign="middle" style="padding-left:7px;"> <input type="checkbox" id="friendrelative" name="FilledInBy_FriendRelative" value="Yes" onClick="unCheck(this.id);" <%=friend%>/>
</td>
<td height="0" valign="middle" style="padding-left:7px;"><label for="option3">I am filling out this form as a friend or relative</label>
</td>
</tr>
<td height="0" colspan="2"><% if request.cookies("Filled_error") <> "" then %>
<div id="firstname_error" class="errorActive" style="position:relative;">Please select an appropriate option</div>
<% end if %>
</td height="0">
</table>
</div>
CSS
label {
clear: both;
float: left;
padding-right: 10px;
width: 240px;
}
input{
float: left;
width: 425px;
}
.myclass {
border-width: 2px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
color: #000000;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:5px;
}
#right_box {
width: 700px;
float: left;
margin-left: 33px;
margin-bottom: 10px;
padding-top: 20px;
padding-right: 0px;
padding-left: 15px;
background-color:#eaeaea;
}
EDIT. Even adjusting the label width just pushes the text to the right on one line, it just won'\t move anymore left because of this 'wall'
It's because of the large input width which pushes the right text away.. but it doesn't seems so because of the center.
Here's a demo.
Put
input[type='checkbox'] {width:auto}
in the css. That will take care of the checkboxes. There's still the matter of the widths of the labels though...

Need help correcting code for HTML newsletter which will be used in Gmail

In my browser looks ok, but when I move it to Gmail my #Container move under "K" letter in "Kamala" word inside my background image, and the other problem is when i send it as a e-mail, on the recieved e-mail everything in #Container are already under my background image.If it's not possible with divs i thi i should go back to tables, because i have so many problems now. I know that mistake is with me i want to learn, but from 2 days cannot make it the way it should be.
<!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>
<style type="text/css">
div#Container {
position: absolute;
left: 9px;
top: 15px;
}
div#Room {
margin-left: 83.5%;
margin-top: 11%;
width: 625px;
}
#Room span {
font-family: Times New Roman, Times, serif;
font-weight: bold;
text-align: left;
font-size: 23px;
color: #522405;
}
#D { padding-left: 70px;
}
#GD { padding-left: 103px;
}
#GPV { padding-left: 53px;
}
div#Content {
margin-left: 83.5%;
margin-top: 1%;
width: 625px;
}
#Right {
position: absolute;
left: 1152px;
top: 222px;
}
img.Spacer {
margin-left: 10px;
}
div.content {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color: black;
font-size: 17px;
font-weight: bold;
}
.BP {
vertical-align: text-top;
margin-top: 10px;
margin-left: 245px;
}
.table {
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
text-align: center;
color: #002b55;
margin-left: 83.5%;
}
.TD {
margin-left: 30px;
}
.adress {
font-family: Times New Roman, Times, serif;
font-size: 10px;
text-align: center;
font-weight: bold;
color: #100073;
}
.OOT {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #100073;
text-align:center;
}
.res {
vertical-align: top;
padding-left: 25px;
}
</style>
</head>
<body>
<div align="center">
<img style="position: relative;" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BK_zpsa93ab347.png" alt="Background" />
</div>
<div id="Container">
<div id="Room" aling="left">
<a href="http://bit.ly/XSyPG5" title="Deluxe" target="_blank" >
<img align="left" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/D_zpsf4ea5de8.jpg" border="0px" alt="Deluxe" />
</a>
<a href="http://bit.ly/XSyPG5" title="Grand Deluxe" target="_blank" >
<img align="left" class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GD_zpse78278b7.jpg" border="0px" alt="Grand Deluxe" />
</a>
<a href="http://bit.ly/XSyPG5" title="Grand Pool Villa" target="_blank" >
<img align="left" class="Spacer" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/GPV_zpsb381cd33.jpg" border="0px" alt="Grand Pool Villa" />
</a>
<br />
<span id="D">Deluxe</span>
<span id="GD">Grand Deluxe</span>
<span id="GPV">Grand Pool Villa</span>
</div>
<div align="left" id="Content" class="content">Situated on a hill, Ayara Kamala offers a beautiful garden and ocean view rooms. The place of the hotel provides quiet, calm and romantic holiday away from all other hotels on Kamala Beach.
<br />
<br />
Big size of rooms, king size beds and impressive bathrooms, are making Ayara Kamala perfect selection for couples who are looking for privacy and relaxing holiday.
</div>
<table align="left" class="table" style="border-collapse: separate; border-spacing: 1px;" width="625" border="0">
<tr>
<td align="right" style="padding-left: 20px;" width="302"><img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/BP_zps15c948a1.png" border="0px" alt="Best Rate"/></td>
<td width="321" valign="top"><table class="TD" style="border-collapse: separate; border-spacing: 0px;" border="0px">
<tr>
<td height="30" class="res" align="center"><span>www.b2b.onlyonetour.com</span></td>
</tr>
<tr>
<td class="res" height="30" align="center"><span>Tel : (66) 02 - 688 - 8883 </span> </td>
</tr>
<tr>
<td class="res" height="30" align="center"><span>rsvn#onlyonetour.com</span></td>
</tr></table>
</td>
</tr>
</table>
<div align="center" id="Right"><a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour & Travel Group Co., Ltd." target="_blank"><img width="149px" height="90px" src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/logoOOT_zps24c21653.png" border="0px" alt="Logo" /></a>
<a style="text-decoration: none;" href="http://bit.ly/XSyPG5" title="Only One Tour & Travel Group Co., Ltd." target="_blank"><span class="OOT">Only One Tour & Travel<br />Group Co., Ltd.</span></a><br /><br />
<a style="text-decoration: none;" href="http://on.fb.me/XXqq56" title="Only One Tour Facebook Page" target="_blank"> <img src="http://i1300.photobucket.com/albums/ag93/dobriyan/E-mail%20-%20Ayara%20Kamala/facebook-logo-png-format-i18_zps83b6a9aa.png" width="145px" height="50px" border="0px" alt="FB"/></a><br /><br />
<span class="adress">2128/9-11 Charoenkung Rd.,</span><br />
<span class="adress">Watprayakrai, Bangkorleam,</span><br />
<span class="adress">10120 Bangkok, Thailand.</span><br />
<a class="adress" href="http://bit.ly/XSyPG5" target="_blank">www.b2b.onlyonetour.com</a><br />
<a class="adress" href="http://on.fb.me/XXqq56" target="_blank">www.onlyonetour.com (offline)</a>
</div>
</div>
</body>
</html>
HTML emails are still having to be built primarily using tables due to the numerous email clients and their varying issues with other HTML elements like div tags. So if you're looking for this to be well received by a number of people (and therefore clients) it would be worth, as you suggest, doing it using tables.
See this for more detailed info on email clients and the support they offer: http://www.campaignmonitor.com/blog/post/3472/div-tags-in-html-email-newsletters/
I hope that gives you a little more info on the subject.