Непослушные дивы

0

Я создаю главную страницу, и в настоящее время я создаю баннер со ссылкой на него. Я хочу, чтобы баннер и панель ссылок содержались в div с именем # content-top. Баннер будет иметь ширину 1000 пикселей и высоту 100 пикселей, а ссылка на нее должна быть той же ширины, но высотой 40 пикселей. Баннер будет состоять из двух div (каждый 500px широкий и 100px высокий), и оба будут иметь фоновые изображения. Линия ссылок будет состоять из шести разделов, каждая из которых имеет ширину 16,6%.

Это соответствующий код:

CSS:

        #content-top{
                     border: 1px solid #00FF00;
                     position: relative;
                     width: 1000px;
                     height: 140px;
                     }

                     #logotype-banner{
                             border: 1px solid #FF0000;
                             position: relative;
                             width: 500px;
                             height: 100px;
                             top: 0px;
                             left: 0px;
                             background-image: url(../images/logotype1.jpg);
                             background-repeat: no-repeat ;
                             }

                     #banner{
                             border: 1px solid #0000FF;
                             position: relative;
                             width: 500px;
                             height: 100px;
                             top: 0px;
                             left: 500px;
                             background-image: url(../images/banner1.gif);
                             background-image: repeat-x ;
                             }

                     #linkbar{
                             border: 1px solid #000000;
                             position: relative;
                             width: 1000px;
                             height: 40px;
                             top: 140px;
                             left: 0px;
                             }

                             #element-linkbar{
                                     position: relative;
                                     left: 0px;
                                     display:block;
                                     float: left;
                                     width: 16.66666666666666666666666666666666666666666666666666666666666666666666%;
                                     height: 40px;
                                     background-image: url(../images/linkbar1.gif);
                                     background-image: repeat-x ;
                                     text-align: center;
                                     }

HTML:

                     <div id="content-top">

                             <div id="logotype-banner">

                             </div>

                             <div id="banner">

                             </div>

                             <div id="linkbar">

                                     <font size="-1">

                                     <div id="element-linkbar">
                                     <a href="index.htm" style="display:block; height:100%; width:100%;"><br>Start</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="gymnasiekurser/gymnasiekurser.html" style="display:block; height:100%; width:100%;"><br>Gymnasiekurser</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="språkkurser-vuxna/språkkurser-vuxna.html" style="display:block; height:100%; width:100%;"><br>Språkkurser vuxna</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="språkkurser-företag/språkkurser-företag.html" style="display:block; height:100%; width:100%;"><br>Språkkurser företag</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="lärare/lärare.html" style="display:block; height:100%; width:100%;"><br>Lärare</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="omoss/omoss.html" style="display:block; height:100%; width:100%;"><br>Om oss</a>
                                     </div>

                                     </font>

                             </div>

                     </div> 

Моя проблема в том, что две из полей div не будут идти туда, куда я хочу, чтобы они ушли, у одной не будет правильной ширины 500 пикселей, а фоновое изображение не появится в одном из них.

Вот как он выглядит в настоящее время (границы добавлены, чтобы увидеть, где находятся поля div):

образ

Надеясь на дальнейшую помощь, я напишу свой полный код здесь:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

     <head>

             <meta name="author" content="Henric Hintze">

             <meta name="editor" content="html-editor phase 5">

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

             <meta name="norton-safeweb-site-verification" content="h60wcavnem8s78fz9cb-8opnk4-0gnbrj96984njpvzwfznwsibjtxcjygfcglwa7x9vz1m61p6ht9uathveehck7zyeyjz5abm5bqdwvpftsmuu-vqc2dz4r4koxxo9" />

             <script type="text/javascript">

                       var _gaq = _gaq || [];
                       _gaq.push(['_setAccount', 'UA-36568939-1']);
                       _gaq.push(['_trackPageview']);

                       (function() {
                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                       })();

             </script>

                     <title>

                             Kunskapsproffsen

                     </title>

     </head>

     <body>

             <div id="content">

                     <div id="content-top">

                             <div id="logotype-banner">

                             </div>

                             <div id="banner">

                             </div>

                             <div id="linkbar">

                                     <font size="-1">

                                     <div id="element-linkbar">
                                     <a href="index.htm" style="display:block; height:100%; width:100%;">Start</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="gymnasiekurser/gymnasiekurser.html" style="display:block; height:100%; width:100%;">Gymnasiekurser</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="språkkurser-vuxna/språkkurser-vuxna.html" style="display:block; height:100%; width:100%;">Språkkurser vuxna</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="språkkurser-företag/språkkurser-företag.html" style="display:block; height:100%; width:100%;">Språkkurser företag</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="lärare/lärare.html" style="display:block; height:100%; width:100%;">Lärare</a>
                                     </div>

                                     <div id="element-linkbar">
                                     <a href="omoss/omoss.html" style="display:block; height:100%; width:100%;">Om oss</a>
                                     </div>

                                     </font>

                             </div>

                     </div>

                     <div id="content-bot">

                             <div id="left-column">
                             </div>

                             <div id="center-column">
                             </div>

                             <div id="right-column">
                             </div>

                     </div>

             </div>

     </body>

CSS:

a:link {text-decoration: none; color:#FFFFFF;}
a:visited {text-decoration: none; color:#FFFFFF;}
a:hover {background-color: #8FF0F1; text-decoration: none; color: #000000;}
a:active {background-color: #8FF0F1; text-decoration: none; color: #000000;}

body{
     position: relative;
     background-color: #DADCDC;
     font-family:Verdana; Arial; sans-serif;
     font-size: small;
     font-color:#444444;
     min-width: 1200px;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     }

     #content{
             position: relative;
             background-color: #FFFFFF;
             width: 1000px;
             margin-left: auto;
             margin-right: auto;
             }

             #content-top{
                     position: relative;
                     width: 1000px;
                     height: 140px;
                     }

                     #logotype-banner{
                             position: relative;
                             float: left;
                             width: 500px;
                             height: 100px;
                             background-image: url(../images/logotype1.jpg);
                             background-repeat: no-repeat ;
                             }

                     #banner{
                             position: relative;
                             float: right;
                             width: 500px;
                             height: 100px;
                             background-image: url(../images/banner1.gif);
                             background-image: repeat-x ;
                             }

                     #linkbar{
                             position: relative;
                             clear: both;
                             width: 1000px;
                             height: 40px;
                             }

                             #element-linkbar{
                                     position: relative;
                                     left: 0px;
                                     display: block;
                                     float: left;
                                     width: 16.66666666666666666666666666666666666666666666666666666666666666666666%;
                                     height: 40px;
                                     background-image: url(../images/linkbar1.gif);
                                     background-image: repeat-x ;
                                     text-align: center;
                                     line-height: 3;
                                     }


             #content-bot{
                     position: relative;
                     width: 1000px;
                     min-height: 1800px;
                     }

                             #left-column{
                                     position: relative;
                                     width: 200px;
                                     left: 0px;
                                     }

                                     #greybar-left-column{
                                             position: relative;
                                             width: 180px;
                                             height: 1px;
                                             top: 40px;
                                             left: 13px;
                                             background-image: url(../images/greypixel1.gif);
                                             background-image: repeat-x ;
                                             }

                             #center-column{
                                     position: relative;
                                     width: 600px;
                                     left: 200px;
                                     }

                                     #greybar-center-column{
                                             position: relative;
                                             width:
                                             height: 1px;
                                             top: 40px;
                                             left:
                                             right:
                                             background-image: url(../images/greypixel1.gif);
                                             background-image: repeat-x ;
                                             }

                             #right-column{
                                     position: relative;
                                     width: 200px;
                                     left: 800px;
                                     }

                                     #greybar-right-column{
                                             position: relative;
                                             width: 220px;
                                             height: 1px;
                                             top: 40px;
                                             right: 20px;
                                             background-image: url(../images/greypixel1.gif);
                                             background-image: repeat-x ;
                                             }

Изображение результата без границ

Теги:

2 ответа

0
Лучший ответ

ИЗМЕНИТЬ ПОСЛЕ ПОЛНОГО КОДА

ОК... вот что вы хотите: http://jsfiddle.net/disinfor/Fb9E7/

У вас был код в вашем HTML, который вам не нужен (font size), и вам нужно прекратить использовать left:px для размещения relative элементов. Это работает для absolute позиционирования - не relative.

Кроме того, для ваших стилей CSS вашего основного body вас были точки с запятой (;) вместо запятых (,) после ваших шрифтов. Это также остановит некоторые стили CSS.

  • 0
    Спасибо за ваш ответ, но странная вещь в том, что даже если я скопирую ваш код и удалю мой вместо внесения изменений в мой, у меня все еще будет та же проблема. :( (Кстати, я только что добавил границы, чтобы вы могли видеть, где находятся div-ы (я собирался удалить их позже), но проблема остается той же, даже если вы удалите их.)
  • 0
    Тогда у вас есть что-то еще в вашем коде, вызывающее проблему, как вы можете видеть по скрипке, которая работает. Вот обновленная скрипка без границ: jsfiddle.net/disinfor/Ec44f/1
Показать ещё 5 комментариев
0

Попробуй это

div {
  box-sizing: border-box;
}
  • 0
    Ничего заметного не происходит.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню