I have a simple website that I've made from scratch. I got confused with the layout of my header:
H1 title
Text line
Logo
Menu (coding from w3school)
These four are within my div header. I'd like to be able to position them wherever I want within the div. The issue I have is that I'm not sure what coding to use for this (margin, position: relative or absolute, padding, top:, right:, etc.).
I've tried all kinds of combinations but it seems they never position where I want them and they mess up each others' position: the menu loses full width, the logo I can't get nicely with same space between top and right of header div, the H1 and tag don't seem to respond to the pixels I set, and so on.
Could someone please take the time and have a look at my code and come with a suggestion how to make this layout stable?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
background-color: #F8F8F8;
}
#page {
width: 900px;
margin: 30px auto;
background-color: #FFFFFF;
}
#header {
height: 377px;
width: 100%;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#header a {
color: black;
text-decoration: none;
}
#header ul {
list-style-type: none;
margin-top: 0;
padding: 0;
overflow: hidden;
background-color: #3399FF;
position: relative;
top: 264px;
}
#header li {
float: left;
}
#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
background-color: #3366CC;
}
.p1 {
font-family: Consolas, monaco, monospace;
font-size: 20px;
position: relative;
top: 28px;
left: 50px;
}
.p2 {
font-family: Consolas, monaco, monospace;
font-size: 16px;
position: relative;
top: 5px;
left: 200px;
}
.logo {
float: right;
position: relative;
top: 8px;
right: 8px;
}
#content {
position: relative;
top: 12px;
left: 10px;
}
#footer {
font-size: 14px;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
border-top: #D3D3D3 0.5px solid;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><h1>This is my H1 Title</h1></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li>Link menu 2</li>
<li>Link menu 3</li>
<li>Link menu 4</li>
<li>Link menu 5</li>
<li>Link menu 6</li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
Put the contents of the header in an Unordered list as so. If you are using a responsive framework like Bootstrap, this will be completely different - but since you did not specify, here is an example without a framework.
HTML
<div id="header>
<ul>
<li><h1>Your Title</h1></li>
<li><p>some line of text you wanted</p></li>
<li class="logo"><img src="yourlogo.png" /></li>
<li class="spacer"></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
</ul>
</div>
CSS
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header li{
padding: 0 20px;
display: inline;
}
#header li.spacer{
width:10%
}
It's just a case of structuring the divs correctly, as Holle points out, this is a list of objects rather than a poster. I think the main issue you are having in positioning is that you're foundation structure within your html isn't beneficial for manipulating.
I would recommend having a container div for each section and then further divs or other content within those. i.e.
<div id="headerContainer">
<h1>Title</h1>
<img id="logo" src="myImagePath">
</div>
<div id="navigation">
<!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
<!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>
I hope that helps, if you want a suggestion, take a look a DevTips youTube channel, he's great at explaining the design and structuring stages when building a website.
Also, in terms of positioning, check out flexbox froggy (google it), just be aware the browser support isn't fantastic before you jump in.
Cheers,
James
First suggestion: try to think of a webpage as list of objects rather than a poster etc. Screen sizes vary (desktop/mobile) and you should use relative widths and positions to ensure responsiveness of your site. I'm sure you can find a better template to work on.
Second suggestion: If you DO wish to position an element "anywhere" this is an example of correct use of positioning:
<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>
Related
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
From a long time, I get an issue about spaces which are appearing into a navigation menu bar betwwen <div> tags of this menu.
This problem only happens on Chrome (currently with Version 59.0.3071.115 (Build officiel) (64 bits) but it was the same with all previous version of Chrome).
Here's the following image illustrating the problem :
[![Space into navigation menu bar][1]][1]
You can also test it directly on the link :
[Link to see White spaces on Chrome][2]
My HTML menu is implemented like this :
<div id="nav_bar">
<table class="linkcontainer" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="navigation">
Home
</div>
</td>
<td>
<div class="navigation">
<a href="/astro/"
class="main_link">Fifo</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div>
</td>
<td>
<div class="navigation">
<a href="/philo/"
class="main_link">Lifo</a>
</div>
</td>
<td>
<div class="navigation">
Exo
</div>
</td>
<td>
<div class="navigation">
FiLo
</div>
</td>
</tr>
</table>
</div>
with CSS :
a.main_link:active, a.main_link:visited, a.main_link:link {
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
color: #FFFFFF;
line-height: 50px;
}
div.navigation {
height: 50px;
width: 133px;
vertical-align: middle;
text-align: center;
border-right-width: 0;
border-left-width: 0;
margin: 0;
border: 0;
padding: 0;
}
table.linkcontainer {
border-collapse: collapse;
border-spacing: 0;
}
#nav_bar {
background-image: url(/images_template/header_bg_min.png);
background-size: 798px 50px;
border: 0;
margin: 0 auto;
padding: 0;
width: 798px;
height: 50px;
}
As you can see, there are 6 elements <div> with 133px for each of them, that makes 798px for the total width (see width of #nav_bar above)
Nevertheless, I have partially found a solution (which is not satisfying) by putting width: 101% for div.navigation (with Inspector interface of Chrome) :
div.navigation {
height: 50px;
width: 101%;
vertical-align: middle;
text-align: center;
border-right-width: 0;
border-left-width: 0;
margin: 0;
border: 0;
padding: 0;
}
Then I get the folowing menu on this image :
[![no more spaces but elements of menu are not centered][3]][3]
As you can see, by putting a width value over 100%, there are no spaces between <div> elements but now, they are not horizontally centered anymore like at the beginning of this post.
How could I do to keep this solution (to make disappear white spaces) and, in the same time, keep the horizontal centering of each <div> element of the menu ?
Maybe someone would have another solution to circumvent this issue of white spaces with Chrome ?
Regards
Your divs are wrapped in td elements.
Tables are notorious for having differences between browsers, due to early incompatibilities and inspecific standards.
You are also using tables for layout, which is largely regarded as a bad idea semantically speaking.
I suggest you stop using tables, and instead lay it out using other methods.
I tried to make a jsbin, to recreate your issue. but as stated on your question, and on the site linked, I was unable to reproduce the error.
This is one method of fixing it, without using tables.
https://jsbin.com/pahukezahu/1/edit?html,css,js,output
a.main_link:active, a.main_link:visited, a.main_link:link {
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
color: #FFFFFF;
line-height: 50px;
}
div.linkcontainer{
background:red;
}
div.navigation {
background:green;
height: 50px;
width: 133px;
display:inline-block;
vertical-align: middle;
text-align: center;
border-right-width: 0;
border-left-width: 0;
margin: 0;
border: 0;
padding: 0;
}
#nav_bar {
background-image: url(/images_template/header_bg_min.png);
background-size: 798px 50px;
border: 0;
margin: 0 auto;
padding: 0;
width: 798px;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body style="background:black">
<div id="nav_bar">
<div class="linkcontainer" style="width:100%">
<div class="navigation">
Home
</div><div class="navigation">
<a href="/astro/"
class="main_link">Fifo</a>
</div><div class="navigation">
<a href="/sciences/"
class="main_link">Sciences</a>
</div><div class="navigation">
<a href="/philo/"
class="main_link">Lifo</a>
</div><div class="navigation">
Exo
</div><div class="navigation">
FiLo
</div>
</div>
</div>
</body>
</html>
Note that there are no line breaks between the divs, I found that adding linebreaks introduced whitespace.
Try adding:
div.navigation {
line-height: 0;
}
Since you are setting a set width for your nav-boxes 133px, yet spacing them according to a % of the screen width it creates the blank spaces in between the nav-boxes to compensate for the missing space. What you could do, is set the width of each nav-box as a portion of the total width, you have 6 nav-boxes, they could all be (100/6)% width hence stretching and shrinking together to fill any screen size.
In addition to ensure they don't get too small you could add that the width of the individual nav-boxes should never be below 133px.
just try adding this to top of you css file.
*{
margin: 0;
padding: 0;
}
Hope it will help.
Another option is using a flexbox for the navigation menu.
body {
background-color: red;
}
a.main_link,
a.main_link:active,
a.main_link:visited,
a.main_link:link {
font-weight: bold;
text-decoration: none;
display: block;
width: 100%;
color: white;
line-height: 50px;
}
a.main_link:hover {
color: red;
}
div.navigation {
background-color: blue;
width: 133px;
height: 50px;
text-align: center;
}
#nav_bar {
width: 798px;
margin: 0 auto;
display: flex;
}
<div id="nav_bar">
<div class="navigation">
Home
</div>
<div class="navigation">
Fifo
</div>
<div class="navigation">
Sciences
</div>
<div class="navigation">
Lifo
</div>
<div class="navigation">
Exo
</div>
<div class="navigation">
FiLo
</div>
</div>
I am trying to code a basic HTML navigation header for fun and teach myself some CSS/HTML but I cannot get things to arrange in the way I had intended.
I would like to have a logo on the far left, some links to pages in the middle and a user icon on the right, here is a moc idea:
This is the result of butchering code together :(
I think for my idea to work I need to create 3 element locations inside one overall container.
Something like this but I can't seem to find a efficient way of doing so:
This is my current CSS code:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
float:right;
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}
/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
and the HMTL to go with it currently looks like this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>
Thanks for the length read and any help is appreciated :)
Edit: So many great replies, thanks all! Sorry for the late feed-back, NYE distractions :(
Just for clarification, I am not looking to put physical visable lines between the logo, links and the profile. I am only using those images as a demonstration as to where I would like each element container. I am looking to align the link text and the profile image as follows:
Links: vertical middle, horizontal middle
Profile img: vertical middle, horizontal right.
Since you're doing for fun i think this is simplest as it gets :)
I didnt do all the tweaking for perfect layout but here is what i think you wanted.
Simply make 3 inline blocks give them text-align:left , center and right and width 33% approx ( including Borders and stuffs) so they take nett 33% each block.
UPDATE for vertical alignment .
div{
display: inline-block;
width:32%;
height: 50px;
line-height:50px;
background-color: pink;
}
.left{
text-align: left;
}
.middle{
text-align: center;
}
.right{
text-align: right;
}
<div class="left">
<span>Logo here on far left</span>
</div>
<div class="middle">
<span>link1</span>
<span>link2</span>
<span>link3</span>
</div>
<div class="right">
<span>User Icon on far right</span>
</div>
Please try this:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<div class="header">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</div>
body content
</body>
</html>
Here is css:
html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}
body {
background-color: #FFF;
}
.header{
display:inline-block;
}
.topnav-logo{
background-color: #f8f8ff;
margin: 0;
padding: 0;
}
.topnav-profile{
background-color: #f8f8ff;
}
.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}
ul.topnav {
list-style-type: none;
overflow: hidden;
}
ul.topnav li a {
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}
Give necessary padding and margin.
Try this -
Make a container like structure with 3 divs aligned in the same line for Top navigation. You have 2 options to align - (i) use display:inline-block or (ii) float
<div class="container">
<div class="nav-container">
<div class="left">
<a>
<img width="100" height="100" src="https://cdn2.iconfinder.com/data/icons/social-media-8/512/image3.png" alt="site-logo"></a>
</div>
<div class="mid">
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="right">
<a class="topnav-profile" href="index.html"><img width="100" height="100" src="http://www.aspirehire.co.uk/aspirehire-co-uk/_img/profile.svg" alt="user profile"></a>
</div>
</div>
</div>
CSS -
.container {
position:relative;
width:80%;
margin:0 auto;
border:1px solid #cccccc;
}
.nav-container {
border:1px solid #cccccc;
height:100px;
}
.left {
float:left;
border:1px solid #cccccc;
width:20%;
height:100%;
}
.mid {
float:left;
border:1px solid #cccccc;
width:59%;
height:100%;
}
.right {
float:right;
width:20%;
height:100%;
border:1px solid #cccccc;
}
See Fiddle
the your super close to the way I usually handle that. If you put your entire nav-bar in a div tag or even better a nav tag and give it an appropriate class name, then you can style it much easier.
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
<title> </title>
</head>
<body>
<nav class="primaryNav">
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li><a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a></li>
</ul>
</nav>
body content
</body>
CSS
.primaryNav{
height: whatever;
width: whatever:
}
.primaryNav ul{
list-style:none;
width: whatever;
float: right
}
.primaryNav li{
display:inline-block;
margin:I usually give a margin here;
}
.primaryNav a{
padding:10px;
}
something like this. I also closed your a tag in an li if you want to control just that one you can also use .primaryNav li:nth-last-child(1)
also about that image you have there, check out Font Awesome, they have tons of easy to use icons, you can use their cdn, or get the whole css file. It can be deff be fun to play with.
Check this out, similar to what you want.
It is based on the moc idea image you provided.
Use it as a guide.
#main{
width: 99%
height: 700px;
border: 1px solid grey;
}
#content{
width: 90%;
height: inherit;
border-right: 1px solid grey;
border-left: 1px solid grey;
margin: 0 auto ;
}
#header{
width: 100%;
border-bottom: 1px solid grey;
height: 80px;
}
.logo{
width: 20%;
height: inherit;
float: left;
border-right: 1px solid grey;
}
.logo img{
max-width: 80px;
max-height: 80px;
padding: 5px;
}
.nav{
width: 50%;
float: left;
margin-right: 5px;
padding: 5px;
}
.icon{
width: 20%;
float: left;
margin-left: 5px;
padding: 5px;
}
.icon img{
max-width: 60px;
max-height: 60px;
}
.nav ul li{
display: inline;
text-decoration: none;
padding: 5px;
border: 1px dashed orangered;
margin: 5px;
}
.text p{
padding: 10px 10px 0;
}
<body>
<div id="main">
<div id="content">
<div id="header">
<div class="logo">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1462961781/about_vbxvdi.jpg" alt="Image" />
</div>
<div class="nav">
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<div class="icon">
<img src="http://res.cloudinary.com/wisdomabioye/image/upload/v1477218723/images_a0xbmx.png" alt="icon" />
</div>
</div>
<div class="text">
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop the puck carrier's progression by knocking the puck off of their stick and out of their possession. It's often done when the defender isn't in a position to stop the attacker by using their body. Stick checking has been used in hockey since day one. There are several variations of the move, such as the poke, tap, sweep, and press check. Another common stick check is lifting the opponent's stick while they're in possession of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
<p>
What is Stick Checking?
The act of using the hockey stick to knock the puck off of the puck carrier's stick or to clear it away from their vicinity.
Sporting Charts explains Stick Checking
Stick checking is a defensive move where a player will stop ion of the puck and then taking it away from them. A good stick check will result in the defending player gaining possession of the puck which will then allow them to start an offensive play. Stick checking can also be considered an offensive play when it's performed in the opponent's zone by a fore checker. A successful stick check in the offensive zone can often lead to a scoring chance.
</p>
</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html {
height:100%;
background-color: gold;
min-width: 800px;
max-width: 1000px;
margin: auto;}
body {
background-color: #ddd;}
.topnav-logo{
float:left;
background-color: red;
margin: 0;
padding: 0;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav-profile{
float:right;
background-color: pink;
width:calc(10% - 2*1px);height:110px;
border:1px solid}
.topnav{
margin: 0;
padding: 0;
width: 80%;}
ul {
list-style-type: none;
overflow: hidden;}
/* Float the list items side by side */
.topnav li {
float: left;border:1px solid;
margin-right:.5em;
line-height: 110px;
width:calc(100% /3 - 1*.5em - 2*1px)}
/* Style the links inside the list items */
.topnav li a {
color: RGB(120,200,250);
text-decoration: none;
transition: 0.3s;
font-size: 30px;}
</style>
</head>
<body>
<header>
<div class="topnav-profile">
<img src="images/profile.png" alt="user profile"></div>
<div class="topnav-logo">
<img src="images/logo.jpg" alt="site-logo"></div>
<nav>
<ul class="topnav" id="Topnav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</header>
<div>2 logos: user profile must be first to float right . Each logo has width:calc(10% - 2*1px)*2, and the nav element:width:calc(100% / the number of links you want - 1*.5em -margin-- -2*1px --border--). See in codepen </div>
</body>
This is probably has a really easy solution, since it is one of the most basic things in web design.
After a lot research and not finding the answer decided to ask it. Basically my webpage looks perfectly fine on my 13" Macbook but all the elements get messed up when I try to display it on my 27" desktop. I understand the core of the problem is that, when I set something to 300px, it covers much of the screen in 13" but just a little in 27" thus causing everything to sit on top of each other but I failed at finding a solution. Just to be clear, this is not a 100% issue of responsiveness, I don't want different layouts for different screens but I just want the same layout to look ok in many screens, just like you are resizing the page from the corners. Here is some of the code that I hope will be helpful. Also things that I have tried:
Using em instead of px. Not really helpful.
Using % instead of px. Not really helpful in cases like the first jumbotron where parent element doesnt have a defined height
HTML :
<body>
<div class="jumbotron">
<img src="images/banner.jpg" >
</div>
<div id="menu">
<ul class="nav nav-pills navbar-left">
<li> <p> 1 </p></li>
<li> <p> 2 </p> </li>
<li> <p> 3 </p></li>
<li> <p> 4 </p></li>
</ul>
<ul class="nav nav-pills navbar-right">
<li id="toleft"> <p> 5 </p> </li>
<li> <p> 6 </p></li>
<li> <p> 7 </p> </li>
<li> <p> 8 </p> </li>
</ul>
</div>
<!-- Script to fix navbar-->
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 450;
if ($(window).scrollTop() > navHeight) {
$('#menu').addClass('fixed');
}
else {
$('#menu').removeClass('fixed');
}
});
});
</script>
<div id="displayframe">
<div id="display">
<img id="mainimage" src="images/col1.jpg" height="420" width="960" />
</div>
</div>
<!-- Script for changing images with time-->
<script>
$(document).ready(function(){
var imageArray = ["images/col2.jpg", "images/col3.jpg", "images/col4.jpg", "images/col5.jpg", "images/ban.jpg"];
var count = 0;
function loadImage(){
$("#mainimage").attr("src", imageArray[count]);
if(count == imageArray.length){
count = 0;
}else{
count = count + 1;
}
}
setInterval(function(){
loadImage();
}, 3000);
})
</script>
<div class="container">
<div id="head">
<p> RECENT NEWS </p>
</div>
</div>
<div class="newsfeed">
<ul>
<li>
<p style="float: left;"> <img src="images/chris.jpg" width="190px" /> </p>
<h2></h2>
<p id="bodypart">
</p>
</li>
<li class="newselement"><p style="float: left;"> <img src="images/city.jpg" width="190px" height="280px" /> </p>
<h2></h2>
<p id="bodypart">
</p></li>
<li class="newselement"><p style="float: left;"> <img src="images/alex.jpg" width="190px" height="280px" /> </p>
<h2></h2>
<p id="bodypart">
</p></li>
</ul>
</div>
CSS:
body{
background-color: black !important;
}
.jumbotron{
height: 320px;
background-color: black !important;
}
.jumbotron > img{
width: 100%;
margin-top: -50px;
}
#toleft{
left: -10px;
position: relative;
}
.nav p{
font-family: "Crimson Text";
font-size: 28px;
font-weight: bold;
z-index: 2;
}
.navbar-left{
margin-left: 20px;
position: relative;
}
.navbar-left li{
width: 120px;
}
.navbar-right{
left: -50px;
margin-left: 0px;
position: relative;
}
.navbar-right li{
width: 140px;
}
#menu{
background-color: black;
width: 99%;
margin-top: -110px;
}
.nav li p{
padding-left: 15px;
}
.fixed {
position: fixed;
top: 110px;
height: 50px;
z-index: 1;
background-color: black;
}
#display{
width: 960px;
height: 420px;
overflow: hidden;
margin: 30px auto 0px auto;
margin-top: 130px !important;
border-radius: 4px;
background-color: white;
}
#display ul{
position: relative;
margin: 0;
padding: 0;
height: 960px;
width: 420px;
list-style: none;
}
#display ul li{
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 960px;
height: 420px;
}
#head > p{
font-family: "Crimson Text";
font-size: 30px;
font-weight: bold;
}
#head{
margin-top: 30px;
margin-left: 85px;
}
.tweets{
background-color: rgba(247,12,12,0.3);
margin-top: -800px;
margin-right: 50px;
border: 1px solid white;
border-color: white;
}
.newsfeed{
margin-left: 100px;
width: 60%;
height: 800px;
}
.newsfeed > ul{
list-style: none;
}
.newsfeed > img{
list-style: none;
display: inline-block;
position: absolute;
float: left;
}
.newsfeed > h2{
display: inline-block;
position: absolute;
margin-top: -50px;
margin-left: 50px;
float: right;
}
.newsfeed > li{
border-bottom: 1px white;
border-top: 1px white;
border-color: white;
height: 400px;
}
#bodypart{
font-size: 17px;
}
.newselement{
border-top: 1px solid white;
}
Actually this is responsive issue only because you are viewing your page on different screen or resolution. So if you want to create responsive website you have to add #media queries for different resolution.
-- #media queries
-- Outer div should keep fixed (px) or in percentage (%).
-- And inner div or content should wrap according to outer div width eg(width:100%).
-- Finally depend on different resolution change your css in #media queries.
Why use Px (pixels) which are pre-fixed? Instead play around with % (percents) which allow you to scale your webpage based on the user's screen. You could make your image 1600px wide which would be the full length of your MBP but for example on your Imac it only shows your image 1600px wide when really the Imac has 2880px for the screens width. Therefore you have another 1280px remaining to fill. If you were to use 100% it would fill 100% of who's ever screen is viewing your webpage. Hope this some what helps. You lost me on the 300px off.
I have setup a JSfiddle here.
I found a few things that you could add/modify to help improve your code and get things aligning better.
<img src="images/banner.jpg" > was not closed correctly you missed the / <img src="images/banner.jpg" />. Also you have no clearing tags anywhere in your code so of course when the width of your page scales out the elements on the page are going to stack up beside each other. I created a class;
<div class="clear"/>
.clear{
clear:both;
}
This i placed below each of your element sections so it will return them to the next line.
Next i placed a wrapper and a content div around your whole page content to center-align the content and make the page width 1000px (which is standard among most websites).
The images were not rendered into the JSfiddle becaise the paths are relative to your computer so i left them blank. If you want to see it working better please update the JSfiddle and i can help further.
-Epik
I have written this code,all the divs are working properly also the nav is. But the black color of the "header" does not seem to work. I have posted the whole code below.Please have a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
body
{
padding: 0;
}
#container
{
margin: 0 auto;
width:100%;
height: 1500px;
padding: 0px;
}
#header
{
background-color: black;
margin: 0px;
}
#logo
{
background-color: green;
}
#headTable
{
float:right;
}
#logo
{
margin: 5px 0px 5px 70px;
float: left;
width:150px;
height:100px;
}
#headTable ul
{
list-style-type: none;
margin: 0;
}
#headTable ul li
{
color: black;
float: left;
margin: 10px 50px;
}
#nav
{
clear: both;
width:100%;
height: 100px;
background-color: purple;
}
#nav ul
{
margin-left: 100px;
padding: 0;
}
#nav ul li
{
display: block;
margin: 10px;
padding: 20px;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="plane.jpg" width="150" height="100">
</div>
<div id="headTable">
<ul>
<li>Google</li>
<li>Google</li>
<li>Google</li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Menu</li>
<li>Blog</li>
<li>Ins</li>
<li>BBC</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<div id="content">
<div id="page">
<p>This is a paragraph that should
stay intact inside the id of Page.
</p>
</div>
<div id="top">
<p>THis is a paragraph that should
stay intact inside the id of top.
</p>
</div>
<div id="low">
<p>This is a paragraph that should
stay intact inside the id of bottom.
</p>
</div>
</div>
</div>
</body>
</html>
Add overflow:auto to #header:
#header {
background-color: black;
margin: 0px;
overflow:auto;
}
jsFiddle example
Floating the content makes the parent act as if there's no content and it collapses. Adding the overflow rules restores the behavior you seek.
Because #header in this context has no defined size because the only elements it contains have floats.
Three easy ways around this:
Explicitly define dimensions for #header.
Add display:inline-block to #header.
Use a clearfix after the two floated elements in #header. This is done most commonly by using <div style="clear:both;"><!-- --></div>
you must put some "Height" to you #header tag in CSS. Good Luck !
I created a jsfiddle : http://jsfiddle.net/JsA7y/.
So , of course I might have the same "problem" as you ;
the img src point nowhere (in the jsfiddle).
? Where does your img point to ?
? Is the img in the same directory as your html ?
=> Other wise , you will need to use the correct uri ;
such as , if the img is in a directory at the same level as the html :
<img src="directory/plane.jpg" width="150" height="100">
...
Hope this helps.