трабл таблиц

mashur · March 26, 2012

Доброго всем дня) я тут новенький и зеленый в хтмле тоже... прошу сильно не бить, но голову уже сломать успел.

суть такова делаю себе новый сайт, ровняю все по центру, что б на разных мониторах всегда сайт центрировался, т.к. в основном там будет галерея... бэкграунд сделал, а вот навигация (которую все же решил делать таблицей) хромает. она должна быть как на рисунке, а становиться по центру. как можно сместить вверх относительно центра?

mashur · March 26, 2012

вопрос отпал))) полтора дня колупался в инете))) в стиле таблицы прописал position: relative; top: -272px; и поднял навигацию вверх...

тогда вопрос следующий))) в таблице не могу выставить столбец нормально, хотя вроде все делаю правильно...

<TABLE width="1000" cellspacing="0" cellpadding="0" border="0" align="center">
            <TR>
                <TD><a href="#" target=_blank class="rollover"></a></TD>
                <TD><a href="#" target=_blank class="rollover2"></a></TD>
                <TD><a href="#" target=_blank class="rollover3"></a></TD>
                <TD><a href="#" target=_blank class="rollover4"></a></TD>
                <TD><a href="#" target=_blank class="rollover5"></a></TD>
                <TD><a href="#" target=_blank class="rollover6"></a></TD>
                <TD><a href="#" target=_blank class="rollover7"></a></TD>
		</TR>
		 <TR>
		  <TD style="padding: 0px 0px; margin: 0px 0px"><img src="center.jpg" width="1000" height="510" border=0</TD>
		 </TR>
	</TABLE>

а вот стиль таблицы

<style type="text/css">
   TABLE {
    width: 1000px; 
    height: 100%; 
	position: relative; top: -272px;
   } 
  </style>

NeoXidizer · March 26, 2012

используй теги по назначению - таблицы даны для табличных данных (как в экселе), а не для того, чтобы меню клепать

mashur · March 26, 2012

я понимаю что многое делаю не так и всегда можно сделать что-то по-другому и в лучшую сторону...

wildhind · March 26, 2012

а можно ли посмотреть на то, что уже сделано?

mashur · March 27, 2012

ща покажу... вобщем со многим разобрался, но галерея отображается как-будто 75% 75%, если left и top ставлю 25%, то отображается нормально, но при приближении-отдалении оно и масштабируется врознь с сайтом...

выложу что получается и код хтмл и цсс

.galleria-container {
position:absolute; 
left:50%; 
top:50%; 
    overflow: hidden;
    background: #363636;
}

        <script>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 1000,
                height: 448
            });
        </script>

mashur · March 28, 2012

ребятки, помогите)))

я сам дизайнер и могу в ответ помочь - услуга за услугу))) слово сдержу)

Alma · March 28, 2012

ща покажу... вобщем со многим разобрался, но галерея отображается как-будто 75% 75%, если left и top ставлю 25%, то отображается нормально, но при приближении-отдалении оно и масштабируется врознь с сайтом...
выложу что получается и код хтмл и цсс
.galleria-container {
  position:absolute; 
  left:50%; 
  top:50%; 
  overflow: hidden;
  background: #363636;
}
        <script>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 1000,
                height: 448
            });
        </script>

1. относительно чего у вас позиционируется .galleria-container, т.е. есть родитель у этого блока с position:relative; ?

2. для того что бы спозиционировать #gallery" по центру достаточно написать margin:0 auto;

3. .galleria-container позиционировать относительно верха окна браузера top:50%; не есть верным решением. почему нельзя задать просто верхний отступ?

выложите краткий скелет вашего хтмл (только основные блоки, без внутренних текстов и картинок) и цсс для них.

mashur · March 28, 2012

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

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

margin:0 auto вставлял везде где только мог - не помогло)

итак код:

<!DOCTYPE>
<html>
<head>
 <title>mashur design</title>
    <meta http-equiv="content-type" charset="windows-1251"> 
    <meta http-equiv="Content-Type" content="text/html;>
     content="векторная графика, растровая графика, портфолио, дизайн, вэб-дизайн"> 

<link rel="stylesheet" type="text/css" href="style.css" />  


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
        <script src="galleria/galleria-1.2.6.min.js"></script>



<style type="text/css">
   TABLE {
    width: 1000px; 
    height: 100%; 
	position: relative; top: -244px;
   } 
  </style>


</head>
<body>
<div id="main">
</div>
	<TABLE width="1000" cellspacing="0" cellpadding="0" border="0" align="center">
            <TR>
                <TH><a href="#" target=_blank class="rollover"></a></TH>
                <TH><a href="#" target=_blank class="rollover2"></a></TH>
                <TH><a href="#" target=_blank class="rollover3"></a></TH>
                <TH><a href="#" target=_blank class="rollover4"></a></TH>
                <TH><a href="#" target=_blank class="rollover5"></a></TH>
                <TH><a href="#" target=_blank class="rollover6"></a></TH>
                <TH><a href="#" target=_blank class="rollover7"></a></TH>
		 </TR>
	</TABLE>



<div id="gallery">
            <img src="images/1.jpg">
            ...............
        </div>
        <script>
            Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
            $("#gallery").galleria({
                width: 1000,
                height: 448
            });
        </script>


</body>
</html>

и цсс галереи

/*
 * Galleria Classic Theme
 * Copyright (c) 2010, Aino
 * Licensed under the MIT license.
 */

.galleria-container {
position:absolute; 
left:50%; 
top:50%; 
    overflow: hidden;
    background: #363636;
}
.galleria-container img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.galleria-stage {
    position: absolute;
    top: 0px;
    bottom: 53px;
    left: 10px;
    right: 10px;
    overflow:hidden;
}
.galleria-thumbnails-container {
    height: 50px;
    bottom: 0;
    position: absolute;
    left: 10px;
    right: 10px;
    z-index: 2;
}
.galleria-carousel .galleria-thumbnails-list {
    margin-left: 30px;
    margin-right: 30px;
}
...........

код длинный, не знаю есть ли смысл его выкладывать, может там что-то нужное и есть, но вряд ли...

на всякий случай мой цсс

@charset "utf-8";
/* CSS Document */

HTML {
    background: #282828 url(line.jpg) repeat-x center;
    height: 100%;
   }


body{
background: url(line2.jpg) no-repeat center center;
    margin: 0;
    height: 100%;

   }
   #main {
    padding: 0px 0px;
   }  




   a.rollover {
    background: url(1.jpg); 
    display: block;
    width: 143px; 
    height: 35px; 
   }
   a.rollover:hover {
    background-position: 0 -35px;
   }
.............

Alma · March 28, 2012

.galleria-container не увидела этот элемент в коде хтмл

а для этого <div id="gallery"> нет цсс

вы можете свой сайт выложить где-то в доступе, что бы можно было увидеть весь код?

попробйте вот так сделать:


.galleria-container {
  position:absolute; 
  left:50%; 
  top:50%;
  margin:-50% 0 0 -50%;
  overflow: hidden;
  background: #363636;
}

Edited March 28, 2012 by Alma

mashur · March 28, 2012

margin:-50% 0 0 -50%;

не вышло( галерея вообще пропала(

что касается <div id="gallery">, то делал все строго как указано в установке самой галереи... тоже обратил внимание что в цсс нигде не прописано...

вот ссылка на скачивание файла: http://us.ua/686810/

пока только две страницы - хоум и вектор. в хоум галереи нет. они применяется только для вектора и остальных (которые по аналогии создам потом)

Alma · March 28, 2012

у вас очень не правильно построенная структура хтмл.

логотип лучше вставить картинкой. футер тоже отделить от фона.

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

с таблицы убрать top: -244px; ну и еще много чего.

зачем вам, например пустой <div id="main">...</div> ?

вобщем меняйте хтмл и стили.

mashur · March 28, 2012

а как поставить размер окна? и что такое фаербег?)))

mashur · March 28, 2012

и что в итоге делать с галереей?

mashur · March 29, 2012

ребятки, не забывайте обо мне((( нуждаюсь в подсказке, взамен готов предложить услугу дизайна... :facepalmxd:

Alma · March 29, 2012

пробуй

твоя папка

Edited March 29, 2012 by Alma

mashur · March 29, 2012

УУУУУУУ, круто))) правда немног не так как я себе думал, но там уже доделаю) ОГРОМНЕЙШЕЕ (!!!!!!!) спасибо))) проси что хочешь)))

Sign In

трабл таблиц

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information