My page has a layout with a top, middle and bottom section (they are all divs.) So far I have only been able to get the top and bottom areas to appear correctly. Even though the content of the middle is exactly the same as the bottom it just wont appear, therefore I am assuming a simple and obvious syntax era has most likely occurred, the thing is I have spent hour reading and troubleshooting to no avail, so please help!
Here is my HTML...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Saspadidious</title>
<link rel="stylesheet" type="text/css" href="CSS\home.css">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<a href="home.html">
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
</a>
<div id="middle">
<div class="subOrange">
<h1 class="header6">Who?</h1>
</div>
<div class="subOrange">
<h1 class="header6">What?</h1>
</div>
<div class="subOrange">
<h1 class="header6">Why?</h1>
</div>
</div>
<div id="bottom">
<div class="subRed">
<a href="software.html">
<h1 class="header4">Software</h1>
</a>
</div>
<div class="subRed">
<a href="support.html">
<h1 class="header4">Support</h1>
</a>
</div>
<div class="subRed">
<a href="about.html">
<h1 class="header4">About</h1>
</a>
</div>
<div class="subRed">
<a href="news.html">
<h1 class="header4">News</h1>
</a>
</div>
</div>
</body>
</html>
And my CSS
body {
margin:0;
padding:0;
background-image:url('../Images/arches.PNG');
font-size:100%;
}
a {
text-decoration:none;
color:rgb(44,44,44);
}
#font-face {
font-family:"Mission Script";
src:url('../Other/Mission-Script.OTF');
}
#top {
position:relative;
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:5%;
padding-top:4%;
padding-bottom:3%;
background-color:rgb(197,129,84);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
}
#middle {
position:relative;
width:95%;
margin-top:5%;
margin-left:2.5%;
margin-right:2.5%;
}
#bottom {
position:relative;
width:95%;
margin-top:5%;
margin-bottom:5%;
margin-left:2.5%;
margin-right:2.5%;
}
.subOrange {
position:relative;
width:26.6%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,159,72);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}
.subRed {
position:relative;
width:18.75%;
margin-left:2.5%;
margin-right:2.5%;
padding-top:3%;
padding-bottom:3%;
background-color:rgb(255,69,70);
border-color:rgb(44,44,44);
border-style:solid;
border-width:5px;
border-radius:15px;
-moz-border-radius:15px;
float:left;
}
.header4 {
font-family:"Mission Script";
font-size:4em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}
.header6 {
font-family:"Mission Script";
font-size:6em;
text-align:center;
margin:0;
color:rgb(44,44,44);
}
.header9 {
font-family:"Mission Script";
font-size:9em;
text-align:center;
margin:0;
padding:0;
color:rgb(44,44,44);
}
So there it all is, the text in the middle div also does not display correctly, it does not become the right size or use Mission Script as its font.
EDIT: Here is a screenshot of what my browser does when it renders it.
I have figured it out! Yes the problem was simple. The page that has the problem in question is an about page, (about.html.)
During it's creation I copied and pasted much of it's code from the home page, (home.html.) What I forgot to do was link it to the new CSS sheet I created for it (about.css) as you can see in my original code above it is still linked to home.css.
I knew it was going to be obvious! THE RELIEF IS UNCANNY!
Here is the problem in code...
<link rel="stylesheet" type="text/css" href="CSS\home.css">
Change to
<link rel="stylesheet" type="text/css" href="CSS\about.css">
Thanks everyone, sorry for wasting your expertise on such an obvious error. Bloody hell.
Works fine for me on chrome for windows as well. However it fails the w3c validation for the doctype specified in your html either way, id start here http://validator.w3.org/ and make sure your markup matches the doctype you're going for.
For a start, you'll need to change this:
<a href="home.html">
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
</a>
to this:
<div id="top">
<h1 class="header9">Sarspadidious</h1>
</div>
Related
I'm working on a webpage and I want it to look like those magnets (or tiles, whatever you like to call them) in the start menu of Windows 8. After some work, I got the following:
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Architects+Daughter|Comfortaa|Handlee' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="banner-div">
</div>
<div class="row">
<div class="magnets">
Some text
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
<div class="row">
<div class="magnets">
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
</body>
</html>
styles.css
html, body {
background:#f8e4e4;
font-family:'Bad Script';
font-size:medium;
text-align:center;
width:100%;
}
.magnets {
border:5px solid black;
height:300px;
width:300px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
}
.row {
width:100%;
margin-top:1%;
}
But when I open it with IE, something weird happens. The first magnet (The one with Some text) does not align with the other magnets. When I delete the text and run it again it's back to normal again. It seems like that it is the text that pulls the magnet downwards. I think this is very abnormal and clearly this should not happen.
I also tried this with Google Chrome but the result is the same as that of IE.
Add overflow:hidden; in .magnetsDemo
.magnets {
border:5px solid black;
height:300px;
width:300px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
overflow:hidden;
}
I tested the output in Chrome, Mozilla and IE, It worked fine. If you remove width:100%; from html, body , Its giving similar output
Or you could set vertical-align: bottom; on the .magnet class.
EDIT:
The reason for this is that, because the .magnet classed blocks are redefined as being inline-blocks, the blocks are treated as though they were text, so they all have their bottoms line up on a base line by default.
Whenever one of these blocks contains text, the default "anchor" to the base line shifts from the bottom of the block itself to the text inside the block, and the block itself just becomes a kind of border around the text without meaningful anchor points. To force the block to realign with its siblings, you need to override this default behaviour by explicitly defining vertical-align: bottom; on the block so that it will align to the bottom of the base line, just like text will align itself to the bottom of the base line by default, since text is also displayed inline.
Some more reading on this:
http://phrogz.net/css/vertical-align/
https://css-tricks.com/almanac/properties/v/vertical-align/
/EDIT
Link to the result: http://jsfiddle.net/e1og1m8v/, or a local runnable snippet to elaborate:
html, body {
background:#f8e4e4;
font-family:'Bad Script';
font-size:medium;
text-align:center;
width:100%;
}
.magnets {
border:5px solid black;
height:100px;
width:100px;
text-align:center;
margin-right:2%;
margin-top:2%;
display:inline-block;
vertical-align: bottom;
}
.row {
width:100%;
margin-top:1%;
}
<body>
<div id="banner-div">
</div>
<div class="row">
<div class="magnets">
Some text
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
<div class="row">
<div class="magnets">
</div>
<div class="magnets">
</div>
<div class="magnets">
</div>
</div>
</body>
My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually.
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. Here is a screenshot of a page that works:
Click here
And one that doesn't:
Click here
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. The other two links that are used in this website look the same as the working page, by the way.
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same):
Page that works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet:
#charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem.
Working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header'
I see, your html code is not the same.
1st document
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document:
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div.
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.
<script>
$(window).resize(function() {
doResize();
}
$(document).ready(function(){
doResize();
}
function doResize() {
var windowHeight = $(window).height();
$('#container').css('top',(windowHeight - $('#container').height())/2);
}
</script>
it has something to do with you using percentages rather than say Pixels or EMs
I got it so that it is staying centered but i still have it sticking to the top of the browser.
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:250px;
background-color: #bbb;
}
#container{
margin:auto auto;
width:750px;
height:400px;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
Edit possibility
you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work
Answer to css get height of screen resolution
this answer has a link in it to media queries that takes you to w3.org Media Queries site
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
This creates a 100px sized border to your div, which is aligned in center as you want
I am building my website on Bootstrap 2.0. Im trying to make a 3 column layout like on this picture:
http://prntscr.com/1jsb2w The problem is that the divs keep getting pushed (Im a novice in CSS :)
Right now my page looks like this:
http://prntscr.com/1jscbp
My html & css (Note I have done some additional stylings to the html file, Im not including bootstrap.css because I have not done any changes to it. Im not using external stylesheets (except the bootstrap ones)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foxfile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
margin:50px;
background-image:url(img/noisy_grey.png);
}
#wrapper {
background-image:url(img/noisy_white.png);
border-radius:7px;
}
#projectList {
width:100%;
}
#projectList p,h1,h2,h3,h4,h5,h6,font,a {
padding:10px;
}
#projectList img {
margin:10px;
}
.circle_preview {
border-radius:150px;
background-image:url(img/noisy_grey.png);
height:30px;
width:30px;
padding:10px;
}
footer {
color:#fff;
margin:10px;
font-weight:bold;
}
.position-center {
text-align:center;
position:relative;
}
</style>
<div id='wrapper'>
<div id='projectList'>
<div id='projectListTop'>
<h3> Recent Software </h3>
</div>
<a href='#'> <img class='circle_preview' src='img/avast_icon.png'> Avast Security </a> <br />
<a href='#'> <img class='circle_preview' src='img/itunes_logo.png'> iTunes </a> <br />
<a href='#'> <img class='circle_preview' src='img/utorrent_logo.jpg'> Avast Security </a> <br />
</div>
<div id='projectList' class='position-center'>
<div id='projectListTop'>
<h3> Popular Software </h3>
</div>
<a href='#'> <img class='circle_preview' src='img/avast_icon.png'> Avast Security </a> <br />
<a href='#'> <img class='circle_preview' src='img/itunes_logo.png'> iTunes </a> <br />
<a href='#'> <img class='circle_preview' src='img/utorrent_logo.jpg'> Avast Security </a> <br />
</div>
</div>
</body>
</html>
I've compiled a series of different methods to achieve a 3 column layout as requested by the OP.
http://jsfiddle.net/adaam2/amxUz/4/
Method 1 (Inline Block)
<div class="wrapper">
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
<div class="inline-block">inline-block</div>
</div>
CSS:
.wrapper {
width:100%;
}
.inline-block {
display:inline-block;
border:1px solid black;
text-align:center;
background-color:#eee;
width:32%;
}
Note that there is a whitespace issue when setting elements aligned horizontally to inline block.
Method 2 (Table + Table Cell):
<div class="table-wrapper">
<div class="table-cell">table cell</div>
<div class="table-cell">table cell</div>
<div class="table-cell">table cell</div>
</div>
CSS:
.table-wrapper {
display:table;
width:100%;
}
.table-cell {
display:table-cell;
border:1px solid black;
width:33%;
text-align:center;
background-color:red;
}
Method 3 (Float)
<div class="wrapper">
<div class="float">inline-block</div>
<div class="float">inline-block</div>
<div class="float">inline-block</div>
</div>
CSS:
.float {
float:left;
width:33%;
text-align:center;
background-color:pink;
}
* This method is good as you don't encounter the whitespace issue as you do with setting the child elements to inline-block.
If you look at my JsFiddle, I've added some extra styling, including box-sizing:border-box; which allows you to add padding and borders amongst other things without affecting the grid layout.
Im working on a website, and Im trying to put a navigation bar in the navigation divider I made, however when I put the image in, it doesnt go into the divider, even though its between the tags.
Heres what it looks like:
Heres My code:
CSS:
body{background-color:#030303}
#wrapper {width:800px;
margin:0 auto;
}
#header {background-color:yellow;
text-align:center;
height:50px;
}
#footer{clear:both;
background-color:yellow ;
text-allign:center;
}
#logo {float:left;
width: 139px;
background-color: black;
text-align: left;
height:70px;}
#navigation {width: 800px;
background-color:#EDEDED;
height:50px;
}
#sidebar {float:left;padding:20px; background-color:green;text-align:right;width:100px;height:460px;}
#content {float:right;width: 620px;
padding:20px; background-color:gray;
text-align:left; height:500px;
border-color:#0017FF;
}
HTML:
<! DOCTYPE html>
<html>
<head> <title>Website</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
This is my header.
</div>
<div id="logo">
<br/>
<img src="images/SubZer0-logo-and-name.png" width="140" height="50" align="left"></div>
<div id="navigation">
<img src="images/subzero-banner-new.png" width="750" height="45" align="top">
</div>
<div id="content">
This is my content box.
</div>
<div id="sidebar">
This is my sidebar.
</div>
<div id="footer">
This is my footer.
</div>
</body>
</html>
How Do I fix this?
Thank you!
Never Mind, I fixed it... Turns out the image was too big for the container.. I dont understand why though, Since the Containter was 800x50 and the image was 750x45, but it works now and thats what matters.