Hướng dẫn how to put header on the left side html - cách đặt tiêu đề ở bên trái html
|
Trong trang web này, tôi có một chủ đề WordPress với cấu trúc HTML này: Show Và tôi muốn thêm các widget vào cột bên trái. Các lựa chọn của tôi là: 1) Làm cho tiện ích tiêu đề: Widget sẽ xuất hiện trước nội dung và điều này là xấu cho SEO. 2) Đặt tiêu đề và thanh bên trong một trình bao bọc: giống nhau, các widget trước khi nội dung Câu hỏi của tôi là: Là một thực hành xấu HTML để đặt tiêu đề vào bên trong div khác? Và đặt tiêu đề sau khi nội dung trong HTML? Cấu trúc tốt nhất để làm nó là gì?
 Đã hỏi ngày 27 tháng 1 năm 2014 lúc 11:42Jan 27, 2014 at 11:42
ThemeScreatorthemeScreatorThemesCreator 1.7396 huy hiệu vàng25 Huy hiệu bạc49 Huy hiệu đồng6 gold badges25 silver badges49 bronze badges 1 Tôi nghĩ rằng giải pháp dịch hại cho bạn là đặt tiêu đề với vị trí: Tuyệt đối. Vì vậy, bạn sẽ cần phải có chiều cao cố định của phần tử tiêu đề. CSS: Tất nhiên, trong HTML, bạn có thể đặt sau nội dung trước thanh bên và nó cũng sẽ hoạt động. Đã trả lời ngày 27 tháng 1 năm 2014 lúc 12:27Jan 27, 2014 at 12:27
2 Đây là bài viết thứ năm và cuối cùng trong một loạt các bài viết chi tiết cách thiết lập các cấu trúc trang đáp ứng cơ bản bằng CSS. Trong bài đăng này, tôi sẽ đề cập đến cách xử lý một bố cục với tiêu đề ở bên trái, thay vì trên đỉnh. Thông thường trong loại bố cục này, điều hướng cũng ở bên trái. Chủ đề trung bình của chủ đề ổn là một ví dụ điển hình của phong cách bố trí này. Như tôi đã đề cập ở đầu bài viết đầu tiên trong loạt bài này:
Cấu trúc HTML, thiết lập lại CSS và các kiểu di động đều giống như bài viết thứ hai trong loạt bài này. Do đó, tôi sẽ nhanh chóng hiển thị mã đang được sử dụng, nhưng tôi đã thắng được giải thích mã cho đến khi chúng tôi vượt ra ngoài mã đã được đề cập trong bài đăng khác. Cấu trúc HTML
CSS Đặt lại/* =Reset
-------------------------------------------------------------- */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 0;
}
html,
body,
div{
margin: 0;
padding: 0;
}Bố cục cột đơn cho điện thoại di động/* =Color
-------------------------------------------------------------- */
#header{
background: #cccccc;
}
#main{
background: #dddddd;
}
#secondary {
border: 1px solid #bbbbbb;
}
/* =Structure Mobile
-------------------------------------------------------------- */
.wrap{
max-width: 1140px;
margin: 0 auto;
padding: 1em;
}
.wrap:after {
content: "";
display: table;
clear: both;
}
#primary{
max-width: 720px;
margin: 0 auto;
}
#secondary{
max-width: 400px;
margin: 0 auto;
padding: 1em;
}Bố cục CSS với tiêu đề ở bên tráiỞ đây, nơi mà mọi thứ bắt đầu trở nên thú vị. Hãy bắt đầu với CSS cho các thiết bị có kích thước máy tính bảng. Như bạn có thể thấy, truy vấn truyền thông đảm bảo rằng CSS này chỉ được áp dụng trên màn hình có chiều rộng từ 900px trở lên. /* =Structure Tablet
-------------------------------------------------------------- */
@media screen and (min-width : 900px) {
#header{
top: 0;
left: 0;
width: 250px;
position: absolute;
}
body{
border-left: 250px solid #cccccc;
}
}#Header trước đây được hiển thị trên đỉnh của trang web trong các hướng dẫn trước đây hiện được định vị ở góc trên cùng bên trái của màn hình với chiều rộng 250px. Cũng chú ý đến vị trí của người Viking: Tuyệt đối; về cơ bản cho các yếu tố trang khác bỏ qua phần tử này khi định vị chính mình. Phần tử cơ thể được cung cấp một đường viền bên trái rộng 250px với màu nền để phù hợp với #header. Điều này hoàn thành hai điều:
Cách dễ nhất để giải thích điều này có lẽ là bằng ví dụ. Hãy để bắt đầu với #Header được định vị hoàn toàn nhưng không có phong cách nào trên phần tử cơ thể. Như bạn có thể thấy nội dung trang được ẩn và cần được chuyển sang phải. Có một vài cách này có thể được xử lý. Chúng tôi có thể thêm 250px đệm ở bên trái của cơ thể. Tuy nhiên, điều đó sẽ đặt một cột trắng trống bên dưới tiêu đề. Chúng ta có thể thay đổi màu nền của cơ thể để phù hợp với màu của #header, nhưng màu nền đó cuối cùng sẽ hiển thị ở phía bên phải của trang trên màn hình lớn hơn. Nếu chúng ta thêm đường viền trái 250px vào phần tử cơ thể mà không cần chỉ định màu, có vẻ như sau: Điều này tốt hơn, vì nội dung có thể đọc được và cột tối sẽ không ảnh hưởng đến bất kỳ phần nào khác của trang web. Tuy nhiên, chúng tôi vẫn có thể cải thiện điều này bằng cách sử dụng cùng màu cho đường viền mà chúng tôi đã sử dụng cho nền của #header. Với màu viền tại chỗ, nó sẽ trông như thế này: Những cạm bẫy phổ biếnMột trong những phương pháp phổ biến để tạo tiêu đề được căn chỉnh bên trái xuất hiện dưới dạng một cột hoàn chỉnh (ngay cả khi nó không có đủ nội dung) là đặt nó chiều cao của nó thành 100%. Tuy nhiên, điều này chỉ đặt chiều cao lên 100% màn hình, không phải 100% chiều cao trang. Ngay khi một khách truy cập bắt đầu cuộn xuống trang, họ cuộn xuống dưới cùng của tiêu đề và có thể thấy sự phá vỡ trực quan mà chúng tôi đang cố gắng tránh. Một số trang web cố gắng chống lại điều này bằng cách sử dụng vị trí của người dùng: Đã sửa lỗi trên #header để nó không bao giờ rời khỏi màn hình. Khi khách truy cập cuộn xuống trang web, #Header dường như được cố định tại chỗ trên màn hình và không cuộn với phần còn lại của trang web. Tuy nhiên, điều này thậm chí còn tồi tệ hơn các vấn đề trực quan của việc sử dụng chiều cao của người dùng: 100%; Bởi vì không có gì đảm bảo rằng tất cả các nội dung tiêu đề có thể nhìn thấy trên màn hình. Nếu cửa sổ trình duyệt không đủ cao để hiển thị toàn bộ nội dung tiêu đề, không có cách nào để đạt đến đáy của tiêu đề. Xin lưu ý rằng sử dụng đường viền màu trên phần tử cơ thể không phải là cách duy nhất để thực hiện bố cục này. Nếu cột #Header yêu cầu một hình ảnh nền, sử dụng phương pháp viền mà chúng tôi đã đề cập ở đây sẽ không hoạt động. Thay vào đó, chúng ta sẽ cần cung cấp cho #Page Div một hình ảnh nền và phần đệm còn lại 250px và sau đó đặt nền của #header thành trong suốt. Điều này sẽ cho phép hình ảnh nền của Div #Page hiển thị thông qua. Sau đó, chúng tôi sẽ cần giới hạn chiều rộng của DIV #Page hoặc mẫu lặp lại của hình nền để nền không hiển thị ở những nơi khác mà nó không cần thiết. Thêm một thanh bên ở bên phảiPhần trước chủ yếu tập trung vào màn hình có kích thước máy tính bảng. Nếu bạn không cần một thanh bên, hãy thoải mái coi thường phần cuối cùng này. Tuy nhiên, tôi sẽ tiếp tục hướng dẫn cho những người muốn một thanh bên ở bên phải cho màn hình có kích thước máy tính để bàn. Ở đây, các CSS: /* =Structure Desktop
-------------------------------------------------------------- */
@media screen and (min-width : 1140px) {
#main{
max-width: 1140px;
}
#primary{
float: left;
width: 65%;
padding-right: 1em;
}
#secondary{
float: right;
width: 35%;
}
#footer{
clear: both;
}
}Đầu tiên, chiều rộng tối đa cho phần tử #Main được đặt để ngăn khu vực nội dung và thanh bên phát triển quá rộng. Sau đó, cột #Primary được thả sang bên trái và được cung cấp chiều rộng 65% để rời khỏi phòng cho thanh bên. Cuối cùng, một phần đệm bên phải của 1em được thêm vào để ngăn nội dung chạm vào đường viền của thanh bên. Nếu bạn đã đọc bất kỳ hướng dẫn nào khác trong loạt bài này, điều này sẽ trông quen thuộc. DIV #Secondary được thả nổi bên phải và có chiều rộng còn lại là 35% và chân trang được đặt để xóa cả hai để đảm bảo nó vẫn ở dưới cùng của trang web. Khi tất cả kết hợp với nhau, nó sẽ trông giống như thế này: Tuyên bố miễn trừ trách nhiệmHướng dẫn này không tính đến thời gian không có đủ nội dung để lấp đầy chiều cao trình duyệt. Nếu phần dưới của chân trang kết thúc trước đáy của trình duyệt, phần cuối của nền cột #Header cũng sẽ được nhìn thấy. Kết thúcĐiều đó kết thúc cả hướng dẫn ngày hôm nay và loạt bài về bố cục CSS đơn giản. Như mọi khi, hãy liên hệ với tôi qua Twitter hoặc biểu mẫu liên hệ trên trang web này nếu bạn có bất kỳ câu hỏi, nhận xét hoặc đề xuất nào. Cảm ơn! |
