Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

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

Ответить
Настройки темы
Вопрос новичка, о CSS+DIV верстке

Старожил


Сообщения: 164
Благодарности: 0

Профиль | Отправить PM | Цитировать


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

Отправлено: 21:51, 24-01-2009

 

Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать


Код: Выделить весь код
<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

-------
Мой блог Web Development

Это сообщение посчитали полезным следующие участники:

Отправлено: 23:21, 24-01-2009 | #2



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

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.


Ветеран


Сообщения: 1862
Благодарности: 132

Профиль | Сайт | Отправить PM | Цитировать


И мне поможете? Тоже новичок.
Исходный файл.
читать дальше »
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>   <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>


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

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 22:54, 26-01-2009 | #3


Вредитель


Сообщения: 460
Благодарности: 126

Профиль | Отправить PM | Цитировать


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
Это сообщение посчитали полезным следующие участники:

Отправлено: 23:44, 26-01-2009 | #4


Ветеран


Сообщения: 1862
Благодарности: 132

Профиль | Сайт | Отправить PM | Цитировать


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

-------
ДИЛЕТАНТ - это курьезный человек, который испытывает удовольствие делать то, чего не умеет.
AMD 4200+, MSI Neo2Platinum, 2Gb, ATI 9600, D-Link DWL-G510, FreeBSD 8.0, KDE 4.3.4


Отправлено: 00:29, 27-01-2009 | #5


Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать


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

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

-------
Мой блог Web Development


Последний раз редактировалось Artem-Samsung, 16-02-2009 в 16:53.


Отправлено: 16:14, 16-02-2009 | #6


Аватара для Prisoner

Engrossed by the Void


Сообщения: 2229
Благодарности: 60

Профиль | Отправить PM | Цитировать


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

-------
Не могу дать более дельный совет - не хватает системных ресурсов...

Это сообщение посчитали полезным следующие участники:

Отправлено: 21:57, 16-02-2009 | #7


Аватара для dmitryst

Ветеран


Сообщения: 7253
Благодарности: 905

Профиль | Отправить PM | Цитировать


я делал так:

PHP код: Выделить весь код

htmlbody {

background-color:#fff;
margin:0px;
min-width:750px;


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

-------
Осваиваю FreeBSD

Это сообщение посчитали полезным следующие участники:

Отправлено: 22:12, 16-02-2009 | #8


Аватара для Artem-Samsung

Ветеран


Сообщения: 823
Благодарности: 53

Профиль | Сайт | Отправить PM | Цитировать


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

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

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

-------
Мой блог Web Development


Отправлено: 22:53, 16-02-2009 | #9


Аватара для Карина

Старожил


Сообщения: 402
Благодарности: 1

Профиль | Сайт | Отправить PM | Цитировать


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

Последний раз редактировалось Карина, 06-06-2009 в 20:28.


Отправлено: 22:55, 16-02-2009 | #10



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

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Как прижать footer-image ( верстка <DIV> XHTML/CSS ) ? stalingrad432006 Вебмастеру 6 04-11-2008 16:57
html,css (div высота) brain_13 Вебмастеру 4 12-06-2008 09:02
Нуждаюсь в программировании (верстке) сайта ! sirik Вебмастеру 12 06-08-2006 01:52
Вопрос по .CSS btx Вебмастеру 4 06-03-2006 16:02
Div x player favn Хочу все знать 1 10-10-2004 00:50




 
Переход