Вопрос новичка, о CSS+DIV верстке - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - Вопрос новичка, о CSS+DIV верстке (http://forum.oszone.net/showthread.php?t=129764)

Вопрос новичка, о CSS+DIV верстке

Добрый день, ну или вечек, кому как нравится :-)
Вопрос такой: вохможно ли такое реализовать с помощью CSS и DIV ,если да то как? Например есть 3 элемента, возможно ли их разместить рядом др с другом, чтобы первый элемент находился на 25% от левого края, третий на 25 проц от правого края, а второй по середине между первым и вторым и занимал все оставшееся пространство между ними.
PS: Пытался такое реализовать, но никак не выходит чтобы элемен занимал все пространство между 1 и 2 элементами, и не выходил за их границы.

Код:

<html>

<head>

<style type="text/css">

#left, #right {

float:left;

width:25%;

background:black;

}

#center {

width:50%;

background:blue;

float:left;

}

</style>

</head>

<body>

<div id="left">1</div><div id="center">2</div><div id="right">3        </div>

</body>

Результат здесь
http://djone.com.ua/test1.html

И мне поможете? Тоже новичок. :)
Исходный файл.

HTML код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>







<style type="text/css">





  #allform{



    clear: left;

    width: 99%; /* Ширина  слоя */

    height: 100%;

    background-color: #F0FF0F;

  }

     

  #myimageform {

    width:1000px;

    height: 100%; 

    padding:20px;

    border: 4px double green; /* Параметры границы */

}



.imageonline {

    float:left;

    /*border-color: red; /* Цвет границы */ 

    border: 4px double black; /* Параметры границы */

    padding: 5px; /* Поля вокруг текста */

    background-color: #FFCCCC; 

}



#bottomnav{

    



     float:left;  /**/

     width: 99%; /* Ширина  слоя */

     padding: 10px; /* Поля вокруг текста */

     /*background: #fc0; /* Цвет фона */

}

</style>



</head>

<body>



<div id="allform">



<form id="myimageform" name="myimageform" action="" method="post" >

  

    <div><input name="checkall" type="checkbox" value="ON" /> </div>

  

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img0" onclick="getCheckbox('checkbox0')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283513" id="checkbox0" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img1" onclick="getCheckbox('checkbox1')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283514" id="checkbox1" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img2" onclick="getCheckbox('checkbox2')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283515" id="checkbox2" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img3" onclick="getCheckbox('checkbox3')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283516" id="checkbox3" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img4" onclick="getCheckbox('checkbox4')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283518" id="checkbox4" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img5" onclick="getCheckbox('checkbox5')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283519" id="checkbox5" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img6" onclick="getCheckbox('checkbox6')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283520" id="checkbox6" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img7" onclick="getCheckbox('checkbox7')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283521" id="checkbox7" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img8" onclick="getCheckbox('checkbox8')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283522" id="checkbox8" />&nbsp;

        </div>      

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img9" onclick="getCheckbox('checkbox9')" alt=""/>

        <br /><a href="">>>></a> &nbsp; 

        <input name="checkbox[]" type="checkbox" value="1283523" id="checkbox9" />&nbsp;

        </div>      





</form>

</div>

  <div id="bottomnav"> 

<a href="" >следующие &gt;&gt;</a>



   <br />    Всего ваших изображений - 30.

  </div> 

      

</body>

</html>

Вот что получается

Див с классом imageonline находится внутри дива с идом myimageform, но при этом выходит за его пределы. Почему и что делать. При этом не задавая для myimageform фиксированной высоты.

Igor_I, попробуйте вставить после последнего дива

HTML код:

        <div class="imageonline">

        <img src=""  border="0" name="srcimage" id="img9" onclick="getCheckbox('checkbox9')" alt=""/>

        <br /><a href="">>>></a>   

        <input name="checkbox[]" type="checkbox" value="1283523" id="checkbox9" /> 

        </div>



        <div style="clear:both;"></div>

P.S. По стандарту для всех плавающих элементов надо указывать ширину. http://www.w3.org/TR/CSS2/visuren.html#floats

Навскидку вроде то, что надо. Завтра посмотю повнимательнее.

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

www.djone.com.ua/index2.php
Белая полоска в браузерах Firefox, IE

HTML код:

<div class="h1">

        <div class="h11">

                <a href="index.php">

                        <img src="newdesign/images/djshop_03.png" width="266" height="68">

                </a>

        </div>

        <div class="h12">

                <?php # include('findblock.php'); ?>

        </div>

</div>

<!-- Шапка #2 -->

<div class="h2">

        <div class="h21"><?php include('block_contact.php'); ?></div>

        <div class="h22"></div>

        <div class="h23"><?php include('block_news.php'); ?></div>

        <div class="h24"><?php include('block_kurs.php'); ?></div>

</div>

Код:

.h1{

        background-image:url(newdesign/images/djshop_04.png);

        height:68px;

        width:100%;

        min-width:1004px;

}

.h11{

        width:266px;

        float:left;

}

.h12{

        height:68px;

        background-image:url(newdesign/images/djshop_06.png);

        background-repeat: no-repeat;

        background-position: top right;

}

.h2{

        background-image:url(newdesign/images/djshop_09.png);

        height:85px;

        clear:both;

        width:100%;

        min-width: 1004px;

}

.h21{

        background-image:url(newdesign/images/djshop_08.png);

        height:85px;

        width:258px;

        float:left;

        margin-left:6px;

}

.h21 table{

        width:250px;

        margin-left:8px;

        margin-top:10px;

        font-size:12px;

}

.h22{

        background-image:url(newdesign/images/login.png);

        height:85px;

        width:230px;

        float:left;

}

.h23{

        background-image:url(newdesign/images/djshop_09.png);

        width:290px;

        height:85px;

        float:left;

        padding-left:10px;

}

.h23 ul li {list-style-type:none; margin:0; padding:0; border:0;}

.h23 ul {margin:0; padding:0; border:0;}

.h23 a {color: #fff;}

.h23 a:hover {color: #FFFF00;}

.h24{

        background-image:url(newdesign/images/kurs.png);

        width:200px;

        height:85px;

        float:right;

        margin-right: 10px;

}

.h24 div {

        font-size:12px;

        margin-top:10px;

        margin-left:15px;

        

}

P.S. Как сделать так, что бы списки в Фаерфоксе отображались, как в других браузерах, между каждым пунктом отсупы болшие. ни маргин ни паддинг ни бордер не берет

Навскидку лечится:

Код:

.h11{ width:266px;}

.h12{ height:68px; background-image:url(newdesign/images/djshop_06.png); background-repeat: no-repeat; background-position: top right; width: 100px; right: 5px; top: 0px; position: absolute;}

Но я бы поискал другой способ сверстать - можно было бы обойтись без плавающих дивов в шапке, спозицировав их относительно и задав ширины.

я делал так:

PHP код:


		
			
html, body {

background-color:#fff;

margin:0px;

min-width:750px;

}

и никаких лишних полосок :)
Насчет отступов - тоже разобрался, но не помню как, вроде, для каждого тэга переопределил padding и margins в 0

Цитата:

Цитата Prisoner

Но я бы поискал другой способ сверстать - можно было бы обойтись без плавающих дивов в шапке, спозицировав их относительно и задав ширины. »

Действительно не очень похододит для растягивающихся.

http://djone.com.ua/index2.php

1. При уменьшении не помагает min-width
2. В Firefox и Opera позишн как то по разному воспринимает

Ребята, у меня есть файл со стилями, что мне в нем нужно изменить, чтобы у меня везде был шрифт монотайп корсива? А в кнопках меню монотайп корсива жирный. Подскажите мне пожалуйста где и что прописать

Цитата:

Цитата Artem-Samsung

В Firefox и Opera позишн как то по разному воспринимает »

да, где-то в сети было, что эксплорер увеличивает паддинги в 2 раза, лиса нормально работает, а опера вообще от случая к случаю :biggrin: . Хотя, если повозиться, можно добиться того, что в этих трех браузерах одинаково будет. Но гиморно :(

Пока вернул, как было.
Буду думать :)

Карина, имхо, лучше отдельным топом, иначе начнется бардак-с :).

Цитата:

Цитата dmitryst

где-то в сети было, что эксплорер увеличивает паддинги в 2 раза »

Есть такое, только margin с той стороны на которую идет float.