I'm trying to fix the top and bottom div bars on scroll with the text centred
Top bar is fixed but text align isn't working
Bottom bar isn't appearing at all
I can't see what is wrong with the css, I get no errors in the dev console in chrome
Thanks
<!DOCTYPE html>
<html>
<head>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
div{ margin-left: 20%;
padding-left: 20%
}
#headbar
{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<body>
</style>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
Something like this?
#headbar
{
display:inline-block;
text-align:center;
position:fixed;
width:100%;
}
#footbar
{
display:block;
text-align:center;
position:fixed;
width:100%;
bottom:0;
}
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<div id="footbar" style="background-color: #ffff66";>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
body{
margin:0;
padding:0;
}
.spacer{
height:1em;
width:100%;
}
#headbar{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;bottom:0;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
</style>
<body>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div class="spacer"></div>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
I try to correct some issues. your text align is not working because of <div> padding and margin. hope this helps.
here is a screenshot how it seems on my screen
http://prntscr.com/a794gf
Related
I have several buttons in the head section of the html page however, they don't seem to display on chrome whereas they do on safari.
<!DOCTYPE html>
<html>
<style>
body{
background-image: url("background_index.jpg");
}
</style>
<head>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Resume </button>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Projects </button>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Blogs </button>
<button style='font-family:Tahoma,Geneva,sans-serif;'> Contact info </button>
<h1 style='font-family:Impact, Charcoal,sans-serif;font-size:25px; text-align: center; position:relative; top:50px'> Welcome to my website. </h1>
</head>
<body>
<p1 style='position: absolute; top:200px; padding-left:100px'> Hello there </br> </p1>
<img src="self_pic.jpg" style="height:450px;width:30%; position:absolute; top:300px; padding-left:450px;"></img>
</body>
</html>
I'm out of ideas here, but I'm sure I'm missing something obvious. I want the video to float left and the paragraph above the contact form all to float right. The paragraph is cooperating but the form is out there on it's own.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description" content- "best=" " junk=" " car=" " buyers=" "
in=" " austin"="">
<meta name="author" content="Lucky">
<title>ATX Junk Cars</title>
<style>
iframe {
clear: left;
float: left;
}
<p> {
float: right;
display: inline-block;
vertical-align: middle;
float: right;
padding-left: 50px;
padding-top: 50px;
}
</style>
</head>
<body>
<h1> ATX Junk Cars &nbs p;
&n bsp;
<hr size="2" width="100%"> </h1>
<iframe src="https://www.youtube.com/embed/dNWh2w5VSn4" allowfullscreen="" width="700" frameborder="0" height="450"></iframe>
<p>If you're ready to turn that old car in your driveway into cash, we want to hear from you. Tell us who you are, how we can reach you, and most important, tell us about that car. For the fastest response, call or send a text to 512-229-5424. If it's 2:00 in the morning or you just don't like phones, send us a message with the form below.</p>
<br>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Contact Form</title>
<style>
body {
background-color: #330000;
color: ffcc00;
</style>
<style>
label {
display:block;
margin-top:20px;
letter-spacing:2px;
</style>
<style>
/* Centre the page */
.body {
display:block;
margin:0 auto;
width:576px;
}
/* Centre the form within the page */
form {
margin:0 auto;
width:459px;
}
/* Style the text boxes */
input, textarea {
width:439px;
height:32px;
background:#efefef;
border:1px solid #dedede;
padding:10px;
margin-top:3px;
font-size:0.9em;
color:#3a3a3a;
}
textarea {
height:213px;
background:url(images/textarea-bg.jpg) right no-repeat #efefef;
}
</style>
<header class="body"></header>
<section class="body">
<label>Who are you?</label>
<input name="name" placeholder="Name">
<label>How do we call you?</label>
<input name="phone" placeholder="Phone number with area code" type="phone">
<label>Do you have keys and a clear title?</label>
<input name="keys" placeholder="Keys, title or both?" type="keys">
<label>Does it start, run and drive?</label>
<input name="runs" placeholder="Yes or no?" type="runs">
<label>Anything not working on it?</label>
<textarea name="problems" placeholder="Dents, check engine lights, broken things?"></textarea>
<input id="submit" name="submit" value="Submit" type="submit">
</section>
<footer class="body"></footer>
</body>
</html>
Add style="float:right;" as below:
<section class="body" style="float:right;">
<label>Who are you?</label>
<!-- your form code -->
</section>
<%# Master Language="C#" %>
<%# Import Namespace="System.Globalization" %>
<!DOCTYPE html>
<script runat="server">
void page_load()
{
PersianCalendar pc = new PersianCalendar();
day.Text = pc.GetDayOfWeek(DateTime.Now).ToString();
hour.Text = string.Format("{0} : {1} : {2}", DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body{
background-color:#FFFACD;
}
#Main{
margin:5px;
}
#Title{
background-color:#F0FFFF;
height:50px;
position:relative;
top: 0px;
left: 0px;
}
#Title span{
background-color:#FDF5E6;
text-align:center;
font-family:"Sakkal Majalla";
font-size:larger;
margin-top:7px;
border:solid 1px #DEB887;
display:block;
width:60px;
height:35px;
float:left;
}
#hour{
background-color:red;
}
</style>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="Main">
<div id="Title">
<span style="float:right;margin-right:10px;">به نام خداوند جان و خرد</span>
<span style="margin-left:5px"><asp:Label runat="server" ID="hour">aaa</asp:Label></span>
<span style=" ">ساعت</span>
<span style=" "><asp:Label runat="server" ID="day" BorderWidth="0px" Font-Names="Sakkal Majalla" Font-Size="Large" BackColor="#3366FF" Height="15px"></asp:Label></span>
<span style=" ">امروز</span>
</div>
</div>
</form>
</body>
</html>
its really strange to me ! here is the full code ... why not changed the background-color of the label_id = hour ??? where i made a mistake? please help ! i refreshed the code please test it on your own vs !
your code is working in here and in jsfiddle so the problem might be that you have another css rule that forcing span to not having a background color.
you can try to add !important at the end of the line of background-color to check if it is working at all .
good luck .
I am facing a layout problem when using overlay inside a td. Let me show my html.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<script type="text/javascript" src="jquery-1.7.1.js">
</script>
<script type="text/javascript">
function alterControl() {
var $visibleCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayVisible");
var $hiddenCtrl = $("#servicesTable tbody").find("#ID1").find(".divOverlayHidden");
$visibleCtrl.removeClass("divOverlayVisible").addClass("divOverlayHidden");
$hiddenCtrl.removeClass("divOverlayHidden").addClass("divOverlayVisible");
}
</script>
</head>
<body>
<table id="servicesTable">
<thead>
<tr>
<th>
<label id="lblServiceName">
Name</label>
</th>
<th>
<label id="lblResult">
Result</label>
</th>
</tr>
</thead>
<tr id="ID1">
<td>
<input style="width: 100px;" id="txtName1" name="txtName1" type="text" value="Service1" />
</td>
<td>
<div class="overlayOuter">
<div id="ServiceTestResult1" class="divOverlayVisible">
<input type="text" value="This is static text" id="Testresult1" style="width: 40px;
height: 16px;" />
</div>
<div id="ServiceTestResultTestImage1" class="divOverlayHidden">
<img src="Validated_16.png" alt="Image not found" style="width: 16px; height: 16px;" />
</div>
</div>
</td>
</tr>
</table>
<input type="button" id="btnToggle" value="Alter" onclick="alterControl()" />
</body>
</html>
My CSS is like below
.overlayOuter
{
position:relative;
height:100%;
width:100%;
}
.divOverlayHidden
{
top:0px;
left:0px;
position:absolute;
visibility:hidden;
z-index:101;
}
.divOverlayVisible
{
top:0px;
left:0px;
position:absolute;
visibility:visible;
z-index:100;
}
The problem that I am facing is, table cell in my second column is getting outside the row. My idea was to show textbox or image at a time based on input. Please find the screenshots too which are uploaded in skydrive
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!130
https://skydrive.live.com/#cid=EAA26C1BAE3050B8&id=EAA26C1BAE3050B8!131
Can anyone tell me how to solve this problem?
I can't see the images because I'm not member, sorry. But I've recreate the problem in a jsFiddle, and, if I remove position:absolute; from .divOverlayVisible it seems to work properly: Example
.divOverlayVisible {
top:0px;
left:0px;
/*position:absolute; I have removed this line */
visibility:visible;
z-index:100;
}
EDIT: If you need the position to make z_index work, you can change the value absolute to relative rather than remove it.
http://www.mohrdevelopment.com
I'm currently only testing the website with 2 browsers:
Rockmelt & Chrome.
Rockmelt problem:
When opened in rockmelt browser, everything functions correctly except for the "About" tab. When it is pressed my header dissapears. I even tried copying the code from one of my other tabs that looked the same (but didn't have the header problem) but the problem still prevailed.
Chrome problem:
Initially when the website is opened in Google Chrome, the navigation bar is aligned vertically. However if you press some of the other tabs, the bar aligns horizontally like it's supposed to (even if you go back to home tab). But if you click around on the tabs fast, there's a chance that the bar aligns vertically again.
I hope someone is able to help me with this problem, since i cannot see the logic in it.
My HTML Code for Home tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!--Navigation bar-->
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<div class="wrap">
<div class="content">
<br>My new selection
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My HTML Code for About tab:
<html>
<head>
<!-- Meta information -->
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<!-- Favicon -->
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<!-- Title -->
<title> Jonas - Development page </title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header of page -->
<div class="headerdiv">
<h1 class="header">Mohr Development</h1>
</div>
<!-- Navigation bar -->
<ul class="navigation">
<li><em class="home"/><b>Home</b></li>
<li><em class="photos"/><b>Photos</b></li>
<li><em class="projects"/><b>Projects</b></li>
<li class="current"><em class="about"/><b>About</b></li>
<li><em class="contact"/><b>Contact</b></li>
</ul>
<div class="wrap">
<div class="content">
<form action="" method="get">
<ul>
<li>
<label for="name"><font color="white">Enter your name:</font></label>
<input id="name" name="name"/>
</li>
<li>
<label for="comments"><font color="white">Your comments</font></label>
<textarea id="comments" name="comments"></textarea>
</li>
<li>
<label for="css"><font color="white">Do you like CSS?</font></label>
<input type="checkbox" name="css" id="css" />
</li>
<li>
<label for=""><font color="white">Favorite Language?</font></label>
<input type="radio" /> CSS
<input type="radio" /> HTML
<input type="radio" /> JavaScript
<input type="radio" /> PHP
</li>
<li>
<input type="submit" value="Go!"/>
</li>
</ul>
</form>
</div> <!-- Wrap end -->
<!-- Sidebar -->
<aside>
<h2>Sidebar</h2>
<ul class="sidebar">
<li class="sidebarli">Lol1</li>
<li class="sidebarli">Lol2</li>
<li class="sidebarli">Lol3</li>
<li class="sidebarli">Lol4</li>
</ul>
</aside>
</div> <!-- Content end -->
<div class="footer">
<p>Copyright © Mohrdevelopment.com</p>
</div> <!-- Footer end -->
</body>
</html>
My CSS Code:
body {
font-family:sans-serif;
background: url(images/background4.png);
margin:0px;
}
/********************\
******* Header *******
\********************/
.header
{
background: url(images/Header.png);
text-indent:-9999px;
width:1092px;
height:132px;
margin:auto;
}
.headerdiv{
width:100%;
margin:0;
background:gray;
}
/********************\
*** Navigation Bar ***
\********************/
.navigation {
background:black url(Navigation/Navigation/nav_background.png);
height:40px;
margin-bottom:0px;
padding-left:10%;
font-size: 0; /*remove whitespace*/
display:block;
width:100%;
}
.navigation li{
display:inline-block;
line-height: 40px;
font-size:16px;
}
.navigation li a{
display:block;
color:#FFFFFF;
padding: 2px 10px;
}
.navigation li a em{
height:32px;
display:inline-block;
padding: 0 5px 6px 60px;
font-weight:bold;
vertical-align: middle;
background-position: 0 50%;
font-size:16px;
}
.navigation li a:hover{
color:#00CCFF;
background: url(Navigation/Navigation/nav_hover.png) no-repeat;
text-decoration:none;
padding: 2px 10px;
}
.navigation .current a {
color:#FFFFFF;
background:url(Navigation/Navigation/nav_hover.png) no-repeat;
padding: 2px 10px;
}
/*Navigation bar icons*/
.navigation li a em.home, em.photos, em.projects, em.about, em.contact{
background-repeat: no-repeat;
margin-bottom:5px;
}
.navigation li a em.home {
background-image: url(Navigation/Icon_images/home.png);
}
.navigation li a em.photos{
background-image: url(Navigation/Icon_images/Photo.png);
}
.navigation li a em.projects{
background-image: url(Navigation/Icon_images/projects.png);
}
.navigation li a em.about{
background-image: url(Navigation/Icon_images/about.png);
}
.navigation li a em.contact{
background-image: url(Navigation/Icon_images/Contact.png);
}
/*Navigation bar icons STOP*/
/* Main Wrapper */
.wrap {
margin:auto;
width:80%;
background:yellow;
}
/********************\
******* Content ******
\********************/
.content
{
background:url(images/outlets.png);
float:left;
width:80%;
height:auto;
min-width:500px;
min-height:900px;
display:inline;
color:white;
border-bottom-left-radius: 50px 50px;
}
.content h1, p, form, label{
color:white;
}
/********************\
******* Sidebar ******
\********************/
aside{
background: url(images/egg_shell2.png);
float:left;
width:20%;
height:inherit;
min-height:900px;
min-width:125px;
display:inline;
border-bottom-right-radius: 50px 50px;
}
aside ul {
padding-left:1px;
list-style:none;
}
/********************\
****** General *******
\********************/
ul a {
text-decoration:none;
color: #666;
}
ul a:hover {
text-decoration:underline;
color:black;
}
li {
list-style:none;
margin-bottom:20px;
}
label {
display: block;
cursor: pointer;
color: #292929;
font-family:sans-serif;
padding-bottom:8px;
}
form ul {
padding-left:0px;
}
textarea {
width:400px;
height:220px;
}
#contact {
padding-left:5px;
font-weight:bolder;
}
#Andapp{
margin-top:50px;
}
/********************\
******* Footer *******
\********************/
.footer{
float:left;
height:150px;
width:100%;
background-color:gray;
margin-top:100px;
text-align:center;
}
<ul class="navigation">
<li class="current"><em class="home"/>Home</li> <!-- Current selection -->
<li><em class="photos"/>Photos</li>
<li><em class="projects"/>Projects</li>
<li><em class="about"/>About</li>
<li><em class="contact"/>Contact</li>
</ul>
<em> tags aren't closed. It's probably best to abstract away the styling into your CSS files and focus on content in the HTML.
You can run your HTML through the W3C Validator tool to help you with these sorts of errors.