You get a bonus - 1 coin for daily activity. Now you have 1 coin

WORDPRESS 20 Using Width and Float

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.

Step 1

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.

Explanations:

  • margin: 0 auto 0 auto; Means accordingly   top margin 0, auto right margin, lower margin 0, and left auto margin. For now, just remember that the value of the “auto” parameter means that it is centered;
  • width: 750px; defines a div width of 750 pixels;
  • text-align: left; aligns the text to the left inside the DIV wrapper, because we need to change   text-align: left; specified for the whole Body on text-align: center; for a specific diva;

Step 3

Add a left justification for Heder , and set a width of 750px:

?
one
2
3
four
#header{
float : left ;
width : 750px ;
}

Step 4

Add left-justification for the Container , and set the width to 500px:

?
one
2
3
four
#container {
float : left ;
width : 500px ;
}

Step 5

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.

Step 6

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.

Step 7

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.

Everything turned out and works?

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
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Content Management Systems (CMS)

Terms: Content Management Systems (CMS)