New to the site, hope somebody can help me.
I'm designing a new site using CSS3 and HTML5 (not a wizard in either, but getting the basics down), but for some reason, when I view a basic layout in IE9, it will not display colours or formatting properly. The same page will show as requested in Chrome and in Firefox. Could somebody please assist me on this?
I'll post code below, just a very basic layout with testing colours and sample text. Thanks.
`
HTML CODE
<!DOCTYPE html>
<html>
<head>
<link href="css/test.css" rel="stylesheet" media="screen">
<title>Testing123.com</title>
</head>
<body>
<header id="mainHeader"><h1>TestSite123.com</h1>
<nav id="mainNav">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</nav>
</header>
<aside id="lhs">
<h2>Recent1</h2>
<h2>Recent2</h2>
<h2>Recent3</h2>
</aside>
<content id="Content">
<h2>News</h2>
<h2>Misc</h2>
</content>
<aside id="rhs">
Right Side
</aside>
<footer id="mainFooter">Footer</footer>
</body>
</html>
CSS CODE
#charset "utf-8";
/* CSS Document */
/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
margin: 0;
padding: 0;
border: 0;
}
html {
background-color: #ffffff;
}
body {
width: 85%;
margin: 0 auto;
}
header#mainHeader {
background-color: #000000;
height: 140px;
position: relative;
}
header#mainHeader h1 {
color: #ffffff;
font-size: 2em;
font-family: Arial;
}
nav#mainNav ul, ul.menu {
list-style: none;
}
nav#mainNav {
background-color: #e3e6eb;
text-decoration: none;
position: relative;
height: 25px;
margin-top: 54px;
margin-bottom: none;
}
header#mainHeader nav ul {
float: right;
position: relative;
margin-top: 1px;
}
header#mainHeader nav li {
float: right;
font-family: Garamond;
font-size: 1.2em;
padding: 0 12px;
}
aside#lhs{
width: 200px;
background-color: brown;
font-size: 1.8em;
float: left;
}
content#Content {
font-size: 1.6em;
color: red;
background-color: black;
width: 200px;
}
aside#rhs{
background-color: green;
font-size: 1.4em;
float: right;
position: relative;
width: 150px;
}
footer#mainFooter {
clear: both;
background-color: white;
font-size: 1.2em;
}
/*end of css file*/`
First of all, in your CSS, don't overspecify your ID's (or any element for that matter)
so don't write header#mainHeader but just #mainHeader
Second,
Don't give your html element a background-color, set this on the body tag instead.
Third,
What is it exactly that doesn't display correctly?
Related
I have a pretty specific question: I'm building something like a simple flat table (I don't use table itself because of rounded borders issue).
I'm using unordered list here and the problem is that I can't figure out how to align items in the second column, taking into account that the content should be dynamic (e.g. changing numbers).
Here's the markup for one row:
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
And CSS:
.ktbl_head {
padding: 15px 0 0 0;
height: 100%;
background-color: #ebe7e7;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.ktbl_head ul li {
display: inline;
padding-right: 135px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
font-weight: 300;
color: #888888;
}
.ktbl_mid_wht {
background-color: #ffffff;
height: 100%;
padding: 20px 0 0 0;
}
.ktbl_mid_wht ul li {
display: inline;
text-align: left;
padding-right: 90px;
font-family: "Open Sans", sans-serif;
font-size: 18px;
font-weight: 400;
color: #888888;
}
Thanks for your attention!
here is my implementation on aligning the table without the table tag:
HTML
<div class="container">
<section class="ktbl_head">
<ul>
<li>VALUE</li>
<li>VALIDITY</li>
</ul>
</section>
<section class="ktbl_mid_wht">
<ul>
<li>500 units</li>
<li>15 days</li>
<button class="btn btn-sm getdramz pull-right">GET</button>
</ul>
</section>
CSS
.container {
border-radius: 10px;
border: 1px solid rgb(200,200,200);
overflow: hidden;
}
section {
font-family: "Open Sans", sans-serif;
width: 100%;
}
section:nth-child(2n+1) {
background-color: #ebe7e7;
}
section ul {
padding: 0;
margin: 0;
height: 65px;
}
section ul li {
width: 45%;
line-height: 65px;
display: inline-block;
}
section ul li:first-child {
padding-left: 35px;
}
Result
Explanation
You see, in the HTML, I added a new div as a container to create the curved corner with border-radius (the overflow: hidden needs to be used so that the content is encapsulated by the container).
For the CSS, section maintains general property such as font-family. Furthermore, section:nth-child(2n+1) is used to create background-color every other element starting with 1st,3rd,5th,... element. The selectors section ul, section ul li, and section ul li:first-child are used to make the CSS selectors more semantic (it makes clean code and easy to maintain in the future). Please see the code below for the demo. Happy coding!
PLAYGROUND
Give all the li's a width in which all of the content-length will fit..
I am trying to position some html elements (particularly h1 and p) under a position: fixed div without having to use the <br> element, because if the top div gets resized (in height), then it will overlap the <h1> and <p> element. Since this type of question usually needs code, here it is:
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Home | lobuo</title>
<link type="text/css" rel="stylesheet" href="stylesheet-main.css">
</head>
<body>
<div id="menuBack">
<ul id="menuBar">
<li class="menuItem">Home</li>
<li class="menuItem" class="subMenuHolder">
<a>Projects ▾</a>
<ul class="subMenu">
<li>Minecraft projects</li>
<li>Minecraft mods/plugins</li>
<li>Web apps</li>
</ul>
</li>
</ul>
<a href="https://github.com/lobuo">
<img class="socialIcon" src="img/Octocat.png" />
</a>
<a href="https://www.youtube.com/LobuoDev">
<img class="socialIcon" src="img/YouTube-icon-full_color.png" />
</a>
</div>
<br><br><br><br>
<div>
<h1>Welcome to my website!</h1>
<p>This is my website. I know how to code a little HTML and JavaScript. I do not have many projects here yet, but there will be some soon. The website is currently under construction, so don't be too dissapointed if a link doesnt work, or a page doesnt exist.</p>
<p>If you find something wrong with the website, you can report it as a bug <a>here.</a></p>
</div>
</body>
</html>
and here is the stylesheet-main.css file:
body {
margin: 0px;
}
#menuBack {
height: auto;
width: 100%;
background-color: rgba(9, 52, 100, 0.92);
position: fixed;
}
.menuItem {
color: #e5822e;
display: inline-block;
font-size: 25px;
font-family: verdana, sans-serif;
padding-left: 15px;
padding-right: 15px;
}
.menuItem:hover {
color: #ab6122;
background-color: rgba(48, 95, 147, 0.92);
}
.socialIcon {
height: 30px;
display: inline-block;
vertical-align: middle;
float: right;
padding: 20px;
}
a {
text-decoration: none;
color: #f44d4d;
}
h1 {
font-family: sans-serif;
text-align: center;
}
p {
font-family: "andale mono", "courier new", courier, serif;
padding: 10px;
}
/* MenuBar dropdown menu came from here: http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ */
#menuBar {
float: left;
}
#menuBar > li {
float: left;
}
#menuBar li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menuBar ul {
position: absolute;
list-style: none;
left: 7.1em;
display: none;
}
#menuBar ul li a {
width: auto;
background-color: rgba(9, 52, 100, 0.92);
}
#menuBar ul li a:hover {
background-color: rgba(48, 95, 147, 0.92);
}
#menuBar li:hover ul {
display: block;
}
Thanks in advance :D
Set the margin-top of the div that you need to be pushed down.
So wrap everything that needs to be pushed down in a div with a class name. Like:
<div class="container">
//everything that needs to be pushed down goes here
</div>
Then in your css you can push that whole container down by setting it's margin-top
.container {
margin-top: 100px;
}
Try setting position to sticky instead of fixed and give it a top: 0px;
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out:
Snow Candy <-
This is the HTML that I've got:
<div id="header">
<h1>Logo</h1>
<ul id="nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
<div id="content">
<h1>Header One</h1>
</div>
This is the CSS I've got:
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#header{
float: right;
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}
#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}
Ok, Henry.
I added some code into the css - http://jsfiddle.net/JET4v/2/
Also added wrapper to keep it all in control.
This basically says that there wont be anything beside #header and
#content
Also #header #header h1 #header #nav #content will all be
floated to the left.
And #wrap basically centers itself.
#wrap { margin: 0 auto; width: 700px; }
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
Note that you might want to add width and height values too, but not height to the #content of course.
And if you want to use #wrap you should know that it should be the width of your widest element(s)
I want the following code to display only 1 line of text. How can I get rid of the break between the span and the ul?
<div id="twitter_div">
<span class="talenthouse">#twittername: </span>
<ul id="twitter_update_list">
</ul>
</div>
With the following CSS:
*{
margin: 0;
padding: 0;
}
#twitter_div{
font-family:"lucida grande",tahoma,arial,sans-serif;
color: #999999;
font-size: 71%;
background: url(images/twitter_bg.gif) top left no-repeat;
width: 965px;
height: 48px;
overflow: auto;
padding: 15px 0 0 85px;
}
.talenthouse{
font-family: "Helvetica Neue", "lucida grande",tahoma,arial,sans-serif;
color: #80c242;
font-weight: bold;
font-size: 135%;
display: inline;
}
ul#twitter_update_list{
list-style: none;
width: 780px;
height: 15px;
display: inline;
}
Try this CSS.
<style type="text/css">
ul, li, ol{display:inline}
</style>
Short answer: put this in your CSS.
ul#twitter_update_list, ul#twitter_update_list li { display: inline; }
Try to use a reset sheet to remove all paddings/margins from the elements.
Google for 'eric meyer reset sheet'.
Then put the list an the content to display:inline;
You can set the CSS to display the UL inline. This will also remove the dots.
#twitter_div li { display: inline; }
Thanks
Andi
I believe this should work:
#twitter_div span { float: left; }
#twitter_update_list { float: left; margin: 0; }
EDIT: I just added the margin: 0 which brings the list up to the same level as the span.