1. дома
  2. Вопрос и ответ
  3. Как управлять положением объектов

Как управлять положением объектов

2012-05-13 4 views
0

Я пытаюсь узнать, как использовать шаблоны на веб-страницах. Благодаря чему-то, что я нашел в stackoverflow, у меня есть основы. Теперь я хочу некоторый контроль над форматированием. Я нашел пример, который выглядит хорошо, поэтому я решил использовать его, чтобы что-то узнать. Я покажу 2 изображения, так что проблема будет ясно:Как управлять положением объектов

original my attempt

Я не очень забочусь о самой форме. Это просто пример того, чтобы чему-то научиться. Есть несколько вещей, которые я хотел бы контролировать: 1) Обратите внимание на оригинал, что название компании удобно размещено в отношении изображения jpeg. В моем случае он застрял слева. 2) В оригинале, если я расширяю окно Firefox, форма остается центрированной, и с обеих сторон есть пустое пространство. В моем случае элементы управления Primefaces принимают все окно, и они слишком высоки, отсекая часть изображения jpeg.

Я видел оригинал использует style.css, поэтому я попытался скопировать и вставить разные элементы, но ничего не дал мне контроль, который я ищу. Я покажу единственное, что в style.css, который делает разницу:

body { 
margin: 0; 
padding: 0; 
background: #fff url(images/header.jpg) no-repeat center top; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #7c7c7c; 
}

Это начало оригинальной формы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Xhtml18</title> 
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head> 
<body> 
<div id="wrapper"> 
<div id="header-wrapper"> 
    <div id="header"> 
     <div id="logo"> 
      <h1><a href="#">Company <span>Name</span></a></h1> 
      <p>Nice Slogan Goes Here</p> 
     </div> 
     <div id="menu"> 
      <ul> 
       <li class="current_page_item"><a href="#">Homepage</a></li> 
       <li><a href="#">ABOUT US</a></li> 
       <li><a href="#">SERVICES</a></li> 
       <li><a href="#">SUPPORT</a></li> 
       <li><a href="#">CONTACT</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

Я попытался положить во всех внутренних определениях, но они сделали нет разницы. У меня есть моя версия гораздо проще

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:h="http://java.sun.com/jsf/html"> 
<h:head> 
<title>Master template</title> 
<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</h:head> 
<h:body> 
<div id="logo"> 
    <h1><a href="#">Company <span>Name</span></a></h1> 
    <p>Nice Slogan Goes Here</p> 
</div> 
<ui:insert name="AreaOne">Default text</ui:insert> 
</h:body> 
</html>

Наконец, в моем XHTML файл решающего шага, который позволяет мне сделать шаблонный

<h:body> 
<ui:composition template="master.xhtml"> 
    <ui:define name="AreaOne">

Так что основная точка шаблонов, кажется, работает, просто мне нужно, Еще один контроль над ним. Извините за длинное сообщение, но я думаю, что мне нужно все это, чтобы объяснить проблему.

EDIT: Я не знаю, как добавить файл по себе, так что я по буквам, как код

body { 
margin: 0; 
padding: 0; 
background: #fff url(images/header.jpg) no-repeat center top; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #7c7c7c; 
} 

h1, h2, h3 { 
margin: 0; 
padding: 0; 
font-weight: normal; 
color: #000; 
} 

h1 { 
font-size: 2em; 
} 

h2 { 
font-size: 2.8em; 
} 

h3 { 
font-size: 1.6em; 
} 

p, ul, ol { 
margin-top: 0; 
line-height: 180%; 
} 

ul, ol { 
} 

a { 
text-decoration: none; 
color: #419725; 
} 

a:hover { 
} 

#wrapper { 
margin: 0 auto; 
padding: 0; 
} 

/* Header */ 

#header-wrapper { 
height: 234px; 


} 

#header { 
width: 950px; 
margin: 0 auto; 
padding: 0px 0px 0px 30px; 
} 

/* Logo */ 

#logo { 
float: left; 
width: 500px; 
margin: 0px; 
padding: 30px 0px 0px 60px; 
color: #f7f7f7; 

} 

#logo h1, #logo p { 
} 

#logo h1 { 
padding: 0px 0px 0px 0px; 
letter-spacing: -1px; 
font-size: 3.8em; 
background: redc; 
} 

#logo h1 span { 
color: #efc527; 
} 

#logo p { 
margin: 0; 
padding: 0px 0px 0px 0px; 
font-size: 16px; 
color: #fff; 
} 

#logo a { 
border: none; 
background: none; 
text-decoration: none; 
color: #f7f7f7; 
} 

/* Search */ 

#search { 
float: left; 
width: 280px; 
height: 40px; 
padding: 0px; 
} 

#search form { 
height: 40px; 
margin: 0; 
padding: 0px 0 0 10px; 
} 

#search fieldset { 
margin: 0; 
padding: 0; 
border: none; 
} 

#search-text { 
width: 170px; 
padding: 6px 5px 2px 5px; 
border: 1px solid #DEDEDE; 
background: #FFFFFF; 
text-transform: lowercase; 
font: normal 11px Arial, Helvetica, sans-serif; 
color: #5D781D; 
} 

#search-submit { 
width: 50px; 
height: 22px; 
border: none; 
background: #e4e4e4; 
color: #171d21; 
} 

/* Menu */ 

#menu { 
float: right; 
width: 950px; 
height: 50px; 
margin: 0 auto; 
padding: 0; 
} 

#menu ul { 
float: left; 
margin: 0; 
padding: 74px 0px 0px 0px; 
list-style: none; 
line-height: normal; 
} 

#menu li { 
float: left; 
} 

#menu a { 
display: block; 
margin-right: 1px; 
padding: 16px 20px 15px 20px; 
text-decoration: none; 
text-align: center; 
text-transform: uppercase; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #fff; 
border: none; 
} 

#menu a:hover, #menu .current_page_item a { 
background: #131618; 
text-decoration: none; 
color: #FFFFFF; 
} 

#menu .current_page_item a { 
} 

/* Page */ 

#page { 
width: 990px; 
margin: 0 auto; 
padding: 0px 0px 0px 0px; 
background: url(images/img03.jpg) repeat-y left top; 
} 

#page-bgtop { 
padding: 40px 0px 20px 0px; 
background: url(images/img02.jpg) no-repeat left top; 
} 
/* Content */ 

#content { 
float: left; 
width: 720px; 
padding: 0px 0px 0px 0px; 
} 

.post { 
margin-bottom: 40px; 
border-bottom: 1px dotted #E7E2DC; 
margin-right: 10px; 
} 

.post .title { 
height: 41px; 
padding: 7px 0px 0px 30px; 
letter-spacing: -.5px; 
} 

.post .title a { 
border: none; 
color: #000; 
} 

.post .meta { 
margin-bottom: 30px; 
padding: 0px 30px 0px 30px; 
text-align: left; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 13px; 
font-weight: bold; 
font-style: italic; 
} 

.post .meta .date { 
float: left; 
} 

.post .meta .posted { 
float: right; 
} 

.post .meta a { 
} 

.post .entry { 
padding: 0px 30px 20px 30px; 
padding-bottom: 20px; 
text-align: justify; 
} 

.links { 
padding-top: 20px; 
font-size: 12px; 
font-weight: bold; 
} 

/* Sidebar */ 

#sidebar { 
float: right; 
width: 240px; 
margin: 0px; 
padding: 0px 20px 0px 10px; 
color: #fff; 
} 

#sidebar ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

#sidebar li { 
margin: 0; 
padding: 0; 
} 

#sidebar li ul { 
margin: 0px 0px; 
padding-bottom: 30px; 
} 

#sidebar li li { 
line-height: 35px; 
border-bottom: 1px dotted #E7E2DC; 
margin: 0px 30px; 
border-left: none; 
} 

#sidebar li li span { 
display: block; 
margin-top: -20px; 
padding: 0; 
font-size: 11px; 
font-style: italic; 
} 

#sidebar li li a { 
padding: 0px 0px 0px 15px; 
} 

#sidebar h2 { 
height: 38px; 
padding-left: 30px; 
letter-spacing: -.5px; 
font-size: 1.8em; 
color: #fff; 
} 

#sidebar p { 
margin: 0 0px; 
padding: 0px 30px 20px 30px; 
text-align: justify; 
} 

#sidebar a { 
border: none; 
color: #efc527; 
} 

#sidebar a:hover { 
text-decoration: underline; 
} 

/* Calendar */ 

#calendar { 
} 

#calendar_wrap { 
padding: 20px; 
} 

#calendar table { 
width: 100%; 
} 

#calendar tbody td { 
text-align: center; 
} 

#calendar #next { 
text-align: right; 
} 

/* Footer */ 

#footer { 
height: 50px; 
margin: 0 auto; 
padding: 0px 0 30px 0; 
font-family: Arial, Helvetica, sans-serif; 
border-top: 5px solid #4ac221; 
width: 990px; 
background: #262626; 
} 

#footer p { 
margin: 0; 
padding-top: 40px; 
line-height: normal; 
font-size: 9px; 
text-transform: uppercase; 
text-align: center; 
color: #fff; 
} 

#footer a { 
color: #fff; 
}

источник

2012-05-13 Ilan Tal

ответ

1

Ваш brackground имеет атрибут center, поэтому у вас есть ваш логотип в центре и текст не на нем.

body { 
margin: 0; 
padding: 0; 
background: #fff url(images/header.jpg) no-repeat center top; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
color: #7c7c7c; 
}

Вы можете удалить атрибут center или вы можете перемещать текст, делая что-то подобное (только пример!)

<div align="center"><h1><a href="#">Company <span>Name</span></a></h1></div>

Тогда, чтобы остановить ваши primefaces' компоненты AUTORESIZE, вы» вам нужно переопределить значение по умолчанию css.

Я предполагаю, что вы используете PanelGrid, так что вы можете попробовать с

<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>

Я не уверен, что !important требуется, но в основном вы должны дать фиксированную ширину компонента чтобы остановить его от автоматического изменения размера

EDIT:

Если вы хотите, чтобы применить стиль к каждому p:panelGrid компоненту, вы должны рассмотреть перекрывая весь класс CSS.

Просто посмотрите здесь, чтобы узнать имена классов CSS каждого компонента primefaces:

http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf

источник

2012-05-13 09:54:21 StepTNT

+0

Я думаю выравнивание текста как центр, но вы можете видеть, что в оригинале он не по центру , Как-то автор поставил его на заданное смещение слева от jpeg. Я не смог понять, как он это сделал. Вы правы в моем использовании PanelGrid. Я попытаюсь сыграть с этим параллельно, и я посмотрю вашу ссылку, чтобы узнать, что я могу извлечь из нее. –

+0

Если вы хотите, чтобы сделать это, как, например, удалить 'center' атрибут из КАС, логотипа и попробовать что-то вроде этого: ' '

играть с этим' 5% 'значение и попробуйте также с помощью' padding- left' вместо 'margin-left' – StepTNT

+0

Это не критично для исправления. Я просто подумал, что это то, что все, кроме меня, знают, как это сделать. В исходном примере это достаточно умно, чтобы знать, чтобы компенсировать текст относительно изображения. Оба поля - левое и padding-left вычисляются относительно края страницы. Как-то страница знает, какой размер jpeg-изображения есть, и все установлено на это значение. Если это не то, что знают все, кроме меня, я могу забыть об этом. Существует достаточная мощность в сетях, чтобы придумать другое решение. –

 Смежные вопросы

  • Нет связанных вопросов^_^