I am having following code for my master page.
The problem is with FOOTER tag.
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MASTER_MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<script src="../JS/jq.js" type="text/javascript"></script>
<script src="../JS/jqui.js" type="text/javascript"></script>
<script src="../JS/script.js" type="text/javascript"></script>
<style type="text/css">
html
{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bigDiv
{
margin: auto;
width: 1000px;
height: 1000px;
background-color: rgba(255,255,255,0.5);
}
header
{
height: 100px;
background-color: white;
font-family: "Source sans pro";
}
#menu a
{
text-decoration: none;
color: white;
}
.menuItem
{
width: 20%;
float: left;
background-color: gray;
height: 50px;
font: normal 18px 'Fjalla One',sans-serif;
color: white;
padding-top: 30px;
text-align: center;
cursor: pointer;
}
#contentMain
{
float: left;
width: 80%;
background-color: rgba(255,255,255,0);
height: 100%;
overflow-y: scroll;
}
#content
{
height: 800px;
background-color: rgba(255,255,255,0);
font-family: "Source sans pro";
}
#contentAd
{
float: left;
width: 20%;
background-color: orange;
height: 100%;
}
footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
footer a, label
{
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="bigDiv">
<header>
<h1>HR Softwares</h1>
<h4>Advanced softwares and coaching</h4>
</header>
<div id="menu">
<div class="menuItem">HOME</div>
<div class="menuItem">SERVICES</div>
<div class="menuItem">PRODUCTS</div>
<div class="menuItem">CONTACT US</div>
<div class="menuItem">NEWS</div>
</div>
<div id="content">
<div id="contentMain">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="contentAd">
s
</div>
</div>
<footer>
Contact us
<label>| </label>
Feedback
</footer>
</div>
</form>
</body>
</html>
Whenever I try to set the height of FOOTER, height of footer goes behind the CONTENT and CONTENTMAIN divs, I want it to appear below the CONTENT div, but its not working.
For testing purpose, I have set opacity of CONTENT and CONTENTMAIN to 0 so that You can see height of FOOTER behind that. I want FOOTER to appear as per the flow and below CONTENT div.
Update:
clear:both in footer solved my problem. Thanks all anyway
try this i hope this will help for u.
CSS
.footer
{
text-align: center;
background-color: gray;
font-family: "Source sans pro";
height:100px
}
HTML
<div class="footer">
Contact us
<label>| </label>
Feedback
</div>
Related
I would like to get this result below:
Example
My problem is that, I don't understand why my blocks are not centered correctly even with the propriety display: inline-block in my selector homebotblock1?
I tried this:
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</body>
</html>
You need to wrap the homebottxt1 and homebottxt2 text in its own <div> then wrap that <div> and the image in another <div> with the class homebotblock3.
Then add this CSS:
.homebotblock3 {
display: flex;
}
.homebotblock3 > div {
margin-left: 20px;
}
Modified Code
JSFiddle: https://jsfiddle.net/Zeraora/gefhov6b/
* {
margin: 0;
padding: 0;
}
.homebot {
background: url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
min-height: 500px;
display: inline-block width:100%;
}
.homebotbg {
background-color: rgba(255, 255, 255, 0.7);
min-height: 500px;
display: block;
width: 43%;
float: right;
padding: 100px 50px 50px 30px;
text-shadow: #fff 1px 1px 0px;
text-align: left;
}
.homebottit {
font-size: 24pt;
font-family: roboto;
color: #c22312;
text-transform: uppercase;
margin-bottom: 50px;
display: inline-block;
}
.homebotpad {
padding-left: 10px;
}
.homebottxt1 {
font-size: 16pt;
font-family: roboto;
color: #000;
}
.homebottxt2 {
font-size: 10pt;
font-family: open sans2;
color: #000;
}
.homebotblock1 {
width: 80px;
display: inline-block;
}
.homebotblock2 {
width: 450px;
display: inline-block;
}
.homebotblock3 {
display: flex;
}
.homebotblock3>div {
margin-left: 20px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="homebotblock3">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
.homebot{
background: url('https://zupimages.net/up/20/21/9zj3.jpg');
background-size: 100% auto;
background-position-x: center;
background-position-y: -100px;
height: 25vw;
display: block;
position: relative;
}
.homebotbg {
position: relative;
left: 40%;
width: 60%;
height: 100%;
background-color: rgba(255, 255, 255, .7);
padding: 10px 30px;
display: flex;
flex-direction: column;
align-content: flex-end;
}
.homebot-header {
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.homebottit {
color: red;
font-size: 24px;
}
.homebot-footer {
flex-basis: 50%;
display: flex;
align-items: center;
}
.homebotblock1 {
margin-right: 15px;
}
.homebottxt1 {
font-size: 18px;
margin-bottom: 5px;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<div class="homebot-header">
<p class="homebottit">Security Investment Solutions</p>
</div>
<div class="homebot-footer">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div class="homebot-footer-right">
<p class="homebottxt1">ADVANTAGEOUS CONDITIONS</p>
<p class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can design like this.
The key point here is to use flex layout.
Using flex layout by display: flex, you can make this structure easily.
Since you are applying inline-block to the image separately, it is not horizontally aligning the image to any other element in the page.
To achieve your result, you will need to create a div structure that suits your needs and then apply your property.
Also, use flex instead of inline-block, it's much powerful. I have modified your code to achieve your result.
P.S. Kindly add in a padding as per your need. Since it is not the objective of the question, I have not included it in my answer.
*{
margin:0;
padding:0;
}
.homebot{
background:url('https://zupimages.net/up/20/21/9zj3.jpg') no-repeat center;
background-size:cover;
background-attachment:fixed;
min-height:500px;
display:inline-block
width:100%;
}
.homebotbg{
background-color:rgba(255,255,255,0.7);
min-height:500px;
display:block;
width:43%;
float:right;
padding:100px 50px 50px 30px;
text-shadow:#fff 1px 1px 0px;
text-align:left;
}
.homebottit{
font-size:24pt;
font-family:roboto;color:#c22312;
text-transform:uppercase;
margin-bottom:50px;
display:inline-block;
}
.homebotpad{
padding-left:10px;
}
.homebottxt1{
font-size:16pt;
font-family:roboto;
color:#000;
}
.homebottxt2{
font-size:10pt;
font-family:open sans2;
color:#000;
}
.block{
display: flex;
}
.homebotblock1{
width:80px;
display:inline-block;
}
.homebotblock2{
width:450px;
display:inline-block;
}
<!Doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="homebot">
<div class="homebotbg">
<span class="homebottit">Security Investment Solutions</span>
<div class="block">
<img class="homebotblock1" src="https://zupimages.net/up/20/21/yljn.png" alt="img" />
<div>
<div class="homebottxt1">ADVANTAGEOUS CONDITIONS</div>
<div class="homebottxt2">We use your money to make a source of long-term profit. At the same time you become both our client and a shareholder.</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have these buttons. However they down't want to show on the page. I don't have any CSS that should conflict with the buttons' visibility. Sorry if this is a dumb question I am a little rusty on my CSS.
HTML:
<!doctype html>
<html>
<head>
<title>Hello, World!</title>
<!--references-->
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id = "box">
<h1 id="head">hello, world!</h1>
<div id = "btn-panel">
<button class="btn" id="btn1">panel1</button>
<button class="btn" id="btn2">panel2</button>
<button class="btn" id="btn3">panel3</button>
<button class="btn" id="btn4">panel4</button>
</div><!--button-panel-->
</div> <!--Box-->
</div> <!--wrapper-->
</body>
<script src="js/Index.js" type="text/javaScript"></script>
</html>
CSS:
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#wrapper {
width: 100%;
height: 100%;
}
#box {
background-color: #EEE;
Width: 100%;
Height: 250px;
margin-left: auto;
margin-right: auto;
Text-align: center;
}
#head {
padding-top: 25px;
font-size: 20pt;
}
#btn-panel {
width: 1000%;
height: 100px;
margin-top: 50px;
}
.btn {
width: 100px;
height: 25px;
border-radius: 5px;
}
Any help would be greatly appreciated. Thanks.
Here's your problem
#btn-panel {
width: 1000%; /* <- Should be 100, not 1000 */
height: 100px;
margin-top: 50px;
}
#btn-panel {
width:100%; /*or pixels, whichever one you chose*/
height:100px;
margin-top:50px;
}
You didn't write 100%.
I'm struggling to get a font-awesome icon alongside a heading and paragraph like in the picture below:
How can I achieve this?
You can do something like this:
HTML:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<div id="contenedor">
<div class="left">
<h2>Nice Work</h2>
<p>We possess within us two</p>
<p>winds. So far I have written</p>
<p>only of the conscious mind.</p>
</div>
<div class="right">
<i class="fa fa-search"></i>
</div>
</div>
CSS:
#contenedor {
font-family: 'Roboto', sans-serif;
width: 500px;
height: 500px;
background: #FFF;
float: left;
display: block;
}
.left {
float: left;
margin-right: 20px;
text-align: right;
}
.left h2 {
font-weight: bold;
}
.left p {
line-height: 18px;
color:#BDC3C7;
}
.right {
padding-top: 20px;
}
.right i {
background: #1DCFD1;
padding: 20px;
border-radius: 30px;
color:#FFF;
}
Working Demo
This is my code Im trying to get it centered in the middle of the page
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>cp</title>
</head>
<body>
<div class="well">
<font face="arial" size="5" color="#000000"><center><b>Control Panel</font></center>
</div>
</style>
<style type="text/css">
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top: 25%;
}
</style>
<div class="span12">
Welcome
</div>
<script src="js/bootstrap.js"></script>
It re-sizes with the page but I cant get the whole thing to be in the center of the page.
I just want the whole thing in the middle of the page
Remove the center tag and set margin-top:25%, It will solve your problem.
CSS
.span12{
background: lightblue;
color: while;
padding: 9px 0;
border-radius:5px;
text-align: center;
border: 1px #00BFFF solid;
margin: 0px auto;
width: 50%;
margin-top:25%; /* new */
}
HTML
<div class="span12">
Welcome
</div>
jsFiddle Live Demo
I created a layout were everything is centered (with the "margin="0 auto" technique). I also wanted the header and footer to be black and expand to both sides when the browser enlarge to the sides. If I center everything the black background will center too and it wont expand indefinably. The only solution I found was to apply the background style to the header and footer and using a class inside them (.container) to center the content (I think Stack Overflow uses this technique with the footer). It's nice but I would like to know if there's a better way rather than adding additional divs?
MY HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>globo design</title>
<link href="styles/layout.css" rel="stylesheet" type="text/css" />
<link href="styles/slideshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/slideshow.js"></script>
</head>
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<!-- content -->
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Our Work</h2>
<!-- slideshow -->
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
Content for slide 1 goes here
</div>
<div class="slide">
Content for slide 2 goes here
</div>
<div class="slide">
Content for slide 3 goes here
</div>
<div class="slide">
Content for slide 4 goes here
</div>
</div>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
</div>
</div>
<!-- footer -->
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
MY CSS:
/* reset */
* {
margin: 0;
padding: 0;
}
/* tags */
body {
background-color: #FFFFFF;
color: #5D5D5D;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: #2D2D2D url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #418EE4;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
/* header */
#header {
background-color: #2D2D2D;
padding-top: 10px;
}
/* navigation */
ul#navigation {
height: 20px;
list-style: none;
margin: 0;
padding: 0;
}
ul#navigation li {
float: left;
}
ul#navigation li a {
background: url(../images/tab.png);
color: #C0C0C0;
display: block;
height: 20px;
outline: none;
padding-left: 10px;
text-decoration: none;
}
ul#navigation li a:hover {
color: #418EE4;
}
#home li.home a, #portfolio li.portfolio a, #about li.about a, #contact li.contact a {
background-position: 0 -32px;
color: #757575;
}
ul#navigation span {
background: url(../images/tab.png) 100% 0;
display: block;
line-height: 20px;
padding-right: 20px;
}
#home li.home span, #portfolio li.portfolio span, #about li.about span, #contact li.contact span {
background-position: 100% -32px;
}
/* content */
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 2px dashed #F0F0F0;
border-bottom: 2px dashed #F0F0F0;
padding: 5px 0 5px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column {
float: left;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
/* footer */
#footer {
clear: both;
background-color: #2D2D2D;
height: 200px;
}
I haven't tested your code, but from the description it sounds like what I would typically do to code a stacked layout like this. My HTML structure would be something like this (obviously I've left out head, links to stylesheets, etc. for the sake of a simple example):
<html>
<body>
<div id="header-wrap">
<div id="header"> ... </div>
</div>
<div id="main-wrap">
<div id="main"> ... </div>
</div>
<div id="footer-wrap">
<div id="footer"> ... </div>
</div>
</body>
</html>
I think you can see how the CSS would be written for this -- each of the wrappers (#header-wrap, #main-wrap, #footer-wrap) would have the background applied and 100% width, then the inner containers (#header, #main, #footer) would have a fixed width with no background applied. If you are using, for example, 2 floated columns inside the main, you'll have to use something similar to a div that clears underneath for the background to fill the height of the content. It's not the best solution, but it's common and works well.
<div id="main">
<div style="float: left; width: 30%;"> ... </div>
<div style="float: right; width: 60%;"> ... </div>
<div style="clear: both; height: 0;"> </div>
</div>