DIV & CSS Layout
11 отговора
371 прегледа
DIV & CSS Layout
The CSS code:
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
-------------------------------------------
The HTML code:
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="img/pic.gif" width="200" height="150"></div>
<div class="box_text">Just a few words</div>
</div>
------------------------------------------------
Целта на занятието е да се направи следното нещо: Контейнер, в който си слагам примерно новина: със заглавие, текст и снимка. Не искам да го правя с таблици. Искам с класове. Но при код, подобен (и същия) като горния, ако текста е много кратък, контейнера не е достатъчно висок и снимката не се смества добре вътре, а вместо това излиза и стърчи извън новината. Къде бъркам? Може ли някой да помонгне?
[линк]
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
-------------------------------------------
The HTML code:
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="img/pic.gif" width="200" height="150"></div>
<div class="box_text">Just a few words</div>
</div>
------------------------------------------------
Целта на занятието е да се направи следното нещо: Контейнер, в който си слагам примерно новина: със заглавие, текст и снимка. Не искам да го правя с таблици. Искам с класове. Но при код, подобен (и същия) като горния, ако текста е много кратък, контейнера не е достатъчно висок и снимката не се смества добре вътре, а вместо това излиза и стърчи извън новината. Къде бъркам? Може ли някой да помонгне?
[линк]
в отговор на cluster_bg
#2
Re: DIV & CSS Layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[линк]">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
<!--
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
/*
Например така
можеш да го зададеш и в проценти но ше трябва
да зададеш задължително размерноста на някои parent
елемент в px в такъв случаи ..
Помагам ти въпреки че ти едва ли го заслужаваш ..
*/
position: relative;
overflow: visible;
width: 800px;
height: 600px;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="img/pic.gif" width="200" height="150" alt=""></div>
<div class="box_text">Just a few words </div>
</div>
</body>
</html>
Re: DIV & CSS Layout
Е, да... ама не...
Аз искам box-a да е голям според текста. Идеята ми е да си изгенерирам много такива на една страница. Нещо като списък с новини. Просто не искам картинката да излиза от контейнера.
Става идеално, ако във стила за box сложа height: 0px; но естествено това чупи здраво кода и работи само в IE.
И мерси, че все пак помагаш, въпреки, че едва ли го заслужавам.
[линк]
Аз искам box-a да е голям според текста. Идеята ми е да си изгенерирам много такива на една страница. Нещо като списък с новини. Просто не искам картинката да излиза от контейнера.
Става идеално, ако във стила за box сложа height: 0px; но естествено това чупи здраво кода и работи само в IE.
И мерси, че все пак помагаш, въпреки, че едва ли го заслужавам.
[линк]
в отговор на cluster_bg
#4
Try this way ;)
XHTML:
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="madrid.jpg" width="619" height="373"></div>
<div class="box_text">Just a few words</div>
<br /></div>
CSS:
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
br {
clear: both;
}
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="madrid.jpg" width="619" height="373"></div>
<div class="box_text">Just a few words</div>
<br /></div>
CSS:
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
br {
clear: both;
}
в отговор на cluster_bg
#5
Re: DIV & CSS Layout
<style type="text/css">
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
.end
{
clear: both
}
</style>
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="img/pic.gif" width="200" height="150"></div>
<div class="box_text">Just a few words</div>
<div class=end></div>
</div>
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
}
.end
{
clear: both
}
</style>
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="img/pic.gif" width="200" height="150"></div>
<div class="box_text">Just a few words</div>
<div class=end></div>
</div>
в отговор на cluster_bg
#6
Re: DIV & CSS Layout
По-сложно ме можа ли да го измислиш? Прочети някъде за tag soup.
Т'ва твойто направо е цяла тенджера.
Има си достатъчно елементи в HTML, използвай ги.
И.Ш.
Т'ва твойто направо е цяла тенджера.
Има си достатъчно елементи в HTML, използвай ги.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[линк]">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box img {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box h1 {
font-size: 2em;
font-weight: bold;
}
.box p {
font-size: 1em;
}
.box br {
clear:both;
}
</style>
</head>
<body>
<div class="box">
<h1>Some title text here</h1>
<img src="img/pic.gif" width="200" height="150">
<p>Just a few words</p>
<br >
</div>
</body>
</html>
И.Ш.
в отговор на cluster_bg
#7
Мдаааа
Мисля че този вариант те устроива най-добре. Ако съм разбрал търсиш подобен ефект. Така най-малко променяме нещата а пък получаваме това което искаме.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[линк]">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<style type="text/css">
<!--
.box {
border: 1px dashed #000000;
clear: both;
font-family: Arial, Helvetica, Sans-serif;
}
.box_picture {
border: 1px solid #ff0000;
float: right;
margin: 10px;
clear: both;
}
.box_title {
font-size: 20px;
font-weight: bold;
}
.box_text {
font-size: 13px;
clear: both;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="box_title">Some title text here</div>
<div class="box_picture"><img src="img/pic.gif" width="200" height="150" alt=""/></div>
<div class="box_text">Just a few words </div>
</div>
</body>
</html>
Re: DIV & CSS Layout
Евала за отговора.
Какво е това 18 ДИВ тага един в друг
Трябва да се пише както си посочил - първо ХЕДЪР някакъв за заглавието, картинка ако има и самото съдържание в параграф - тези елементи да това са направени
А не
<p class=header>
<h1 class=paragraph>
<div class=image>
<b style="font-weight:normal; ">
Какво е това 18 ДИВ тага един в друг
Трябва да се пише както си посочил - първо ХЕДЪР някакъв за заглавието, картинка ако има и самото съдържание в параграф - тези елементи да това са направени
А не
<p class=header>
<h1 class=paragraph>
<div class=image>
<b style="font-weight:normal; ">
Редактирано от lazo на
Re: DIV & CSS Layout
и с какво ми спестяваш нещо? Таговете пак са толкова на брой.
Освен това, ако искам да имам рамка около всеки елемент, пак трябва да сложа нещо, в което да се намират тия тагове, нали?
Имам всичко на всичко 3 див-а в 1. Къде е проблема, не мога да разбера.
Ако те притеснява, че ползвам див за всичко.. Въпрос на вкус. Не ми е проблем да ползвам и други тагове. Но сега така ми харесва. И всичко е подредено.
[линк]
Освен това, ако искам да имам рамка около всеки елемент, пак трябва да сложа нещо, в което да се намират тия тагове, нали?
Имам всичко на всичко 3 див-а в 1. Къде е проблема, не мога да разбера.
Ако те притеснява, че ползвам див за всичко.. Въпрос на вкус. Не ми е проблем да ползвам и други тагове. Но сега така ми харесва. И всичко е подредено.
[линк]
в отговор на cluster_bg
#11
Re: DIV & CSS Layout
и с какво ми спестяваш нещо? Таговете пак са толкова на брой.
Освен това, ако искам да имам рамка около всеки елемент, пак трябва да сложа нещо, в което да се намират тия тагове, нали?
Колко мъка има по тоя свят боже.....
И.Ш.
Освен това, ако искам да имам рамка около всеки елемент, пак трябва да сложа нещо, в което да се намират тия тагове, нали?
Колко мъка има по тоя свят боже.....
И.Ш.
Re: DIV & CSS Layout
и с какво ми спестяваш нещо? Таговете пак са толкова на брой.
Освен това, ако искам да имам рамка около всеки елемент, пак трябва да сложа нещо, в което да се намират тия тагове, нали?
Като се замисля това все едно не съм го казал, дължа ви извинение.
[линк]
Освен това, ако искам да имам рамка около всеки елемент, пак трябва да сложа нещо, в което да се намират тия тагове, нали?
Като се замисля това все едно не съм го казал, дължа ви извинение.
[линк]