HTML:
<div style="padding-bottom:3px;background:transparent; color:white!important; float:left; margin-right:20px; line-height:42px;">
<span class="linkcontainer">
<a class="hardlink" style="padding:0 10px;" href="http://hronline">HROnline</a>
</span>
<span class="linkcontainer">
<a class="hardlink" style="padding:0 10px; " href="http://hronline/ec">Employee Center</a>
</span>
<span class="linkcontainer">
<a class="hardlink" style="padding:0 10px; " href="http://hronline/businesscommunities">Business Communities</a>
</span>
<span class="linkcontainer">
<a class="hardlink" style="padding:0 10px;" href="http://hronline/internalservices">Internal Services</a>
</span>
<span class="linkcontainer">
<a class="hardlink" style="padding:0 10px;" href="http://hronline/policiesprocedures">Policies&procedures</a>
</span>
<span class="linkcontainer">
<a class="hardlink" style="padding:0 10px;" href="http://hronline/qualitybestpractices">Best Practices</a>
</span>
</div>
CSS:
.hardlink {
color: #FFF !important;
}
.hardlink:hover{
background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px;
background-color:#21374c;
border:1px solid #5badff;
display:inline-block;
line-height:20px;
}
What is causing the whole div jerky behavior on hovering over each link?
You're adding a border on :hover. To fix the issue - just add a transparent border to normal state as well DEMO
.hardlink {
color: #fff !important;
border: 1px solid transparent;
}
Related
I'm creating a messenging website that look like Facebook Messenger as follow. The problem is that when user send a message that is shorter than 13 characters then the message box wrapped around will become longer than the message due to the sender's name above it.
Image of the problem
Here is the code:
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="background-color: #e4e6eb;border-radius: 20px;padding: 7px 10px 7px 10px;margin-top: 2px;">
<div style="color: black;">'.$row['body'].'</div>
</div>
</div>
Change the inner div into a span that is display: inline-block;. And move the styles of the outer div to the span. You can leave the margin.
<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="margin-top: 2px;">
<span style="display: inline-block; padding: 7px 10px 7px 10px; color: black; background-color: #e4e6eb;border-radius: 20px;"> sas</span>
</div>
I've been trying all day to get the "nav" and "body" divs to sit side by side, but it seems like i'm locked to the width of the nav-bar somehow. I can't for the life of me get them to float next to each other, they only stack...
more specifically, i'm trying to put the body div in the middle of the view port, any ideas?
thanks in advance for any help!
<!Doctype HTML>
<HTML lang="en">
<head>
<meta charset="utf-8">
<title>Dirt Road Magazine - What's YOUR Adventure? - (dirtroad.com)</title>
<link href="stylesheeet.css" rel="stylesheet" type="text/css">
<style>
body {
background-image: url("back.gif");
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
#nav {
padding: 1%;
padding-left: 0;
padding-top: 0;
}
.navbutton {
cursor: pointer;
background-color: #d0d0d0;
color: #4040c0;
width: 100%;
height: 100%;
}
a {
cursor: pointer;
}
#slogan {
padding-top: 0;
padding-bottom: 1%;
padding-left: .5%;
}
#logo {}
#body {}
.outline {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#main {}
</style>
<script>
</script>
</head>
<body>
<div text-align="center" id="logo">
<A id="logo" HREF="http://www.dirtroadmagazine.com">
<IMG SRC="http://dirtroadmagazine.com/IMGS/drmlogo.gif" border="0">
</A><br>
<font face="impact" color="yellow" size="6">
<div id="slogan">
<p1 class="outline"> What's YOUR adventure? </font>
</p1>
</div>
</div>
<div id="main">
<div id="nav" align="left">
<table id="navtab" cellspacing=0 cellpadding=0 border=0>
<tr align=left valign=top>
<td width=120>
<center>
<table width=120 cellspacing=0 cellpadding=0 border=0>
<tr align=center valign=top>
<td>
<a class="navlink" id="side1" href="http://www.dirtroadmagazine.com/"><button class="navbutton" style="float: left;">DirtRoad Home</button></a><br>
<a class="navlink" id="side2" href="http://www.dirtroadmagazine.com/about.htm"><button class="navbutton" style="float: left;">About Us</button></a><br>
<a class="navlink" id="side3" href="http://www.dirtroadmagazine.com/list.html"><button class="navbutton" style="float: left;">Content list</button></a><br>
<br>
<br>
<br>
<a class="navlink" id="side4" href="http://www.dirtroadmagazine.com/copyrite.htm">© 1996-2018 DRM</a><br>
<font face=arial size=1>
<a class="navlink" href=http://www.dirtroadmagazine.com alt="It's A JEEP Thing, And WE Understand! Visit Dirt Road Magazine Today - Check Out Our Jeep Parts Reviews!">Welcome To The World's Favorite Jeep Enthusiast Site! It's A JEEP Thing!</a><br>
</td>
</table>
</div>
<div id="body">
<font face="impact" color="yellow" size="6">
<p1 class="outline"> We're back! </font>
</p1>
<br>
<br>
<font face="impact" color="black" size="4">
<p1> Want to know where WE'VE been? Click here to find out! </font>
</p1>
</div>
</div>
</body>
</html>
Use flex-box to overcome this problem
first set display:flex and flex:row on the parent element that contains both the div and navbar then use flex numbers on child elements like flex:1 or flex:2 the highest number flex occupies maximum available space.
I have 4 button and text arrange in each column. ( see picture bellow)
My problem is text title of button is too far from icon.
my css:
.ButtonPDetails {
font-size:10px !important;
overflow: hidden;
white-space: nowrap;
}
.col{
text-align:center !important;
}
.rowL{
padding-bottom:0px !important;
margin:0px !important;
}
.my-icon:before,
.my-icon{
font-size:20px !important;
display:block !important;
line-height: 40px !important;
}
Here my html:
<div class="row rowL">
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-bag my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblPlaceOrder}}
</a>
</div>
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-ios-cart my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblAddToCart}}
</a>
</div>
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-ios-information-outline my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblInfo}}
</a>
</div>
<div class="col">
<a href="" class="button button-icon ButtonPDetails">
<i class="icon ion-android-globe my-icon" style="padding: 0px;margin: 0px"></i>
{{$root.themeConfig.lblShare}}
</a>
</div>
</div>
i want distance between button and text about 5px.
please help me solve this.
If you don't have access to the generated HTML/CSS that renders the content inside the {{ }} tags, which is the real culprit, then you may be able to work around it by modifying your CSS for my-icon
.my-icon {
font-size:20px !important;
display:block !important;
line-height: 40px !important;
padding: 0px !important;
margin: 0px 0px -20px !important; /* top, right/left, bottom */
}
And remove the CSS inline in the HTML.
The -20px bottom margin may compensate for the padding added by the generated HTML.
The text representing each image is currently located to the right of the image. I want the text to be centered underneath its corresponding image, how do I achieve this?
Please note that I applied display: inline-bock on the list items, so they are in a row.
#footer1 {
float: left;
width: 100%;
border: 10px solid #e3e3e3;
}
#footer1>ul>li {
padding: 0 8px;
display: inline-block;
}
#footer1 a:hover img {
border: 1px solid #5cadff;
text-decoration: none;
box-shadow: 5px 5px 2px 2px #5cadff;
}
#footer1 img {
border: 1px solid transparent;
margin-left: 110px;
}
<div id="footer1">
<h2> SOURCES </h2>
<ul>
<li>
<a href="https://www.wikipedea.com" title="wikipedia">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
w
</li>
<li>
<a href="https://www.google.com" title="google">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Google
</li>
<li>
<a href="https://www.youtube.com" title="youtube">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Youtube
</li>
<li>
<a href="https://www.nlm.nih.gov/" title="Nih.gov">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
Nih
</li>
<li>
<a href="https://www.medindia.net" title="MedIndia.net">
<img height="50" src="http://www.placehold.it/50" width="50">
</a>
MedIndia
</li>
</ul>
</div>
I was able to do this without any changes to your existing HTML by doing this:
li{
display:inline-block;
text-align:center;
width:70px;
}
li img{
margin:0 10px;
}
The text-align centers all text and child elements inside the li. The width needs to be large enough that no caption will be too large to fit in that width. (If a caption won't fit in the allotted width, then the centering is wrecked.)
I added the left and right margin to the image for a little bit of future-proofing in case you later want to include a very short caption in your list. With that margin, even a very short caption will be forced to the next line (instead of next to the image) since 50 px image width + 10 margin on each side leaves no room for text.
Edited for float, keeps these inline and overflows if doesn't fit on page.
<style>
.container {
clear: both;
}
ul li {
width: 50px;
float: left;
text-align: center
}
ul li a {
text-decoration: none;
}
</style>
<div class="container">
<ul>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
<li>
<a title="wikipedia" href="https://www.wikipedea.com">
<img src="wikipedia.png" height="50" width="50">wikipedia
</a>
</li>
</ul>
</div>
Please try this
HTML:
<div id="footer1">
<h2> SOURCES </h2>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
<div class="item">
<a title="wikipedia" href="https://www.wikipedea.com">
<img src=""/>
</a>
<span class="caption">Text below the image</span>
</div>
</div>
CSS:
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 120px;
}
img {
width: 100px;
height: 100px;
background-color: grey;
}
.caption {
display: block;
}
DEMO
how to move the defie div left and the sales order div right......
i gave float property but not working.....
i wanted one div to touch extremely left and another div to move to the right....
providing my code below.....
http://jsfiddle.net/zbyLy/3/embedded/result/
<div style="padding-left: 41px; padding-top: 10px; float:left;">
<a class="" href="#">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<p style="margin-top: 5px; margin-bottom: 0px;">47657 Lakeview Blvd, Fremont CA 94538</p>
<p>Tel: 510-657-8981 <span style="padding-left: 18px;">wwww.abcdfg.com</span></p>
</div>
<div style="border: 1px solid red; width: 300px; float:left;">
<p style="color: #14486b; font-size: 18px; font-family: arial; font-wieght: bold; ">Sales Order</p>
<p style=>Customer No. ABC01</p>
<p style=>sales Order No. 100001</p>
<p style=>Est. Ship Date 2/24/2013</p>
</div>
<div style="border: 1px solid red; width: 300px; float:right;">
demo :http://jsfiddle.net/zbyLy/