Trying to have padding around the menu items and when they hover over it changes background colour. However, at the moment padding is only effecting the side of the elements and not the top or bottom.
HTML:
<html>
<head>
<link rel="stylesheet" href="style.css" type"text/css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
#container {
margin:auto;
border:1px solid black;
width:960px;
height:700px;
}
#header {
width:960px;
height:150px;
border: 1px solid blue;
}
#menu {
width:800px;
list-style:none;
}
#menu li {
float:left;
margin-left:20px;
border:1px solid black;
}
#menu a:hover {
background:blue;
padding:20px;
}
#menu a {
padding:20px;
height:20px;
text-decoration:none;
}
Simply replace height:20px with display:block for #menu a as height seems redundant from what I can see.
#menu a {
padding:20px;
display:block;
text-decoration:none;
}
Related
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>
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
I am trying to make 4 separate buttons in a layout in a foursquare type layout. (see attached image and pretend the boxes are the same size and equidistant from eachother) my issue is that i want the boxes to be in the center of the page no matter the browser window size, except i do not want the buttons to re-size when the page gets too small. I am drawing blanks at how to do this but it doesnt seem to hard.
body{
font-family: Arial, Helvetica, Sans-Serif;
font-size:1em;
padding:0;
margin:0;
}
#content{
position:relative;
}
/* Banner Styling */
#banner {
display:inline-block;
}
#banner a{
text-decoration:none;
color:black;
}
#banner h1{
float:left;
padding-left:1em;
padding-right:auto;
}
#banner #logo{
position:absolute;
top:0px;
right:0px;
}
/* Navigation Styling */
Nav {
margin-top:2em;
}
Nav ul{
margin:0;
padding:0;
overflow:hidden;
list-style-type:none;
background-color: #1666af;
padding-left:2em;
min-width:1532px;
}
Nav ul li{
float:left;
text-align:center;
}
Nav li a{
border: 1px solid #1666af;
padding:.3em 2em .3em 2em;
display: block;
background-color: #1666af;
color:White;
text-decoration:none;
}
Nav .current{
background-color:green;
border:1px solid green;
}
Nav li a:hover{
border: 1px solid #278efc;
background-color:#278efc;
}
/* BUTTONS */
#buttons{
position:relative;
left:50%;
}
#buttons a{
width:330px;
height:210px;
display:inline-block;
text-align:center;
color:white;
text-decoration:none;
border-radius:6px;
margin-top:50px;
box-sizing:border-box;
padding-top:89px;
}
/* CDW Button */
#button1{
border:1px solid black;
background-color:green;
transition: background-color 1.0s;
}
#button1:hover{
background-color:yellow;
}
/* ADR button */
#button2{
border:1px solid black;
background-color:blue;
transition: background-color 1.0s;
}
#button2:hover{
background-color:red;
}
/* GoGatway Button */
#button3{
border:1px solid black;
background-color:red;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button3:hover{
background-color:teal;
}
/* AAS button */
#button4{
border:1px solid black;
background-color:orange;
transition: background-color 1.0s;
height:60px!important;
padding-top:20px!important;
}
#button4:hover{
background-color:brown;
}
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>Website</title>
</head>
<body>
<div id="content">
<div id="banner">
<h1>Website</h1>
<img id="logo" src="images/imagehere" alt="imagehere" />
</div>
<nav>
<ul>
<li><a class="current" href="default.htm"> Home</a></li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
<li>Placeholder</li>
</ul>
</nav>
<div id=buttons>
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
</body>
</html>
<div id=buttons>
<!--create a div here-->
<div class="container" style=" width:100%, height:540px">
<!--inside this div you create a new div for your foursquares-->
<div class="forsquare">
<!--use something like canvas to create the graphic or
use something like canvas to get the image how you would like it
you can also create a image and map it to create different a href
elements that links from the square-->
</div>
</div>
Here is my HTML code snippet :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
<!--Resetter rules for browsers-->
#bodyContainer {
}
body {
border:black 2px solid;
background-color : grey;
padding:5px;
}
#header {
margin:10px auto;
background-color : red;
width:70%;
height:80px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}
#header1 {
display:inline-block;
width:50%;
text-align:center;
line-height:80px;
}
#header2 {
display:inline-block;
width:50%;
text-align:center;
line-height:80px;
}
#navmenu {
list-style-type:none;
background-color:#444;
border:black 2px solid;
width:100%;;
text-align:center;
float:left;
margin-bottom:20px;
}
#content {
}
#nav {
}
#navmenu li {
border:black 1px solid;
background:yellow;
border-radius:5px;
height:30px;
line-height:30px;
width:33%;
float:left;
}
#navmenu li a {
text-decoration:none;
display:block;
}
</style>
</head>
<body>
<div id="bodyContainer">
<div id="header">
<div id="header1"><h1>Welcome</h1></div><div id="header2"><h1>You Get to choose better !! </h1></div>
</div>
<div id="content">
<div id="contentHeader">
<p>You Select ... We Serve </p>
</div>
<div id="nav">
<ul id="navmenu">
<li>Home</li>
<li>Electronics</li>
<li>Fashions</li>
</ul>
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>WebApp Version Numbered v1.0. All rights Reserved. </p>
</div>
</div>
</body>
</html>
Why the floated unordered list seems not to obey the 5px padding at the right edge of the parent container #bodyContainer ? Also is there any efficient way to distribute the floated list items evenly (except from setting it explicitly to Width:33%) as there is an apparent space after the last list item in the floated horizontal navigation list ?
The issue you are having in regards to your ul being unrespectful of the 5px padding on the body is due to the ul being floated.
#navmenu {
list-style-type:none;
background-color:#444;
border:black 2px solid;
// width:100%;;
text-align:center;
// float:left;
margin-bottom:20px;
}
For the distribution of the navigation elements, it depends. Whenever you float elements, they stop being contained by other elements. I think what you want to acheive would ask for display:inline-block;
Try this:
#navmenu li {
border:black 1px solid;
background:yellow;
border-radius:5px;
height:30px;
line-height:30px;
width:32%;
display:inline-block;
}
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{}