i'm beginner in CSS and i try to do somethings but i encountered some problems and here is my problem
i have this peace of CSS code to repeat a background horizontally but i want background to cover just what i wrote not more (there is extra color shown under what i write , i can't upload my photo)
<!DOCTYPE html>
<html>
<head>
<style>
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
}
.Container_5 {
float:left;
}
#Title {
font-size:68px;
font-family:sans-serif;
}
.Container_11{
float:left;
color:white;
}
li{
list-style-type:none;
display:inline;
padding-left:15px;
color:white;
font-size:20px;
font-family:sans-serif;
margin-top:30px;
}
nav{
margin-left:150px;
text-align:right;
margin-top:30px;
margin-right:250px;
}
body{
min-width:960px;
background-image:url("bg.png");
background-repeat:repeat-x;
}
</style>
<body>
<div class="Container_16">
<div class="Container_5" id="Title">Book.me </div>
<div class="Container_11"><nav>
<ul>
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav></div>
</div>
</body>
</head>
</html>
To apply background image to facebook link only, use this css:
#title > a {
background: url('bg.png') repeat-x;
}
Because you are giving the background to body. I see you have <div class="Container_16">
in which you have all your text. So you can set the background to that div only.
CSS
body{
min-width:960px;
}
.Container_16 {
margin-left:auto;
margin-right:auto;
width:960px;
height:100px;
background-image:url("image.png");
background-repeat:repeat-x;
}
DEMO
Related
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Please do bear with me I am aware this is mind-numbingly basic but I need to start somewhere and I both can't find an answer and can't find a reason why.
My nav bar does not correspond to my div's border and this is less of a problem but how do I get it so that the nav bar and the header don't overlap when I use the border because as of now the div border is only working on the header.
you need overflow hidden to container.
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:gainsboro;
height:548px;
width:100px;
float:left;
padding:px;
}
body {
background-color:Lavender;
}
article {
float:right;
height:1250px;
width:580px;
text-align:center;
padding:1em;
background-color:#5DADE2;
}
section {
float:left;
height:1320px;
width:600px;
text-align:center;
padding:0em;
background-color:#ECF0F1
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
div.container {
width:100%;
border:2px solid purple;
overflow: hidden;
}
.clearfix {
overflow: auto;
}
.clear {
clear:right;
line-height:0;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Links - Bannerlord Assignment</title>
<link rel="stylesheet" type="text/css" a href="BannerlordTheme2.css">
</head>
<div class="container">
<body>
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</body>
</div>
<br class="clear" />
</html>
Have you thought about adding a 5px top margin to your nav bar, this will account for the 5px border... I think. I'm also still learning. Best of luck, I'll be watching.
Also you always want body to be the outer most thing of what is rendered on the page. So any containers need to be inside of it.
Problem is a) your body tag is in the wrong place (should start just before head, and end just before html tag and b) there is no height declaration on the container.
Adding this code to the CSS:
html,body {
background-color:Lavender;
height:100%;
}
div.container {
width:100%;
height:100%;
border:2px solid purple;
}
and having this to html should work.
<body>
<div class="container" style = "border: solid yellow;">
<header>
<h1>Further Information</h1>
</header>
<nav>
Home<br>
About<br>
Media<br>
</nav>
</div>
<br class="clear" />
</body>
</html>
I'm trying to create a site with the content in between two div columns labeled lwall and rwall , but I can't get my two side div's to show up. Why are they disappearing and how can I prevent this in the future?
<!DOCTYPE html>
<html>
<head>
<style>
body{
margin:auto;
background-color: maroon;
}
.head{
margin:auto;
text-align:center;
color:#00a2e8;
background-color:maroon;
width:750px;
}
.nav{
background-color:maroon;
width:750px;
margin:auto;
text-align:left;
}
.nav ul{
margin:auto;
padding:0px;
text-align:center;
}
.nav li{
display:inline;
list-style-type:none;
padding:20px;
}
.nav a{
display:inline;
background-color:maroon;
color:white;
text-decoration:none;
}
.nav a:hover{
display:inline;
color:#00a2e8;
text-decoration:none;
}
.content{
background-color:white;
margin:auto;
width:750px;
}
.content img{
width:200px;
height:250px;
}
.content ul{
text-align:center;
padding:20px;
}
.content ul li{
display:table-cell;
list-style:none;
}
.content ul li p{
padding:10px;
}
.lwall{
float:right;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.rwall{
float:left;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.foot{}
</style>
</head>
<body>
<div class="head">
<h1>Sea Aggie Brothers & Sisters</h1>
</div>
<div class="nav">
<hr>
<ul>
<li>Home</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Calendar</li>
</ul>
<hr>
</div>
<div class="lWall">
</div>
<div class="rWall">
</div>
<div class="content">
<ul>
<li><div class="tbox">
<img src="Calendar.jpg" >
<h2>Calendar</h2>
<p>Check here to moniter meetings and other events. Additionally this calendar can be synchronized with other calendar programs.</p>
</div></li>
<li><div class="tbox">
<img src="Calendar.jpg" >
<h2>Resources</h2>
<p>When you join BASS you not only benafit from a strong community but also from our club resources such as our class notes & study guide database.</p>
</div></li>
<li><div class="tbox">
<img src="Contact.jpg" >
<h2>Newsfeed</h2>
<p>Catch up on the latest club news. Check here for anouncments and details on recent club events. This feed is also availible on facebook.</p>
</div></li>
</ul>
</div>
</body>
</html>
Simple. CSS declaration name is wrong. It should be .lWall and .rWall not .lwall and rwall. HTML tags are Case insensitive. But Custom CSS names are Case sensitive.
.lWall{
float:right;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
.rWall{
float:left;
background-color:blue;
height:50px;
width:50px;
background-repeat: repeat;
}
Or Change your HTML code like below.
<div class="lwall">
</div>
<div class="rwall">
</div>
DEMO
You just need to fix two things in your css, .lWall (insertspace) then {...} and for .rWall (insert space){..}
I am inputting this in w3school's tester and I can't figure out how to vertically align the text. vertical-align:middle; doesn't help.
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:100px;
height:30px;
margin:5px;
background-color:#66CC33;
text-decoration:none; color:#000;
text-align:center;
font-family:"Verdana",Times,serif;
vertical-align:middle;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Set the line-height equal to the height (30px).
http://jsfiddle.net/9Gr9S/
li {
padding-right: 80px;
padding-top: 25px; /*could be bottom depens on what you prefer to do.*/
}
I guess this work, if the px not match play with them see what you can do.
Don't forget confirm or vote up.
I am trying to replicate layout of html5doctor.com. I have IE8 installed here.
I am able to produce following output:
HTML
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="header">
</div>
<div id="nav">
<div id="navmenus">
<ul id="navmenulist">
<li class="menu" id="id1">
Home
<li class="menu">
Products
<li class="menu">
About Us
</ul>
</div>
</div>
<div id="content" >
<div id="article"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS
/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/
Just deleted it for simplicity
*/
body
{
margin:0px;
padding:0px;
background-color:#E8E8E8;
text-align:center;
}
#header
{
background-color:#1F7ADB;
width:100%;
height:150px;
}
#nav
{
background-color:#1F7ADB;
width:100%;
text-align:center;
}
#navmenus
{
background-color:#14B3F7;
width:900px;
text-align:left;
}
li.menu
{
list-style:none;
display:inline;
height:35px;
padding:12px;
}
li.menu:hover
{
background-color:yellow;
}
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
}
Notice li.menu:hover in above CSS. It is not working in IE8. So I added <!DOCTYPE html> as suggested at this thread.
It made hover work but now it broke the layout as follows:
I will like to get result that will work on IE8 first and then will like to learn work around that will work consistently in major (may not be in IE6) browser. And will glad to stick to CSS and HTML (no script). And above all will like to learn whats exactly wrong here.
Remove the text-align:center; from the body and use margin:auto for the block elements you want centered in the page..
The elements that require it are #navmenus and #content, so
#navmenus
{
background-color:#14B3F7;
width:900px;
margin:0 auto;
}
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin:0 auto;
}
I would update the CSS for the content area to this:
#content
{
width:900px;
background-color:#ffffff;
height:1300px;
margin: 0 auto;
}
Using the margin will center this element, rather than trying to use text-align on the parent element.
My code has been validated by w3school yet it still displays differently in IE and firefox.
My link bar allong the top seems to cascade down in IE but displays in a stright line (as it should be ) in Firefox!!!
My HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="lbf.css">
<title>Love British Film</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="main_container">fegerfg
<div id="header">
<div class="logo">Love British Film.com </div>
</div>
<div class="nav_bar">
<ul class="nav_list">
<li class="odd">Home</li>
<li class="even">Reviews</li>
<li class="odd">Forums</li>
<li class="even">Videos</li>
<li class="odd"><a href="index.html" >Downloads</a></li>
<li class="even">News</li>
<li class="odd"><a href="index.html" >Fun bits</a></li>
<li class="even">Contact us</li>
</ul>
</div>
<div class="main_text">
<div class="header">HEADER FOR MAIN CONTENT</div>
Main content!!
</div>
<div id="film_of_day">Film of day </div>
<div id="poll_of_week">asdnasdljasasdasfdasfasfas</div>
</div>
</body>
</html>
And My CSS code
body
{
background:url(bg.jpg) no-repeat #FFF center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
}
div {
margin: 0px;
padding: 0px;
width: 0px;
}
#main_container{
width:1200px;
height:auto;
margin:auto;
padding:0px;
}
#header{
position:relative;
width:1200px;
height:170px;
background:url(header.jpg) no-repeat center;
background-position:0px 0px;
margin:auto;
padding:5px;
}
.logo{
width:auto;
height:auto;
font-size:20px;
position:relative;
top:80%;
text-align:right;
}
.nav_bar{
width:1200px;
height:50px;
}
ul.nav_list{
list-style-type:none; float:left; display:block; width:1200px;
margin:0px; padding:0px;
}
ul.nav_list li.odd a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left;
background-color:rgb(147,216,255);height:40px; line-height:40px; color:rgb(168,100,63);
}
ul.nav_list li.even a{
display:block;width:150px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; color:rgb(168,100,63);
height:40px; line-height:40px;background-color:rgb(26,142,165);
}
a.odd:link, a.odd:visited {
display:block;width:133px; text-align:center; float:left;text-decoration:none; background:url(images/home.png) no-repeat left; }
ul.nav_list li.even a:hover{background-color:#A29;}
ul.nav_list li.odd a:hover{background-color:#F99;}
a.even:link, a.even:visited {
display:block;width:133px; text-align:center; float:left;height:40px;text-decoration:none; background:url(images/home.png) no-repeat left; color:#676d77;}
a.even:hover{
color:#FFFFFF;
}
.header{
width:500px;
text-align:center;
margin-bottom:50px;
}
.main_text{
display:inline-block;
float:left;
width:600px;
height:600px;
background-color:rgb(147,216,255);
}
#film_of_day{
float:right;
width:340px;
height:250px;
background-color:rgb(147,216,255);
}
#poll_of_week{
margin-top:50px;
float:right;
width:280px;
height:250px;
outline:solid;
padding:1px;
}
Welcome to the real world.
IE and Firefoy interpret CSS different from each other. This was always a problem, and it will always be ! If you want to reduce different behaviours or looks, you could try to use a so called CSS reset.
What is a css reset ?
This is a simple css file, which resets every positioning, padding,margin, everything that comes by default from the browser to zero. So you can ensure that most of your styling will be interpreted the same. Sure still it will not alway be the same, but it helps you to put it in the right direction. You could also use GridLayouts for positioning, which is also a great tool and works and looks the same in the most browsers.
http://meyerweb.com/eric/tools/css/reset/
http://960.gs/
And just a hint, open it with opera,chrome, elder verions of IE, safari and you will be astonished that it also looks different ;-)
You are floating your a tag inside your li tag which isn't good practice and causing your problems.
You should float your li tag and leave your a tag un-floated inside as the link
See: http://jsfiddle.net/ZmhzA/1/