I am implementing UI design in one of my own projects, and it looks like I have an issue with CSS, big time.
As far as I know, I have specified styles for Input types : text, buttons in the way CSS accepts:
body input[type=text]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body button{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
body input[type=password]{
border:1px solid #208278;
height:24px;
padding-left: 5px;
}
body input[type=submit], input[type=button]{
background-color: #279A8F;
border:0px;
color:white;
height:24px;
}
On the login page, the fields appear to be of 24px in height, where as after I log in, I see all the fields are bigger, with height more than 24px. I have no clue.
One point is after logging in, the fields are present in a container which has some padding, and margins, but I don't see any reason how this would affect the fields. This issue has been driving me crazy nuts, can someone please provide some insight?
The container in which the form fields are placed are below:
#container{
width:1100px;
margin: 0 auto;
}
#leftbar{
float:left;
width:200px;
font-size:13px;
background-color:#237971;
color:white;
padding:4px;
}
#rightbar{
float:right;
width:200px;
font-size: 13px;
background-color:#237971;
color:white;
padding:4px;
}
#middlebar{
padding:5px;
margin-left:3px;
margin-right:3px;
float:left;
width:660px;
border:1px solid black;
}
HTML Code of Log in page:
<html>
<head>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>" media="all">
<title>
My Page
</title>
</head>
<body>
<div id=header>
Welcome
</div>
<?php echo validation_errors(); ?>
<?php echo form_open('login/verify'); ?>
<table>
<tr>
<td align="right"><label for="email">E-Mail:</label></td>
<td align="left"><input type="text" name="email" id="email" value="<?=set_value('email')?>"></td>
</tr>
<tr>
<td align="right"><label for="password">Password:</label></td>
<td align="left"><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td></td>
<td align="left"><input type="submit" name="submit" value="Login"></td>
</tr>
</table>
</form>
<br/>
Sign up for a new account<br/>
</body>
</html>
HTML Code of member's area:
<!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>
<script src="<?php echo base_url('js/jquery-1.9.1.js'); ?>"></script>
<script src="<?php echo base_url('js/jquery-ui/js/jquery-ui-1.10.2.custom.js'); ?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('js/jquery-ui/css/customjqueryui/jquery-ui-1.10.2.custom.css');?>">
</script>
<link rel=stylesheet type=text/css href="<?php echo base_url('layout/layout.css');?>">
<title>Welcome</title>
</head>
<body>
<div id=container>
<div id=header>
Members area
</div>
<div id="leftbar">
<div class=content>Logout</div></div>
<div id="rightcontainer">
<div id="middlebar">
<?php echo validation_errors();?>
<?php echo form_open_multipart('home/create/validate'); ?>
<table>
<tr>
<td align="right"><label for="fullname">full Name:</label></td>
<td align="left"><input type="text" name="fullname"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="finish" value="Finish"></td>
</tr>
</table>
</div>
<div id="rightbar"></div>
</div>
</div>
</body>
</html>
All the fields in the member's area appear bigger than 24px. :( Please help me!
Thank you very much in advance.
Figured out the main fault,
I was not standardizing the login page with the statements below in my HTML code:
<!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">
Related
I'm trying to make a page navigation as portable as possible. I'm using Chrome 58 and the page is displayed as expected: the iframe is resized according to the td container, but is not working in IE and firefox which displays the iframe in the middle of the cell. Here is my code.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="language" content="ES">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css.css" type="text/css" rel="stylesheet">
<script src="js.js" type="text/javascript" charset="UTF-8"></script>
<title>Mi sitio</title>
</head>
<body>
<table id="navUI">
<tr>
<td id="navHeader" colspan="2">Tema general</td>
</tr>
<tr>
<td id="MenuHeader">Menú</td>
<td rowspan="4"><iframe src="intro.htm" id="navField"></iframe></td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page1'); return false;">Item 1</td>
</tr>
<tr>
<td class="MenuItems" onclick="navPage('page2'); return false;">Item 2</td>
</tr>
<tr>
<td class="spander"> </td>
</tr>
</table>
</body>
</html>
CSS:
#charset "utf-8";
html, body, table {
padding:0;
margin:0;
height:100%;
width:100%;
}
body {
font:12px Verdana, Arial, Sans-serif;
}
table#navUI, td {
border:1px solid black;
}
td#navHeader {
text-align:center;
height:30px;
}
td#MenuHeader {
width:10%;
text-align:center;
}
td.MenuItems {
width:10%;
}
td.MenuItems:hover {
background-color:#BDBEE1;
cursor:pointer;
}
td.spander {
width:10%;
height:100%;
}
#navField {
border:none;
height:100%;
width:100%;
}
The idea is to keep pure html and css without jquery. Thanks for the help.
Add this to the td which contains the iframe:
vertical-align:top;height:100%;
Here's a fiddle which works in Firefox:
https://jsfiddle.net/3urm8kx8/1/
I want to create a page to test and display my web fonts in a browser to compare different sizes of the same user-input text. Later perhaps to compare different font styles with drop down buttons etc. my question for the moment is how to have new text input in a browser field appear instantly at different sizes in other fields on the same page. Many thanks. Here is the page that works fine to display the fonts but the text has to be input manually in each field.
Thanks for your help.
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="AlQuds.css" />
<style type="text/css" media="screen">
body { font-family: "AlQuds", Georgia; font-size: 40px ; }
#big { font-size: 100px; background-color:#ede7ab;}
#medium { font-size: 40px; background-color: #eab645}
#small { font-size: 20px; background-color:#d3ffcf}
</style>
</head>
<body>
<table style="width: 100%;" border="1">
<col /> <col />
<tbody>
<tr>
</tr>
<tr>
<td><img alt="alquds-regular-bold" src="alquds-regular-bold-sampler.jpg" style="display: block; text-align: center; margin-left: auto; margin-right: auto; width: 653px; height: 739px;" /></td>
<td style="">
<hr>
<p >Input text below AlQuds Regular font in Arabic, Farsi or in a West European language such as Swedish.</p>
<hr>
<div id="big" contenteditable="true" border="3"> إطبع هنا - type here.</div>
<hr>
<div id="medium" contenteditable="true" border="3"> إطبع هنا- type here.</div>
<hr>
<div id="small" contenteditable="true" border="3">إطبع هنا - type here.</div>
<hr>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If you can use jQuery, you can do something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
return false;
});
});
#import url(http://fonts.googleapis.com/css?family=Raleway);
body {font-family: 'Raleway';}
div {margin: 15px 0 0; border: 1px solid #ccc;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Size: <input type="text" id="size" />
Add New Size
Full HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Raleway);
body {font-family: 'Raleway';}
div {margin: 15px 0 0; border: 1px solid #ccc;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(){
$("body").append('<div contenteditable style="font-size: ' + $("#size").val() + 'px;">Size ' + $("#size").val() + 'px</div>');
return false;
});
});
</script>
</head>
<body>
Size: <input type="text" id="size" />
Add New Size
</body>
</html>
I'm working on a slideshow, and I'm getting a problem with the images being resized when the page refreshes. I've stripped my code down to the bare, gotten rid of all the javascript and as much of the html/css as I could while still getting the problem, and I simply cannot figure it out. The problem only arises on Safari. It doesn't happen every time I refresh, which makes it even more confusing.
I've posted a screenshot of how it should look, and then how it looks after I refresh the page. If you see anything in my code that could be causing this, please let me know.
HTML CODE
<!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> Website </title>
<link href="slideshowRebuild.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topDiv">
<iframe id="slideshowImg0" src="http://www.youtube.com/embed/xKBqSeYgQwo" frameborder="0" ></iframe>
</div> <!-- topDiv -->
<div id="imageDiv">
<table id="mediaMenu">
<tr>
<td class="subMenu"><img style="opacity:1.0" id="sub0" src="images/tebow.jpg" alt="Tim Tebow"></img>
</td>
<td class="subMenu"><img id="sub1" src="images/nash.jpg" alt="Steve Nash"></img>
</td>
<td class="subMenu"><img id="sub2" src="images/kobe.jpg" alt="Kobe Bryant"></img>
</td>
<td class="subMenu"><img id="sub3" src="images/giants.jpg" alt="San Francisco Giants"></img>
</td>
<td class="subMenu"><img id="sub4" src="images/tbrown.jpg" alt="Terrell Brown"></img>
</td>
</tr>
</table>
</div> <!-- imageDiv -->
</body>
</html>
CSS CODE
body{
background-color:#CCC;
}
#imageDiv {
border: 5px solid black;
width:93%;
position:relative;
background-color:#E0EAFF;
margin:3%;
}
#mediaMenu, #mediaMenu table {
margin:0;
padding:0;
border-spacing:0;
position:relative;
}
#mediaMenu td {
padding:0px;
margin:0px;
width:20%;
}
#mediaMenu img {
width:100%;
height:90px;
}
#contentText {
color:orange;
float:right;
width:39%;
}
I have a header that I need to fill the top of the screen. It successfully does this, but when I minimize the window and then scroll to the right, the div shrinks and no longer fills the whole top portion of the screen. I have tried setting div heights and using width:100%, but nothing seems to work. I was looking at other users who had the same problem, but I could get nothing to work.
Here is my code
<style>
A:hover {text-decoration: underline; color: white}
#top {
height:53px; width:100%; min-width: 800px;
background:#000000;
}
h400 {
color:white; border-bottom;
letter-spacing:-0.05em;
margin-top:0; padding-top:0;
font-size:1.2em;
font-family:Helvetica, Arial, sans-serif;
}
#headerimage{
margin-top:-20px;
margin-right:10px;
min-width:322px;
background:black;
}
a img {border: none; }
</style>
<?php
if ($username){
$headerdiv='<div class="box" style="width:516px; margin-top:-16px;"><div align="right">';
}
else
$headerdiv='<div class="box" style="width:220px; margin-top:-16px; margin-right:20px;"> <div align="left">';
?>
<head>
<div id="top" align='center'>
<h400><table><tr><td><div id='headerimage'><a href="http://www.pearlsquirrel.com" ><img src="pearlsquirrel.jpg"/></a></div></td><td><div style="margin-top:13px; margin- right:30px;"><form action='searchmusic.php' method='GET'>
<div style="margin-right:-5px;"><input type='text' size='45' name='search' value="Search..." style="color:#474747;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<div style="visibility:hidden;" >
<input type='submit' name='submit' value='Search' />
</div></div>
</form></div></td><td><?php echo $headerdiv; ?><?php if (!$username) echo 'Register'; ?> <?php if ($username) echo 'Upload'; ?><h11> <?php echo $echovar?><?php if ($username) echo 'Page | Logout'; ?></h11></div></div></td></tr></table>
<link rel="icon" href=".pearlsquirrelthumbnail.jpg" type="image/x-icon" />
<link rel="shortcut icon" href="pearlsquirrelthumbnail.jpg" type="image/x-icon" />
</h400><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</div>
</head>
If anyone could help me with this issue it would be greatly appreciated. I feel like it is an easy fix, but I really have no clue what to do.
I've two elements in <td> a <div> and some text. I would like to align <div> to top and text to middle of <td> How can I do that?
Edit: The should be vertically top aligned and not text inside div.
try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma }
.my-table { height:300px }
.my-cell { position:relative; border:1px solid green }
.my-div { position:absolute; top:0; left:0; border:1px solid red }
</style>
</head>
<body>
<table class="my-table">
<tr>
<td class="my-cell" align="center">
<div class="my-div">
I'm aligned to the top
</div>
This text is vertically centered.
</td>
</tr>
</table>
</body>
</html>
Like this?
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td><div style="text-align: center;">some text</div></td>
</tr>
</table>
</body>
</html>
...Or
<html>
<body>
<table width="100%" height="100%" border="1">
<tr>
<td align="center"><div style="text-align: left;">div text</div>some text</td>
</tr>
</table>
</body>
</html>
Remember to set the body height so you can see the vertical centering
by default any text in a table is vertical alligned, not sure why you need a div there. Its very difficult to get content to allign vertically inside a div