Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / Java Новый топик    Ответить
Топик располагается на нескольких страницах: [1] 2   вперед  Ctrl      все
 Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
Я пишу проект на спринге-мвс так вот, мне нужно поставить фоновое-изображение на сайт. Вроде html+css правильно написал. Но он не работает, может проблема с сервером, можете посмотреть из-ха чего не показывает фоновое-изображение.

Web.XML

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
    id="WebApp_ID" version="3.0">

  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <error-page>
    <location>/errors</location>
  </error-page>

</web-app>


Index.JSP

<%@page contentType="text/html" pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <link href="../css/style.css" rel="stylesheet" type="text/css">

        <style><%@include file="/css/style.css"%></style>


        <title>Home Page</title>
        
        

   

<body>
    <body class="bg-full">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">School</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Главная</a></li>
            <li><a href="#">Наш университет</a></li>
            <li><a href="#">Электронный журнал</a></li>
            <li><a href="#">Студенты</a></li>
            <li><a href="#">Фотогалерея</a></li>
            <li><a href="#">Карьера</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
        <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" name="search">
            </div>
            <button type="submit" class="btn btn-default">Поиск</button>
        </form>
    </div>
</nav>

<div class="container">

</div>

<div class="container">

</div>


<div class="bg">
    <div class ="pokaz">
        <form action="allStudents" method="post">
            <input class="btn btn-primary" type="submit" value="Показать всех студентов">
        </form>

    </div>
</div>
</body>
</html>


Style.CSS

.bg-full { 
    background-image: url('../../images/home.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover;
    position: relative; 
    height: 100%; }


.bg{
    background-color: black;
}
.it{
  width:80%;
  margin:auto;
}


.pokaz{
   
   margin: 0;
    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) 
   
   
}

.add{
   width:80%;
  margin:auto;
}


Расположение файлов в картинке (могу позже исходные коды закинуть)

К сообщению приложен файл. Размер - 9Kb
15 май 19, 11:54    [21885118]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
Petro123
Member

Откуда: Загрузочный сектор Москвы (AutoPOI.ru)
Сообщений: 38643
fallen2019,

Нужно создать файл test.htm с фоновой картинкой и проверить совпадение с твоим кодом на правый клик мышкой - исходный код.
15 май 19, 12:19    [21885153]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
Пылинка
Member

Откуда: СПб
Сообщений: 339
fallen2019,
Не понял - при чем тут JAVA?
Начни отсюда - http://design-mania.ru/web-design/html-css/css-background/
PS а путь прописать разный не пробовал, прежде чем сюда писать?
15 май 19, 12:51    [21885178]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
Пылинка,

В том и дело я разные пути пробывал, думаю все же может дело в java коде, там с сервером проблема и тд
15 май 19, 12:55    [21885183]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019,

Должен быть полный путь до твоих css и вместо
        <link href="style.css" rel="stylesheet">
        <link href="../css/style.css" rel="stylesheet" type="text/css"
должно быть
    <link rel="stylesheet" href='<%=request.getContextPath()%>/css/style.css'>
    <link rel="stylesheet" href='<c:url value="/css/style.css"/>'/> если используешь JSTL
15 май 19, 13:43    [21885231]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
Petro123
Member

Откуда: Загрузочный сектор Москвы (AutoPOI.ru)
Сообщений: 38643
fallen2019,

F4 в эксплорере - отладка.
Кому счас легко?
15 май 19, 14:02    [21885269]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
vas0,

Я попробывал но все равно не показывает
15 май 19, 14:02    [21885270]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019,

<style><%@include file="/css/style.css"%></style>

так лучше не делать, делай так как я написал выше. Разберись с путями. И в самой css путь нужно тоже поправить.
Будет что то типа background-image: url('/images/home.jpg');

проверь из браузера где у тебя твои сss а где images

http://localhost:8080/<твой-контекст>/css/style.css
http://localhost:8080/<твой-контекст>/images/home.jpg
15 май 19, 14:10    [21885281]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
vas0,
Я же все правильно заменил?
<%@page contentType="text/html" pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" href='<%=request.getContextPath()%>/css/style.css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
       <link rel="stylesheet" href='<c:url value="/css/style.css"/>'/> 

        <style><%@include file="/css/style.css"%></style>


        <title>Home Page</title>
        
        
        
    <img class='img' src='../../images/home.jpg'>
    <style>
        html { 
            background-image: url("../../images/home.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
            height: 100%;
        }
    </style>
</head>

<body>
<body class="bg-full">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">School</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Главная</a></li>
            <li><a href="#">Наш университет</a></li>
            <li><a href="#">Электронный журнал</a></li>
            <li><a href="#">Студенты</a></li>
            <li><a href="#">Фотогалерея</a></li>
            <li><a href="#">Карьера</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
        <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" name="search">
            </div>
            <button type="submit" class="btn btn-default">Поиск</button>
        </form>
    </div>
</nav>

<div class="container">

</div>

<div class="container">

</div>


<div class="bg">
    <div class ="pokaz">
        <form action="allStudents" method="post">
            <input class="btn btn-primary" type="submit" value="Показать всех студентов">
        </form>

    </div>
</div>
</body>
</html>


К сообщению приложен файл. Размер - 17Kb
15 май 19, 14:13    [21885285]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
fallen2019,

Вот так просто файлом показывает

К сообщению приложен файл. Размер - 11Kb
15 май 19, 14:14    [21885287]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019,

        <link rel="stylesheet" href='<%=request.getContextPath()%>/css/style.css'>
       <link rel="stylesheet" href='<c:url value="/css/style.css"/>'/> 
        <style><%@include file="/css/style.css"%></style>


эти три вещи это у тебя одно и то же, оставь только первый вариант. Но проверь что вариант у тебя рабочий.
15 май 19, 14:19    [21885289]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
vas0,

Когда я оставил один стили пропали, а вот когда оставил эти две стили сработали но с фото так же не отображает
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" href='<%=request.getContextPath()%>/css/style.css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
       

        <style><%@include file="/css/style.css"%></style>
15 май 19, 14:22    [21885294]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019,

<img class='img' src='../../images/home.jpg'>


В секцию head img писать не надо, перенести его в body.
Дальше в строке браузера смотри где у тебя лежат картинки, http://localhost:8080/SchoolMaven/images/home.jpg
Потом открывай свою html в режиме "Посмотреть код страницы", смотри несоотвествие и исправляй.
15 май 19, 14:28    [21885309]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019
vas0,

Когда я оставил один стили пропали, а вот когда оставил эти две стили сработали но с фото так же не отображает
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link rel="stylesheet" href='<%=request.getContextPath()%>/css/style.css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
       

        <style><%@include file="/css/style.css"%></style>
значит в первом варианте что то неправильно по путям, и отрабатывает <%@include file ... но так обычно css к проекту не цепляют.
15 май 19, 14:30    [21885314]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
vas0,

http://localhost:8080/SchoolMaven/images/home.jpg

Когда перехожу выскакивает вот такая ошибка

К сообщению приложен файл. Размер - 12Kb
15 май 19, 14:31    [21885315]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019,

а блин, у тебя же папки css и images лежат в WEB-INF, а эта директория недоступна извне. Нужно перенести эти директории на тот же уровень что и WEB-INF
15 май 19, 14:35    [21885328]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
vas0,
Я же все правильно переместил? CSS у меня в WEB-INF. А картинка вне WEB-INF
<%@page contentType="text/html" pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <link href="../css/style.css" rel="stylesheet" type="text/css">
        <style><%@include file="/WEB-INF/css/style.css"%></style>

        
    

        <title>Home Page</title>

    </head>
  
         <body>
             <img class='img' src='../../images/home.jpg'>
         <style>
         html { 
             background-image: url(../../images/home.jpg);
             background-repeat: no-repeat;
             background-size: cover;
             position: relative;
             height: 100%;
         }
         </style>
        
         <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">School</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Главная</a></li>
                <li><a href="#">Наш университет</a></li>
                <li><a href="#">Электронный журнал</a></li>
                <li><a href="#">Студенты</a></li>
                <li><a href="#">Фотогалерея</a></li>
                <li><a href="#">Карьера</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" name="search">
                </div>
                <button type="submit" class="btn btn-default">Поиск</button>
            </form>
        </div>
    </nav>

    <div class="container">

    </div>

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


    <div class="bg">
        <div class ="pokaz">
            <form action="allStudents" method="post">
                 <input class="btn btn-primary" type="submit" value="Показать всех студентов">
            </form>

        </div>
    </div>
</body>
</html>
15 май 19, 14:46    [21885354]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
vas0
Member

Откуда: Таможенный союз (Россия, Казахстан)
Сообщений: 1210
fallen2019,

Ресурсы на которые ты ссылаешься из своих html должны быть доступны (не должны лежать WEB-INF). Обычно это css, images, javascript - директории.

http://localhost:8080/SchoolMaven/images/home.jpg если картинка у тебя в браузере отображается, то теперь смотри код страницы.

Такой вариант должен правильно отработать <img class='img' src='<%=request.getContextPath()%>/images/home.jpg'>
15 май 19, 14:56    [21885375]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
alex55555
Member

Откуда:
Сообщений: 2129
fallen2019
Я попробывал но все равно...

А зачем у тебя в html два body?
15 май 19, 17:31    [21885618]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
vas0,
Вот так правильно же написал
<%@page contentType="text/html" pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <link href="style.css" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <link href="../css/style.css" rel="stylesheet" type="text/css">
        <style><%@include file="/css/style.css"%></style>

        
    

        <title>Home Page</title>

    </head>
  
         <body>
             <img class='img' src='<%=request.getContextPath()%>/images/home.jpg'>
         <style>
         html { 
             background-image: url(/images/home.jpg);
             background-repeat: no-repeat;
             background-size: cover;
             position: relative;
             height: 100%;
         }
         </style>
        
         <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">School</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Главная</a></li>
                <li><a href="#">Наш университет</a></li>
                <li><a href="#">Электронный журнал</a></li>
                <li><a href="#">Студенты</a></li>
                <li><a href="#">Фотогалерея</a></li>
                <li><a href="#">Карьера</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
            <form class="navbar-form navbar-left" action="/action_page.php">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" name="search">
                </div>
                <button type="submit" class="btn btn-default">Поиск</button>
            </form>
        </div>
    </nav>

    <div class="container">

    </div>

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


    <div class="bg">
        <div class ="pokaz">
            <form action="allStudents" method="post">
                 <input class="btn btn-primary" type="submit" value="Показать всех студентов">
            </form>

        </div>
    </div>
</body>
</html>
16 май 19, 06:54    [21885815]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
SQL2008
Member

Откуда: Москва
Сообщений: 3951
alex55555
fallen2019
Я попробывал но все равно...

А зачем у тебя в html два body?

Один запасной! Если откажет первый.
16 май 19, 07:44    [21885829]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
SQL2008
Member

Откуда: Москва
Сообщений: 3951
<body>
             <img class='img' src='<%=request.getContextPath()%>/images/home.jpg'>
         <style>
         html { 
             background-image: url(/images/home.jpg);
             background-repeat: no-repeat;
             background-size: cover;
             position: relative;
             height: 100%;
         }
         </style>

А что сейчас модно определять стили в BODY?
Всегда делал это в HEAD... я отстал от жизни?
16 май 19, 07:50    [21885831]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
SQL2008,

Я в head попробовал тоже не получилось
16 май 19, 07:59    [21885836]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
Petro123
Member

Откуда: Загрузочный сектор Москвы (AutoPOI.ru)
Сообщений: 38643
fallen2019
SQL2008,

Я в head попробовал тоже не получилось

Еще раз. Сделай html файл без веб сервера рабочий.
16 май 19, 08:14    [21885840]     Ответить | Цитировать Сообщить модератору
 Re: Не могу найти в чем ошибка  [new]
fallen2019
Member

Откуда:
Сообщений: 212
Petro123,

Запустить его без томката?
16 май 19, 08:20    [21885843]     Ответить | Цитировать Сообщить модератору
Топик располагается на нескольких страницах: [1] 2   вперед  Ctrl      все
Все форумы / Java Ответить