Hoe de afbeeldingsmap en css map te scheiden om met elkaar te werken in maven project

Ik heb twee CSS-bestanden en drie afbeeldingen in mijn project Mven. Wanneer ik de afbeeldingen in de CSS-map plaats, werkt het prima, maar wanneer ik de afbeeldingen naar de afbeeldingsmap verplaats, worden die afbeeldingen niet op de webpagina weergegeven. Ik wil een mooie structuur hebben in mijn project en daarom een ​​aparte afbeeldingsmap. Hoe kan ik het doen? Ik denk dat ik wat wijzigingen in mijn CSS moet aanbrengen, maar ik weet niet hoe en waar. Ik weet niet zoveel over CSS.

layout.css

*{
margin:0;
padding:0;
   }
 body {
font:14px/1.3 Arial,sans-serif;
background-color:#212121;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
color:#fff;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
height: 571px;
margin: 30px auto;
width: 957px;
 } 

en de menue.css

#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;

-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
 }
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
 }
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;

-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;

-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
 #lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-child(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-child(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-child(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-child(4):hover ~ #lavalamp {
left: 250px;
 }
#nav li:nth-child(5):hover ~ #lavalamp {
left: 330px;
 }
#nav li:nth-child(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-child(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-child(8):hover ~ #lavalamp {
left: 565px;
 }

En ten slotte index.jsp:

  <!DOCTYPE HTML>
  
  <head>
    <meta charset="utf-8" />
    <link href="<%=request.getContextPath()%>/resources/css/layout.css" rel="stylesheet" 
    type="text/css" />
    <link href="<%=request.getContextPath()%>/resources/css/menu.css" rel="stylesheet" 
    type="text/css" />
   </head>
   <body>
    

Welcome

<div class="container"> </div> </body> </html>

En 3 afbeeldingen        lavalamp.png,        menu_bg.png,        menu_line.png.

1

1 antwoord

Ik geloof dat het probleem dat je hebt, is met de manier waarop je je paden bepaalt. U stelt uw afbeeldingspaden in ten opzichte van uw css-bestanden. Bekijk deze CSS-paden - ik hoop dat dit is wat u zijn op zoek naar ^ - ^.

In case you want the quick and dirty version ->

Hier is alles wat u moet weten over relatieve bestandspaden:

Starting with "/" returns to the root directory and starts there

Starting with "../" moves one directory backwards and starts there

Starting with "../../" moves two directories backwards and starts there (and so on...) To move forward, just start with the first > subdirectory and keep moving forward

0
toegevoegd