Jump to content

Recommended Posts

Помогите разобраться с тегом div. Нужно сверстать вот такой тип шаблона:

https://www.cy-pr.com/bitrix/components/bitrix/forum.interface/show_file.php?fid=88431&width=500&height=500

Пока только вот так

https://www.cy-pr.com/bitrix/components/bitrix/forum.interface/show_file.php?fid=88432&width=500&height=500

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <link href="css/style.css" type="text/css" rel="stylesheet">
      <title>Тестируем блочные верстки</title>
   </head>
   <body>
   
         <div id="header"></div>
         <div id="left-1"></div>
         <div id="left-2"></div>
         <div id="right">   </div>
         <div id="center"></div>
         <div class="clear"></div>
         <div id="space"></div><!-- распорка -->
         <div id="footer" align="center"></div>
</body>
</html>
html, body {border: 5px solid #000000;}
body {margin: 0 10%; height:auto !importand; height: 100%;}
#header {height:100px; border: 2px solid #0000FF; margin: 5px 5px 0px 5px;}
#center {margin:5px auto; width:65%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify;}
#left-1 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin-top: 5px; height:auto;}
#left-2 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin: 5px; height:auto;}
#right {float:right; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin-top: 5px;}
#footer {height:30px; margin-top:-100px; border: 2px solid #0000FF; margin-top: 0 0; text-align: center; background-color: #ADD8E6;} /* добавляем отступ */
#footer p {margin: 3px auto 0 auto;}
#space {height: 100px;}
.clear {clear: both;} 

 

Link to post
Share on other sites

Разбейте блоки на шапку, контент и футер, а потом в контенте снова разбейте на левый блок, центральный блок и правый блок. Только в таком случаи у Вас не будет подобной проблемы.

Link to post
Share on other sites

Должно быть что-то вроде этого:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<main>
	<div id="left">
		<div class="left"></div>
		<div class="left"></div>
		<div class="left"></div>
	</div>
	<div id="center"></div>
	<div id="right">
		<div class="right"></div>
		<div class="right"></div>
		<div class="right"></div>
	</div>
</main>
<footer></footer>
</body>
</html>

Дальше думаю поймешь, что делать

Link to post
Share on other sites
<div class="left"></div>
<div class="left"></div>
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>

В этих блоках классы left и right лишние, если в них прописывать позиционирование.

Если же это просто общий класс для блока, тогда все норм.

Link to post
Share on other sites
3 минуты назад, qpPeW сказал:

<div class="left"></div>
<div class="left"></div>
<div class="left"></div>

<div class="right"></div>
<div class="right"></div>
<div class="right"></div>

В этих блоках классы left и right лишние, если в них прописывать позиционирование.

Если же это просто общий класс для блока, тогда все норм.

Да я имел ввиду общий класс для блока

Link to post
Share on other sites
3 минуты назад, xmka сказал:

Да я имел ввиду общий класс для блока

Тогда норм, но я бы лучше сделал так.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<header></header>
<main>
	<section id="left">
		<article class="left"></article>
		<article class="left"></article>
		<article class="left"></article>
	</section>
	<section id="center"></section>
	<section id="right">
		<article class="right"></article>
		<article class="right"></article>
		<article class="right"></article>
	</section>
</main>
<footer></footer>
</body>
</html>

Если уж делать все по феншую html5...

Link to post
Share on other sites

А да точно по html5 так абсолютно правильно!

Будем надеяться, что автор поймет, что к чему и не будет создавать, но 2 темы

Link to post
Share on other sites
  • Administrators
2 часа назад, muchachosll сказал:

и кто может напишите ссылку на умную книгу, где про эти теги почитать можно!!!

Всё есть онлайн и очень подробно - https://www.w3schools.com/html/default.asp

Link to post
Share on other sites
  • Administrators
Только что, muchachosll сказал:

было бы на русском))

Лезть в веб разработку без знания английского... ну так себе решение, если честно :)

Вот на русском - http://htmlbook.ru/

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...