With the help of the block CSS message, the page was fixed with a size of 1024 by 768. In FF, Opera browsers, Chrome looks the same, but the IE browser header stretches 1000 pixels in length, although it should be 204 pixels. At the same time content, footer retained its dimensions. In the CSS code, I specified the height of header 204 pixels. How to fix what else you need to specify?

    1 answer 1

    Xhtml code

    <!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> <title>CSS верстка сайта макет в три колонки</title> <link rel="stylesheet" type="text/css" media="screen" href="/style.css" /> <link rel="stylesheet" type="text/css" media="print" href="/print.css" /> <script language="javascript" type="text/javascript"> Тэгом <link> к странице подгружаются CSS стили из внешних файлов. Общий стиль style.css лежит в корне сайта (как правило, это папка /public_html) и предназначен для компьютерных браузеров (media="screen"). Стиль print.css будет использоваться для печати, об этом чуть ниже. Далее с помощью JavaScript определяем браузер пользователя и, если это Internet Explorer 5, ему отдается CSS стиль из файла ie5.css.

    The first is the header div for the page header. There is no text in the main service block, but 4 blocks are enclosed in it: content for the main text of the page, leftmenu and rightmenu for the left and right menus, respectively, and the footer block for the “footer” of the layout.

    All blocks are only defined in XHTML code, CSS is responsible for their properties and location. General CSS style

     body { margin: 0px; padding: 0px; background-color: #f0f0f0; }

    First of all, we define the <body> style (i.e. browser windows) - remove the outer and inner margins, add a background color (# f0f0f0 - light gray).

     #header { width: 98%; margin: 0px; padding: 1%; background-color: orange; }

    External indents (margin: 0px;) are removed for the header block, an orange fill is selected and the width is 100% of the parent element (it is <body>). 100% consists of 98% of the width of the block contents and 1% for padding-left and padding-right. Abbreviated write padding: 1%; sets indentation on all four sides (top, left, bottom, right).

    The block will be located in the normal flow, which suits us so far, so positioning is not necessary.

     #main { position: relative; width: 100%; margin: 0px; padding: 0px; background-color: #ccc; overflow: hidden; }

    The main service block is the container of the remaining blocks with content. It has no borders and padding, and width: 100% - therefore, the width of main is equal to the width of the browser window. There will be no text in the block, but it is very important for our layout. First, for absolute positioning of CSS blocks of the right and left menu, and second, for creating a gray (#ccc) menu background for the entire page height.

    As mentioned, position: relative means the offset of the block relative to its location in the normal flow. But since no offset value is specified, the block will be located similarly to the normal CSS flow. Declaration position: relative; necessary for absolute positioning of the side menu blocks. As you remember, absolute positioning in CSS is measured from the browser window or the parent block, which is absolutely or relatively positioned.

    A gray background is set for main. This is done for the complete painting of the side menu blocks. In CSS, apparently, it is impossible to set the height (height) of the block as a percentage of the browser window, so the height is determined depending on the amount of content. That is, the side columns of the menu will have different heights, and it does not make sense to set the background for them. Therefore, we fill the main background. Next, fill the content block and the “footer” of the layout with another color, and the columns with a transparent background will be visually the same height. Cheap and angry.

    The overflow property: hidden; necessary to remove the minor IE6 bug. Internet Explorer 6 running Windows XP with the XP screen theme (in the case of the classic Windows theme, everything is fine) believes that the page does not fit completely into the browser window and adds a horizontal scroll bar. Only 1–2 pixels are scrolled, apparently the XP theme increases the width of the interface elements of the browser, but it (the browser) cannot understand this ...

    Anyway, overflow: hidden; indicates that content that goes beyond the boundaries of the container (a vital example is a very long word in a narrow CSS block) is clipped and the user is not given the opportunity (scroll bars, for example) to view this content. In our case, the container is the main block, 100% wide in the browser window, and the content is nested blocks.

     #content { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: #f0f0f0; } #footer { width: 58%; margin: 0px 20% 0px 20%; padding: 1%; background-color: orange; }

    CSS blocks the main content and the "footer". A light gray background for readability — the white background and black font are too contrasting and can bore your eyes. Orange is used for footer. The rest of the CSS block description is the same.

    Both occupy the full width of the page. Content Width 58%. External indents (using abbreviated notation in the format - margin: top left bottom right;) 20% on the left and 20% on the right. Plus, the internal blocking of the content from the frame of the block in 1% from the top, left, right and bottom. We consider the CSS block horizontal size from left to right: 20% + 1% + 58% + 1% + 20% = 100%.

    Thus, the width of the footer and content is 100% of the parent main block, which in turn occupies 100% of the body. The nuance is that the outer margins of the margin are 20% on each side, the outer margins of the block are transparent, that is, they are not filled with color. CSS blocks content and footer occupy the entire width of the window and it is not quite clear yet where to get space for side menus.

     #leftmenu { position: absolute; top: 0px; left: 0px; width: 18%; margin: 0px; padding: 1%; } #rightmenu { position: absolute; top: 0px; right: 0px; width: 18%; margin: 0px; padding: 1%; }

    The answer in position: absolute. For absolute positioning, normal flow and other CSS blocks do not matter. A reference point, vertical and horizontal displacement, and block width are needed. The starting point can be a browser window, an absolutely or relatively positioned parent CSS block. Now it’s clear why we used position: relative and zero offset for the main block.

    The leftmenu block (left navigation panel) is positioned from the main CSS block, the top and left offset are 0 pixels each. For rightmenu the same offset, but at the top and right. The width of both blocks is 20% (1% padding-left + 18% width + 1% padding-right) from the parent main. In fact, the leftmenu and rightmenu are superimposed on the content and footer blocks - more precisely, on their transparent outer borders of the margin!

    The height of the side menu depends on the content. Menus have no background color, so the background for them is the gray fill of the main block. Margines for content and footer are transparent. Due to this, the visual side menu have the same height and are filled with gray.

     #content p, #leftmenu p, #rightmenu p { margin-top: 0px; } #header p, #footer p { margin-top: 0px; margin-bottom: 0px; }

    The final touches. Inside the blocks, the information is divided into paragraphs by the <p> tag. <p> is a block element that has its own external fields. Internet Explorer 6 combines the margin <p> and padding of our CSS blocks. And Opera and Mozilla summarize them, and as a result, there is too much “breaking” of the text above and below the block boundaries. This code removes the vertical outer indents for <p> elements nested in CSS blocks of the layout.

    A source.