Форум PHP программистов > вопрос по разрешению экрана

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: вопрос по разрешению экрана

Stas

11.08.2011 - 15:02

сайт писался на машине с разришением 1024х768 а при открытии на 1366х768 все смищяется в лево можно както создать чтоб на 1366х768 было все по центру
пробоал вот так


body {
  align:center;
  font-family: Georgia, Serif;
}

Спустя 15 минут, 54 секунды (11.08.2011 - 14:18) sebastjan написал(а):

Хорошо бы увидеть хотябы склет разметки.
Позиционировать по центру не проблемма, только бы увидеть что.

Спустя 20 минут, 15 секунд (11.08.2011 - 14:38) Stas написал(а):

примерно вот

#header_skin
{
position:absolute;
  overflow:hidden;
  left:2px;
  top:0px;
  width:1003px;
  height:181px;
}
#header_menu
 {
 position:absolute;
 left:604px;
 top:127px;
 width:396px;
 height:34px;
}
#header_menu a {
  font-size: 16px;
   color: #FFFFFF;
  text-align: right
}
#poisk_po_siteas
{
position:absolute;
overflow:hidden;
left:714px;
top:50px;
width:300px;
height:41px;
  color: #FFFFFF
}
#leftcontent {
  float: left;
  width: 180px;
  padding: 0px;
  margin: 0px;
  background-color: #D3D3D3
}
#content {
  margin-left: 205px;
  border: 1px dashed solid #FFFFFF;
  background: #FFFFFF;
  padding: 15px;

}

#mouse_out
 {
  text-align: center;
  width: 180px;
  background-color: #D64548;
  padding: 5px;
  margin: 0px;
}
#mouse_out a {
  font-size:14px;
  color: #FFFFFF
}
#cards_text
 {
   text-align: center;
  background: #D64548;
  color: #FFFFFF;
  font-size: 14pt
}
#footer_skin
{

  left:0px;
  top:0px;
  width:995px;
  height:51px;
}

вот тест

Спустя 8 минут, 36 секунд (11.08.2011 - 14:47) killer8080 написал(а):

Stas
начни с изучения html там в коде полный бардак, бедные браузеры, как они вообще это переваривают

Спустя 3 минуты, 14 секунд (11.08.2011 - 14:50) Stas написал(а):

в принципе это тест это не закнчено вопрос имено по этой теме

Спустя 8 минут, 48 секунд (11.08.2011 - 14:59) killer8080 написал(а):

документ html имеет строгую структуру. Первая строка - объявление доктайпа, далее тег <html></html>, внутри него соответственно теги <head></head> и <body></body>. Внутри head должны быть title, meta, link. Тело документа только в теге body. Открой исходник страницы и посмотри что там твориться :blink:

Конкретно по твоему вопросу, нужно в css прописать

html, body{
    width: 100%;
    height: 100%
}

Для главного контейнера страницы, прописать фиксированную ширину и margin: 0 auto

Спустя 16 часов, 59 минут, 47 секунд (12.08.2011 - 07:59) Stas написал(а):

вот css

#head
{
position:absolute;
overflow:hidden;
left:1px;
top:1px;

width:1000px;
height:180px;
}
#poisk
 {
 position:absolute;
 overflow:hidden;
 left:603px;
 top:47px;
 width:393px;
 height:40px;
}
#head_menu
{
  position:absolute;
  overflow:hidden;
  left:603px;
  top:98px;
  width:395px;
  height:64px;
}

вот index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="./style/art_general.css">
</head>
<body>
<div id="head">
 <img src="skin/head_baner.jpg" width="1003" height="181">
</div>

<div id="poisk">
поиск
</div>

<div id="head_menu">
menu
</div>


</body>
</html>

Спустя 3 часа, 6 минут, 51 секунда (12.08.2011 - 11:06) SerginhoLD написал(а):

в ручную позиционировать через position:absolute; это мягко говоря извращенство

попробуй в body написать так:

<div>
   тралала
</div>

а стили присвой такие

div {
  width:1000px;
  border:1px solid #666;
  margin:0px auto;
}

и посмотри что получится далее думаю поймешь

И обязательно избавься от своих position:absolute;

Спустя 13 минут, 16 секунд (12.08.2011 - 11:19) Stas написал(а):

а как быть с поиском и меню

Спустя 1 час, 19 минут, 58 секунд (12.08.2011 - 12:39) killer8080 написал(а):

Цитата (Stas @ 12.08.2011 - 11:19)

а как быть с поиском и меню

поиск и меню помести в блок head, а положение откорректируй отступами. Да и фон шапки нужно задавать через стили, а не втыкать картинку в блок, и с размерами по моему перебор. Картинка размером 1003x181 это круто. Попробуй так

#head
{
width:1000px;
height:180px;
margin: 0 auto;
background: url('/skin/head_baner.jpg') no-repeat;
}
#poisk
 {
 margin-left:603px;
 margin-top:47px;
 width:393px;
 height:40px;
}
#head_menu
{

  margin-left:603px;
  margin-top:11px;
  width:395px;
  height:64px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Главная</title>
<link rel="stylesheet" type="text/css" href="/style/art_general.css">
</head>
<body>
<div id="head">
    
    <div id="poisk">
    поиск
    </div>

    <div id="head_menu">
    menu
    </div>

</div>

</body>
</html>

Спустя 7 минут, 44 секунды (12.08.2011 - 12:46) Stas написал(а):

нет нормально вариантkiller8080 подощел только вот чтото шапку не отображает

Спустя 6 минут, 5 секунд (12.08.2011 - 12:53) Stas написал(а):

можит быть что шапка по исходному изображению 1030px и иза этого не отображает

Спустя 9 минут, 28 секунд (12.08.2011 - 13:02) killer8080 написал(а):

Цитата (Stas @ 12.08.2011 - 12:46)

только вот чтото шапку не отображает

проверь пути к картинке
может так

background: url('../skin/head_baner.jpg') no-repeat;

Спустя 4 минуты, 9 секунд (12.08.2011 - 13:06) Stas написал(а):

да я разобрался но вот картинка низко опущена

Спустя 6 минут, 45 секунд (12.08.2011 - 13:13) killer8080 написал(а):

Да я только что проверил, действительно какой то глюк с margin-top попробуй так

#head{
	width:1000px;
	height:133px;
	margin: 0 auto;
	padding-top: 47px;
	background: url('/skin/head_baner.jpg') no-repeat;
	clear: both;
}

#poisk{
	margin-left:603px;
	width:393px;
	height:40px;
}

#head_menu{
	margin-left:603px;
	margin-top:11px;
	width:395px;
	height:64px;
}

Спустя 43 секунды (12.08.2011 - 13:14) Stas написал(а):

ставлю margin-top:0px; в poisk то шапка нормально но вот как двигать

Спустя 3 минуты, 19 секунд (12.08.2011 - 13:17) killer8080 написал(а):

вместо маргин используй паддинг, только учитывай что высоту придётся пересчитывать

если у тебя опера, включи отображение границ блоков, так будет проще отлаживать

меню Вид/Стиль/Видимый контур у элементов

Спустя 2 минуты, 43 секунды (12.08.2011 - 13:20) Stas написал(а):

все отлично вопрос такой это будет работать на всех разрешениях манитора

Спустя 3 минуты, 7 секунд (12.08.2011 - 13:23) killer8080 написал(а):

разрешение тут не причём там же жестко заданы размеры блоков.

Спустя 2 минуты, 27 секунд (12.08.2011 - 13:25) Stas написал(а):

у меня 1366х768 стоит по центру страници
а вот на 1024х768 как

Спустя 10 минут, 21 секунда (12.08.2011 - 13:36) killer8080 написал(а):

Цитата (Stas @ 12.08.2011 - 13:25)

а вот на 1024х768 как

так же, а если разрешение экрана будет меньше, появятся скролы

Спустя 2 минуты, 57 секунд (12.08.2011 - 13:39) Stas написал(а):

вот я там ссылочу выкладывал будут фото не большие их также как меню отступоми делать

Спустя 39 минут, 19 секунд (12.08.2011 - 14:18) Stas написал(а):

правельно я понял я создаю стиль

#generl_content
{
width:1000px;
margin: 0 auto;
clear: both;
}

и соответствено в нем создаю стили меню и контента

Быстрый ответ:

Здесь расположена полная версия этой страницы.