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.
Related
I'm new to HTML and I'm trying to replicate Google's home page for practice purpose.
My code is like this:
<div align="right" style="border: 1px solid">
Gmail Images Sign in
</div>
<!-- Google Text -->
<div align="center" style="font-size: 500%; border: 1px solid">
<font color="#4885ed">G</font>
<font color="#db3236">o</font>
<font color="#f4c20d">o</font>
<font color="#4885ed">g</font>
<font color="#3cba54">l</font>
<font color="#db3236">e</font>
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
<input type="Text" size="50" />
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
<input type="button" value="Search" size="100" /> <input type="button" value="I'm feeling lucky" size="100" />
</div>
And I'm getting following output:
Output Screenshot
I'm not getting why there is space above my TextBox and above the Buttons.
How do I remove these spaces?
Any help would be appreciated.
Regards,
Parikshit
You've set font-size: 500% so the line height (of the line in the inputs sit on the baseline of) is very tall.
Don't do that.
To avoid coming into any problems with basic css styling when getting to use to browser display try using this every time you use css:
CSS:
*{
padding:0px;
margin:0px;
border:solid black 0px;
color:#5f5;
text-decoration:none;
box-sizing:border-box;
overflow-x:hidden;
}
It is a good way as this helps gain more control of how you want your page to look the only downfall is that using this means you may have to set the attributes from here again into the other css styles as this effects everything.
It may seem like too much but can help in the long run.
Im trying to get the text from the left table cell and right table cell to allign at the same place. Also im using blogger if this helps. Here is a picture of what i want
What i want
Here is my table html
<div id="text1">
Motives are extremely important and not taking care of your motives can cause alot of problems.</div>
<br />
<br />
<div id="table1">
<br />
<table border="0" cellpadding="3" cellspacing="3" id="table1" style="background-color: white; border-collapse: collapse; border: 0px solid #FFCC00; color: black; width: 850;">
<tbody>
<tr>
<td height="400px" width="425px">
<div id="title1">
Sims with Bad Motives:</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Can cause your work or school performance to suffer</li>
<br />
<li>Can give you a negative moodlet. </li>
<br />
<li>Can cause death</li>
</ul>
</div>
</td>
<td height="400px" width="425px"><div id="title1">
Sims with Good Motives:
</div>
<br />
<div id="text1">
<ul id="list1" style="list-style-type: disc;">
<li>Get promotions fast</li>
<br />
<li>Earn life time rewards from mood bar being high.</li>
<br />
<li>Get to pick two extra traits when a baby is born</li>
<br />
<li>Learn skills faster</li>
</ul>
</div>
</td>
</tr>
</tbody></table>
</div>
and here is any css associated with it
#title1 {
text-align:center;
text-decoration: underline;
font-weight: bold;
font-size: 20px;
}
#text1 {
font-size: 15px;
text-align: center;
}
#table1 {
text-align: center;
vertical-align: top center;
}
#table1 {
margin-top: -10px;
}
Gosh, horrible markup. I can barely look at it :)
Nevertheless, you have elements with the same ID on the page > #title1, #table1... IDs are unique. Classes are reusable on the same page. You can use the same ID on different pages, but you can't use two elements with the same ID on the same page.
There is a sort of uniformity you need to apply to your markup, and that's what classes are for. You need sort of a same layout for your left and you right columns.
This is the "fix": jsfiddle.net/swqza86p
What I did was to transform IDs into classes and set your tr elements with the vertical-align: top property.
I've looked different options for aligning the FB share button with the other social media buttons, but none have worked for me yet. I'm only a few pixels off. Any ideas?
<div style="float:left; vertical-align:top">
<a class="twitter-share-button" href="https://twitter.com/share" data-url="{my url}" data-text="{text}" data-count="none" data-hashtags="{hashtag}" data-dnt="true">Tweet</a>
</div>
<div style="float:left; padding: 0 0 0 5px; vertical-align:top">
<div class="fb-share-button" data-href="{my url}" data-layout="button"></div>
</div>
<div style="float:left; padding: 0 5px; vertical-align:top">
<script type="IN/Share" data-url="{my url}"></script>
</div>
!Social Media alignment1
Change your .fb_iframe_widget class to this
.fb_iframe_widget {
display: inline-flex; /* changed line */
position: relative;
}
The facebook button has still a misalignment of one pixel.
Just add this to the css class above:
top: -1px;
P.S.: wanted to add this as a comment but I couldn't because not enough "reputation" points.
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.
I am working on my website, http://www.isaveplus.com and I am having an issue of the table adding some space between each col (td) in it. My goal is to have the columns touching because I want the background color to blend in with each other. The picture below will show you what I meant by the space between them.
Thanks in advance!
<table style="width:inherit; margin-left:-5px; margin-top:-5px; " cellspacing="0">
<tr>
<td class="searchBar" align="left" >
<div id="ddtopmenubar" class="mattblackmenu" >
<ul>
<li><a style="vertical-align:bottom;">Best of Coupons</a></li>
<li>
<a style="vertical-align:bottom;"> Best of Travel</a>
<a style="vertical-align:bottom;">Grocery stores</a>
</li>
<li><a style="vertical-align:bottom;">Office Supplies</a></li>
<li><a style="vertical-align:bottom;"> Department <br /> stores </a></li>
<li><a style="vertical-align:bottom;">Drug <br /> stores</a></li>
</ul>
</div>
</td>
<td class="searchBar" align="left">
<asp:Button ID="whatIsIsavePlusButton" runat="server" onclick="whatIsIsavePlusButton_Click" style="color: #800000; font-weight: 700" Text="?" Visible="False" />
</td>
<td class="searchBar" align="left">social media right here!</td>
</tr>
</table>
And the css for searchbar is:
.searchBar
{
background-color: #414141;
color:White;
width:auto;
margin:-5px;
padding:0px;
}
Your links
<a style="vertical-align:bottom;">Best of Travel<a style="vertical-align:bottom;">Grocery stores</a>
have a
border-right: 1px solid white
defined in
.mattblackmenu li a
there you can set the width of these white spaces
Your code isn't displaying the same in my browser as in the picture you give. But essentially I think you either want to put a negative margin-right on the div ddtopmenubar or a border-left:1px solid white on the following td. There might be another way to do it but I think that'd work.
Have you tried the border-collapse property? http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse
border-collapse: collapse;