This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 9 years ago.
I want to add separate opacity to my header and my div and my form button. I want the div opacity to be 0.5; which is no problem but I don't want my form button to have a opacity. When ever I try to change levels of opacity my header and the form button opacity becomes the same. For example: I want the header opacity to be 0.9 and the div opacity to be 0.5 and no opacity on the submit button, here is my HTML code:
<!DOCtype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adeventist Youth's Empowerment</title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<p> </p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
</body>
</html>
My css is this:
body {
background-image:url(Images/background%20image1.jpg);
background-repeat:no-repeat;
background-size:100%;
background-position:center top;
}
#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}
#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;
}
#apDiv1 {
background:#FFF;
opacity: 0.5;
border-radius: 20px;
}
#form {
width: 20em; margin: auto;
}
.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;
}
.button:hover{
color: #000;
background-color: #0C0;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 1;
}
* {
margin: 0;
padding: 0;
}
when ever i add opacity to the div the form automatically has that opacity and so does the header.
First off you shouldnt name your div ids and classes the same. It only leads ot confusion. If you formatted your code correctly. It would be very easy to see that oyu never close you apDiv1. You open another one with the same class name. As I mentioned above this is only going to confuse you. Close your outer div at the appropriate place and then it will get its opacity.
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment. At this website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!! -Shadowcoder </cite></h1>
</div>
<form id="form" method="get" action="Main.html">
<p> </p>
<p> </p>
<p> </p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>
CLOSE THE DIV HERE OR EARLIER IF YOU WANT
After you fix all that... Give your outer div an opacity this way...
background: rgba(64, 64, 64, 0.5)
from your code, you have missed out the closing tag
To answer your question, you can use something like this to your div
#apDiv1 {
background: rgba(255,255,255,0.5);
border-radius: 20px;
}
where rgb is the color in rgb format, and a is for the alpha
Here you go, I have added three opacity in header, form and apDiv1 class. jsfiddle
.apDiv1{
opacity: 0.2;
}
#form {
width: 20em; margin: auto;
opacity: 0.8;
}
header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.7;
}
Related
I'm trying to make a website where the main content is on the left and miscellaneous things on the right. The two divs are wrapped inside another div that centers the page and leave some white space on both side. However the right div always go below the left one even though there's clearly still room for the the right one to fit. I know this problem is pretty common but I tried many solutions like display:inline-block, and it doesn't work at all. Here's what my page looks like right now: https://hongweichen0.github.io/
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
}
.content {
float: left;
width: 70%;
padding: 20px;
border: 5px solid black;
}
.contentRight {
width: 10%;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
You can use flexbox to handle the positioning of the left and right containers. Please see the code snippet below.
body {
font-family: "Roboto", sans-serif;
margin: 0px;
padding: 0px;
background-color: rgb(220, 240, 230);
}
.banner {
text-align: center;
background: rgb(20, 16, 16);
position: fixed;
top: 0px;
width: 100%;
}
.banner h1 {
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
}
.centerPage {
background-color: rgb(255, 249, 249);
width: 80%;
margin: auto;
margin-top: 60px;
display: flex;
flex-direction: row;
}
.content {
flex: 1 1 auto;
padding: 20px;
border: 5px solid black;
}
.contentRight {
flex: 0 0 80px;
padding: 20px 0 0 0;
}
.clear {
width: 100%;
line-height: 0px;
clear: both;
}
.content p,
.content ul {
width: 100%;
line-height: 1.5em;
text-align: justify;
}
.content h2 {
width: 100%;
border-bottom: 2px solid black
}
.content img {
float: left;
margin: 10px;
margin-top: 0px;
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hong Wei Chen's Website</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="banner">
<h1>Hong Wei Chen</h1>
</div>
<div class="centerPage">
<div class="content">
<h2>Introduction</h2>
<p>
My name is Hong Wei Chen. I'm currently enrolled in Midwood High School as a Junior. I created this personal website for fun just to show off what I learned about HTML/CSS from KhanAcademy. Still pretty new to web design and I plan to learn more about
how to implement Javascript into websites. There's still a lot for me to learn but I plan to keep on going and become a badass programmer. My ultimate goal is to become expert in both front-end and back-end development. Now, let me show off as
much as I can. No one will visit this site anyway.
</p>
<h2>Useless Info (not personal)</h2>
<ul>
<li>First Name: Hong Wei</li>
<li>Last Name: Chen</li>
<li>Age: 16</li>
<li>Favorite Food: EGGS!!!</li>
<li>Favorite Movie: "Groundhog Day", "Interstellar"</li>
<li>Cats or Dogs: Dogs</li>
<li>Favorite Companies: SpaceX, Google, Tesla</li>
<li>Favorite Color: Blue</li>
</ul>
<h2>My Incredible Works</h2>
<img src="Abstract%20Fish.PNG" alt="Abstract Fish. A random fish painter program." width="200">
<p>This is an intro to Javascript project I made on Khan Academy during my early stages of learning. The idea is that when the user clicks on the canvas, a fish with random size and color will be drawn on the position of the cursor. This lesson is
about functions and how to call them with parameters. In this case, the parameter is the x and y position, which is provided by the user's mouse click. This worked out pretty well and I even took a screen shot of it and used it as my avatar for
many websites. It's a piece of art made with Processing JS.</p>
<img src="Shooting%20Star.PNG" alt="Shooting Star. A shooting star and explosion animation" width="200">
<p>This one is also from the Intro to Javascript course on Khan Academy. I love their free courses, probably the best ones out there. Anyway, this is actually an animation using the draw function. I did this on the second day I started this course
and it took me a solid 2 hours to finish. I went way pass the expectation and added a bunch of stuffs. At the end I was saying to myself, "hey, this is fun". I finally realized how amazing and fun programming can be.</p>
</div>
<div class="clear"></div>
<div class="contentRight">
<h1>Cool Buttons!</h1>
</div>
</div>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Why do you have div.clear between them? When I removed it, it works. Clear specifies on which side are floating elements not allowed to float. Also, you can use flexbox for this.
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
How do I make an image change to text when hovered, and back again when the mouse leaves using HTML, CSS and JavaScript? I am currently using HTML5UP's Aerial theme if that makes any difference.
You should be able to do this with just css:
#logo-holder {position:relative; width:992px; height:125px; /*dimensions of image*/}
#logo-holder .image,
#logo-holder .text {transition: opacity 0.5s ease-in-out;}
#logo-holder .text {position:absolute; top:0; left:0; opacity:0;}
#logo-holder:hover .image {opacity:0;}
#logo-holder:hover .text {opacity:1;}
<div id="logo-holder">
<img src="http://spydar007.com/images/logo.png" class="image" />
<div class="text">Show this text on hover</div>
</div>
I've just created a quick and dirty solution, and I have no idea if it is actually what you are looking for, you were extremely vague.
http://codepen.io/alexmccabe/pen/WvOdRw
Essentially, the text is always there but hidden using opacity: 0 and visibility: hidden. This allows us to do a nice transition to get the text to appear.
Biggest plus point, no JS used at all.
Use the below code it really helpful
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3 hover text animate in div</title>
<style>
.c--anim-btn span {
color: black;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1.2em/4em Arial,sans-serif;
overflow: hidden;
width: 200px;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -4em;
}
</style>
</head>
<body>
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
Hover Here
</span>
<span>
<a href="http://sanwebcorner.com"><img src="http://3.bp.blogspot.com/-ZFCnUdrABLc/VlMOOwRCNeI/AAAAAAAAA9g/O5-y5ySNyLc/s1600-r/Copy%2Bof%2Bsan-02%2Bcopy.png" style=" height: 35px;
margin-top: 15px;"></a>
</span>
</div>
<h2>www.sanwebcorner.com</h2>
</body>
</html>
Here is the reference
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)
I've been following a tutorial from a book on html and css.
I tried doing a plain header design like youtube's but I can't seem to get the search box and the button to display properly.The button is rendered about 10px lower than the search box as if it had the top padding set.
Can be seen here http://www.wourm.com/index.html
can anyone see why it's happening?
[EDIT : Adding html and CSS to this page]
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Awtunes.com</title>
<link href="awtunes.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo floatL"><img src="images/logo.png" alt="Awtunes.com logo"/></div>
<div id="find-videos" class="search floatL" style="top:0px;" >
<form id="searchVideos" name="searchVideos" method="get" action="/">
<input name="q" type="text" class="searchBox" id="searchBox" /><input type="submit" class="searchbutton" value="" />
</form>
</div>
<div class="menu floatL">
<ul>
<li>Videos</li>
<li>Music Videos</li>
<li>Trailers</li>
<li>Create Account</li>
<li>Sign in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and the css
.awtunes {
font-family: "Courier New", Courier, monospace;
}
.container {
width: 980px;
top: 0px;
margin-left: auto ;
margin-right: auto ;
}
.floatL {
float: left;
position:relative;
}
.floatR {
float: right;
position:relative;
}
.searchBox {
border-style:none;
border-width:0px;
width: 360px;
background-image: url(images/search_bar.png);
background-repeat:no-repeat;
height: 40px;
font-size: 18px;
}
.searchbutton {
border-style:none;
border-width: 0px;
background-repeat:no-repeat;
background-image: url(images/search_button.png);
background-repeat: no-repeat;
width: 55px;
height: 40px;
}
.logo {
width: 122px;
height: 50px;
}
.menu {
width:430px;
}
.search {
width: 425px;
height: 40px;
}
.split {
background-image: url(images/split.jpg);
background-color: #C0C0C0;
background-repeat: no-repeat;
width: 1px;
height: 18px;
}
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url(images/split.jpg);
background-repeat: no-repeat;
float: left;
margin: 0 0.15em;
}
if this code comes from a book you better buy a new one.. serious. to get the button aligned just add your floatL class to both of you input fields.
I suggest a CSS reset such as the YUI CSS reset. A cursory check in IE and FF shows some pretty serious inconsistency already. If you use a CSS reset stylesheet, this will at least set your code on a level playing field between browsers. YUI CSS Reset: http://developer.yahoo.com/yui/reset/
Once you have a resource like this in place, many quirks of layout are already handled.
It seems to be because of .searchBox { font-size: 18px; }. If you take all the other styles off of the input.searchBox, you can see that changing the font-size changes the size of the plain old text input, which changes the height of the container of the text input and the button.
I also think it would be a good idea to add your HTML and CSS to this question so that if someone is looking at this question in the future and your site is different, they can still learn from your question!
.searchbutton { vertical-align: top; }
A quick fix to your current code would be to add something like:
.searchbutton {
position: relative;
top: -15px;
}
carolclarinet is right here -- the font-size attribute is the problem (at least in FireFox). I'm not sure if you're using the IE Developer Tools to check your CSS issues, but I'd recommend using it as well as FireBug for FireFox. They'll let you play around with your styles without the tedious modify/save/refresh cycle.