I'm a tad rattled simply because I cannot figure this out at all.
I am trying to make a simple page layout of a header, subheader, sidebar, content pane and footer. I scripted everything and it was working fine. I then went into my javascript file to write a function, and when I came back, my sidebar jumped from the left hand side to the right, and I simply cannot figure out why. I have tried copying my script in one section at a time, and it really seems to be only the sidebar that is bugged. Any insight would be majorly appreciated!
My HTML:
<html lang ="en">
<head>
<meta charset="utf-8">
<title>....</title>
<link rel="stylesheet" type="text/css" href="../CSS/styleCss.css">
<script type="text/javascript" src="../JavaScript/dateandtime.js"></script>
</head>
<body>
<div id="header">
<a href="index.html">
<img src="..." alt="..." height="200" width="500" />
</a>
</div>
<div id="subheader">
<p id="timeStamp"><br/></p>
</div>
<div id="sidebar">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...<br /></li>
</ul>
</div>
<div id="content">content area</div>
<div id="footer">footer</div>
</body>
</html>
And my CSS:
body{
width:100%;
background-color:#e3f2fd;
}
#header {
width:1030px;
height:200px;
margin-left:50px;
background-color:#2196f3;
float:left;
}
#header img {
float:left;
}
#header h1 {
margin-left:550px;
color:black;
font-family:"arial black";
font-size:40px;
}
#header p {
margin-left:550px;
color:white;
font-family:"arial black";
font-style:italic;
font-size:200%;
}
#subheader {
position:relative;
margin-left:50px;
width:1030px;
height:75px;
background-color:black;
float:left;
border-top:1px solid red;
}
#subheader p {
margin-left:50px;
color:white;
font-family:"arial black";
font-style:italic;
font-size:150%;
float: left;
}
#sidebar {
position:relative;
font-size:20px;
margin-top:75px;
background-color:#0d47a1;
width:230px;
height:600px;
border:1px solid red;
float:left;
}
#sidebar a {
text-decoration:none;
color:white;
}
#sidebar a:hover{
background-color:black;
color:white;
}
#sidebar ul {
list-style-type:none;
}
#sidebar li {
padding-top:60px;
padding-left:0px;
font-family:"arial black";
}
#content {
position:relative;
width:798px;
margin-top:-602px;
margin-left: 282px;
height:600px;
background-color:#90caf9;
float:left;
border-top:1px solid red;
border-bottom:1px solid red;
}
#footer {
position: relative;
height:150px;
width:1030px;
background-color:#82b1ff;
margin-left:50px;
float:left;
}
I would seriously appreciate any help, I must be missing something!
Please wrap the all div in to one div like below and also update some css ID and class unwanted margin
<style type="text/css">
.main-cont {
width: 1030px;
float: left;
}
#content {
margin-left: 0;
margin-top: 0;
}
#sidebar {
margin-top: 0;
}
</style>
<body>
<div class="main-cont">
<div id="header">
<a href="index.html">
<img src="..." alt="..." height="200" width="500" />
</a>
</div>
<div id="subheader">
<p id="timeStamp"><br/></p>
</div>
<div id="sidebar">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...<br /></li>
</ul>
</div>
<div id="content">content area</div>
<div id="footer">footer</div>
</div>
</body>
one more solution And if you don't want to add <div class="main-cont"> try only this css
#subheader {
clear: both;
float: none;
}
It will set so you no need to add "main-cont" div
Related
I cant seem to figure out how to overlap my nav bar so that it will always be on full display when scrolling. The code is given below. Please help me as i am lost for a few days. I've fixed the navagation bar by using position:fixed. i dont know whether my position of div element is wrong or there is something that i should ve known earlier before making a fixed navigation bar.
`
body{
background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg');
}
*{
padding:0px;
margin:0px;
}
#maindiv{
width:100%;
height:100px;
}
#navdiv ul{
width:100%;
height:80px;
background-color:#000916;
line-height:80px;
position:fixed;
}
#navdiv ul li{
list-style-type:none;
display:inline-block;
float: right;
}
#navdiv ul a{
text-decoration:none;
color:white;
padding:20px;
}
#navdiv ul a:hover{
background:#000948;
transition: all 0.40s;
}
#navdiv h1{
color:white;
float:left;
width:200px;
margin-left:20px;
margin-top:10px;
cursor:pointer;
}
#about{
width:50%;
margin:auto;
background-color:#000916;
border-radius:30px;;
}
#about p{
color:white;
}
#left-text1{
padding-left:10px;
padding-top:10px;
}
.resize{
width:400px;
height:auto;
border-radius:30px;
}
<head>
<title>Portfolio</title>
</head>
<body>
<div id="maindiv">
<div id = "navdiv">
<ul>
<h1>Danial</h1>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-md-6">
<p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>
</div>
<div class="col-md-6">
<img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg">
</div>
</div>
</div>
</body>
`
body{
background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg');
}
*{
padding:0px;
margin:0px;
}
#maindiv{
width:100%;
height:100px;
}
#navdiv ul{
width:100%;
height:80px;
background-color:#000916;
line-height:80px;
position:fixed;
/* you can set who you want to be infront by the z-index prop */
z-index:99999;
}
#navdiv ul li{
list-style-type:none;
display:inline-block;
float: right;
}
#navdiv ul a{
text-decoration:none;
color:white;
padding:20px;
}
#navdiv ul a:hover{
background:#000948;
transition: all 0.40s;
}
#navdiv h1{
color:white;
float:left;
width:200px;
margin-left:20px;
margin-top:10px;
cursor:pointer;
}
#about{
width:50%;
margin:auto;
background-color:#000916;
border-radius:30px;;
}
#about p{
color:white;
}
#left-text1{
padding-left:10px;
padding-top:10px;
}
.resize{
width:400px;
height:auto;
border-radius:30px;
}
<head>
<title>Portfolio</title>
</head>
<body>
<div id="maindiv">
<div id = "navdiv">
<ul>
<h1>Danial</h1>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</div>
<div id="about">
<div class="row">
<div class="col-md-6">
<p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>
</div>
<div class="col-md-6">
<img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg">
</div>
</div>
</div>
</body>
I'm new to web-development and stack overflow. I'm first time building a website and facing some problem with the navigation bar, it is shifting its place when the browser window is resizing.I'm providing the source code below.I want the navbar to stick to the right irrespective of the browser size
body
{
font-family:Arial, Helvetica, sans-serif ;
font-size: 14;
margin:0px;
padding:0px;
line-height:1.5em;
color:black;
}
#header
{
height:150px;
width:100%;
background-color:#ff0000;
}
.container
{
width:90%;
margin:auto;
margin-top:15px;
margin-bottom:15px;
}
#image
{
display:block;
width:100%;
height:350px;
}
.head2
{
width:50%;
margin:auto;
margin-top:25px;
margin-bottom:25px;
text-align:center;
color:#6F0A21;
}
.sidebar
{
width:250px;
height:150px;
padding:5px;
margin-right:10px;
margin-bottom:10px;
background-color:lightgray;
float:left;
clear:left;
}
.main_content
{
margin-left:265px;
margin-bottom:10px;
border:1px solid orange;
height:300px;
}
#footer
{
width:100%;
height:150px;
background-color:#ff0000;
margin-top:10px;
clear:both;
}
#header #logo
{
position:relative;
margin:0;
top: 50%;
transform: translateY(-50%);
margin-left:5%;
}
#header #navbar
{
list-style:none;
position:relative;
display:inline-block;
float:right;
top: 50%;
transform: translateY(-50%);
margin-right:5%;
//min-width:643.891px;
}
#header #navbar li
{
display:inline;
margin-left:20px;
margin-right:0px;
}
#header form
{
display:inline;
margin-right:0px;
}
#navbar a
{
text-decoration:none;
font-size:20px;
color:white;
}
#searchbox
{
height:18px;
margin-bottom:1.5px;
width:200px;
}
#submit_button
{
height:25px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>My Web Page</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<meta charset="utf-8"/>
<meta name="description" content="This website is developed by Soumik Banerjee"/>
<meta name="keywords" content="Home, About, news, Contact"/>
<link rel="stylesheet" href="webpage.css"/>
</head>
<body>
<div id="header">
<a href="index.html">
<img id="logo" src=logo.png alt="logo"/>
</a>
<ul id="navbar">
<li>Home</li>
<li>About</li>
<li>Contents</li>
<li>Contact Us</li>
<li id="form">
<form action="">
<input id="searchbox" type="text" name="Serching" placeholder="Search"/>
<input id="submit_button" type="submit" value="Go"/>
</form>
</li>
</ul>
</div>
<div class="container">
<img id="image" src="garden.jpg" alt="garden.jpg"/>
<h2 class="head2">Welcome to My Website</h2>
<div class="sidebar">
</div>
<div class="sidebar">
</div>
<div class="sidebar">
</div>
<div class="sidebar">
</div>
<div class="main_content">
</div>
<div class="main_content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
(I don't want to make the navbar fixed).Please help.
Personally, I use w3-css for create a responsive web site. Refer this.
It's pretty cool and easy. This website is created by using w3-css.(my official site)
If you are new to web-development i recommend w3-css.
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 ☺
How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}
Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
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;
}