Working on a website where I am thinking to make the name as a variable to show who is logged in but the problem is that the log out buttom goes out of the header when the name is short as Petter, but stays inside when the name is long as Petter Hansen. Is it a solution to make the buttom stay at same position independent of the name size?
jsfiddle: http://jsfiddle.net/85tU2/
Try this: http://jsfiddle.net/85tU2/2/
I've tidied up a few things - basically, moved the divs around because you are using float:right. Your code was using margins to move the button to the right of the name. So in the css, I've done this:
#formtekst {
position:relative;
float: right;
margin: 1px 0px 0px 0px;
background:#ccc;
}
#form-group {
position:relative;
float:right;
margin:15px 0px 0px 0px;
background:#ddd;
}
And for the html:
<div id="logo">
<img id="logo" src="NIH.gif" alt="logo" />
</div>
<div id="form-group">
<button type="button" class="btn">Logg ut</button>
</div>
<div id="formtekst">
<p>Logged in as Petter</p>
</div>
Hey ,
you can just easily change the styles for the #formtkst to this
#formtekst {
float: right;
margin: 1px 15% 0px 0px;}
Related
Several years ago (read as 10 years) I would use a HTML snippet that would take a SPAN / Anchor tag and hook it to a graphic in shape of a button using CSS. But for some reason I must be missing something as it no longer works.
Example html:
<div id="process1" class="loc_1">
<table>
<tr>
<td class="columnOne">
<span class="processTitle">Example</span>
<span class="updateIndicator">12/28/2014</span>
</td>
<td>
<div class="loc_1">
<span class="templateName"><img src="flag.gif" alt="Location 1" />Example Link</span>
<span class="templateLinks"><a target="_blank" href="Example.doc" class="linkTemplate"></a></span>
</div>
</td>
</tr>
</table>
</div>
Associated CSS:
div span.templateName{
float: left;
width: 270px;
height:auto;
text-align: left;
margin-top:7px;
overflow:visible;
}
div span.templateLinks {
float: left;
margin-left: 10px;
text-align: left;
margin-top:7px;
}
div span.templateLinks a.linkTemplate{
float: left;
width:45px;
background:transparent url("button.gif") 0px 0px no-repeat;
}
div span.templateLinks a.linkTemplate:hover{
background:transparent url("button_over.gif") 0px 0px no-repeat;
}
Specifically, the "span class="templateLinks"..." section does not render the graphic button. Everything else renders as normal, and no errors or warning are generated.
Thoughts or comments?
add the height of the button to the div span.templateLinks a.linkTemplate
Ugh! Thank you Nickfmc!
The key was the height:
div span.templateLinks a.linkTemplate{
float: left;
height:28px;
width:45px;
background:transparent url("button.gif") 0px 0px no-repeat;
}
I swear I tried the height parameter multiple ways in the CSS without success, yet simply adding it within the SPAN tag works. Something so simple yet a pain when it work previously.
Thank goodness for the this forum!
I know this is amateur stuff but I've been trying and trying to get this right and i can't seem to get a fix.
Please take a look at the website screenshot. I'm attempting to make the "call..." text to be inline and to the right of the best#flooring logo.
Here's the code HTML:
<div class="level0">
<div class="topbar">
<h1><% title_content %></h1> <div class="facebookbutton"></div>
<div class="phonetop">Customer services: <strong>0844 209 1560</strong></div>
</div>
</div>
<div class="header">
<div class="level0">
<div class="logonumber">
<img src="<% secure_url %>images/logo.png?r=1" alt="<% title_content %>" />
<div class="headernumber">
<h2>Call <br /> 01132 186 212 <br />for the best prices</h2></div>
</div>
<div class="headfloat">This contains all of the content located on the right hand side </div>
CSS
.level0{
width:970px;
margin:0px auto;
clear:both;
}
.topbar{
height:41px;
color:#747474;
/*text-shadow: 1px 1px 2px #000;*/
}
.header{
background:#fff;
height:166px;/*was 126*/
}
.logonumber {
float:left;
display:inline-block;
}
.logo{
display:block;
}
.headernumber{}
contains the nav, the card images, basket and search.
Any help would be much appreciated.
You need
.headernumber {
float: left;
}
and you also need to decrease the size of the .headfloat element because its width does not allow all three elements in the same line
so change the .headfloat rule to
.headfloat {
float: right;
padding-top: 13px;
text-align: right;
width: 350px; /*was 460px*/
}
How do I add the icon to the footer? Here is the following code I have completed.
CSS:
#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
box-shadow: 0px 0px 8px 0px #000000;
}
#footer p {
margin: 0;
padding: 10px 0;
}
and HTML:
<div id="footer">
<p><center>2013 - Index</center>
<img style="text-align:right" src="./images/ranbir.jpg" height="25" width="25"></p>
</div>
Thank you for any help!
I am trying to put the 2013 - Index in the center and the icons goes right. But it doesn't seem right at all.
Try either:
<img style="float:right" src="./images/ranbir.jpg" height="25" width="25"></p>
or
<img style="position:absolute; right:0;" src="./images/ranbir.jpg" height="25" width="25"></p>
Let me know if that helps you and have a look at http://jsfiddle.net/s89s7 if you want to see it working.
Edit: To clarify, text-align only works on things inside that element. E.g.
<body>
<p style="text-align:center">Text</p>
</body>
Will align "Text" inside of "p" but will not align "p" inside of "body". Hope that makes sense.
I am constructing a vertical navigation bar unable to format the text next to the image as I'd like. I can manipulate the image using the margin. I've got it where I want it. Now, I try to manipulate the text margin and it has no effect. It appears like so....
HTML:
<div class="content_nav">
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
<div class="content_nav_hr"> </div>
<div class="content_nav_item"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></div>
</div>
CSS:
.content_nav{
margin:45px 0px 45px 48px;
padding:0px;
width:232px;
height:467px;
background-color:#82c738;
box-shadow:inset 0px 0px 10px #578e30;
float:left;
}
.content_nav_item {
margin:0px 10px 0px 10px;
padding:0px;
height:115px;
}
.content_nav_hr {
margin:0px 10px 0px 10px;
padding:0px;
height:1px;
width:202px;
background-color:#A0DF5C;
}
.content_nav_item_text {
margin:10px 0px 10px 0px;
padding:0px;
}
.content_nav_item img {
margin:28px 10px 0px 20px;
padding:0px;
display:inline;
}
Any thoughts as to why I can't position that span?
Text is kindof a weird bird in CSS, it's not handled how you'd think or want it to be. Here's a good article explaining the idiosyncrasies of vertical text alignment
The text is between span tags. This tags is between the a tag and the div tag.
You need to separate them. They are stacking the text and they prevent the text to move.
You need to "end" the img tag
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.