I am trying to center these buttons, but most stuff online does not work. <center> does not work and text-align:center does not work.
The buttons should show up in the exact same way, except centered in the middle. If you try this, it will not work. there must be a problem, I guess.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
});
</script>
<style type="text/css">
.button0 {
position:fixed;
left:88px;
top:58px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
.button1 {
position:fixed;
left:6px;
top:191px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
text-align: center;
margin-left:auto;
margin-right:auto;
}
.button2 {
position:fixed;
left:358px;
top:216px;
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
}
</style>
<body>
<center>
<div class="button0"><input type="button" style="width: 268px;height: 145px;" value="Button"/></div>
<div class="button1"><input type="button" style="width: 40px;height: 88px;" value="Button"/></div>
<div class="button2"><input type="button" style="width: 76px;height: 73px;" value="Button"/></div>
</center>
</body>
</html>
.container {
text-align: center;
}
.center-element {
width: 100px;
text-align: left;
}
or
.container {
width: 200px;
}
.center-element {
width: 100px;
margin: 0px auto 0px auto;
}
or
.container {
width: 200px;
}
.center-element {
width: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}
You can't assign position:fixed and top & left and expect your elements to be centered. Typically, margin: 0px auto will work well. See example below.
.button0 {
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
margin: 0px auto;
}
.button1 {
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
text-align: center;
margin: 0px auto;
}
.button2 {
font-family:MS Shell Dlg 2;
font-size:8px;
font-weight:NORMAL;
margin: 0px auto;
}
Here's a working fiddle to demonstrate.
jsfiddle - just turn the button to a block element, specify the width, and then auto margins left and right.
You want to wrap it in a relative div. Then you can set the margins of the left and right to auto.
Just to be clear, is this what you're looking for?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>website</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
<body>
<div style="position:relative; width:500px; height:200px; background:green; text-align:center">
<input type="button" style="width: 268px;height: 145px;" value="Button1"/>
<input type="button" style="width: 40px;height: 88px;" value="Button2"/>
<input type="button" style="width: 76px;height: 73px;" value="Button3"/>
</div>
</body>
</html>
Try vertically-centered text in a div. See JSFiddle Demo for example.
Related
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
I seem to be having an issue with my Science project.
For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Science Project</title>
<style>
html, body {
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#000;
}
div.header {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
height: 100px;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border-bottom:20px solid #09F;
border-top-left-radius:12px;
}
p.title {
padding-top: 20px;
padding-left:20px;
}
div.menu {
width:100%;
height:80px;
border-bottom-left-radius:12px;
background-color:#fff;
border-bottom: 1px solid #000;
}
a.button {
display:table-cell;
width:120px;
height:80px;
border-bottom-left-radius: 10px;
background-color:#999;
text-decoration:none;
color:#FFF;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
height:calc(100% - 221px);
width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.
jsfiddle: http://jsfiddle.net/ny4fH/
Thanks!
Josh
You are experiencing margin-collapse.
<p class='title'>The Big Bang Theory Explained.</p>
Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:
.header { overflow: hidden }
Or other fancy tricks described here. (Fiddle)
your code is ok.
Just remember to reset values of the tags you use. In this case it was the paragraph tag.
p { margin: 0; }
You can as well avoid paragraphs margins by hiding the parent (.header) overflow
.header { overflow: hidden; }
I have a nav bar. When the user makes their screen bigger I want my font size to auto adjust. I tried it with: li { font-size: 1.2vw; } It works if the page is refreshed after adjusting the screen. What would be the code for an auto update? I want my text to constantly change its size based on the window width.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Power</title>
<style type="text/css">
#page {
position:inherit;
display:block;
width:60%;
margin:auto;
min-width:1000px;
z-index:0;
}
#pageImg {
position:absolute;
width:60%;
min-width:1000px;
z-index:1;
}
#media (min-width: 1000px) {
#navBarImg {
top: 5vw;
}
#navBarLogoImg {
top: 5vw;
}
#navMenuPart1 {
top: 5vw;
left:60%;
}
}
#navBarImg {
position:absolute;
width:60%;
min-width:1000px;
top:50px;
z-index:2;
}
#navBarLogoImg {
position:absolute;
width:11.75%;
min-width:190px;
top:50px;
z-index:3;
}
#navMenuPart1{
position:absolute;
width:100%;
min-width:1000px;
left:20px;
top:50px;
z-index:3;
color: #FFFFFF;
}
li { font-size: 1.2vw; }
ul{ white-space: nowrap; }
.navMenuItems ul { list-style:none; text-align:center; padding:10px 0; }
.navMenuItems ul li { display:inline; padding:15px; letter-spacing:2px; }
.navMenuItems ul li a { text-decoration:none; color:#3a3a3a; }
.navMenuItems ul li a:hover {color:#F19433;}
</style>
</head>
<body>
<div id="page">
<img id="pageImg" src="../Navigation/backgroundImg.png" />
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogoImg" src="../Navigation/navLogoImg.png" />
</div>
<div id='navMenuPart1' class="navMenuItems">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
</div>
</body>
</html>
EDIT:
Here is a FIDDLE - you can resize the page and see that it is working.
See this css-tricks article:
This is a webkit bug (Chrome,Safari) and it doesn't occur on IE10+ and FF 19+
In that article the author gives a Jquery solution for webkit browsers:
To fix this issue (allow resizing without page refresh) you need to
cause a "repaint" on the element. I used jQuery and just fiddled with
each elements (irrelevant, in this case) z-index value, which triggers
the repaint.
causeRepaintsOn = $("h1, h2, h3, p");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
So your page will look something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
causeRepaintsOn = $("li");
$(window).resize(function() {
causeRepaintsOn.css("z-index", 1);
});
</script>
<header></header>
... etc etc..
</body>
</html>
Use,
font-size:1em;
or
font-size:100%; // based on body default declaration
If you have a css like this:
#body #mytext {
font-size: 50%;
}
you can dynamically resize in jQuery like this:
$(window).resize(function(){
$('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});
On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}
Try closing your BODY and HTML tags? Also, doctype "htmls"?