I want this hello world on the header section which I made using div but when i use p tag to write it in division the text doesn't appear in the header section I made instead it is appearing below it.
Webpage
Stylesheet Code:
body{
background-image: url("back.jpg");
}
.main{
height:100%;
width:1100px;
margin-left:6%;
background-color:white;
}
.header{
height:20%;
width:1100px;
background-image: url("head.jpg")
}
.logo{
height:100%;
width:250px;
background-image: url("head.jpg");
float:left;
}
.menu{height:7%;
width:1100px;
background-color:gray;
}
.content{
height:63%;
width:1100px;
}
.footer{height:10%;
width:1100px;
background-color:maroon;
}
#logoimage{
height:100%;
}
h1{
color:white;
}
HTML Webpage Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
<title></title>
</head>
<div class="main">
<div class="header">
<div class="logo">
<img src="logo.png" alt="Sorry for the inconvenience" id="logoimage">
<h1> Hello World </h1>
</div><!--Logo ends here-->
</div><!--Header ends here-->
<div class="menu">
</div><!--Menu bar ends here-->
<div class="content">
</div>
<div class="footer">
</div><!--Footer ends here-->
</div><!--Body ends here-->
</body>
</html>
Your Hello World does show up on the page... the reason why you cannot see it, is because your font color is set to white, here:
h1{
color:white;
}
Change that to some other color and you should be able to see it Working Fiddle.
Here is a working fiddle with Hello World in p tag
Nevermind i was able to figure my problem out. Thank you #Rushikumar for the the reply actually i was not able to show my hello world inside the header section for the div i made i was inserting the text inside the the logo section of the div. Sorry because of this silly mistake i made a forum post.
Related
I am trying to design a front-end with HTML and CSS, I am unable to use the div and style them with CSS to have a look like below format.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.students-page-container{
display: flex;
align-items:center;
justify-content:space-between;
}
.label-style{
font-weight:600;
font-family:'sans-serif';
font-size:24px;
align-items: center;
color: black;
margin-left:2rem;
line-height:28.8px;
display:flex;
}
.button-style{
border:none;
background:none;
padding:none;
font-weight:400;
size:12px;
line-height:14.4px;
}
.box-design{
width: 100 %;
background-color: gray;
}
.child-one{
width: 50%
min-height"400px;
background-color:white;
float:left;
}
.child-two{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
.child-three{
width: 25%
min-height"200px;
background-color:white;
float:right;
}
</style>
</head>
<body>
<!-- Top Row Container-->
<div class="students-page-container">
<div class="label-style">
<span> student number: 92837293</span>
</div>
<div>
<button class="button-style">
<u> all students</u>
</button>
</div>
</div>
<!-- for the boxes -->
<div class="box-design">
<div class="child-one">
<p> Studnt Name: mike jordan</p>
....
...
...
..
<hr>
<p></p>
</div>
<div class="child-two">
<p> Alerts</p>
</div>
<div class="child-three">
<p> Contact Details</p>
</div>
</div>
</body>
</html>
I am able to display first row student number with a link to all students in the correct format. But as soon as i am trying to write other div elements for boxes and setting min-height. the box is overriding the exiting top and header of the page.
I am quite new to front-end and learning .any help would be greatly appreciated
Expecting how to achieve the Layout which is high-lighted with red box
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>
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
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.
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>