I've got a Silverlight applet whose UI consists of nothing more than a single button, which I'm trying to located in an appropriate position on my web page. My current result looks like this:
The blue element circled in red is where I want the button to be, and as the Firebug highlight shows, it's where the <div> tag containing the Silverlight <object> tag is positioned. However, the object itself (the "Click Me" button circled in green) is about 200 or so pixels lower.
My CSS is kinda complex (not unexpectedly, what I'm trying to do is a lot more complex than what I can show here), but for the record, it's here, reasonably simplified:
<!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 id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Engagement Test Page</title>
<style type="text/css">
div.alantaHost
{
display: block;
position: relative;
}
div.alantaEngageHost
{
}
div.alantaEngageAppHost
{
position: relative;
}
div.alantaEngageHost_Button
{
height: 26px;
width: 140px;
}
button.alantaEngageButton
{
position: relative;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
}
div.alantaEngageAppHost_Button
{
height: 26px;
width: 140px;
}
/* Override */
div.alantaHost_PictureButton
{
width: 220px;
border: 1px solid #a7a7a7;
color: rgb(0, 0, 0);
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
box-shadow: 8px 8px 11px #888;
border-radius: 8px;
}
/* Override */
div.alantaEngageHost_PictureButton
{
}
div.alantaHeader
{
width: 220px;
height: 18px;
text-align: center;
font-weight: bold;
font-size: 16px;
margin-top: 4px;
}
div.alantaTitle
{
margin-left: 10px;
float: left;
}
div.alantaContact
{
width: 200px;
height: 200px;
margin: 0px 0px 0px 4px;
padding: 5px;
background-color: rgb(255, 255, 255);
text-align: left;
font-weight: bold;
}
img.alantaContactImage
{
height: 200px;
width: 200px;
}
div.alantaStartChat
{
width: 210px;
height: 30px;
margin: 0px 4px;
}
button.alantaStartChatButton
{
position: relative;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: large;
}
div.alantaHost_Ad
{
width: 300px;
height: 250px;
}
div.alantaContact_Ad
{
width: 200px;
height: 200px;
float: left;
}
div.alantaStartChat_Ad
{
width: 75px;
height: 60px;
float: right;
}
div.alantaAdMessage
{
width: 80px;
float: right;
text-align: left;
margin-top: 10px;
}
div.alantaEngageAppHost_Ad
{
height: 60px;
width: 70px;
}
</style>
</head>
<body>
<div id="host">
<div class="alantaHost alantaHost_PictureButton alantaHost_Ad">
<div style="display: block;" class="alantaEngageHost alantaEngageHost_PictureButton">
<div class="alantaHeader">
<div class="alantaTitle">
Ken Smith</div>
</div>
<div class="alantaContact alantaContact_Ad">
<img class="alantaContactImage" src="http://graph.facebook.com/739004749/picture?type=large"
alt="Photo"></div>
<div class="alantaStartChat alantaStartChat_Ad" align="center">
<button style="display: none;" class="alantaEngageButton">
Talk to Ken</button></div>
<div class="alantaAdMessage">
I'm looking forward to talking with you!</div>
</div>
<div style="top: 2px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
<object type="application/x-silverlight" data="data:application/x-silverlight," id="objMyApp"
height="100%" width="100%">
<param name="source" value="http://app.dev.alanta.com/ClientBin/SilverlightButton.xap">
</object>
</div>
</div>
</div>
</body>
</html>
Any suggestions about why the Silverlight object isn't following its containing tag? (I should note that it behaves the same way in IE and in Chrome, so it's not a browser bug.)
I think that the offsets in your xaml are pushing the button to that location. If your root element is a canvas I would change that to a stackpanel and see if that fixes it.
I still don't understand all the details about what was tripping it up, but it may have had something to do with the fact that I wasn't setting the height of the alantaEngageHost. I changed the alantaEngageHost_Ad style to this:
div.alantaEngageHost_PictureButton
{
height: 250px;
}
And after that, the <button> and its containing <div> tag were in the same place; and I could then place them appropriately like so:
<div style="top: -226px; left: 224px;" class="alantaEngageAppHost alantaEngageAppHost_Button alantaEngageAppHost_Ad">
<button style="position:relative">HTML Button</button>
</div>
I'm guessing that there must be some weird CSS interaction that shows up when you're trying to position elements inside a <div> tag that isn't quite big enough to contain them. Just a guess, as CSS remains a dark and sorcerous art to me.
Related
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
I'm just getting started on HTML5 and CSS3 (working through The Odin Project) and the first project is to duplicate the Google homepage. I was able to get everything set up, but it seems like my CSS is somehow preventing my header links from acting like links. You can't click on them and the hover effects don't work.
They work fine on my footer and my nav text-decoration is applied, so I'm not sure what's making it act like it's not a link. I've only tested it in Chrome, so I'm not even worried about compatability issues yet. Am I doing the HTML5 wrong? Or is it some kind of weird rule like you can't use hover effects with inline-block or something? I'm not familiar enough with it yet to have learned all those nuances yet...
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Google</title>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<ul>
<li>+Mara</li>
<li>Gmail</li>
<li>Images</li>
<li><img src="images/options.png" width="35px"></li>
<li><img src="images/bell.png" width="35px"></li>
<li><img src="images/plus.png" width="35px"></li>
<li><img src="images/photo.jpg" width="40px" class="rounded_img"></li>
</ul>
</nav>
<div class="container">
<img class="logo" src="https://www.google.com/images/srpr/logo11w.png" width="320px"/>
<center><form action="#" method="post" name="google_search_form">
<input type="search" name="googlesearch" class="search"><br/><br/>
<input type="submit" value="Google Search" class="button">
<input type="submit" value="I'm Feeling Lucky" class="button">
</form></center>
</div> <!--End container-->
<footer>
<ul>
<span class="left"><li>Advertising</li></span>
<span class="left"><li>Business</li></span>
<span class="left"><li>About</li></span>
<span class="right"><li>Settings</li></span>
<span class="right"><li>Terms</li></span>
<span class="right"><li>Privacy</li></span>
</ul>
</footer>
</body>
</html>
And the CSS:
.container{
position: relative;
vertical-align: middle;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 270px;
clear: right;
}
.search {
width: 650px;
height: 35px;
margin-top: 40px;
font-size: 27px;
background: url('images/voice.gif') 97% 50% no-repeat;
opacity:0.6;
background-size: 17px;
border: blue solid 1px;
}
.button {
font-family: Helvetica, Roboto, sans-serif;
font-weight: bold;
color: black;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
border-radius: 2px;
width: 140px;
height: 40px;
}
nav {
width: 600px;
height: 30px;
font-size: 1em;
font-family: Helvetica, Roboto, sans-serif;
font-weight: lighter;
text-align: center;
position: relative;
float: right;
}
nav ul {
height: auto;
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.atext {
text-decoration: none;
color: black;
}
.atext: hover {
text-decoration: underline;
background-color: yellow;
}
.aicon {
opacity: 0.6;
}
.aicon:hover {
opacity: 1.0;
}
footer {
width: 102%;
height: 40px;
left: -20px;
right: -20px;
font-size: 1em;
font-family: Arial, sans-serif;
position: absolute;
bottom: 0;
background: #f2f2f2;
border: #d6d6d6 solid 1px;
}
footer ul {
height: auto;
padding: 0;
margin: 0;
}
footer li {
display: table-cell;
padding: 10px;
vertical-align: middle;
}
footer li a {
text-decoration: none;
color: gray;
}
.left {
float: left;
margin-left: 20px;
}
.right {
float: right;
margin-right: 20px;
}
.rounded_img {
border-radius: 20px;
}
Any help will be greatly appreciated. Thanks!
Oh, and I haven't even started on JavaScript yet, so I'd like to avoid JavaScript if possible!
Here is a fiddle: http://jsfiddle.net/Lvfmwhvu/
The problem is your container element, if you remove the position relative it will work, but not sure if it will be maintained in the same position, but you can check it and modify your css accordingly:
.container{
vertical-align: middle;
}
Hope this helps.
Your main container isn't clearing the floated navbar. Because it falls later in your document, it has a higher layer index and covers the navbar. Try this:
.container {
...
clear: both;
}
Demo
I am new to web designing and I am currently designing a website for my college project.Right now, I am facing a problem which is as follow:-
When I resize the browser window,specially when i resize the browser window to a small size, the div elements jumps out of it's normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as i give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But i want to design a full width browser window website so that it can adjust on any browser window size Please tell me how it can be done.
jsfiddle link is http://jsfiddle.net/9BuHt/3/
My CSS code is as under:-
I am new to web designing and I am currently designing a website for my college project. Right now, I am facing a problem which is as follows:
When I resize the browser window, specially when I resize the browser window to a small size, the div elements jumps out of its normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as I give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But I want to design a full width browser window website so that it can adjust on any browser window size. Please tell me how it can be done. My CSS code is as follows:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: #e9e5e5;
}
* {
margin: 0px;
padding: 0px;
}
#container {
min-height: 300px;
margin: 0 auto;
width: 1400px;
}
#header {
height: 150px;
width: 100%;
}
#logo {
padding-top: 10px;
padding-left: 20px;
float: left;
}
#header #title_panel {
float: left;
padding-top: 25px;
min-width: 60px;
}
#header #title_panel h1 {
color: #125ab4;
font-size: 36px;
}
#header #title_panel p {
color: #f5071d;
font-size: 20px;
font-family: "Comic Sans MS", cursive;
}
#search_panel {
margin: 10px 0px 0px 80px;
float: left;
width: 180px;
position: relative
}
#search_panel img {
float: right;
margin-top: -20px;
z-index: 1;
}
#search_field, #usrnam_field, #pwd_field {
border-radius: 20px;
color: #999;
padding-left: 4px;
s
}
#login_panel {
float: right;
width: 520px;
margin: 10px 200px 0px 0px;
min-height: 40px;
}
#login_btn, #signup_btn {
height: 20px;
width: 70px;
border-radius: 30px;
background: #125ab4;
text-align: center;
color: #FFF;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
.
}
#login_btn {
float: right;
margin-top: -20px;
text-decoration: none;
}
#signup_btn {
margin: 0 auto;
}
#header h3 {
text-align: center;
padding-right: 20px;
color: #125ab4;
}
#sidebar {
min-height: 200px;
width: 136px;
margin-top: -20px;
border: solid 1px #999999;
background: #FFF;
}
#sidebar_header {
height: 32px;
background-color: #009933;
}
#sidebar_header h2 {
text-align: center;
text-decoration: none;
color: #FFF;
vertical-align: middle;
text-decoration: none;
padding-top: 2px;
}
#sidebar_header img {
position: absolute;
float: left;
margin-left: 15px;
}
#sidebar ul {
list-style: none;
}
#sidebar ul a {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #009933;
}
#sidebar ul li {
padding-top: 15px;
text-align: center;
display: block;
vertical-align: middle;
}
#sidebar a:hover {
background-color: #009933;
padding: 10px 5px 10px 5px;
color: #FFF;
}
And the html code is as under:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Store-The one stock shop for all</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"></div>
<div id="title_panel">
<h1>App Store</h1>
<p>The one stock shop for all</p>
</div>
<div id="search_panel">
<form action="" method="post">
<input name="search" type="text" value="Search..." id="search_field">
</form>
<img src="images/Search_icon.png" width="22" height="22" alt="SearchIcon"> </div>
<div id="login_panel">
<form action="" method="post">
<input name="usrname" type="text" value="Username" size="30" id="usrnam_field">
<input name="psswrd" type="text" value="Password" size="30" id="pwd_field">
</form>
<a href="#">
<div id="login_btn">Login</div>
</a>
<h3> </h3>
<h3>Not a member yet?</h3>
<a href="#">
<div id="signup_btn"> Signup</div>
</a>
</div>
</div>
<div id="sidebar">
<div id="sidebar_header"> <img src="images/logo_small.png" width="22" height="28" alt="logoIcon">
<h2 style="">Store</h2>
</div>
<ul>
<li>Technologies</li>
<li>Categories</li>
<li>Developers</li>
<li>Apps</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There are cases where you need to specifically fix small browser windows(this just might be one of them)
.myClass {
width: 50%;
}
but at small sizes, 50% is not big enough and we make it 100%
#media (max-width: 600px) {
.myClass {
width: 100%;
}
}
so when the browser window is less than 600px, we fix it.
here are common device sizes http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
EDIT
after creating an html file of the code and looking at it, it looks like you have a 100% header with some floating elements in it.
under that you have a float left sidebar.
2 fixes that make it look a bit better are:
clear: both; on your #sidebar
and use max-width instead of width on your login_panel
so clear: both will make sure that it accounts for any element floating left or right.
max-width means that the login_panel won't get too big when the screen is huge, but when the screen it small, it won't go off-screen.
As I correctly understand you. You are need to create a fluid markup for any device support. So look to my example and try to adapt your code the same way.
So, for example you need #wrapper width = 960px for desktops and full sized content on mobile devises (if device width < 960px). So your code must be:
HTML
#wrapper {
max-width:960px;
margin:0 auto;
overflow:hidden // if you have float elements inside wrapper
}
If you have a question - welcome
I'm a n00b, so go easy on me. :)
Right now I'm stuck because I need to figure out why the text color of the two named buttons (Resume and Programs) isn't white. The buttons reside inside divs of class outerdiv; thus they should inherit the property font-color: #FFFFFF. But apparently they aren't doing that, since the font is still black.
Please explain the HTML logic that corrects this problem.
Code:
<html>
<head>
<title>my site</title>
<style type="text/css">
p
{
font-family: Arial;
color: #FFFFFF;
}
#mtx_bckgd
{
font-family: "Courier New";
height: 750px;
width: 1000px;
position: absolute;
z-index: -1;
background: linear-gradient(180deg, #39275b, #FFFFFF);
}
#mtx_bckgd > p
{
word-wrap: break-word;
color: #D8D8D8;
overflow: hidden;
}
#headerbox
{
height: 50px;
top: 25px;
left: 5px;
}
h1
{
color: #FFFFFF;
font-weight: 400;
text-align: center;
margin: auto;
padding: auto;
text-shadow: 2px 2px rgb(51,51,51);
}
#navbar
{
top: 120px;
left: 5px;
width: 1000px;
height: 30px;
}
#uwlogo
{
height: 50px;
float: left;
}
#JaminWEB
{
margin: 0px auto;
}
.navbutton
{
width: 33%;
height: 25px;
background-color: rgba(51,51,51,0.5);
margin: 0px;
padding: 0px;
}
#footer
{
top: 800px;
}
.outerdiv
{
position: absolute;
font-family: Arial;
width: 1000px;
border: solid 2px #FFFFFF;
background-color: rgba(215,169,0,0.5);
margin: 0px;
padding: 0px;
font-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function change_bckgd()
{
var bitstr = "";
for (var i = 0; i < 4000; ++i)
bitstr += Math.floor(Math.random() * 10) % 2 ? "0" : "1";
document.getElementById("mtx_txt").innerHTML = bitstr;
}
</script>
</head>
<body>
<div id="mtx_bckgd">
<p id="mtx_txt"></p>
</div>
<div class="outerdiv" id="headerbox">
<div id="uwlogo">
<img src="C:\Users\XXXXXX\Desktop\uwlogo.png" height="50px">
</div>
<div id="JaminWEB">
<h1>JaminWEB</h1>
</div>
</div>
<div class="outerdiv" id="navbar">
<input type="button" class="navbutton" value="Resume"/>
<input type="button" class="navbutton" value="Programs"/>
<input type="button" class="navbutton"/>
<div class="outerdiv" id="footer">
<p>Last modified: March 21st, 2014</p>
</div>
<script type="text/javascript">
setInterval(change_bckgd, 200);
</script>
</body>
</html>
First, in your .outer-div rules, you have font-color which isn't a property, it's just color. But if you correct that, you'll see the text is still black, the default color. That's because browsers are notorious for having issues when rendering form controls.
As the MDN says:
CSS font and text features can be used easily with any widget (and
yes, you can use #font-face with form widgets). However, browsers'
behaviors are often inconsistent. By default, some widgets do not
inherit font-family and font-size from their parents. And many
browsers use the system default appearance instead.
The easiest way to fix this would be to add color:inherit; or color:white to your .navbutton class
jsFiddle example
.outerdiv input[type=button]
{
color:#fff;
}
You can set .navbutton to have a color of white in the css, or adding color:inherit should work. And the proper "font-color" property in CSS is just "color", fyi.
Example:
.navbutton
{
width: 33%;
height: 25px;
background-color: rgba(51,51,51,0.5);
margin: 0px;
padding: 0px;
color: #fff;
}
Inputs don't automatically inherit all parent styles, so you have to specify to inherit, or specify the style you want.
I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)
http:// img602.imageshack.us/img602/8769/verticalcentering .jpg
I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.
What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.
What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.
The actual thing I am working on is this:
I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.
Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?
It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.
Any help would be greatly appreciated :) Thanks in advance!
HERE IS THE CSS AND HTML BELOW
<!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>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0;
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px;
letter-spacing: -0.25px;
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px;
display: block;
background-color: #FF99CC;
border: solid 3px #CCC;
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px;
height: 150px;
padding-left: 50px;
background-color:#CC99CC;
}
.txt-pos {
float: left;
width: 100px;
height: 50px;
padding-left: 20px;
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466;
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold;
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
padding-top: 0;
color: #333;
font-size: 12px;
line-height: 1.1;
}
.info-txt-link a {
color: #003466;
text-decoration: none;
}
/* Hover State for the web links */
.info-txt-link a:hover {
color: #ED1B24;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div class="wrapper">
<!--CONTAINER HOLDING THE HEADER ELEMENTS-->
<div class="header">
<p class="learn-txt">Title</p>
<p class="leader-txt">Subtitle</p>
</div>
<div class="img-ctnr-two">
<div class="img-two">
</div>
</div>
<div class="txt-pos">
<p class="name-txt-title">Canada</p>
<p class="info-txt-link">www.mylinkhere.com</p>
</div>
</div>
</body>
</html>
.outer {
border: 1px solid red;
line-height: 5em;
}
.outer .inner {
display: inline-block;
vertical-align: middle;
line-height: 1.2em;
}
<div class="outer">
<div class="inner">
ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC
</div>
</div>
<div class="outer">
<div class="inner">
ABC<br>ABC<br>ABC
</div>
</div>