Вопрос новичка, о CSS+DIV верстке [Версия для КПК]

Показать полную графическую версию : Вопрос новичка, о CSS+DIV верстке

Bullet-Avalon

24-01-2009, 21:51

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

Artem-Samsung

24-01-2009, 23:21

<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

Igor_I

26-01-2009, 22:54

И мне поможете? Тоже новичок. :)
Исходный файл.
<!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>  
<input name="checkbox[]" type="checkbox" value="1283513" id="checkbox0" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img1" onclick="getCheckbox('checkbox1')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283514" id="checkbox1" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img2" onclick="getCheckbox('checkbox2')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283515" id="checkbox2" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img3" onclick="getCheckbox('checkbox3')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283516" id="checkbox3" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img4" onclick="getCheckbox('checkbox4')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283518" id="checkbox4" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img5" onclick="getCheckbox('checkbox5')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283519" id="checkbox5" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img6" onclick="getCheckbox('checkbox6')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283520" id="checkbox6" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img7" onclick="getCheckbox('checkbox7')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283521" id="checkbox7" /> 
</div>
<div class="imageonline">
<img src="" border="0" name="srcimage" id="img8" onclick="getCheckbox('checkbox8')" alt=""/>
<br /><a href="">>>></a>  
<input name="checkbox[]" type="checkbox" value="1283522" id="checkbox8" /> 
</div>
<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>

</form>
</div>
<div id="bottomnav">
<a href="" >следующие >></a>

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

</body>
</html>

Вот что получается http://pic.ipicture.ru/uploads/090126/thumbs/FkPSI2t442.png (http://ipicture.ru/Gallery/Viewfull/12301994.html)
Див с классом imageonline находится внутри дива с идом myimageform, но при этом выходит за его пределы. Почему и что делать. При этом не задавая для myimageform фиксированной высоты.

DedAlex

26-01-2009, 23:44

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

<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

Igor_I

27-01-2009, 00:29

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

Artem-Samsung

16-02-2009, 16:14

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

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

<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>

<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. Как сделать так, что бы списки в Фаерфоксе отображались, как в других браузерах, между каждым пунктом отсупы болшие. ни маргин ни паддинг ни бордер не берет

Prisoner

16-02-2009, 21:57

Навскидку лечится:
.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;}
Но я бы поискал другой способ сверстать - можно было бы обойтись без плавающих дивов в шапке, спозицировав их относительно и задав ширины.

dmitryst

16-02-2009, 22:12

я делал так:

html, body {
background-color:#fff;
margin:0px;
min-width:750px;
}

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

Artem-Samsung

16-02-2009, 22:53

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

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

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

Карина

16-02-2009, 22:55

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

dmitryst

16-02-2009, 23:03

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

Artem-Samsung

17-02-2009, 00:41

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

Prisoner

17-02-2009, 00:57

Карина, имхо, лучше отдельным топом, иначе начнется бардак-с :).
где-то в сети было, что эксплорер увеличивает паддинги в 2 раза »
Есть такое, только margin с той стороны на которую идет float.