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.
Related
I'm a high school senior working on app development for an engineering senior project and I've run into a little block with the HTML/CSS. I created an initial prototype for the app using Adobe XD, and it looks a little like this:
https://i.stack.imgur.com/K4V3G.png
The initial dimensions for the header and footer elements in the prototype are 70px high, however, when I put this in my CSS and run a mobile emulator, it turns out looking more like this:
https://i.stack.imgur.com/1YcFe.png
I also tried converting to em/rem, but that didn't help. I know mobile screens have a higher pixel density than laptops/desktops but I don't know how much higher. Does anyone have any suggestions for getting the header and footer elements to be the proper height on the screen?
EDIT: Including HTML/CSS in question for reference
CSS:
body{
font-family: 'Roboto', sans-serif;
height:100vh;
width:100vw;
padding:0;
}
wrapper{
margin: 0 auto;
padding: 0;
clear:both;
}
#head{
width:100%;
height:4.313rem;
font-size:40pt;
background-color:#fafafa;
text-align:center;
color:#707070;
}
#divider{
width:100%;
height:0.063rem;
background-color:#e0e0e0;
}
#midcontainer{
width:100%;
height:calc(100% - 8.75rem);
background-color:#fafafa;
overflow:hidden;
margin:0;
padding:0;
}
#midscroll{
width:calc(100% + 20px);
height:calc(100% - 8.75rem);
overflow:auto;
margin:0;
padding:0;
}
#midbody{
width:100%;
min-height:calc(100% - 8.75rem);
font-size:12pt;
text-align:justify;
}
#foot{
width:100%;
height:4.375rem;
background-color:#e0e0e0;
}
HTML:
<template name="Home">
<div align="center" style="height:100vh;width:100vw;position:absolute;top:0;left:0;border:1px solid transparent;">
<div id="head">
<p style="position:relative;top:50%;transform:translateY(-50%);">Upcoming Tasks</p>
</div> <!--end head-->
<div id="divider">
</div> <!--end divider-->
<div id="midcontainer">
<div id="midscroll">
<div id="midbody">
<p style="padding-left:0.313rem;padding-right:0.313rem;">
*Body elements here*
</p>
</div> <!--end midbody-->
</div> <!--end midscroll-->
</div> <!--end midcontiner END OF MIDDLE CONTENT-->
<div id="foot">
<img id="Home" style="height:4.375rem;width:4.375rem;padding-right:1.125rem;" src="https://imgur.com/C5zD29C.png">
<img id="Create" style="height:4.375rem;width:4.375rem;padding-right:1.188rem;" src="https://imgur.com/5UhZ0e9.png">
<img id ="Calendar" style="height:4.375rem;width:4.375rem;padding-right:1.125rem;" src="https://imgur.com/nUTj5zs.png">
<img id="Achievements" style="height:4.375rem;width:4.375rem;" src="https://imgur.com/4WrWF7T.png">
</div> <!--end foot-->
</div>
</template>
Try adding this into the <head> of your HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.
I've got a website with images tot he left and right in their own divs, one with float:right and one with float:left.
I also have an image that travels across the screen with the marquee tag.
Is there any way to get the marquee between the divs? So basically it would start at the left side of the right images and start to disappear on the right side of the left images.
If you don't get what I'm on about, here's an example page: http://benjiworld.ueuo.com/Example.html and as you can see, the marquee just appears underneath both divs, even when there's enough space for the marqueeing image between the divs.
This is my code for the test site:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:350px">
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<div style="float:right; width:350px" >
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<p style="text-align: center">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Can anybody help? I really don't know how to sort it out, I've tried putting the marquee in a div in the centre but it didn't work either.
you can use position:absolute as I did:
.left,.right,.center{
position:absolute;
top:0;
}
.left,.right{
width:200px;
height:300px;
background-color:orange;
}
.center{
left:200px;
right:200px;
}
.left{
left:0;
}
.right{
right:0;
}
<div class="right">right</div>
<div class="left">left</div>
<div class="center">
<marquee>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
</marquee>
</div>
here is the jsfiddle : http://jsfiddle.net/78pgca5o/
Just give a style as float:left to paragraph tag
Just like below
<p style="text-align: center;float:left">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Try this:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:50px">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<div style="float:right; width:50px" >
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<p style="text-align: center; position: absolute; z-index: -1; width: 100%">
<marquee><img src="http://benjiworld.ueuo.com/Hobnobs.jpg"></marquee>
</p>
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
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>