Код HTML Styling не работает в файле JSP

Question

Код HTML Styling не работает в файле JSP

0

Я использую Eclipse Kepler для создания веб-приложения и пытаюсь получить мои файлы jsp, разработанные до начала моей работы. Когда я создаю следующий код в качестве базового html файла, его можно открыть в браузере с отличным дизайном. Но когда я пишу этот код в файле jsp с дополнительным

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

как первые две строки, файл теряет весь свой позиционный стиль. Если вы запустите код в jsp, вы заметите, что границы и окраска ссылок остаются неизменными, но все позиционируется в одном месте.

Кто-нибудь знает, как справиться с этим? Спасибо.

<html>
<head>
<title>Home</title>

<style>
body {
background-image: url(Images/whitebg.jpg);
background-repeat: no-repeat;
background-size: 100%;
}

#container {
width: 900px;
margin: 0 auto;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

#header img {
position: absolute;
top: 80;
left: 72;
width: 200;
height: 50;
}

#container a:visited {
color: blue;
}

#container a:hover {
color: red;
}

#welcome {
position: absolute;
top: 20;
right: 100;
}

#logout {
position: absolute;
top: 20;
right: 20;
width: 50px;
height:25px;
}

#links {
position: absolute;
top: 200;
left: 72;
}

#links ul {
list-style-type: none;
padding: 5 10 5 10;
border: 2px solid red;
border-radius: 10px;
}

#links li {
padding: 10 0 25 0;
}

#feed {
position: absolute;
top: 100;
left: 400;
width: 800px;
height: 400px;
}

#feedtext {
width:800px;
height:400px;
overflow: scroll;
}
</style>
</head>

<body>

<div id='container'>

<div id='header'>
    <img src='Images/mPowerlogo.jpg'/>
</div>

<div id='welcome'>
    Welcome, User1
</div>

<div id='logout'>
    <a href=''>Logout</a>
</div>

<div id='links'>
    <ul>
    <li><a href=''>Timecard Management</a></li>
    <li><a href=''>User Management</a></li>
    <li><a href=''>Customer Management</a></li>
    <li><a href=''>Admin</a></li>
    <li><a href=''>Reports</a></li>
        </ul>
</div>

<div id='feed'>
    <p>Recent Activity:</p>
    <textarea id='feedtext' readonly>

    </textarea>
</div>

</div>

Dan McNamara 18 дек. 2013, в 18:19

Источник

0

Что вы видите, если проверяете элементы с помощью инспектора элементов из Google Chrome (F12) ???
Rafa Romero 18 дек. 2013, в 16:26
0

Я не знаю, asp, но это как-то связано с language='java' ?
Albzi 18 дек. 2013, в 16:29

Теги:

java

html

css

jsp

eclipse

2 ответа

Ещё вопросы

Что вы видите, если проверяете элементы с помощью инспектора элементов из Google Chrome (F12) ???
Я не знаю, asp, но это как-то связано с language='java' ?

Joop Eggen · Answer 1 · 2013-12-18T15-07-00.000Z

Измените позиции, отличные от 0, чтобы приклеить к нему "px".

top: 20px;

Или удалите DOCTYPE, поскольку для этого требуется, чтобы HTML/CSS считался правильным (хотя это не так).

Совет. Также вы можете использовать "Windows-1252" в Java. Браузеры будут интерпретировать ISO-8859-1 как Windows-1252 (даже на Mac и Linux). И будут присутствовать некоторые специальные символы, такие как запятые цитаты, которые так любят MS Word. HTML-5 делает эту скрытую функциональность официальной спецификацией.

Бог ловит на px, поэтому в первой версии он просто работает в режиме некоторых причуд, но он не будет работать в HTML 5, 4 или любом другом «правильном» режиме, кстати: я не видел этого ответа при написании своей версии
Подождите, где я добавляю эти 20px? Мой контейнер на полях?
или вы просто имеете в виду, что все операторы позиционного пикселя требуют «px» после него?
Я понимаю, что вы написали сейчас. Это сработало. Я был сбит с толку, потому что отсутствие «px» сработало бы, если бы я вызывал этот стиль из сервлета, и он работал как основной html, поэтому я решил, что это должно быть что-то другое. Большое спасибо.

bartosz.r · Answer 2 · 2013-12-18T15-16-00.000Z

С линией <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> вы меняете версию html из то, что, вероятно, будет проанализировано как 5 (без doctype, вы в конечном итоге используете какой-то режим quirks, который даже работает с вашим стилем, который отсутствует px), до 4.01 Transitional. И что произойдет, когда вы это сделаете. Разная версия - разные результаты.

Вы должны решить, какую версию вы хотите использовать (если html 5 - затем используйте <!DOCTYPE html>). Также я предлагаю использовать UTF не 8859-1 (но это вариант).

Попробуйте изменить кодировку в этой строке <%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>.

Я просто изменил <! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " w3.org/TR/html4/loose.dtd "> на <! DOCTYPE html>, и это ничего не изменило. При изменении кодировки вы имеете в виду замену каждого «ISO-8859-1» на «UTF-8» или «UTF», или что бы это ни было?
@DanMcNamara, пожалуйста, посмотрите ответ Joop Eggen, он прав, что главная проблема - неправильный стиль - отсутствующий px