I am displaying PDF file in a jsp page. I want to display menu bar at the top on the same page. I have written code to display menu bar as well as to display PDF file. But the menu bar is not visible on the page. Menu bar is covered up the PDF file. How to make menu bar visible? Please help. Thank you.
<style>
body
{
background:url('C:\\Users\\workspace3\\elearning\\openbook.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
div ul ul {
display: none;
}
div ul li:hover > ul {
display: block;
}
div ul {
background: #7c0c0c;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-shadow: 3px 2px 3px #333333;
list-style: none;
position: relative;
}
div ul:after {
content: ""; clear: both; display: block;
}
div ul li {
float: left;
}
div ul li:hover {
background: #ebd3d3;
}
div ul li:hover a {
color: #4f9dd5;
}
div ul li a {
display: block; padding: 25px 30px;
color:#ebd3d3; text-decoration: none;
}
div ul ul {
background:#7c0c0c; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
div ul ul li {
float: none;
border-top: 1px solid #4f9dd5;
border-bottom: 1px solid #4f9dd5;
position: relative;
}
div ul ul li a {
padding: 15px 40px;
color: #ebd3d3;
}
</style>
<body>
<div>
<ul>
<li><span>Content</span>
<ul>
<li><span>Text Content</span></li>
<li><span>Video</span></li>
<li><span>PPT</span></li>
</ul></li>
<li><span>Quiz</span></li>
<li><span>Assignment</span>
<ul>
<li><span>Assignment Questions</span></li>
<li><span>Upload Assignment</span></li>
</ul></li>
<li> <span>Forum</span></li>
<li> <span>Logout</span></li>
</font></ul></div>
<%
File temp=new File("C:\\Users\\Desktop\\content\\o.pdf");
response.setHeader("Content-Disposition", "attachement; filename=\""+temp+"\"");
InputStream isStream = null;
ServletOutputStream sosStream = null;
try
{
response.flushBuffer();
isStream =new FileInputStream(temp);
sosStream =response.getOutputStream();
int ibit = 250;
while ((ibit) >= 0)
{
ibit = isStream.read();
sosStream.write(ibit)
}
}catch (IOException e)
{
out.println(e);
}
sosStream.flush();
sosStream.close();
isStream.close();%>
</body>
</html>
Related
I am learning CSS while writing CSS I got some issue.
I need to remove this space from my displaying web page.
.grouping:before,
.grouping:after {
content: " ";
display: table;
}
.grouping:after {
clear: both;
}
nav {
background-color: white;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
nav figure {
position: absolute;
}
img {
width: 100px;
}
.primary-nav {
float: right;
}
.primary-nav>li {
display: block;
float: left;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 100px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</figure>
</nav>
Using this code resultant output must be like this:
Expected Result Image
But getting this result with spaces at corner indicated as an arrow in next image:
Generated Result Image
1) There is some margin on ul element rendered by the browser defaults in general, to fix this do:
ul {
margin: 0
}
2) Also figure element has default margins
figure {
margin: 0
}
Try to inspect the output of the browser to see exactly how the browser defaults renders that margin to see it better.
https://jsfiddle.net/t8netg8j/4/
I would use display: inline-block for the image and the li elements, erase some of the floats and reset some of the margins to 0 as shown below:
(note: I reduced the width of the elements from 100 to 80 px to fit them into the narrow snippet window, but of course you don't have to do that for a wider viewport)
(note #2: i added empty HTML comments at line ends and beginnings for all li elements to avoid the whitespace resulting from the use of inline-blocks which would cause the hover background not to fill the full space between two vertical borders)
html, body {
margin: 0;
}
nav figure {
position: absolute;
width: 100%;
margin: 0;
}
img {
width: 80px;
display: inline-block;
}
.primary-nav {
float: right;
margin: 0;
}
.primary-nav>li {
display: inline-block;
}
.primary-nav>li>a {
float: left;
padding: 25px 0;
width: 80px;
border-left: 1px solid;
}
nav li a {
font-family: Arial, Helvetica, sans-serif;
color: black;
text-transform: uppercase;
font-size: 15px;
text-align: center;
}
nav li:first-child a {
border-left: none;
}
nav li a:focus,
nav li a:hover {
background: red;
background-color: red;
}
body {
background-color: grey;
}
<nav class="grouping">
<figure>
<img src="images/logo.png" alt="LOGO">
<ul class="primary-nav">
<li>Home</li><!--
--><li>Home2</li><!--
--><li>Home3</li><!--
--><li>Home4</li><!--
--><li>Home5</li><!--
--></ul>
</figure>
</nav>
function myFunction() {
var x = document.getElementById("primaryNavigation");
if (x.className === "show") {
x.className = "hide";
} else {
x.className = "show";
}
}
/* NAVIGATION - MENU */
nav {
background-color: #0000ff;
}
nav button {
display: block;
position: absolute;
top: .5rem;
right: 2%;
}
nav ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
nav ul.show {
display: flex;
}
nav ul.hide {
display: none;
}
nav ul li {
width: 100%;
list-style: none;
}
nav ul li a {
display: block;
color: white;
text-decoration: none;
font-size: 1.1rem;
font-weight: 450;
padding: 1rem 0;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
nav ul li.active a {
background-color: #f52c39;
}
nav ul li a:hover {
background-color: #4c9bff;
}
.clearfix:after,
.row:after {
content: "";
display: table;
clear: both;
}
/* DROP DOWN MENU */
ul ul {
position: absolute;
display: none;
background-color: #0000ff;
}
li:hover ul {
display: block;
background-color: #0000ff;
}
nav ul ul li a:hover {
background-color: #4c9bff;
}
<nav class="clearfix">
<button onclick="myFunction()">☰</button>
<ul class="hide" id="primaryNavigation">
<li class="active">Home</li>
<li>Adventures
<ul>
<li>White Water Rafting</li>
<li>Hiking & Zipline</li>
<li>Camping</li>
</ul>
</li>
<li>Guides</li>
<li>Booking</li>
<li>Contact</li>
</ul>
</nav>
I want my dropdown menu to be the same width as the parent. (FYI: It is responsive and changes into a hamburger). I realize this is probably so easy for someone (but I'm just learning). I've tried all the solutions I've seen listed here and other place to no avail. THANK YOU for any help.
I created a vertical dropdown menu with submenus for my custom Tumblr theme. The menu is below a sidebar on the right side.
I was wondering if someone could look over the code for me. I can't tell If there are errors in the code or not. I'm not a coding expert. I did get this code from a tutorial online and made some adjustments to it. I did ask the person who did the tutorial for help but they did not answer me back. I would be thankful if someone can help me with the code or lead me to some good tutorials online.
Here is the working code:
#navsmenu, ul, li, li li {
margin: 0;
padding: 0;
}
#navsmenu {
position: fixed;
margin-top: 16px;
right: 176;
width: 150px;
height: 27px;
}
#navsmenu ul {
line-height: 25px;
}
#navsmenu li {
list-style: none;
position: relative;
background: #79cde2;
}
#navsmenu li li {
list-style: none;
position: relative;
background: #79cde2;
left: 148px;
top: -27px;
}
#navsmenu ul li a {
width: 148px;
height: 25px;
display: block;
text-decoration: none;
text-align: center;
font-family: 'Ubuntu', sans-serif;
color: #ffffff;
border: 1px solid #eee;
}
#navsmenu ul ul {
position: absolute;
visibility: hidden;
top: 27px;
}
#navsmenu ul li:hover ul {
visibility: visible;
}
#navsmenu li:hover {
background-color: #f8a542;
}
#navsmenu ul li:hover ul li a:hover {
background-color: #f8a542;
}
#navsmenu a:hover {
font-weight: bold;
}
<div id="navsmenu">
<ul>
<li>ABOUT</li>
<li>VIDEOS
<ul>
<li>K-POP REVIEWS</li>
<li>K HIP-HOP REVIEWS</li>
<li>SHORT K-POP REVIEWS</li>
<li>SERIOUS K-POP RANTS</li>
<li>K-POP DANCE COVERS</li>
<li>LIFE RANTS</li>
</ul>
</li>
<li>RANDOM K-POP</li>
<li>K-POP EDITS & GRAPHICS</li>
</ul>
</div>
I'm posting here to get some help.
I'm trying to make a simple dropdown menu and I'm stacked with the submenus (limpieza and balance).
What i'm trying to achieve here is to make the limpieza and balance buttons have the same width and text align as the rest of the buttons. I just dont know how. It looks like once the relative attribute is added to the container and the absolute attribute is added to limpieza and balance, I can't control their width or text align anymore. I guess is bc they are out of its cointainer. I'm really confused here since this is the first time I try css.
I would appreciate if some1 could provide some help.
Here is the code.
#charset "utf-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
}
body {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
}
/*ESTILOS GENERALES*/
.header {
left: 0;
position: fixed;
top: 0;
width: 100%;
background:white;
}
.barrasup {
background:#203c6e;
padding-top: 10px;
padding-bottom: 10px;
min-height: 29px;
z-index: 2;
}
.contenedor {
margin: 0 auto;
max-width: 1200px;
}
.social {
background: #203c6e;
display: block;
float: none;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
width: 75px;
}
.instasocsup {
margin-right: 10px
}
/*MENU*/
.barrainf {
margin-top: 10px;
}
.menu {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
list-style:none;
padding: 0;
}
.menu li {
line-height: 2.5rem;
position: relative;
}
.menu li .item2 ul {
position: absolute;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > a {
text-decoration:none;
color: black;
display: block;
}
.menu > ul > li > div > a:hover {
color: white;
background: #203c6e;
}
.menu > ul > li > div > ul > li >div > a {
text-decoration:none;
color: white;
display: block;
}
.menu li ul {
display: none;
}
.menu li:hover ul {
display:block;
}
.item1 {
margin-left: 10px;
margin-right: 10px;
background: white;
}
.item2, .item3, .item4, .item5 {
margin-left: 0px;
margin-right: 10px;
background:white;
}
.subitem1, .subitem2 {
margin-left: 0px;
background: #203C6E;
color: white;
}
/*1ER NIVEL*/
.menu > ul{
background: #DF2529;
display: table;
width:100%;
}
.menu > ul > li {
float: left;
width: 20%;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link href="css/styleIndigo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="barrasup">
<div class="contenedor">
<div class="social">
<img src="Instagram_logo.png"></img>
<img src="twitter_logo.png"></img>
</div>
</div>
</div>
<div class="barrainf">
<div class="menu">
<ul>
<li><div class="item1">Inicio</div></li>
<li><div class="item2">Comprar
<ul>
<li id="listamenu"><div class="subitem1">Balance</div></li>
<li id="listamenu"><div class="subitem2">Limpieza</div></li>
</ul>
</div></li>
<li><div class="item3">Blog</div></li>
<li><div class="item4">Quienes somos</div></li>
<li><div class="item5">Contacto</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Just use calculate css for width that works with inherited table display properties. View it here http://codepen.io/anon/pen/reMpRj
.menu > ul > li > div > ul {
width: calc(100% - 10px);
}
Here's the HTML :
<nav>
<ul class="menu">
<li class="li_pc">PC</li>
<li class="li_one">ONE</li>
<li class="li_ps3">PS4</li>
<li class="li_360">360</li>
<li class="li_ps3">PS3</li>
<li class="li_wiiu">WiiU</li>
</ul>
</nav>
and here's the CSS :
nav {
padding: 0;
margin: 0;
widht: 1200px;
height: 100px;
}
ul li {
display: inline;
font-family: Verdana, Geneva, sans-serif;
float: left; /* IE */
list-style-type: none;
}
ul li a {
display: block;
float: left;
width: 190px;
height: 60px;
padding: 0;
background-color: transparent;
color: white;
text-decoration: none;
text-align: center;
}
.li_pc a:hover {
background-color: #cc9a34;
}
.li_one a:hover {
background-color: #149a14;
}
.li_ps4 a:hover {
background-color: #040264;
}
.li_360 a:hover {
background-color: #9cce04;
}
.li_ps3 a:hover {
background-color: #0406b4;
}
.li_wiiu a:hover {
background-color: #5c12ac;
}
My goal is to vertically center the text in the cells. I'm using text-align:center; to center it horizontally, but when I use vertical-align:middle; it doesn't even move a pixel. I tried a lot of different ways but it always destroys the thing and makes the design look like my face on sunday morning.
How can I center these vertically please ?
Thanks in advance :)
If you anchor links are 60px tall
line-height:60px
should do it.
JSFiddle