Something interesting is happening with my HTML code and I was hoping someone could explain what is going on here.
I have a very simple website with a container div, header div, and body div and it looks like the html elements aren't responding at all to the divs(They aren't going in the div they are between in the html markup).
Was wondering why its behaving this way.
Here is the html:
<html>
<head>
<title>Andy</title>
<link rel="stylesheet" href="style-andy.css" type="text/css" media="screen" />
</head>
<body>
<div id='container'>
<div id='header'>
<h1>Andy </h1>
</div>
<div id='image'>
<img src='main.jpg' />
</div>
</div>
</body>
</html>
Here is the CSS:
html, body
{
margin:0;
padding:0;
}
#container
{
width:1024;
margin:0 auto;
}
#header
{
width:1024;
padding-bottom:10px;
border:1px solid black;
}
#header h1
{
float: right;
display: inline;
color: black;
font-family: helvetica, arial;
font-weight: 100;
}
#image
{
width:1024;
height:100;
border:1px dotted yellow;
}
Your HTML looks fine, but your CSS is missing the px measurement on your widths and heights and your h1 tag is being made to float: right; meaning that the header div probably won't have a height (You will need to 'clear' the header div)
Edit:
FYI, a simple way to clear is to just put a div with a class of clear under the content you need to clear, then use the CSS to tell that div to clear, for example:
HTML:
<div id="header">
<h1>Andy</h1>
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
There are other ways of doing this, for example: http://www.webtoolkit.info/css-clearfix.html
Related
I am beginner in this field.I want the logo(image used) to appear on the strip itself but when I use this code it appears below that strip.Basically, I want a strip with background colour black and a heading/title in the centre with a logo at the rightmost corner of that coloured strip.
Here's my code:-
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width=100%;
text-align: cente
border-bottom:solid 2px red;
}
#Shift{
margin-top:10px;
font-size:100px;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img src="logo.jpg" align="right" height="75">
</div>
</body>
</html>
Are you looking for something like this? I corrected a few mistakes in your CSS code, added position: relative; to your class .topbar and created a new class .logo which I added to the <img>-Tag.
Also, keep in mind the comment from ThisGuyHasTwoThumbs, you shouldn't use inline CSS
For further reading on relative/absolute positioning, I recommend the MDN articles: https://developer.mozilla.org/en-US/docs/Web/CSS/position
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width: 100%;
text-align: center;
border-bottom:solid 2px red;
/* Position the element relative */
position: relative;
}
#Shift{
margin-top:10px;
font-size:100px;
}
.logo {
/* Absolute position for this element */
position: absolute;
/* Distance from the right side */
right: 0;
/* Center image vertically */
top: 50%;
transform: translateY(-50%);
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img class="logo" src="http://via.placeholder.com/75x75" align="right" height="75">
</div>
</body>
</html>
The logo is appearing below the title because <p> is a block-level element -- that is, it will force the next element to appear on the next line.
By making the title a span with inline-block display you can achieve something like this snippet. (As with other replies I've fixed some typos and removed unused CSS. Also, I second the comment regarding inline CSS.)
EDIT: more on layouts & block vs. inline at this MDN tutorial
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width:100%;
text-align: center;
border-bottom:solid 2px red;
}
.right {
float: right;
}
.title {
font-size: 100px;
display:inline-block;
margin: 0 auto;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<span class="title">MIT Pulse</span>
<img src="logo.jpg" class="right" height="75" >
</div>
</body>
</html>
The top of my page looks like this (blue bit at the top is the bottom of my bookmarks bar):
I have a wrapper div holding two imgs (left, right) and a div. I want these three things to all hug the top of the page and line up. I thought adding display: inline would do it, but that didn't work. Now I'm stumped.
CSS:
body {
margin:0px;
padding:0px;
}
#main{
display: inline;
}
p {
font-family:"Open Sans",sans-serif;
font-size: 14px;
}
#img1{
float:left;
}
#img2{
float:right;
}
.design-img {
/*border:1px red;*/
display: inline;
top:0px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> </meta>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/libs/raphael.min.js"></script>
</head>
<body>
<div id='container'>
<img src='go.jpg'/ id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
<img src='go.jpg'/ id='img2' class='design-img'>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
#main {
display: inline-block;
}
This should do the trick.
Look for the differences between inline and inline-block
Put this css may this help you..
#img1{ width:30%; float:left;}
#img2{ width:30%; float:right;}
h1{ margin:0; width:40%;float:left;}
The problem is that you have #img2 after the main div in the source, which means it starts further down than the first image. Floating it to the right won't make it move up on the page!
One solution is to move the <img> up to the top, near the first <img>, so that the main div comes after.
body {
margin: 0px;
padding: 0px;
}
#main {
display: inline;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
.design-img {
/*border:1px red;*/
display: inline;
top: 0px;
}
<div id='container'>
<img src='https://placehold.it/150x150' id='img2' class='design-img'>
<img src='https://placehold.it/150x150' id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
</div>
No changes to the css.
By the way, you have an error in your source: a stray / in the <img> tag. Under some circumstances, this may cause the error correcting routines to think this is the end of the <img> tag. So remove those.
I am making an HTML website's index page now, and I don't know why this CSS isn't working. My CSS code is as follows, and my HTML code after that:
body {
background-image:url("background.png");
font-family:sans-serif;
}
#content {
margin:0 auto;
overflow:auto;
background-color:white;
border-radius:10px;
width:60%;
}
.header {
margin:10px;
}
.body {
margin:10px;
}
.footer {
margin:10px;
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="content">
<div id="header">
<p>This is the header!</p>
</div>
<div id="body">
<p>This is the body!</p>
</div>
<div id="footer">
<p>This is the footer!</p>
</div>
</div>
</body>
</html>
So, what ends up happening is that overflow: auto is not setting the side margins, but it is successfully setting the top and bottom margins. Thanks in advance.
By the way, all of the images are also in the directory, and they are working fine.
You're using class selectors in your CSS and id attributes in your HTML.
Either change your CSS to #header, #body, and #footer.
Or, change your HTML to class="header", class="body", and class="footer".
My HTML looks like the following, without the content though as the following is only needed to answer my question:
<html>
<body>
<div class="container">
<div class="socialmedia"></div>
<div class="navbar"></div>
<div class="mainbody></div>
<div class="footer"></div>
</div>
</body>
</html>
I've been trying to get my footer to remain at the bottom of my webpage, beneath .mainbody. The problem though, is that the footer seems to sit at the bottom of my window only, not at the bottom of the webpage which could extend well below my actual window when I have a lot of content. Right now, I have all the div's above set to position "absolute"; as well the html and body are styled in the following way:
html, body{
height:100%;
margin:0;
padding:0;
}
html { background: url(/img/multiblock.png)repeat center center fixed; }
}
Now, the only way I can get my footer to remain at the bottom of the webpage is to set top:-3998px (or whatever the height of my largest window is). Obviously this won't work once a webpage has enough content on it to expand it past that height. If I set position to relative, it appears at the top of my whole webpage and when positioned absolute it appears at the bottom of the viewable window only. You can check out the website at http://www.edmuncovered.com to see what I mean or to check the rest of the code. Parts of my website include adding content every day or so so I want to make sure the webpage can increase in height with added content, but that the formatting stays the same and the footer obviously stays at the bottom. Any ideas?
I guess this is what you need...
HTML
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
You can try something like this:
CSS:
.socialmedia, .navbar, .mainbody, .footer
{
border: 1px solid grey;
margin-top: 5px;
width: 800px;
}
.socialmedia
{
height: 20px;
}
.mainbody
{
min-height: 980px;
}
.footer
{
height: 25px;
}
Html:
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</div>
<div class="footer">Footer</div>
</div>
Working jsFiddle: http://jsfiddle.net/LrfXr/
I'm going to assume this is a questions similar to the one here: How to Stop Sticky Footer at Content DIV
At which there are a few good answers.
Links on that page:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
http://twitter.github.io/bootstrap/examples/sticky-footer.html
Basically you're looking for a footer that attaches itself to the bottom of the viewport but also extends should the content push it off the viewport. Martin Bean and Ryan Fait have the best methods of this. The bootstrap's method is a variation of this method too.
Happy hunting.
Here is the jsFiddle link. Followings are your css and html code:
HTML code
<div class="container">
<div class="socialmedia">Social Media</div>
<div class="navbar">Navbar</div>
<div class="mainbody">Mainbody</br>Mainbody</br>Mainbody</br>Mainbody</div>
<div class="footer">Footer</div>
</div>
CSS
*{
margin:0;
padding:0;
}
body {
background-color:#E4E2E2;
color:#fff;
}
.container {
min-height:100%;
/*position:relative;*/
}
.socialmedia {
background-color:#186301;
padding:10px;
}
.navbar {
background:#A60206;
padding:10px;
min-height:30px;
}
.mainbody {
padding:20px;
background-color:#6D0594;
}
.footer {
position:absolute;
bottom:0;
padding:2%;
background-color:#000;
width:96%;
}
This is working for me:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
In short, use this:
CSS
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body> </html>
Is it possible to get this DIV to fill the remainder of the page without JavaScript and absolute positioning?
<html>
<head>
<title>Hello World</title>
<style>
body { margin: 0; }
#title_image { float: left; margin: 1em; }
#title { float: left; margin: 1em; }
#content { background-color: #808277; clear: both; color: #FEFDDE; }
</style>
</head>
<body>
<img id="title_image" src="helloworld_small.jpg" />
<div id="title">
<h1>Hello World</h1>
<h3>Home of the Hello World site!</h3>
</div>
<div id="content">
Hello World
</div>
</body>
</html>
When I set the height to 100% it's a tidge taller than the viewport. I don't guess that's all that surprising because it's filling 100% plus the height of the content above it. When I set the position to relative and the bottom to 0 that just makes it the height of the content. I don't guess that's all that surprising either because I think the bottom is only used in absolute positioning. When I wrap the header content in a div and make set its height to 20% and then set the content div's height to 80% it ends up rendering a lot like just setting the content div's height to 80%.
I took the liberty of creating a JSFiddle of what I think you meant, I also html5'd it up. Is this close?
JSFiddle
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
hgroup {
padding:2% 1em;
background:#0f0;
height:20%;
display:block;
}
article {
background-color:#808277;
color:#FEFDDE;
height:72%;
padding:2% 1em;
display:block;
}
Try to have a look in this website for better understanding.
http://www.w3schools.com/html/html_layout.asp
This might help you.