javascript - Unexpected issue in Css3 html5 Div alignement when applying border-left -


i'm trying produce report using html5 , css3 got unexpected behavior. need understand why div not aligned

css3

.linediv{ border-left: 5px solid #ff0000; background:whitesmoke;height:30px; margin-top: 10px; } /* */ .titlediv {border-bottom:5px solid orangered;border-top: 4px solid #ffffff; text-align: center;  ;background:gainsboro;height: 50px;  font-size: 18px;color:#2f4f4f ; font-family: calibri, candara, segoe, "segoe ui", optima, arial, sans-serif; font-weight:bold; text-shadow: 1px 1px white;}  .maindiv{    margin: auto;height: 600px;width: 600px; border: 1px solid gray; } .bodydiv {   margin: 10%;    align-content: center;  } .labelp { float: left; margin-top: 7px;width: 80px;  border-right: 1px solid white;vertical-align: middle;    text-align:left;  font-size: 15px;color:#2f4f4f ; font-family: calibri, candara, segoe, "segoe ui", optima, arial, sans-serif; font-weight:bold; text-shadow: 1px 1px white; } .labeltxt {display: inline-block; ; margin-top: 7px;width: 80px;  vertical-align: middle;width:auto;    text-align:left;  font-size: 15px;color:#2f4f4f ; font-family: calibri, candara, segoe, "segoe ui", optima, arial, sans-serif; text-shadow: 1px 1px white; }   .sectiondiv {border-right:5px solid orangered;border-left:5px solid orangered; text-align: center;  ;background:gainsboro;height: 24px;  font-size: 16px;color:#2f4f4f ; font-family: calibri, candara, segoe, "segoe ui", optima, arial, sans-serif; font-weight:bold; text-shadow: 1px 1px white; margin-bottom: 5px;}

html5 

<html> <head> <title>job alert</title> </head>    <body>     <!-- start code here -->     <div class="maindiv">     <div class="titlediv"><p>unexpected result  detected</p></div>        <!-- body div-->       <div class="bodydiv">               <div class="sectiondiv">job information</div>         <div class="linediv"><span class="labelp">name&nbsp;&nbsp; </span><span class="labeltxt">&nbsp;gui test  </span><div>            <div class="linediv"><span class="labelp">jid&nbsp;&nbsp; </span><span class="labeltxt">12345 </span><div>             <div class="linediv"><span class="labelp">jid&nbsp;&nbsp; </span><span class="labeltxt">12345 </span><div>       </div>     </div>    </div></div></div></div></div></div></body>

result following permanent link http://liveweave.com/z25pth on liveweave

so why div not aligned? can explain or optimize code ?

you have not closed div blocks, close div blocks...

<div class="linediv"><span class="labelp">name&nbsp;&nbsp; </span><span class="labeltxt">&nbsp;gui test  </span>**<div> <-------   </div>**  <div class="linediv"><span class="labelp">jid&nbsp;&nbsp; </span><span class="labeltxt">12345 </span>**<div> <-------   </div>**

Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more