|
CSS - Learning Css. Prob: Text Doesnt Keep %, And Styling Forms
http://www.lockheed-martin.co.uk/css/full_layout_test.html
ok if you go there, you will see a text resize functionality, if you decrease the browser size, this text will fall out of the border.. any way to fix that? also I was trying to align the menu to middle but margin:auto isnt working like it did for the body? finally I want to style forms without using floats or br but they are not playing ball.. (well the code I have, I think is poor but it works for them but not for submit button which I would like to be on its own) Code:
form {
width:30%;
}
fieldset, input {
color:green;
border:1px solid green;
}
legend {
margin-left:0.5em;
}
label{
white-space:pre;
margin:0 1em 0em 1em;
}
input {
width:50%;
margin-bottom:1em;
}
input[type="submit"] {
padding:2px;
margin-left:1em;
width:auto;
}
form: Code:
<form action="" method="post">
<fieldset>
<legend>Example of a form</legend>
<label>First Name</label>
<input type="text" name="firstName" size="10"/>
<label>Last Name</label>
<input type="text" name="lastName" size="10"/>
<label>Some options</label>
<input type="checkbox" name=""/> Some
<input type="checkbox" name=""/> other
<input type="submit" name="submit" value="submit"/>
</form>
PS> if you go to the link and view source, you will see that I have used very few ids and instead used CSS selectors.. any comment on code would also be appreciated.. The reason for this is mainly for me to learn these selectors & work with them.. and this is the reason I have not used float property.. which I am amazed that you could replicate using overflow:hidden and top & left to align elements.. Similar TutorialsI set up a class (named "emphasized") to be bold, italic and color #087112. The color is being applied but for some reason the font is not appearing bold or italicized. (See "Introduction to EFT" text.) The bullets (set up in css as id selector "li") are not being styled either (same thing, the color is applied but not the list styling). Since I'm a new user I'm not allowed to put links in my post but you can see the pages he HTML page can be found at tinyurl dot com /da97nb CSS can be found at tinyurl dot com /de9tqe Help! And thank you! is text align restricted to div tags only? and/or block level elements? and if so, how could i get the program names (ICQ, MSN, Yahoo!) to text-align:left..... and the contact info to align right.... do i HAVE to use a float for this? http://defunctgames.com/contactinfo.htm Hi, Is it possible to style text on the same line like so.... T est Regards Chad Hi, I've recently built my first site using the Magento eccomerce paltform. I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area. This only happens in IE. I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it. Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page. Thanks, Tim I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ? <input type="text" name="trans1_1" size="6" value="170"/> Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time. Hi There - Just finished the tutorial from List Apart. I've got the tabs working well, but I can't get the text colour to style in browsers (works fine in dreamweaver). I've been at this for so long that I'm sure I'm not seeing something that's obvious to fresh eyes. Could someone please look at my code and tell me where I'm being a bone-head? I've put the rules all over the place and can't seem to get the text-colour to go right. Thanks for your help. Here's the html: Code: <div id="tabnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Here's the CSS: Code: #tabnav {
float:left;
width:100%;
background:#FFFFFF url("tab_background.png")
repeat-x bottom;
line-height:normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 13pt;
}
#tabnav ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#tabnav li {
float:left;
background:url("tab_inactive_right.png")
no-repeat right top;
margin:0;
padding:0;
}
#tabnav a {
display:block;
background:url("tab_inactive_left.png")
no-repeat left top;
padding:8px 15px 4px;
}
#tabnav a:link{
color:293356;
text-decoration: none;
}
#tabnav a:hover{
color:596eba;
text-decoration: none;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#tabnav a {float:none;}
/* End IE5-Mac hack */
#tabnav #current {
background-image:url("tab_active_right.png");
}
#tabnav #current a {
background-image:url("tab_active_left.png");
padding-bottom:5px;
}
I do not know what you call this. But I have seen forms that have text entered in them like "enter your name here", however when you put your cursor in the input field, the text automatically disappears. How is that done? Thanks! I recently put a section on my web page that allows people to submit data to database, and it works but it looks kind of plain. And I had seen this web page (http://textsfromlastnight(dot)com/Submit-a-Text.html) and saw how they seem to use a custom text box for their submit form. Can anyone explain to me how they did this? Or if its done with something other than CSS possibly point me in the right direction to learn? Thanks in advance!! Hi: Can anyone tell me whether you can create raised shadowed text or forms with CSS? If it is, how can you do it? Thanks for the tip! PHP Code: body { margin: 0px; font-family: Tahoma; font-size: 10px; background-color: #777; } #bodywrapper { margin-left: auto; margin-right: auto; width: 750px; background-color: #FFF; } #logo { margin-left: 15px; margin-top: 7px; margin-bottom: 7px; } .image { display: block; } .topnav { float: right; margin-top: 25px; background-image: url( images/line.gif ); } #left { float: left; width: 180px; background-color: #ccc; } #right { float: right; width: 180px; background-color: #ccc; } #center { margin-left: 190px; margin-right: 190px; background-color: #ccc; } #clear { clear: both; } #contentwrapper { margin: 0px; } PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-us" /> <link href="/css/layout.css" type="text/css" rel="stylesheet" media="all" /> <title>Petroleum Listing Service</title> </head> <body> <div id="bodywrapper"> <div id="header"> <div class="topnav"> image image image </div> <div id="logo"> <img class="image" src="images/logo.gif" /> </div> </div> <div id="contentwrapper"> <div id="left"> left </div> <div id="right"> right </div> <div id="center"> center </div> <div id="clear"></div> </div> <div id="footer"> </div> </div> </body> </html> The problem I am having is it seems that FF starts rendering the white background only once the image is placed...it doesn't count the margin above it as content I assume... IE however does what I want it to do...renders the margin above the image as content, and thus the white background starts at the very top of the page, thus a white margin between the top of the page and the logo. How do I rectify the problem? I understand that FF is probably doing it right...but how do I make FF also start the white background at the top. Hi, this would be my first post. I've been using CSS for about 6-7 months now, and I always find that IE is difficult. Below is the CSS I am using: Code: * {
margin: 0;
padding: 0;
}
body {
font-size: 72.5%;
font-family: tahoma, sans-serif;
background: url(bricks.png) repeat;
bakground-attachment: fixed;
color: #FEEFA2;
}
a{
color: white;
text-decoration: none;
}
a:hover{
color: #090;
text-decoration: none;
}
a:visited{
color: #FEEFA2;
text-decoration: underline;
}
p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: #FEEFA2;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: url("bricks.png")repeat #222;
background-attachment: fixed;
min-width: 720px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 0px 0px 0px 0px;
padding-top: 10px;
padding-bottom: 0px;
}
#main-content {
background: url("") repeat-y #4B4214;
padding-left: 230px;
padding-right: 230px;
padding-top: 20px;
border-right: 1px solid #000;
width: 45%;
margin-left: 10%;
}
#header {
width: 82%;
margin: 0% 0% 0% 10%;
background: #342E0E;
text-align: center;
font-size: 1em;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 150px;
padding-top: 20px;
font-size: 1em;
}
#footer {
background: #342E0E;
margin-left: 10%;
width: 82%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
The problem lies with the left-sidebar div. Here is my HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MythScape: The Hub for the Paranormal & Mythological</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="fav.png">
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
<script type="text/javascript">
function cacherVoir(theDIV){
leStyle = document.getElementById(theDIV).style ;
if(leStyle.display == "block") {
leStyle.display = "none";
}
else{
leStyle.display = "block";
}
}
</script>
<meta name="verify-v1" content="LiYZqvPLQLMOR/3+Stk2cMxWr2l80SisI86GjbuNmLU=" >
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<?php
include "button.php";
?><br/>
MythScape -v. 1.5-!
</div>
<div style="clear:both;"></div>
<div id="left-sidebar">
<p>
<?php if (!isset($_COOKIE['loggedin'])) {
$link_reg = '<a href="user_login.php">Register</a><br/>';
echo("You are not logged in!<br/>");
include "log.php";
echo $link_reg;
}
else{
$link_logout = '<a href="logou.php">Logout</a><br/>';
$change = '<a href="changepage.php">Change Password</a><br/>';
$mysite_username = $_COOKIE['mysite_username'];
echo ("Welcome, $mysite_username. <br/>");
include "access.php";
echo $change;
echo $link_logout;
}
?>
<a href="http://mythscape.freezoka.com/wiki//index.php?MythScapeMainPage" target="_blank">Wiki</a></div>
</p>
</div>
<div id="main-content">
<p>Cryptids, animals that haven't been proven to exist or have little or no information documented on them, could very well be around us. No one can
disprove their existence, but there is evidence that can neither support nor destroy the possibility of them being real. Cryptozoology (the study of
cryptids) comes from the Greek words: <i>kryptos</i>, <i>zoon</i>, and <i>logos</i>, which translate to: hidden, animal, and discourse. The term was coined
by Lucien Blancou when he dedicated a book to Bernard Heuvelmans, "the master of cryptozoology". Accounts of cryptids are abundant and diverse. Even if outsiders
to an area have never heard of a cryptid, the native peoples often have tales of them; if the creature never existed, surely they would not have accounts
and stories about them.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Cryptozoology Main Page</div>
<p>Demonology, or the study of demons, is a branch of theology, and involves the studying of demons' existence, or the belief in them. Demons are very common
in religion, and are not always evil. In fact, most demons in ancient religions were good, bad, or both. Djinn (Middle Eastern demon-like beings)
could become good and adopt Islam. However, in some religions, like Christianity, demons are always evil and serve their lord, Satan.A demonologist studies
demons and catalogues their existence; they made be a member of the occult or an exorcist for one of the major religions of today.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Demonology Main Page</div>
<p>Mythology is the study of myths, which are tales that have been gathered and reflect on a culture's beliefs. Myths were abundant in ancient
civilizations like Egypt, Greece, Japan, and Rome, but in the modern world our myths reflect things that aren't religious or spiritual in any way. Tribal mythology is abundant in areas
of Pacific Asia or Africa.</p>
<div style="text-align:right; border-top:1px solid #000;">>>Mythology Main Page</div>
<p>
This website is the source of information on all of these topics. It is an unprecedented amalgamation of information that is free for you to read!</p> </div>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p><?php
include "footer.php";
?></p>
</div></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
In Firefox, it's perfectly okay. The Left sidebar nests within the main container and looks gooood. In IE, though, the sidebar jumps in between the header and the maincontainer so that it is in the middle making a huge gap. http://mythscape.freezoka.com If you'd like to see what I'm talking about. Please help I was asked to change the header to a rotating one, and I found a nice jquery solution. Of course at first it made the links at the top (on top of the image) disappear, but then I looked at the jquery code and saw that it used z-index (1000), and so I made <header p> = z-index of 6000. That brought them back and in fact it looked pretty good... except in IE. And, depending on what I'm doing to fix the IE problem, Safari. In those browsers, the rotating header appears flush under the header p links, rather than flush up against the border -- and you can see the old static image peeking out. http://esdcar.org/about/board.html?category_id=1&sub_id=2 I googled z-index and IE and found several different options for stacking problems, which it seems like this is. (Am I wrong?) Negative z-index on the header div that contains header p, solved the problem in Safari but not IE. I followed some other suggestion and made all the parent elements successively 1 higher in value. Basically I've tried many things and none have worked. This is the current iteration: Code: #container
{ color: #775b36;
background-color: #ffefca;
border: 4px #f5c674 solid;
width: 800px;
margin: auto;
background: url(../images/bkg_faux.jpg) repeat-y 50% 0;
z-index: 6003; }
<snip (unrelated divs)>
#content
{ width: 75%;
position: relative;
margin: 0em;
float: right;
z-index:6002;}
#header
{ background-image: url(../images/ec_landscape.jpg);
background-repeat: no-repeat;
background-position: top; height: 100px;
border-bottom: 4px #f5c674 solid;
text-decoration: none; color: #775b36;
text-align: left;
margin-bottom: 0em;
position:relative;
z-index:6001; }
#header p
{ float: right;
/*margin-right: 1%;*/
margin-top: 0em;
padding-top: .2em;
font-size: .7em;
position:relative;
z-index:6000;
display:inline;
background:#ffefca;
padding: 2px; }
What am I not getting? It seems like the z-index is the problem that was introduced, but I can't seem to fix it. PROB FIXED hi, I have a site im working on: www.tomaustin.dsl.pipex.com/webdev I have #mainbox on the left and #subnav on the right I want the subnav to have height 100% ( i know it is, but thats to show the other problem) I also have subnav going under mainbox when there is less content in main box basically im trying to get it to look like www.alistapart.com can anyone help, just ask if the probem sisnt make sense thanks PROB FIXED Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Hi again. okay i'm playing with CSS to make a new site. Im trying to get the background image to move down from the top of the page by around 3cm or 200px approx but i cant figure out how to do it. Can anyone help a CSS n00b. Thanks Image so you can see what i meean. http://img100.imageshack.us/img100/4571/help2wq.jpg Noted only on certain laptops is a quirk causing the rt floated column (body) to be shifted below the lf float...basically a glitch in the width dimensioning. The first time I noticed it it happened to be one of the wide format DELL laptops using IE thus figuring it had something to do with the non-4x3 ratio. But, I just saw it again yesterday on a run-of-the-mill Compaq. While this instance was noted using IE they also had Netscape installed and it exhibited no crowding problem allowing the webpage to view properly. The following link is directed to a page known to exhibit that quirk on select laptops - http://www.solidgroundnc.com/the_band/bio_band.htm I know trying to use pixel values is a bit on the I-beg-to-be-frustrated side of life. ;-) Using percentages I never achieved my expected results and reducing pixel width to build breathing room was hampered by its cumulative effect on the sub-nav list. I was goaded to use percentages for that list, and I really wanted too, but it never seemed successful. Any insight, if anyone can even duplicate the symptom, would be greatly appreciated. Regards, Golem2 Well I have a multi-part question. I am obviously new to css. I have a site located here . As you can see in the panel to the left the text spans past the footer. I would like the text to push the footer down. I have been trying for hours to get this to work but well.... here I am Any help would be greatly appreciated. Second part is that I opened this in IE on mac and WHOA! Not good to say the least. Any ideas on how I can hack this to match the way it looks in FF? Again any help would be great. Thanks for your time and expertise, phpkata. |
|||||||