I write HTML file and CSS file and operate in Chrome but I think CSS file doesn't apply to HTML file...
I don't know why... but I think I documented code properly
here is directory
enter image description here
and this is What Problematic code
* {
margin:0;
padding:0;
}
body {
font-family:"맑은 고딕", "돋움";
font-size:12px;
color:#444444;
}
ul {
list-style-type:none;
}
.clear {
clear:both;
}
#wrap {
width:970px;
margin:0 auto;
}
/* 상단 헤더 */
header {
height:100px;
position:relative;
}
header #logo {
position:absolute;
top:10px;
left:20px;
}
header #top_menu {
position:absolute;
top:10px;
left:770px;
}
header #main_menu{
width:757px;
height:38px;
background-image:url("../img/main_menu_bg.png");
background-repeat:no-repeat;
position:absolute;
top:40px;
left:210px;
}
header #main_menu li {
display:inline-block;
margin:12px 30px 0 50px;
font-size:13px;
}
header #main_menu a:link {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:hover {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:visited {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:active {
text-decoration:none;
color:#ffffff;
}
aside {
width:190px;
float:left;
}
aside #login_box {
width:186px;
heigth:120px;
border:solid 1px #dddddd;
}
aside #login_title {
margin:10px 0 0 10px;
}
aside #input_button {
margin:10px 0 0 10px;
}
aside #login_input {
float:left;
}
aside #login_btn {
float:left;
margin:3px 0 0 5px;
}
aside #login_input input {
width:100px;
height:20px;
border:solid 1px #dddddd;
}
aside #login_input li {
margin-top:2px;
}
aside #join_search {
margin: :10px 0 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="/css/common.css?">
<link rel="stylesheet" type=="text/css" href="/css/header.css?">
<link rel="stylesheet" type=="text/css" href="/css/footer.css?">
<link rel="stylesheet" type=="text/css" href="/css/main.css?">
</heda>
<body>
<div id="wrap">
<header>
<a href="index.html"><img id="logo" src="img/logo.png">
<nav id="main_menu">
<ul>
<li>자유 게시판<li>
<li>기타 연주<li>
<li>공동 구매<li>
<li>연주회 안내<li>
<li>회원 게시판<li>
</ul>
</nav>
</header> <!-- header -->
<aside>
<article id="login_box">
<img id="login_title" src="img/ttl_login.png">
<div id="input_button">
<ul id="login_input">
<li><input type="text"></li>
<li><input type="password"></li>
</ul>
<img id="login_btn" src="img/btn_login.gif">
</div>
<article>
</aside>
</div><!-- wrap -->
</body>
</html>
and this is the output enter image description here
so I want to know why CSS file doesn't work :/
There seems to be some problem with the file paths specified in the link href of the css files. Instead of mentioning "/css/common.css" if you write "css/common.css". The styles should load given the directory structure is as posted in the image.
Check your css pathing used in the css, according to your screenshot you need to remove the / from the start, also i adivce you to open the consil of chrome that way you cann see the pathing issue
If you check the console of the browser you will most probably have the failing CSS includes and you will see from where it tries to load them.
By using href="/css/common.css" it tries to load the styles from the base domain so, for example if your URL to access the website is: http://localhost/Ch12_Make_commuSite/index.html the CSS files will be loaded from here: http://localhost/css/common.css which is definitely not correct.
It works exactly like the src for the images which you got correctly.
You can read more here
Here is a solution that should work
* {
margin:0;
padding:0;
}
body {
font-family:"맑은 고딕", "돋움";
font-size:12px;
color:#444444;
}
ul {
list-style-type:none;
}
.clear {
clear:both;
}
#wrap {
width:970px;
margin:0 auto;
}
/* 상단 헤더 */
header {
height:100px;
position:relative;
}
header #logo {
position:absolute;
top:10px;
left:20px;
}
header #top_menu {
position:absolute;
top:10px;
left:770px;
}
header #main_menu{
width:757px;
height:38px;
background-image:url("../img/main_menu_bg.png");
background-repeat:no-repeat;
position:absolute;
top:40px;
left:210px;
}
header #main_menu li {
display:inline-block;
margin:12px 30px 0 50px;
font-size:13px;
}
header #main_menu a:link {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:hover {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:visited {
text-decoration:none;
color:#ffffff;
}
header #main_menu a:active {
text-decoration:none;
color:#ffffff;
}
aside {
width:190px;
float:left;
}
aside #login_box {
width:186px;
heigth:120px;
border:solid 1px #dddddd;
}
aside #login_title {
margin:10px 0 0 10px;
}
aside #input_button {
margin:10px 0 0 10px;
}
aside #login_input {
float:left;
}
aside #login_btn {
float:left;
margin:3px 0 0 5px;
}
aside #login_input input {
width:100px;
height:20px;
border:solid 1px #dddddd;
}
aside #login_input li {
margin-top:2px;
}
aside #join_search {
margin: :10px 0 0 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>클래식기타 커뮤니티</title>
<link rel="stylesheet" type=="text/css" href="css/common.css?">
<link rel="stylesheet" type=="text/css" href="css/header.css?">
<link rel="stylesheet" type=="text/css" href="css/footer.css?">
<link rel="stylesheet" type=="text/css" href="css/main.css?">
</heda>
<body>
<div id="wrap">
<header>
<a href="index.html"><img id="logo" src="img/logo.png">
<nav id="main_menu">
<ul>
<li>자유 게시판<li>
<li>기타 연주<li>
<li>공동 구매<li>
<li>연주회 안내<li>
<li>회원 게시판<li>
</ul>
</nav>
</header> <!-- header -->
<aside>
<article id="login_box">
<img id="login_title" src="img/ttl_login.png">
<div id="input_button">
<ul id="login_input">
<li><input type="text"></li>
<li><input type="password"></li>
</ul>
<img id="login_btn" src="img/btn_login.gif">
</div>
<article>
</aside>
</div><!-- wrap -->
</body>
</html>
Related
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.25em;
color:#999;
}
img {
border:0;
vertical-align:top;
text-align:left;
}
object {
vertical-align:top;
outline:none;
}
ul, ol {
list-style:none;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.container {
width:100%;
}
/*==== GLOBAL =====*/
.inner-page {
width:864px;
margin:0 auto;
padding:150px 0 0 0;
font-size:.8125em;
position:relative;
}
.header {
height:149px;
overflow:hidden;
}
.header.small {
height:110px;
}
.content {
padding:0 0 60px 0;
}
.footer {
padding:2px 4px 20px 0;
background:url(images/footer-bg.gif) left top repeat-x;
text-align:right;
}
.page {
height:100%;
width:100%;
min-height:1050px;
height:100% !important;
height:1050px;
position:relative;
}
#services {
background:#181818;
}
#home {
background:#181818;
}
#contacts {
background:#181818;
}
/*----- forms parameters -----*/
input, select, textarea {
font-family:Arial, Helvetica, sans-serif; font-size:1em;
vertical-align:middle;
font-weight:normal;
}
/*----- other -----*/
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:20px;
}
.p1 {
margin-bottom:10px;
}
.p2 {
margin-bottom:20px;
}
.p3 {
margin-bottom:30px;
}
/*----- txt, links, lines, titles -----*/
a {
color:#f4f4f4;
outline:none;
}
a:hover{
text-decoration:none;
}
h1 {
font-size:20px;
line-height:1.2em;
color:#f4f4f4;
}
h2 {
font-size:16px;
line-height:1.2em;
color:#f4f4f4;
margin-bottom:11px;
}
h3 {
font-size:40px;
color:#2c3234;
line-height:1.2em;
font-weight:normal;
text-transform:uppercase;
}
h4 {
font-size:1em;
font-weight:normal;
}
.line-ver, .line-ver1 {
background-image:url(images/line-ver.gif);
background-repeat:repeat-y;
width:100%;
}
.link1 {
color:#f4f4f4;
text-decoration:none;
font-size:15px;
padding:0 0 0 10px;
}
.link1:hover {
text-decoration:underline;
}
.address dt {
margin-bottom:16px;
}
.address dd {
clear:both;
color:#fff;
}
.address dd span {
float:left;
width:85px;
color:#999;
}
.address dd a {
color:#999;
}
/*===== header =====*/
.header .logo {
font-size:68px;
line-height:1.2em;
float:left;
}
.header .logo a {
color:#fff;
text-decoration:none;
}
.header .nav {
float:right;
}
.header .nav li {
float:left;
padding-left:5px;
}
.header .nav li a {
float:left;
width:153px;
color:#f4f4f4;
text-decoration:none;
background:url(images/nav-bg.png) no-repeat left top;
font-size:20px;
line-height:46px;
text-align:center;
text-transform:uppercase;
}
.header .nav li a:hover, .header .nav li a.current {
background:url(images/nav-bg.png) no-repeat left -46px;
color:#333;
}
/*===== content =====*/
.content {
}
.list1 li {
font-size:15px;
padding:0 0 4px 0;
}
.list1 li a {
color:#f4f4f4;
text-decoration:none;
background:#f53502;
display:inline-block;
padding:4px 10px 4px 10px;
}
.list1 li a:hover {
background:url(images/bg1.gif) left top;
}
.social-links {
width:100%;
overflow:hidden;
padding:19px 0 0 0;
}
.social-links li {
display:inline;
}
.social-links li a {
float:right;
background:url(images/button-left.gif) no-repeat left top #757575;
color:#fff;
text-align:center;
font-size:20px;
text-decoration:none;
margin-left:3px;
}
.social-links li a span {
float:left;
padding:0 10px 0 10px;
line-height:33px;
background:url(images/button-right.gif) no-repeat right top;
cursor:pointer;
}
.social-links li a:hover {
color:#f53502;
}
.logo-big {
padding-bottom:39px;
}
.description {
color:#2e3436;
font-size:17px;
line-height:24px;
text-transform:uppercase;
text-align:right;
padding-bottom:35px;
}
/*===== footer =====*/
.footer {
font-size:10px;
text-transform:uppercase;
color:#fff;
}
.footer a {
color:#f53502;
text-decoration:none;
}
.footer a:hover {
text-decoration:underline;
}
/*----- forms -----*/
#contacts-form fieldset {
border:none;
width:240px;
}
#contacts-form label {
display:block;
height:40px;
overflow:hidden;
}
#contacts-form input {
width:225px;
padding:6px 5px 6px 8px;
color:#333;
background:#f4f4f4;
border:none;
}
#contacts-form textarea {
width:225px;
padding:6px 5px 6px 8px;
height:100px;
color:#333;
background:#f4f4f4;
border:none;
overflow:auto;
margin-bottom:15px;
}
/*==========================================*/
/*======== home page ============*/
#home .social-links li a {
background:url(images/button-left1.gif) no-repeat left top #d9d9d9;
color:#fff;
}
#home .social-links li a span {
background:url(images/button-right1.gif) no-repeat right top;
}
#home .social-links li a:hover {
color:#f53502;
}
#home .footer {
color:#282f31;
background:url(images/footer-bg1.gif) left top repeat-x;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="description" content="asdfsfsdfsdf" />
<meta name="keywords" content="asdfsfsdfsdf" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="7 days" />
<meta name="author" content="asdfsfsdfsdf" />
<meta name="identifier-url" content="www.asdfsfsdfsdf.com" />
<meta name="distribution" content="Global" />
<meta name="coverage" content="Worldwide" />
<meta name="rating" content="General" />
<meta name="language" content="English" />
<title>asdfsfsdfsdf</title>
<style type="text/css">
div, p, a, li, td { -webkit-text-size-adjust:none; }
#media print {
html, body {
display: none; /* hide whole page */
}
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="http://www.asdfsfsdfsdf.com/style.css" rel="stylesheet" type="text/css" />
<link href="http://www.asdfsfsdfsdf.com/layout.css" rel="stylesheet" type="text/css" />
<script src="http://www.asdfsfsdfsdf.com/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.asdfsfsdfsdf.com/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://www.asdfsfsdfsdf.com/js/cufon-replace.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<link href="http://www.asdfsfsdfsdf.com/ie_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.asdfsfsdfsdf.com/js/ie_png.js"></script>
<script type="text/javascript">
ie_png.fix('.png, .nav a');
</script>
<![endif]-->
<script language="JavaScript">
/**
* Disable right-click of mouse, F12 key, and save key combinations on page
* By Arthur Gareginyan (arthurgareginyan#gmail.com)
* For full source code, visit https://mycyberuniverse.com
*/
window.onload = function() {
document.addEventListener("contextmenu", function(e){
e.preventDefault();
}, false);
document.addEventListener("keydown", function(e) {
//document.onkeydown = function(e) {
// "I" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
disabledEvent(e);
}
// "J" key
if (e.ctrlKey && e.shiftKey && e.keyCode == 74) {
disabledEvent(e);
}
// "S" key + macOS
if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
disabledEvent(e);
}
// "U" key
if (e.ctrlKey && e.keyCode == 85) {
disabledEvent(e);
}
// "F12" key
if (event.keyCode == 123) {
disabledEvent(e);
}
}, false);
function disabledEvent(e){
if (e.stopPropagation){
e.stopPropagation();
} else if (window.event){
window.event.cancelBubble = true;
}
e.preventDefault();
return false;
}
};
</script>
</head>
<body bgcolor="#333" oncopy="return false" oncut="return false" onpaste="return false">
<!-- privacy page begin -->
<div id="services" class="page">
<div class="inner-page">
<!-- header begin -->
<div class="header">
<div class="logo"><img alt="asdfsfsdfsdf" src="http://www.asdfsfsdfsdf.com/images/asdfsfsdfsdf.jpg" /></div>
<ul class="nav">
<li>home</li>
</ul>
</div>
<!-- header end -->
<!-- content end -->
<div class="content">
<h2>asdfsfsdfsdf™</h2>
<br/>*asdfsfsdfsdf
<br/>*asdfsfsdfsdf
<br/>*asdfsfsdfsdf
<br/>*asdfsfsdfsdf
</p>
<br>
asdfsfsdfsdf
<br><br><br>Request a complimentary sample pack.
<br><br><br><br>
</div>
<!-- content end -->
<!-- footer begin -->
<div class="footer">
Copyright © 2013-2018 asdfsfsdfsdf, LLC. All Rights Reserved view mobile
</div>
<!-- footer end -->
</div>
</div>
<!-- privacy page end -->
<!-- coded by ramzes -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Newbie here. I've tried changing the background color at a few different points but with no luck. On a different page, it works! I've tried to compare and contrast the different code to find the difference - also tried changing values in the external CSS file and also to the bgcolor. Deleted temp internet files, closed browser and rebooted. I also verified that I updated the files I need to, saved them, and then tried opening the file (to test) again in the browser. I verified I'm opening the correct file. Any help is truly appreciated. Thanks.
Here's where the changed should be effected:
#services {
background:#181818;
}
Here's some of my HTML code:
</head>
<body bgcolor="#333" oncopy="return false" oncut="return false" onpaste="return false">
<!-- privacy page begin -->
<div id="services" class="page">
<div class="inner-page">
<!-- header begin -->
<div class="header">
<div class="logo"><img alt="fasdfsdfdfasdf" src="http://www.example.com/images/asdfasdfdsaf.jpg" /></div>
<ul class="nav">
<li>home</li>
</ul>
</div>
<!-- header end -->
<!-- content end -->
<div class="content">
<h2>asdfasdf™</h2>
I am making the website and attaching the current situation as in screenshot
as you can see that the background images is not spreading throughout the body. Anyone can figure it out
Here is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen">
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, footer, header nav ul li a, .nav-bg, .list li img');</script>
<![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!-- START PAGE SOURCE -->
<div class="wrap">
<header>
<div class="container">
<h1>Schooling india</h1>
<nav>
<ul>
<li class="current">Home Page</li>
<li>
<div class="dropdown">About Us
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Admissions
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Rules
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Info Corner
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Achievements
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Gallery
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
<li>
<div class="dropdown">Contact
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div></li>
</ul>
</nav>
<form action="#" id="search-form">
<fieldset>
<div class="rowElem">
<!-- <input type="text" placeholder="Search">
Search</div> -->
<script type="text/javascript">
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear();
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
}
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<!-- <script > var date=new Date();
document.write(date);</script> -->
</fieldset>
</form>
</div>
</header>
<div class="container">
<aside>
<h3>Categories</h3>
<ul class="categories">
<li><span>Programs</span></li>
<li><span>Student Info</span></li>
<li><span>Teachers</span></li>
<li><span>Admissions</span></li>
<li><span>Administration</span></li>
<li><span>Basic Information</span></li>
<li><span>Vacancies</span></li>
<li class="last"><span>Academic Calendar</span></li>
</ul>
<form action="#" id="newsletter-form">
<fieldset>
<div class="rowElem">
<h2>School lettter</h2>
<input type="email" value="Enter Your Email Here" onFocus="if(this.value=='Enter Your Email Here'){this.value=''}" onBlur="if(this.value==''){this.value='Enter Your Email Here'}" >
<div class="clear">UnsubscribeSubmit</div>
</div>
</fieldset>
</form>
<h2>Academic <span>Calender</span></h2>
<ul class="news">
<li><strong>June 30, 2017</strong>
<h4>1<sup>st</sup> parents-teacher meeting</h4>
parents are requested to be present by 11:00 am sharp </li>
<li><strong>June 14, 2017</strong>
<h4>Start of new term</h4>
Students should be present on the 1st day timings are from 8:00 am to 2:00 pm </li>
<li><strong>May 29, 2017</strong>
<h4>Result declaration</h4>
Report card distribution will start at 9:00pm</li>
<li>
<h4>See more...</h4></li>
</ul>
</aside>
<section id="content">
<div id="banner">
<h2>Educating <span>India <span>Since 1992</span></span></h2>
</div>
<div class="inside">
<h2>Recent <span>News</span></h2>
<ul class="list">
<li><span><img src="images/icon1.png"></span>
<h4>About Us</h4>
<p>This is the region wherein you can give a brief description of your school and its pros. Maybe you can give a read more option too.</p>
</li>
<li><span><img src="images/icon2.png"></span>
<h4>Our Branches</h4>
<p>We have branches in following areas<br><ul style="color: #008cc4">
<li><strong>Branch 1</strong></li>
<li><strong>Branch 2</strong></li>
<li><strong>Branch 3</strong></li>
<li><strong>Branch 4</strong></li></ul></p>
</li>
<li class="last"><span><img src="images/icon3.png"></span>
<h4>Student’s Life</h4>
<p>In this region you can include the alumini students and their profile, recent performance of students in competitions or olympiads</p>
</li>
</ul>
<h2>Move Forward <span>With Your Education</span></h2>
<p><span class="txt1">XYZ school</span>,our school follows the moto of jai Jagat: praise the world. We strive to provide education for everyone</p>
<div class="img-box"><img src="images/1page-img.jpg">Harbouring students from all over the city, with its distingused faculty and staff, we strive to provide excellent education with appropriate details and diversity in knowledge to prrepare better citizens fro a better tomorrow. Having eastablished in 1992, our schoolhas crossed many milestones and from time to time proved its worth by winning competitions and olympiad all over the world</div>
<p class="p0"></p>
</div>
</section>
</div>
</div>
<footer>
<div class="footerlink">
<p class="lf">Copyright © 2017 SiteName - All Rights Reserved</p>
<p class="rf">Design by Rohit Jaiswal</p>
<div style="clear:both;"></div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Following is the style sheet
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1em;
color:#454545;
background-image:url(../images/tail-middle.jpg) repeat-y ;
/*background-image: no-repeat;*/
}
.dropdown {
float: left;
overflow: visible;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 14px 16px;
background-color: inherit;
}
.dropdown:hover .dropbtn {
background-color: #white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #grey;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
html {
min-width:940px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
width:940px;
overflow:visible;
font-size:.875em;
padding-bottom:176px;
}
header {
background:url(../images/header-bg.jpg) no-repeat center top;
min-width:940px;
}
header .container {
height:194px;
position:relative;
padding:0;
}
section#content {
float:left;
width:691px;
}
aside {
width:219px;
float:left;
margin-right:30px;
padding:5px 0 0 0;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
min-width:940px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
fieldset {
border:0;
}
.categories {
padding-bottom:37px;
}
.categories li {
font-weight:bold;
font-size:.857em;
padding-bottom:8px;
margin-bottom:6px;
background:url(../images/divider1.gif) repeat-x left bottom;
}
.categories li.last {
background:none;
padding:0;
margin:0;
}
.categories li span {
display:block;
padding-left:15px;
height:1%;
background:url(../images/marker.gif) no-repeat left 5px;
}
.categories li a {
text-decoration:none;
color:#008cc4;
}
.categories li a:hover {
color:#ff7b01;
}
.news {
margin-top:-25px;
}
.news li {
padding-top:25px;
line-height:1.429em;
}
.news li strong {
font-size:.857em;
color:#454545;
display:block;
padding-bottom:3px;
}
.news li a {
color:#008cc4;
text-decoration:none;
font-weight:bold;
}
.articles {
margin-top:-18px;
}
.articles li {
width:100%;
overflow:hidden;
vertical-align:top;
line-height:1.429em;
padding-top:18px;
}
.articles li img {
float:left;
margin-right:22px;
}
.sitemap {
padding-bottom:15px;
}
.sitemap li {
padding:0 0 5px 16px;
background:url(../images/marker1.gif) no-repeat left 5px;
}
.sitemap li ul {
padding-top:5px;
margin-bottom:-5px;
}
.list {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.list li {
float:left;
width:175px;
margin-right:53px;
}
.list li.last {
margin:0;
}
.list li span {
display:block;
text-align:center;
}
.list li h4 {
padding-top:20px;
}
.list li p {
margin:0;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:20px;
line-height:1.429em;
}
.img-box img {
float:left;
margin:0 20px 0 0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:16px;
line-height:1.429em;
}
.p0 {
margin:0;
}
.address {
width:100%;
overflow:hidden;
padding-bottom:40px;
}
.address address {
font-style:normal;
line-height:1.429em;
float:left;
width:248px;
}
.address address strong {
color:#008cc4;
width:94px !important;
width:91px;
float:left;
}
.address .extra-wrap {
float:left;
width:385px;
}
.address p {
margin:0;
}
#banner {
width:691px;
height:299px;
background:url(../images/banner-bg.jpg) no-repeat left top;
}
#banner h2 {
color:#fff;
font-size:42px;
text-transform:none;
line-height:1.2em;
padding:75px 0 0 55px;
margin:0;
}
#banner h2 span {
display:block;
margin-top:-12px;
color:#fff;
}
#banner h2 span span {
font-size:30px;
margin-top:-8px;
}
a {
color:#ff7b01;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
text-indent:-9999px;
}
h1 a {
width:473px;
height:63px;
position:absolute;
left:0;
top:4px;
background:url(../images/logo.jpg) no-repeat left top;
}
h2 {
font-size:24px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:20px;
}
h2 span {
color:#8d8d8d;
}
h3 {
font-size:20px;
line-height:1.2em;
text-transform:uppercase;
margin-bottom:15px;
}
h4 {
font-size:1em;
color:#008cc4;
margin-bottom:5px;
}
h4 a {
color:#008cc4;
text-decoration:none;
}
h4 a:hover {
color:#ff7b01;
}
.txt1 {
color:#008cc4;
font-weight:bold;
}
.link {
position:absolute;
right:0;
top:159px;
}
header .nav-bg {
background:no-repeat center top;
}
header nav {
position:absolute;
left:0;
top:100px;
}
header nav ul li {
float:left;
font-size:16px;
line-height:1.2em;
text-transform:uppercase;
padding-right:1px;
background:url(../images/divider.gif) repeat-y right top;
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a {
color:#454545;
text-decoration:none;
display:block;
float:left;
text-align:center;
padding:18px 0 20px 0;
background-repeat:no-repeat;
background-position:left top;
}
header nav ul li.current a, header nav ul li a:hover {
color:#008cc4;
}
header nav ul li a.m1 {
width:95px;
}
header nav ul li.current a.m1 {
background-image:url(../images/m1-act.jpg);
}
header nav ul li a.m2 {
width:80px;
}
header nav ul li.current a.m2 {
background-image:url(../images/m2-act.jpg);
}
header nav ul li a.m3 {
width:85px;
}
header nav ul li.current a.m3 {
background-image:url(../images/m3-act.jpg);
}
header nav ul li a.m4 {
width:60px;
}
header nav ul li.current a.m4 {
background-image:url(../images/m4-act.jpg);
}
header nav ul li.last {
background:none;
padding:0;
}
header nav ul li a.m5 {
width:100px;
}
header nav ul li.current a.m5 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m6 {
width:100px;
}
header nav ul li.current a.m6 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m7 {
width:75px;
}
header nav ul li.current a.m7 {
background-image:url(../images/m5-act.jpg);
}
header nav ul li a.m8 {
width:85px;
}
header nav ul li.current a.m8 {
background-image:url(../images/m5-act.jpg);
}
#content .inside {
padding:22px 20px 0 29px;
}
#content .inner_copy, #content .inner_copy a {
border:0;
float:right;
background:#000;
color:#ff7b01;
width:100%;
line-height:10px;
font-size:10px;
margin:-50% 0 0 0;
padding:0;
}
#search-form .rowElem {
height:28px;
position:absolute;
right:0;
top:30px;
}
#search-form input {
width:205px;
background:#fff;
padding:4px 5px 4px 5px;
border:1px solid #d0d0d0;
border-right:0;
color:#454545;
line-height:1.2em;
float:left;
height:18px;
}
#search-form a {
text-transform:uppercase;
color:#fff;
text-decoration:none;
float:left;
background-color:#0087c1;
padding:6px 11px 0 11px;
height:22px;
}
#search-form a:hover {
background-color:#47b6e5;
}
#newsletter-form {
padding-bottom:45px;
}
#newsletter-form fieldset {
background:url(../images/newsletter-bg.gif) no-repeat left top;
width:219px;
height:131px;
overflow:hidden;
}
#newsletter-form .rowElem {
padding:13px 19px 0 17px;
}
#newsletter-form input {
border:1px solid #0086b5;
background:#fff;
color:#8e8e8e;
font-size:.857em;
padding:2px 5px 2px 5px;
width:171px;
margin-bottom:13px;
}
#newsletter-form h2 {
color:#fff;
margin-bottom:13px;
}
#newsletter-form a.fleft {
color:#fff;
position:relative;
top:3px;
}
#newsletter-form a.fright {
display:block;
color:#fff;
border:1px solid #26b6e8;
text-decoration:none;
background-color:#006caa;
padding:2px 11px 3px 11px;
}
#newsletter-form a.fright:hover {
background-color:#47b6e5;
}
#contacts-form {
clear:right;
width:100%;
overflow:hidden;
}
#contacts-form fieldset {
border:none;
float:left;
}
#contacts-form .field {
clear:both;
height:30px;
}
#contacts-form .field.extra {
height:268px;
}
#contacts-form label {
float:left;
width:123px;
font-weight:bold;
color:#008cc4;
}
#contacts-form input {
width:277px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
}
#contacts-form textarea {
width:503px;
height:252px;
padding:2px 0 2px 3px;
border:1px solid #d1d1d1;
color:#70635b;
overflow:auto;
}
footer {
background:url(../images/footer-bg.png) no-repeat center top;
margin-top:-120px;
min-width:940px;
}
footer .footerlink {
margin:0 auto;
width:940px;
height:60px;
padding-top:60px;
color:#454545;
font-size:.785em;
line-height:1.429em;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#454545;
}
.footerlink a {
color:#454545;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#454545;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
}
.footerlink .rf {
float:right;
}
a {
outline:none;
}
Use
background-size:cover;
to stretch the image across the body. If the body background is not covering the footer,that is because you have defined another backgound for footer in
footer {
background:url(../images/footer-bg.png) no-repeat center top;
/*You need to remove the above line*/
margin-top:-120px;
min-width:940px;
}
Edit2
After seeing your [ comment ], it seems that you're still overriding the body background unnecessarily. Why would you?
Change
.wrap {
height:auto !important;
height:100%;
min-height:100%;
background:url(../images/tail-middle.jpg) repeat-y center 194px;
//The above directive will override the body bg, so just remove it
min-width:940px;
}
to
.wrap {
min-width:940px; // Only this seems a sensible declaration.
}
i am using ul an li as menu list.I am able to change color of menu item in hover and visited link but on active state color is not changing, would you tell me what could be the solution for that problem?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chandan</title>
<link rel="shortcut icon" href="../Resources/favicon.png" />
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services"><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
</body>
</html>
#css FIle*
#charset "utf-8";
/* CSS Document */
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a
{
color:#fcb1b1;
text-decoration:none;
}
li a:hover
{
color:#fff;
text-decoration:underline;
}
li a:active
{
color:#fff;
text-decoration:underline;
}
This might help
#menu_line .active a {
background-color:#FFD700;
}
here is my solution in css :
I have edited your code at styles and menu items
simply you must set class="active" to each li element you want to show active
I have added the class="active" to the service menu item.
HTML
<div class="container">
<div class="header">
<div class="menu_line">
<img src="../Resources/Logo.png" alt="logo" id="logo">
<ul>
<li value="home"><b>Home</b></li>
<li value="services" class="active" ><b>Services</b></li>
<li value="portfolio"><b>Portfolio</b></li>
<li value="blog"><b>Blog</b></li>
<li value="hire_me"><b><a href="hire_me.html" title="Hire for a project" >Hire me</a></b>
</li>
</ul>
</div><!--menu line end here-->
</div><!--header end here-->
</div><!--container end here-->
CSS
#logo
{
margin:0 auto;
float:left;
height:55px;
width:60px;
margin-top:0px;
margin-left:0px;
}
ul
{
margin:17px auto;
float:right;
}
li
{
list-style-type:none;
display:inline;
display: inline-block;
padding-left: 25px;
}
.menu_line{
margin:0 auto;
margin-top:60px;
margin-left:120px;
height:55px;
width:730px;
float:left;
border-style: solid;
border-width: 2px;
}
.container {
margin: 0px auto;
width: 998px;
background-position:center;
}
.header
{
margin:0 auto;
background-color:#f82424;
margin-top:-8px;
margin-left:-8px;
height:660px;
width:1007px;
background-position:center;
}
li a,
li a:hover,
li a:active {
color:#fff;
text-decoration:underline;
}
li.active a,
li.active a:hover,
li.active a:active {
background: #323637;
}
I am trying to duplicate http://csswizardry.com/demos/centred-nav/ but make the menu at the top of the screen. I have reviewed some of the tutorials on w3schools and a few others but still cant figure out why it is not going to the top to begin with. Below is the my style.css
body {
width:960px;
top:0px;
padding:10px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:102px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
Below is index.html
<!DOCTYPE html>
<html>
<head>
<title>Photography</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="topnav">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Anyone see what I am doing wrong?
Change
#nav a {
display:inline-block;
padding: 102px;
}
to
#nav a {
display:inline-block;
padding: 0 102px 0 0;
}
and probably add in this too to remove the right side padding from the final child element
#nav a:last-child {
padding:0;
}
You're applying 102px padding all around the a tags, needs to just be on the right side :)
body {
width:960px;
top:0px;
/*############ change padding from 10px to 0px ##########*/
padding:0px 0;
margin:0 auto;
font-family:Calibri, sans-serif;
}
#nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
a{
color:#c00;
text-decoration:none;
font-weight:bold;
}
a:hover{
text-decoration:underline;
}
There was more padding for #nav a{}
I am trying to make my button horizontal but always not work
I have tried display:block, display:inline, adjust padding & margin
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<p1>
RUMAH TAHFIDZ
</p1>
<br>
<p2>
YATIM PIATU DAN DLU'AFA
<p2>
<ul class="navbutton">
<li>BERANDA</li>
<li>ACARA</li>
<li>INFO</li>
<li>DONASI</li>
<li>PROFIL</li>
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:180px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
margin:0 auto;
}
.banner_img {
float:left;
padding-right:10px;
}
p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
text-align:center;
}
p2 {
font-size:20px;
color:#FFF;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
ul.navbutton {
position:relative;
list-style-type:none;
}
ul.navbutton li {
display:inline;
}
and this is preview
https://db.tt/uxAm95A2
help my practice
thank you in advance :)
Check this link, if this is what you want:-
http://jsfiddle.net/s7d8D/
ul.navbutton {position: relative;width: 100%;}
Try
ul li {
display:inline-block;
float:left;
}
Thanks a lot to you guys :D :D :D
I have edited my html and css
my html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="text/html">
<title>Rumah Yatim dan Dlu'afa | Jazirah Indonesia I</title>
<link rel="stylesheet" type="text/css" href="basic.css">
</head>
<body>
<div class="banner_box">
<span>
<img src="images/head.png" height="150px" class="banner_img" alt="logo">
</span>
<span class="p1">
RUMAH TAHFIDZ
</span>
<span class="p2">
YATIM PIATU DAN DLU'AFA
</span>
<ul class="navbutton">
<li class="navbutton1">
BERANDA
</li>
<li class="navbutton2">
ACARA
</li>
</li>
<li class="navbutton5">
PROFIL
</li>
<li class="navbutton4">
DONASI
</li>
<li class="navbutton3">
INFO
</ul>
</div>
</body>
</html>
and this is my css
/* Html */
html {
min-height:100%;
min-width:100%;
max-height:100%;
max-width:100%;
}
/* Background */
body {
background:url(images/body.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-attachment:fixed;
}
/* Banner */
.banner_box {
width:480px;
height:186px;
padding:5px;
border:4px;
border-style:solid;
border-color:#063;
border-radius:35px;
margin:0 auto;
}
.banner_img {
padding-right:10px;
}
.p1 {
font-size:30px;
font-weight:bold;
color:#FFF;
position:relative;
top:-128px;
text-align:center;
}
.p2 {
font-size:20px;
color:#FFF;
position:relative;
top:-129px;
left:190px;
text-align:center;
}
/* Button */
.myButton {
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:10px 20px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:fixed;
top:1px;
}
.navbutton {
position:inline;
width:100%;
}
.navbutton1 {
position:relative;
top:-38px;
left:-30px;
list-style-type:none;
}
.navbutton2 {
position:relative;
top:-58px;
left:80px;
list-style-type:none;
}
.navbutton3 {
position:relative;
top:-118px;
left:170px;
list-style-type:none;
}
.navbutton4 {
position:relative;
top:-98px;
left:240px;
list-style-type:none;
}
.navbutton5 {
position:relative;
top:-78px;
left:330px;
list-style-type:none;
}
works well on firefox, safari and chrome :D :D
preview
https://db.tt/oLPp1Bza