I have simple web page and that banner contains three images. I want to expand the banner when different resolutions.my solution is working on Firefox and Chrome but not IE7.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#left{width:338px; height:103px; float:left; background-image:url('image/banner_left.jpg'); background-repeat:no-repeat; margin:0px; padding:0px;}
.middle{float:left; background-image:url('image/banner_middle.jpg'); background-repeat:repeat-x; margin:0px; padding:0px; }
#right{width:620px; height:103px; float:right; background-image:url('image/banner_right.jpg'); background-repeat:no-repeat;margin:0px; padding:0px; }
</style>
</head>
<body style="margin:0px; padding:0px;">
<form id="form1" runat="server">
<div id="container" class="middle" style="float:left;">
<div id="left"></div>
<div id="middle" class="middle"></div>
<div id="right"></div>
<div id="content" style="clear:both; float:left;"></div>
</div>
</form>
</body>
</html>
any idea?
thanks in advance!
Try to set width value in .middle in percents.
Using your example and assuming you want any content under the banner this is one way you can do it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#banner{
background:url('image/banner_middle.jpg') ;
background-repeat:repeat-x;
}
#left{
width:338px;
height:103px;
float:left;
background-image:url('image/banner_left.jpg');
background-repeat:no-repeat;
}
#right{
width:620px;
height:103px;
float:right;
background-image:url('image/banner_right.jpg');
background-repeat:no-repeat;
}
.clearFloat{
clear:both;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="banner">
<div id="left"></div>
<div id="right"></div>
<div class="clearFloat"></div>
</div>
<div id="content">
Any content goes here
</div>
</form>
</body>
</html>
Related
I want to have my background image span the entire page. This works as it should, with the exception of it sits on top of any other control/element I may add to the page. What do I alter in order for me to be able to have an image as a background spanning the entire page as well as add text/images on top of it? This is my current syntax:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
I used demo images for test it. Here is working code:
Just add z-index: -1; to #bg.
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;}
#content {position:relative; z-index:10;}
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
<body>
<div id="bg">
<img src="https://www2.palomar.edu/pages/testwritingstrategies/files/2015/02/online-test-fotolia_60995176.jpg" width="100%" height="100%" alt="1stDay" />
</div>
<font size="30" color="red">Pic 1</font><br>
<img src="http://authentic-scandinavia.com/system/images/tours/photos/155/thumbnail.jpg?1370424008" alt="" style="width:450px;height:500px;">
Instead of putting the image as a element, have you tried setting the background-image property of the div? That should provide the effect you're looking for. Add the following rule to the CSS File.
#bg {
background-image: url("C:\KittyKat.jpg");
width:100vw;
height:100vh;
}
I would use z-index. It allows you to change the order of elements. So an element with z-index: 1; would appear in front of an element with z-index: 0;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#backgroundImage{z-index: -1;}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"><img src="C:\KittyKat.jpg" id="backgroundImage" width="100%" height="100%" alt="1stDay" />
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
Make the image as background of the div using css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {
position:fixed;
width:100vw;
height:100vh;
background: url('C:\KittyKat.jpg');
background-size: cover;
}
#content {position:relative; z-index:1;}
</style>
<center>
<div>
<font size="90" color="red">Today Is November 3<sup>rd</sup> 2015</font>
</div>
</center>
</head>
<body>
<div id="bg"></div>
<font size="30" color="red">Pic 1</font><br>
<img src="C:\1jpg" alt="" style="width:450px;height:500px;">
</body>
</html>
I have this default.html file that places all div elements.
I need div header and sidebar to be fixed and only div content to be scrollable if content is too big.
My default.html follows:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<title th:text="#{app.name}"> </title>
<style type="text/css">
.content {
display: -webkit-flex;
display: flex;
height: 100vh;
width: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div id="header" th:replace="fragments/header :: headerFragment"> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
</body>
</html>
What am I missing here?
.header, .footer { overflow: hidden; position: fixed; }
.page-content { overflow: auto; }
You are using a class in the CSS and an id in the code. Aslo you dont need the type="text/css" in html5:
<style>
#content {
display: -webkit-flex;
display: flex;
height: 100vh;
width: 100%;
overflow: auto;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
height: 150px;
width: 100%;
background-color:lightpink;
padding:25px;
margin:20px;
}
#header{
color:white;
width:100%;
height:40px;
left:0;
top:0;
position:fixed;
background-color:black;
}
#sidebar{
top:0;
left:0;
width:90px;
height:100%;
position:fixed;
color:white;
background-color:steelblue;
}
</style>
</head>
<body>
<div id="defaultFragment" fragment="defaultFragment">
<div id="header"> <center><h3>Header</h3></center> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
</body>
</html>
I am trying to put a header on my page, but say for example i have two divs, which ever div is declared first will appear on top, and the second div wil appear below it. regardless of what position i set for it. Could anyone help me please?
css;
body
{
background-color:#CCC;
}
#pageHeader{
position:relative;
width:900px;
height:94px;
background-color:White;
margin:0 auto;
}
#nhsLogo
{
position:relative;
margin-left:40px;
}
#openingHours
{
position:relative;
margin-left:500px;
top:0px;
}
Html:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Template.master.cs" Inherits="Template.Template" %>
<!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 runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/default.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="pageHeader">
<div id="openingHours">
<p style="color:Green; font-size:18px; font-style:oblique;">0876 890756</p>
<p style="color:Purple; font-size:18px; font-style:oblique;">Opening hours</p> <p></p>
</div>
<div id="nhsLogo">
<p><img src="img/high.png" alt="GPlus logo" /></p>
</div>
</div>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script type="text/javascript" src='<%# ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
The easiest way to have two divs side-by-side, is to given them "float" CSS rules:
float:left;
https://developer.mozilla.org/en-US/docs/Web/CSS/float
alernatively you can use absolute positioning.
give your body the css rule: position:relative;
then any children elements of body that you want to position, give the css rules:
position:absolute;
top: 10px; //change this value to adjust vertical positioning
left: 10px; //change this value to adjust horizontal positioning
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Im trying to center 3 floating DIVs. It works if I give the parent DIV display:table; and the child DIVs display:cell; which will then act like a table. Is there another way ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
display:table;
}
#container div
{
float:left;
padding:5px;
display:cell;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text 1</div>
<div style="background-color:lightgreen">Text 2</div>
<div style="background-color:lightblue">Text 3</div>
</div>
</body>
</html>
I think if you define the width, display: block, margin 0px auto, position:relative it should work.
Try this,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
width:200px;
}
#container div
{
float:left;
padding:5px;
display:cell;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:yellow">Text 1</div>
<div style="background-color:lightgreen">Text 2</div>
<div style="background-color:lightblue">Text 3</div>
</div>
</body>
</html>
You need to assign width to the parent div like this :
#container
{
text-align:center;
margin:0 auto;
width:150px;
}
My Fiddle
Any reason why you don't want to use a table?
It might solve the purpose. Tables are not all that evil as they are made out to be ;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Center Div</title>
<style type="text/css">
#container
{
text-align:center;
margin:0 auto;
}
#container td
{
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<table cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;">
<tr>
<td style="background-color:yellow">Text 1</td>
<td style="background-color:lightgreen">Text 2</td>
<td style="background-color:lightblue">Text 3</td>
</tr>
</table>
</div>
</body>
</html>
When i try to add a <img> tag, IE8 automatically add a 'Empty Text Node' after the image tag.
HTML :-
<html>
<head>
<title>Railway Services</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="img/icon.png" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="header">
<div id="wrapper">
<div class="logo">
<img src="img/logo.png"/>
</div>
</div>
</div>
<div id="page" class="homePage">
<div id="wrapper">
<h1>Home Page</h1>
</div>
</div>
<div id="footer">
<div id="wrapper">
<p class="copyRight">Copyright©2012 Railway Services. All rights reserved</p>
</div>
</div>
</body>
</html>
styles.css :-
#CHARSET "ISO-8859-1";
body{
margin:0px;
padding:0px;
font-size:12px;
color:#123456;
font-family:verdana,_sans,arial;
text-align:center;
}
#wrapper{
width:98%;
margin:0 auto;
}
#page{
float:left;
width:100%;
}
p{
margin:0px;
padding:0px;
}
/**********************HEADER*********************/
#header{
float:left;
width:100%;
}
.logo{
float:left;
width:20%;
height:150px;
cursor:pointer;
}
.logo img{
width:100%;
height:100%;
}
/************************HEADER END***************/
/************************FOOTER*******************/
#footer{
float:left;
width:100%;
}
/***********************FOOTER END****************/
See this image
In the above image you can see the IE generates Empty Text Node after the <img> tag.
I can't found why IE generate empty text node.Can anybody help me..?
IE shows this to any elements in the page that has a blank space between tags. This may not cause any problem.
The only consideration is when your content is inline and it adds a space between the elements. In this case, all you have to do is eliminate the blank space between the tags.
There is a line break and some whitespace for indentation after the image tag, which leads to creating an empty text node.
If you write your code like that:
<div class="logo"><img src="img/logo.png"/></div>
you will not have the empty text node any more.
Since it's really IE specific, I think it's just a bug of the parser.