Lecture
In this tutorial, I will tell you how to set the width parameter for each DIV, and how to manage it in general. We will also consider some aspects of displaying your theme equally correctly in the main browsers: both in Mozilla Firefox and in Opera, Chrome and Internet Exlporer 7 and higher. I deliberately ignore Internet Explorer 6 because I am opposed to this browser due to the mass of its flaws, including the lack of support for modern standards.
The first thing you need to do is decide what the overall width of your theme will be. Let's use 750px (750 pixels) for our theme. The width of the theme depends on the monitors and screen settings of most visitors to your blog. Avoid setting the theme width, for example, to 1100px, if your audience basically uses a screen resolution of 1024x768 px, since your theme simply does not fit on their screen.
How to limit the total width to 750px?
It is necessary that everything fits inside a 750px div block. By “all” means: heder, container, sidebar and footer.
Add: <div id = ”wrapper”> after <body>
Add: </ div> before </ body>
Paste into style.css :
one 2 3 four five | #wrapper { margin : 0 auto 0 auto ; width : 750px ; text-align : left ; } |
In CSS, especially in style.css, the hash symbol ( # ) is a way to assign an ID to a DIV tag. Point is a way to assign a class to a DIV. For example, in the case of a class, if you need a <div class = ”wrapper”> code, use .wrapper instead of #wrapper to apply parameters to the DIV tag wrapper . ID can be used only once per page. Save the index.php and style.css files . Refresh your browsers to display changes.
Add a left justification for Heder , and set a width of 750px:
one 2 3 four | #header{ float : left ; width : 750px ; } |
Add left-justification for the Container , and set the width to 500px:
one 2 3 four | #container { float : left ; width : 500px ; } |
Add left- justification for the sidebar , and set the width to 240px and a gray background (10 pixels is not enough; I know):
one 2 3 four five | .sidebar { float : left ; width : 240px ; background : #eeeeee ; } |
Notice that you didn’t use a hash to refer to Sidebar's DIV- tag ; you used a point. Also, background: #eeeeee; - light and light gray. We added a background color for Sidebar, just to see the difference, when later add the missing 10 pixels.
Add a left alignment and clear both (to clear the alignment to the alignment of the remaining elements) for the Footer , with a width of 750px:
one 2 3 four five | #footer { clear : both ; float : left ; width : 750px ; } |
What is the difference between Heder and Footer? The answer is clear: both; in footer {} . This is to make sure that Footer does not join anything above and below him, for example, Sidebar or Container.
Save style.css and refresh browsers.
Add the missing 10 pixels to the sidebar using the margin. Now the style code for Sidebar looks like this:
one 2 3 four five 6 | .sidebar { float : left ; width : 240px ; background : #eeeeee ; margin : 0 0 0 10px ; } |
Save the file and refresh the window to see a gray gap of 10 pixels on the left in Sidebar. margin: 0 0 0 10px; means 0 top, 0 right, 0 bottom, 10px left indent. When the size is 0, the suffix px is not needed.
Then that's it for today. If you have questions, feel free to ask. We are here to help, not just write lessons.
Comments
To leave a comment
Content Management Systems (CMS)
Terms: Content Management Systems (CMS)