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 */
}
Related
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
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>
The red bar is overlapping the topbar when it should be right below it, also even though I set the width to be 100% it's not extending the whole way across. I copied the CSS code from the topbardiv CSS, but it still wasn't working properly.
Image:
Code:
<head>
<title>Grace's WRAL</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin:0;
}
#topbar {
background-color:#0C1F2F;
width:100%;
height:95px;
}
.fixedwidth {
width:1095px;
margin:0 auto;
}
#logodiv {
padding:10px 0 0 45px;
float:left;
}
#topmenudiv {
}
#topmenudiv ul {
background-color:none;
padding:8px 0 0 35px;
margin:0;
height:20px;
}
#topmenudiv li {
list-style:none;
color:#008ECD;
font-size:0.9em;
font-family:Gill Sans;
border-right:1px solid #008ECD;
padding: 0 6px 0 10px;
float:left;
background-color:none;
}
#alertdiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 334px 0 334px;
font-size:0.9em;
}
#alertdiv p {
float:right;
margin-top:1px;
font-family:Gill Sans;
padding:0 5px 0 5px;
}
#signindiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 271px 0 271px;
}
#signindiv p {
margin-top:1px;
font-size:14px;
font-family:Baskerville;
margin-top:-8px ! important;
}
#searchdiv {
float:right;
margin-top:-33px ! important;
padding:0 55px 0 55px;
}
#searchdiv input {
height:15px;
width:190px;
background-color:#093B51;
border:none;
font-size:0.9em;
padding:5px 6px 6px 5px;
background-image:url("file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Search_Icon.png");
background-repeat:no-repeat;
background-position:right center;
}
#searchdiv input:focus {
background-color:#FFFFFF;
}
#searchdiv input::-webkit-input-placeholder {
color: white;
text-transform:none;
font-size:13px;
padding-left:5px;
}
#topicmenudiv {
}
#topicmenudiv ul {
background-color:none;
margin:0;
}
#topicmenudiv li {
list-style:none;
float:left;
color:white;
padding:15px 0 0 15px;
font-family:Gill Sans;
font-size:16px;
}
#currentweatherdiv {
float:right;
font-size:33px;
padding:8px 8px 0 0;
color:white;
}
#currentweatherdiv img {
float:right;
padding-top:4px;
}
#currentweatherimgdiv {
float:right;
padding:10px 50px 0 0;
}
.break {
clear:both;
}
#newsbardiv {
background-color:red;
width:100%;
height:95px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="topmenudiv">
<ul>
<li>Noticias</li>
<li>Instant Savings</li>
<li>Classifieds</li>
<li>Jobs</li>
<li style="border-right:none">Real Estate</li>
</ul>
</div>
<div id="alertdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Alert_Icon.png" /> <p>Alert</p>
</div>
<div id="signindiv">
<p>Sign In</p>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div id="logodiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/WRAL_logo.png" />
</div>
<div id="topicmenudiv">
<ul>
<li>News</li>
<li>Weather</li>
<li>Sports</li>
<li>Business</li>
<li>Consumer</li>
<li>Health & Life</li>
<li>Entertainment</li>
<li>Video</li>
</ul>
</div>
<div id="currentweatherimgdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Current_Weather.png" />
</div>
<div id="currentweatherdiv">
65 <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Degrees_Icon.png" />
</div>
<div class="break"></div>
<div id="newsbardiv">
<div class="fixedwidth"></div>
</div>
</div>
</div>
</body>
</html>
The red bar is nested inside a div with the class fixedwidth, which unsurprisingly has a fixed width of 1095px. So the width of the red bar can only be 1095px.
To debug a problem such as this, simply view it in Chrome, press F12, press Ctrl-Shift-C, and click on the element you want to inspect. It will explain what's going on.
One is issue is because .fixedwidth has a width of 1095px so your div can't be 100% because since it's nested 100% = 1095px.
Change .fixedwidth to this,
.fixedwidth {
width:100%;
margin:0 auto;
}
CODEPEN DEMO
I Need to float two similar images to left and right of section container without affecting Div container. I need them to occupy the left and right side of the green boxy without affecting the position of the red box or overlapping.Please help. Heres my code:
Html:
<!Doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">
<title>Envy</title>
<link rel="stylesheet" href="Envy.css">
</head>
<div id="M_wrap">
<body>
<div id="F_head">
<header id="M_head">Nhere</header>
<nav id="M_nav">
<ul>
<li class="Esec">New in stock</li>
<li>Men</li>
<li>Women</li>
<li>Children</li>
<li>Accessories</li>
</ul>
</nav>
</div>
<section id="M_section">
<img class="SE1" src="Bg2.jpg">
<img class="SE2" src="Bg2.jpg">
<div id="S_wrap">
</div>
</section>
</body>
</div>
</html>
Css:
body{
}
#M_wrap{
background-size:cover;
width:70em;
margin:.8em auto;
}
#F_head{
width:100%;
margin:.2em auto;
}
#M_head{
color:#000000;
font: Italic bold 80px/50px "Times New Roman" Arial, Tamoha;
text-align:center;
text-shadow:2px 2px #33ff00;
text-decoration:underline;
}
#M_nav{
height:3em;
width:37.5em ;
margin:2em auto;
background-color:black;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
word-spacing:80px;
text-align:center;
font:Italic bold 30px/20px Times "Times New Roman", tamoha;
}
#M_nav ul li{
display:inline;
}
li.Esec{
word-spacing:0px !important;
}
#M_nav li a {
display:inline-block;
padding: 0px 15px;
font-weight:bold;
border-right: 1px solid #ccc;
}
#M_nav a:link{
color:white;
font:Italic bold 30px/40px Times "Times New Roman", tamoha;
text-decoration:none;
}
#M_nav a:hover {
color:white;
text-shadow: 2px 2px black;
text-decoration:underline;
color:#33ff00 !important;
}
#M_nav a:active{
color:red;
}
#M_nav a:visited{
color:white;
text-shadow:2px 2px black;
}
#M_section{
margin:-3.75em 0 0 0;
width:100%;
height:50em;
border-style:solid;
border-color:#33ff00;
}
#S_wrap{
margin:3em auto;
width:80%;
height:85%;
position:center;
border-style:solid;
border-color:red;
}
Something like this?
Here is part of CSS I changed:
.SE1 {
float:left;
}
.SE2 {
float:right;
}
#S_wrap{
margin:0 auto 3em auto;
/* didn't touch rest of rules you have for this ID */
}
I have a div in my html called logo and what I am trying to do is drop the margin-top or padding-top the logo so its not hard up against the body background.
I have tried the above but I cannot get it to budge.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo"></div>
<div id="line"></div>
<nav>
<ul>
<li>home</li>
<li>services</li>
<li>portfolio</li>
<li>contact us</li>
</ul>
</nav>
</header>
<section id="banner">
<img src="_assets/images/banner_1.jpg" alt="Banner" width="960px" height="161px" />
</section>
<section id="content">
<h1>Web Development Guru At Your Service </h1>
<p></p>
</section>
<footer>
<p>This is the footer</p>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/cufon-yui.js" type="text/javascript"></script>
<script src="_assets/js/Myriad_Pro_400-Myriad_Pro_700.font.js" type="text/javascript"></script>
<script src="_assets/js/js.js" type="text/javascript"></script>
CSS:
html{
height:100%;
width:100%;
background:url(../images/bg.jpg) repeat;
}
body{
width:960px;
height:100%;
background-color:#e3e3e3;
margin:42px auto;
}
p,h1,h2{
margin:25px;
font:Myriad Pro;
}
h1{
color:#000;
}
header{
width:100%;
height:210px;
}
#logo{
height:115px;
width:159px;
margin:0 auto;
background:url('../images/logo.png') no-repeat;
border:1px solid red;
}
header nav{
width:410px;
height:18px;
margin:20px auto;
}
header nav ul{
width:100%;
height:18px;
margin:0 auto;
}
header nav ul li{
float:left;
display:block;
margin:0 auto;
}
header nav li a{
float:left;
width:85px;
padding:0 3px 3px 3px;
font:18px Myriad Pro;
text-decoration: none;
color:#99999a;
}
header nav li a:hover, a:active{
font:18px Myriad Pro bold;
color:#67686a;
}
#line{
clear:both;
width:610px;
height:1px;
margin:0 0 0 235px;
background:url('../images/line.png') no-repeat;
}
#banner{
width:100%;
height:161px;
}
#content{
float:left;
width:100%;
height:100%;
background-color:#e3e3e3;
}
footer{
clear:both;
height:24px;
}
Because it's the background image, you have to add space (via padding or margin) outside the div.
<div style="padding:10px;">
<div id="logo"/>
</div>
It's better to use image-replacement technique. Using <h1> tag instead of <div>
HTML
<h1 id="logo">This is my logo</h1>
CSS
#logo{
height:115px;
width:159px;
margin:0 auto;
background:url('../images/logo.png') no-repeat;
background-repeat: no-repeat;
border:1px solid red;
text-indent:-9999px;
display:block;
overflow:hidden;
}