I am designing a video site and just wanna ask some suggestions, ideas and improvements of my current html5 base layout.
I read a lot of articles from google but it's confusing. I need some straightforward suggestions.
I am new to css so please be gentle :)
Fiddle here
body {
background: #2b2b2b;
font: normal 12px Arial, Helvetica, sans-serif;
color: #777;
overflow-x: hidden
}
a {
color: #888;
}
a:active {
color: #444;
}
header .wrap,
nav,
.contentwrapper,
footer .wrap {
width: 1000px;
margin: 0 auto
}
header,
nav,
section,
aside .wrap,
footer {
background: #333;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #222
}
section {
border: 1px solid #222
}
header {
width: 100%;
line-height: 30px
}
nav li {
display: inline-block;
}
main {
float: right;
width: 820px;
}
aside {
float: left;
width: 170px
}
footer {
line-height: 30px;
}
footer ul {
font-size: 14px;
}
footer li {
float: right;
display: inline-block;
}
footer li.cr {
float: left
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}
<header>
<div class="wrap">
<h1>Site title</h1>
</div>
</header>
<nav>
<ul class="menu">
<li>menu1
</li>
<li>menu2
</li>
</ul>
</nav>
<div class="contentwrapper group">
<main>
<section>
<div class="head">
<h1>Featured Videos</h1>
</div>
</section>
<section>
<h1>Latest Videos</h1>
</section>
</main>
<aside>
<div class="wrap">
category list here
</div>
<div class="wrap">
ads here
</div>
</aside>
</div>
<footer>
<div class="wrap group">
<ul>
<li class="cr">website.com © 2014</li>
<li>Contact
</li>
<li>Rss
</li>
<li>Sitemap
</li>
<li>Webmaster$
</li>
</ul>
</div>
</footer>
All of your syntax is valid, and your CSS looks fine. Just be sure to keep you code clean and simple throughout your project, so that you don't have 50 stylesheets for who-knows-what (speaking from experience XD).
Best of luck to your project.
No.
From the HTML5 spec :: DIV
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
You should not use DIV elements where there are not necessary, especially <div class="wrap"> inside HEADER, <div class="contentwrapper group"> as parent of MAIN, and <div class="wrap group"> inside bottom FOOTER from your code, are redundant.
Related
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul id="navigation">
<li id="nav_home">Home</li>
<li id="nav_gallery">Gallery</li>
<li id="nav_shows">Shows</li>
<li id="nav_contact us">Contact us</li>
</ul>
</div>
</div>
<div id="container2">
<div id="background">
</div>
</div>
</body>
Css :
#nav{
text-align: right;
margin-top: none;
}
#navigation{
list-style: none;
display: inline-block;
margin-left: 10px;
font-size: 17px;
font-family: monospace;
float: right;
position: relative;
}
I can not figure out why it is not working. When I try closing the div header tag after the list (bar) it appears above the logo image. And it is currently like this:
EDIT: How to specify a style for this exact line? I tried anything but i couldn't, due to the fact that with DIV it gets under the whole Anime of the week - http://gyazo.com/5c9c6b57cd7097edc719b09a8bbfdd1d
Try this and then arrange the padding as per required :-
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
}
<div id="navcontainer">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
<li>Vegetables</li>
<li>Fruit</li>
</ul>
</div>
Make necessary changes to replicate the block of CSS code below:
#nav {
margin-top: none;
width: 500px; /* Define a width for the parent cont*/
}
#navigation {
width: 100%; /* Adjsut as needed */
}
#navigation li {
display: inline-block;
list-style: none;
padding: 15px;
}
See working example here
Important: If the logo and the nav are both inside one container, find out what's left of the container after the width of the logo and use it as the with of the nav.
I have made a template of a web page (the code's below). The problem I found is I cannot make the side sections to stick to left and right edges so that the middle would fill the remaining space. I tried to use floats left / right of the CSS but it did not work. I'd need the three blocks to stay separated regardless of they contain. I also tried to change display to inline-block. The code below shows how far I could go. The code is also available on here on JS Fiddle.
<html>
<head>
<style>
section,article,header,footer,nav,aside,h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
}
html {
padding: 10px;
margin: 0;
background-color: #00d;
}
body {
margin: 0;
padding: 0;
background-color: #ddf;
}
nav {
background-color: red;
}
footer {
background-color: yellow;
clear: both;
}
li {
list-style-type: none;
list-style-image: none;
}
#top {
background-color: grey;
padding: 10px 20px;
}
#container {
width: 100%;
}
#left {
vertical-align: top;
background-color: cyan;
width: 15%;
display: inline-block;
}
#main {
width: auto;
display: inline-block;
}
#right {
vertical-align: top;
background-color: magenta;
width: 25%;
display: inline-block;
}
</style>
</head>
<body>
<header id="top">
<h1>Top header</h1>
</header>
<nav>
<h2>Navigation bar</h2>
</nav>
<section id="container">
<aside id="left">
<ul>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
</aside>
<section id="main">
<h2>Articles</h2>
<article>
<header>
<h4>Article 1</h4>
</header>
<p>You can easily change the fo</p>
</article>
<article>
<header>
<h4>Article 2</h4>
</header>
<p>Include items that are .</p>
</article>
<article>
<header>
<h4>Article 3</h4>
</header>
<p>You can easily change th.</p>
</article>
</section>
<aside id="right">
<ul>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
</ul>
</aside>
</section>
<nav>
<h2>Navigation bar</h2>
</nav>
<footer>
<h4>The footer</h4>
</footer>
</body>
</html>
I managed to obtain the result by employing the table, tr, and td HTML tags but I am not really happy with that. I would like to understand what else I can do. I would be grateful if someone could help me with this how I could use proper just CSS selectors to obtain the same result. I attached another the code so present the final effect. Also this code is available on Js Fiddle.
Many thanks.
<!DOCTYPE html>
<html>
<head>
<style>
section,article,header,footer,nav,aside,h1,h2,h3,h4,p,ul,li,table,td,th {
margin: 0;
padding: 0;
}
html {
padding: 10px;
margin: 0;
}
body {
margin: 0;
padding: 0;
background-color: blue;
}
nav {
background-color: red;
}
footer {
background-color: yellow;
}
li {
list-style-type: none;
list-style-image: none;
}
table,th,td {
border: 0;
border-collapse: collapse;
vertical-align: top;
}
table#maintable {
width: 100%;
}
table#maintable td:nth-child(1) {
width: 150px;
background-color: #fcf;
}
table#maintable td:nth-child(2) {
width: auto;
background-color: #cfc;
}
table#maintable td:nth-child(3) {
width: 250px;
background-color: #dff;
}
#top {
background-color: grey;
padding: 10px 20px;
}
#artheader {
background-color: #8f8;
}
</style>
</head>
<body>
<header id="top">
<h1>Top header</h1>
</header>
<nav>
<h2>Navigation bar</h2>
</nav>
<section>
<table id="maintable">
<tr>
<td>
<aside>
<ul>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
<li>Left</li>
</ul>
</aside>
</td>
<td>
<section>
<header id="artheader">
<h2>Articles</h2>
</header>
<article>
<header>
<h4>Article 1</h4>
</header>
<p>You can easily change the fo</p>
</article>
<article>
<header>
<h4>Article 2</h4>
</header>
<p>Include items that are .</p>
</article>
<article>
<header>
<h4>Article 3</h4>
</header>
<p>You can easily change th.</p>
</article>
</section>
</td>
<td>
<aside>
<ul>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
<li>First</li>
</ul>
</aside>
</td>
</tr>
</table>
</section>
<nav>
<h2>Navigation bar</h2>
</nav>
<footer>
<h4>The footer</h4>
</footer>
</body>
</html>
Try this. You weren't accounting for the padding.
CSS
section,article,header,footer,nav,aside,h1,h2,h3,h4,p,ul,li {
margin: 0;
padding: 0;
}
html {
padding: 10px;
margin: 0;
background-color: #00d;
}
body {
margin: 0;
padding: 0;
background-color: #ddf;
}
nav {
background-color: red;
}
footer {
background-color: yellow;
clear: both;
}
li {
list-style-type: none;
list-style-image: none;
}
#top {
background-color: grey;
padding: 10px 20px;
}
#container {
width: 100%;
}
#left {
vertical-align: top;
background-color: cyan;
width: 15%;
display: inline-block;
}
#main {
width: auto;
display: inline-block;
}
#right {
vertical-align: top;
background-color: magenta;
width: 25%;
display: inline-block;
position:fixed;
right:10px;
}
How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:
<body>
<div id="header">
<h1 style="color: #CC6600; height: 100px; width: auto;">
Dial food</h1>
</div>
<div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
word-spacing: 24px; position:absolute">
About
Restaurants
Contact
Support
</div>
</body>
can you please help me in getting this alignment and link text only get aligned?
Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)
<h1 style="color: #CC6600; height: 15px; width: auto;">
And use the following CSS to remove the underline.
#Menu a {
text-decoration:none;
}
http://jsfiddle.net/6bxVr/
HTML
Dial food
<ul>
<li> About </li>
<li>Restaurants </li>
<li>Contact </li>
<li>Support </li>
</ul>
CSS
.header
{
color: #CC6600;
height:20px;
width: auto;
margin:10px;
}
ul
{
list-style:none;
}
ul li
{
float:left;
padding:10px;
background-color: #330000;
word-spacing: 24px;
font-size: 20px;
height: 25px;
width:auto;
}
li a
{
text-decoration:none;
}
Fiddle Demo Here
Update fiddle of Yours
Hope this helps
happy coding..!!
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari
I created a layout were everything is centered (with the "margin="0 auto" technique). I also wanted the header and footer to be black and expand to both sides when the browser enlarge to the sides. If I center everything the black background will center too and it wont expand indefinably. The only solution I found was to apply the background style to the header and footer and using a class inside them (.container) to center the content (I think Stack Overflow uses this technique with the footer). It's nice but I would like to know if there's a better way rather than adding additional divs?
MY HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>globo design</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
</head>
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<!-- content -->
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Our Work</h2>
<!-- slideshow -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
Content for slide 1 goes here
</div>
<div class="slide">
Content for slide 2 goes here
</div>
<div class="slide">
Content for slide 3 goes here
</div>
<div class="slide">
Content for slide 4 goes here
</div>
</div>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
MY CSS:
/* reset */
* {
margin: 0;
padding: 0;
}
/* tags */
body {
background-color: #FFFFFF;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: #2D2D2D url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #418EE4;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
/* header */
#header {
background-color: #2D2D2D;
padding-top: 10px;
}
/* navigation */
ul#navigation {
height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
float: left;
}
ul#navigation li a {
background: url(../images/tab.png);
color: #C0C0C0;
display: block;
height: 20px;
outline: none;
padding-left: 10px;
text-decoration: none;
}
ul#navigation li a:hover {
color: #418EE4;
}
#home li.home a, #portfolio li.portfolio a, #about li.about a, #contact li.contact a {
background-position: 0 -32px;
color: #757575;
}
ul#navigation span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 20px;
padding-right: 20px;
}
#home li.home span, #portfolio li.portfolio span, #about li.about span, #contact li.contact span {
background-position: 100% -32px;
}
/* content */
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 2px dashed #F0F0F0;
border-bottom: 2px dashed #F0F0F0;
padding: 5px 0 5px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column {
float: left;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
/* footer */
#footer {
clear: both;
background-color: #2D2D2D;
height: 200px;
}
I haven't tested your code, but from the description it sounds like what I would typically do to code a stacked layout like this. My HTML structure would be something like this (obviously I've left out head, links to stylesheets, etc. for the sake of a simple example):
<html>
<body>
<div id="header-wrap">
<div id="header"> ... </div>
</div>
<div id="main-wrap">
<div id="main"> ... </div>
</div>
<div id="footer-wrap">
<div id="footer"> ... </div>
</div>
</body>
</html>
I think you can see how the CSS would be written for this -- each of the wrappers (#header-wrap, #main-wrap, #footer-wrap) would have the background applied and 100% width, then the inner containers (#header, #main, #footer) would have a fixed width with no background applied. If you are using, for example, 2 floated columns inside the main, you'll have to use something similar to a div that clears underneath for the background to fill the height of the content. It's not the best solution, but it's common and works well.
<div id="main">
<div style="float: left; width: 30%;"> ... </div>
<div style="float: right; width: 60%;"> ... </div>
<div style="clear: both; height: 0;"> </div>
</div>