2017-03-24 46 views
0

我的html頁面幾乎是應該如此工作,但我一直在滾動通過stackoverflow,似乎無法找到任何具體針對我的答案。html容器滾動錯誤

body { 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t border: 0; 
 
\t \t \t } 
 
\t \t \t h1 { 
 
\t \t \t \t font-family: arial; 
 
\t \t \t \t color: rgb(128, 128, 128); 
 
\t \t \t \t text-align: center; \t 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t overflow: auto; \t 
 
\t \t \t } 
 
\t \t \t header { 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t top: 0; left: 0; 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t height: 30%; 
 
\t \t \t \t position: fixed; 
 
\t \t \t \t line-height: 350%; 
 
\t \t \t \t background: black; 
 
\t \t \t \t background-image: url(profile_pic.jpg); 
 
\t \t \t \t background-repeat: no-repeat; 
 
\t \t \t \t background-position: right; 
 
\t \t \t \t background-size: 20% 70%; 
 
\t \t \t \t color: rgb(190, 190, 190); 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t border-spacing: 5px 10px; 
 
\t \t \t \t border: 1px solid black; 
 
\t \t \t } 
 
\t \t \t nav { 
 
\t \t \t \t display: flex; 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t height: 25px; 
 
\t \t \t \t position: fixed; 
 
\t \t \t \t top: 30%; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t background: rgb(80, 80, 80); 
 
\t \t \t \t border: 1px solid rgb(80, 80, 80); 
 
\t \t \t } 
 
\t \t \t .nav_link { 
 
\t \t \t \t flex-grow: 1; 
 
\t \t \t \t line-height: 25px; 
 
\t \t \t \t 
 
\t \t \t } 
 
\t \t \t a { 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t color: white; 
 
\t \t \t } 
 
\t \t \t a:hover { 
 
\t \t \t \t text-decoration: underline; 
 
\t \t \t } 
 
\t \t \t .content { 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t overflow-y: scroll; 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t margin: 20% 0% 0% 0%; \t 
 
\t \t \t \t padding-top: 6%; 
 
\t \t \t } 
 
\t \t \t .myPanel { 
 
\t \t \t \t border: 1px solid black; 
 
\t \t \t \t border-radius: 7px 7px 7px 7px; 
 
\t \t \t \t box-shadow: 0px 0px 4px 999; 
 
\t \t \t \t width: 45%; 
 
\t \t \t \t margin: 1%; 
 
\t \t \t } 
 
\t \t \t .myPanel .heading { 
 
\t \t \t \t background: rgb(80, 80, 80); 
 
\t \t \t \t border-radius: 5px 5px 0px 0px; 
 
\t \t \t \t color: white; 
 
\t \t \t \t padding: 5px 20px; 
 
\t \t \t } 
 
\t \t \t .myPanel .panelBody { 
 
\t \t \t \t padding: 3px 20px; 
 
\t \t \t \t background: silver; 
 
\t \t \t \t border-radius: 0px 0px 5px 5px; 
 
\t \t \t } 
 
\t \t \t .myPanel p { 
 
\t \t \t \t margin: 3px; 
 
\t \t \t } 
 
\t \t \t .myPanel:hover { 
 
\t \t \t \t box-shadow: 0px 0px 8px black; 
 
\t \t \t }
<?php include 'head.php';?> 
 
<body> 
 
\t <header> 
 
\t \t <h1>Resume</h1> 
 
\t </header> 
 
\t <nav> 
 
\t \t <div class="nav_link"> 
 
\t \t \t <a href="index.php"> Home </a> 
 
\t \t </div> 
 
\t \t <div class="nav_link"> 
 
\t \t \t <a href="resume.php"> Resume </a> 
 
\t \t </div> 
 
\t \t <div class="nav_link"> 
 
\t \t \t <a href="sideprojects.php"> Side Projects </a> 
 
\t \t </div> 
 
\t \t <div class="nav_link"> 
 
\t \t \t <a href="aboutme.php"> About Me </a> 
 
\t \t </div> 
 
\t </nav> 
 
\t <div class="content"> 
 
\t \t <div class="myPanel"> 
 
\t \t \t <div class="heading">US ARMY NATIONAL GUARD</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t <p>03/2014 -- Current</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t <p>Crystal River, FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Rank: PV2</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Diesel Mechanic -- 91H</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Military Police -- 31b</ui></br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="myPanel"> 
 
\t \t \t <div class="heading">LILLYS ON THE LAKE</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2016 -- 02/2017</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t <p>Clermont FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Serving</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Bartending</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Service bar</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Open/close</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Food running</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Expediting</ui></br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="myPanel"> 
 
\t \t \t <div class="heading">PANE D'OR</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>08/2015 -- 06/2016</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t <p>Winter Garden FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Baking</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Pastry</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Delivering</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Sales at markets/shop</ui></br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="myPanel"> 
 
\t \t \t <div class="heading">Disney</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2015 -- 11/2016</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p class> 
 
\t \t \t \t \t \t \t <p>Orlando FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Monorail pilot</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Platform operator</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Audience control</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Customer relations</ui></br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="myPanel"> 
 
\t \t \t <div class="heading">PERFORMANCE YEARS GTO</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>01/2012 -- 02/2015</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t <p>Hatfield PA</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Shipping</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Receiving</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Pulling/packing/sorting</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Picker operator</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Forklift operator</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Customer service</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>In house sales</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Show sales</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Inventory</ui></br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="myPanel"> 
 
\t \t \t <div class="heading">GIANT FOODS</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>01/2012 -- 03/2013</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t <p>Montgomeryville PA</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Stocking shelves</ui></br> 
 
\t \t \t \t \t \t \t \t <ui>Rotate merchandise</ui></br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</body>

所以用小提琴對其稍加修改,以在該應用程序。唯一的區別是我使用一些PHP爲我的電腦上的標題和導航欄形成模板。

好吧,如果你查看小提琴的滾動條不僅是我想滾動的區域,而是整個頁面。我想保持頭部固定,並有「身體」或爲我的網頁容器滾動,但沒有在頁面的全長滾動條。

+0

爲什麼第一面板的'DIV content'但另一些不是孩子? –

+0

我不知道?他們都應該是! –

+0

在你的問題中發表一個[mcve]請 – j08691

回答

0

添加的位置是:固定;到body和overflow-y:滾動到.content

也不要「close」/ br 它只是br或br/for額外的兼容性。

<br/> 

也不能嵌套p標籤(有另外一個p標籤內的AP標籤)或有AP標籤中的列表 - 一個列表都有自己的風格 - 所以擺脫你的列表清單+擺脫了P的標題。而且每個myPanel的末尾都有一個額外的/ div - 應該只有三個。

另外,0值後面不應該有單位(例如%)。通過csslint.net運行你的CSS

你也有一些不必要的CSS屬性 - 例如,你的頭和導航不需要頂/右定位或位置:fixed。

https://jsfiddle.net/Kass_P/kg6uppnm/25/

body { 
     width: 100%; 
     height: 100%; 
     padding: 0; 
     margin: 0; 
     border: 0; 
     position:fixed; 
} 
+0

哇這是非常有用的,這正是我想要的滾動工作tyty –

0

首先你需要做你說的他們都應該! ...

然後你必須修復div內容的高度到屏幕上。換句話說,如果你希望你的身體沒有滾動條,你必須將你的元素固定在屏幕上,而你的身體沒有垂直溢出。有些事情是這樣的:

header{height: 60px;} 
nav{height: 40px;} 
.content{height: calc(100vh - 100px);} 

然後你可以爲div內容設置一個垂直滾動條。

#content{overflow-y: auto;} 

看到這個簡化你的頁面:

header { 
 
\t margin: 0; 
 
\t width: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t padding: 0; 
 
\t height: 60px; 
 
\t position: fixed; 
 
\t line-height: 350%; 
 
\t background: black; 
 
\t background-image: url(profile_pic.jpg); 
 
\t background-repeat: no-repeat; 
 
\t background-position: right; 
 
\t background-size: 20% 70%; 
 
\t color: rgb(190, 190, 190); 
 
\t text-align: center; 
 
\t border-spacing: 5px 10px; 
 
\t border: 1px solid black; 
 
} 
 

 
.content { 
 
\t width: 100%; 
 
\t overflow-y: scroll; 
 
\t height: 100%; 
 
\t margin-top: 60px; 
 
\t height: calc(100vh - 70px); 
 
} 
 

 
.myPanel { 
 
\t \t \t \t border: 1px solid black; 
 
\t \t \t \t border-radius: 7px 7px 7px 7px; 
 
\t \t \t \t box-shadow: 0px 0px 4px 999; 
 
\t \t \t \t width: 45%; 
 
\t \t \t \t margin: 1%; 
 
\t \t \t } 
 
\t \t \t .myPanel .heading { 
 
\t \t \t \t background: rgb(80, 80, 80); 
 
\t \t \t \t border-radius: 5px 5px 0px 0px; 
 
\t \t \t \t color: white; 
 
\t \t \t \t padding: 5px 20px; 
 
\t \t \t } 
 
\t \t \t .myPanel .panelBody { 
 
\t \t \t \t padding: 3px 20px; 
 
\t \t \t \t background: silver; 
 
\t \t \t \t border-radius: 0px 0px 5px 5px; 
 
\t \t \t } 
 
\t \t \t .myPanel p { 
 
\t \t \t \t margin: 3px; 
 
\t \t \t } 
 
\t \t \t .myPanel:hover { 
 
\t \t \t \t box-shadow: 0px 0px 8px black; 
 
\t \t \t }
<!--?php include 'head.php';?--> 
 

 
\t <header> 
 
\t \t <h1>Resume</h1> 
 
\t </header> 
 
\t 
 
\t <div class="content"> 
 
    <div class="myPanel"> 
 
\t \t \t <div class="heading">LILLYS ON THE LAKE</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2016 -- 02/2017</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t </p><p>Clermont FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Serving</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Bartending</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Service bar</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Open/close</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Food running</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Expediting</ui><br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t <p></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div><div class="myPanel"> 
 
\t \t \t <div class="heading">LILLYS ON THE LAKE</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2016 -- 02/2017</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t </p><p>Clermont FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Serving</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Bartending</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Service bar</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Open/close</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Food running</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Expediting</ui><br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t <p></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div><div class="myPanel"> 
 
\t \t \t <div class="heading">LILLYS ON THE LAKE</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2016 -- 02/2017</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t </p><p>Clermont FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Serving</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Bartending</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Service bar</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Open/close</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Food running</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Expediting</ui><br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t <p></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div><div class="myPanel"> 
 
\t \t \t <div class="heading">LILLYS ON THE LAKE</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2016 -- 02/2017</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t </p><p>Clermont FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Serving</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Bartending</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Service bar</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Open/close</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Food running</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Expediting</ui><br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t <p></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div><div class="myPanel"> 
 
\t \t \t <div class="heading">LILLYS ON THE LAKE</div> 
 
\t \t \t \t <div class="panelBody"> 
 
\t \t \t \t \t <p>06/2016 -- 02/2017</p> 
 
\t \t \t \t \t <div class="showOnHover"> 
 
\t \t \t \t \t \t <p> 
 
\t \t \t \t \t \t \t </p><p>Clermont FL</p> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <ui>Serving</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Bartending</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Service bar</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Card Holder voids/comps</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Open/close</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Food running</ui><br> 
 
\t \t \t \t \t \t \t \t <ui>Expediting</ui><br> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t <p></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div>  \t \t 
 
\t \t  \t \t \t \t  \t \t  \t \t

+0

所有我希望他們在%,所以當你調整窗口他們積極調整大小。 –

+0

100vh是屏幕的100%。這不是一個固定值。還有很多其他的方法可以做。我給了你一個樣本來理解這個問題...... –

+0

嗯,我試過了,它沒有解決這個問題。 –

0

單純從身體類中刪除height。 設置height:40%左右的內容類。

此外,讓所有<div class="myPanel"><div class="content"> DIV中 希望它可以幫助

+0

爲什麼不是已經發生?我必須在所有myPanels上添加div嗎? –

+0

如果你分析你的代碼,你已經關閉了內容div。請參閱下面的完整代碼: –

0

查看完整的工作代碼:

<html> 
<head> 
<style> 
body { 
       width: 100%; 
       padding: 0; 
       margin: 0; 
       border: 0; 
      } 
      h1 { 
       font-family: arial; 
       color: rgb(128, 128, 128); 
       text-align: center; 
       margin: 0; 
       overflow: auto; 
      } 
      header { 
       margin: 0; 
       width: 100%; 
       top: 0; left: 0; 
       padding: 0; 
       height: 30%; 
       position: fixed; 
       line-height: 350%; 
       background: black; 
       background-image: url(profile_pic.jpg); 
       background-repeat: no-repeat; 
       background-position: right; 
       background-size: 20% 70%; 
       color: rgb(190, 190, 190); 
       text-align: center; 
       border-spacing: 5px 10px; 
       border: 1px solid black; 
      } 
      nav { 
       display: flex; 
       text-align: center; 
       height: 25px; 
       position: fixed; 
       top: 30%; 
       width: 100%; 
       background: rgb(80, 80, 80); 
       border: 1px solid rgb(80, 80, 80); 
      } 
      .nav_link { 
       flex-grow: 1; 
       line-height: 25px; 

      } 
      a { 
       text-decoration: none; 
       color: white; 
      } 
      a:hover { 
       text-decoration: underline; 
      } 
      .content { 
       width: 100%; 
       overflow-y: scroll; 
       height: 40%; 
       margin: 20% 0% 0% 0%; 
       padding-top: 6%; 
      } 
      .myPanel { 
       border: 1px solid black; 
       border-radius: 7px 7px 7px 7px; 
       box-shadow: 0px 0px 4px 999; 
       width: 45%; 
       margin: 1%; 
      } 
      .myPanel .heading { 
       background: rgb(80, 80, 80); 
       border-radius: 5px 5px 0px 0px; 
       color: white; 
       padding: 5px 20px; 
      } 
      .myPanel .panelBody { 
       padding: 3px 20px; 
       background: silver; 
       border-radius: 0px 0px 5px 5px; 
      } 
      .myPanel p { 
       margin: 3px; 
      } 
      .myPanel:hover { 
       box-shadow: 0px 0px 8px black; 
      } 

      </style></head> 
<body> 
    <header> 
     <h1>Resume</h1> 
    </header> 
    <nav> 
     <div class="nav_link"> 
      <a href="index.php"> Home </a> 
     </div> 
     <div class="nav_link"> 
      <a href="resume.php"> Resume </a> 
     </div> 
     <div class="nav_link"> 
      <a href="sideprojects.php"> Side Projects </a> 
     </div> 
     <div class="nav_link"> 
      <a href="aboutme.php"> About Me </a> 
     </div> 
    </nav> 
    <div class="content"> 
     <div class="myPanel"> 
      <div class="heading">US ARMY NATIONAL GUARD</div> 
       <div class="panelBody"> 
       <p>03/2014 -- Current</p> 
        <div class="showOnHover"> 
         <p> 
          <p>Crystal River, FL</p> 
          <ul> 
           <ui>Rank: PV2</ui></br> 
           <ui>Diesel Mechanic -- 91H</ui></br> 
           <ui>Military Police -- 31b</ui></br> 
          </ul> 
         </p> 
        </div> 
       </div> 
      </div> 

     <div class="myPanel"> 
      <div class="heading">LILLYS ON THE LAKE</div> 
       <div class="panelBody"> 
        <p>06/2016 -- 02/2017</p> 
        <div class="showOnHover"> 
         <p> 
          <p>Clermont FL</p> 
          <ul> 
           <ui>Serving</ui></br> 
           <ui>Bartending</ui></br> 
           <ui>Service bar</ui></br> 
           <ui>Card Holder voids/comps</ui></br> 
           <ui>Open/close</ui></br> 
           <ui>Food running</ui></br> 
           <ui>Expediting</ui></br> 
          </ul> 
         </p> 
        </div> 
       </div> 
      </div> 
     <div class="myPanel"> 
      <div class="heading">PANE D'OR</div> 
       <div class="panelBody"> 
        <p>08/2015 -- 06/2016</p> 
        <div class="showOnHover"> 
         <p> 
          <p>Winter Garden FL</p> 
          <ul> 
           <ui>Baking</ui></br> 
           <ui>Pastry</ui></br> 
           <ui>Delivering</ui></br> 
           <ui>Sales at markets/shop</ui></br> 
          </ul> 
         </p> 
        </div> 
       </div> 
      </div> 
     <div class="myPanel"> 
      <div class="heading">Disney</div> 
       <div class="panelBody"> 
        <p>06/2015 -- 11/2016</p> 
        <div class="showOnHover"> 
         <p class> 
          <p>Orlando FL</p> 
          <ul> 
           <ui>Monorail pilot</ui></br> 
           <ui>Platform operator</ui></br> 
           <ui>Audience control</ui></br> 
           <ui>Customer relations</ui></br> 
          </ul> 
         </p> 
        </div> 
       </div> 
      </div> 
     <div class="myPanel"> 
      <div class="heading">PERFORMANCE YEARS GTO</div> 
       <div class="panelBody"> 
        <p>01/2012 -- 02/2015</p> 
        <div class="showOnHover"> 
         <p> 
          <p>Hatfield PA</p> 
          <ul> 
           <ui>Shipping</ui></br> 
           <ui>Receiving</ui></br> 
           <ui>Pulling/packing/sorting</ui></br> 
           <ui>Picker operator</ui></br> 
           <ui>Forklift operator</ui></br> 
           <ui>Customer service</ui></br> 
           <ui>In house sales</ui></br> 
           <ui>Show sales</ui></br> 
           <ui>Inventory</ui></br> 
          </ul> 
         </p> 
        </div> 
       </div> 
      </div> 
     <div class="myPanel"> 
      <div class="heading">GIANT FOODS</div> 
       <div class="panelBody"> 
        <p>01/2012 -- 03/2013</p> 
        <div class="showOnHover"> 
         <p> 
          <p>Montgomeryville PA</p> 
          <ul> 
           <ui>Stocking shelves</ui></br> 
           <ui>Rotate merchandise</ui></br> 
          </ul> 
         </p> 
        </div> 
       </div> 
      </div> 
    </div> 
</body> 
</html>