HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
comments or suggest thanks
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
daggydoo



Joined: 22 Apr 2008
Posts: 10

PostPosted: Sat May 17, 2008 12:29 am     comments or suggest thanks Reply with quote

Well iam new at this I would like any comments or suggest on what i have done.
The only question I have is to the last style which is input. I was hoping that this would make all the input the same style. Well as you guess it did not it just gave me another box. Sad

<style type="text/css">
.right{
border: 3px solid black;
padding: 10px;
margin: 5px;
float: right;
width: 23%;
height: 100%}
.top{
border: 23px solid black;
padding: 10px;
margin: 5px;
float: center;
width:10% ;
height: 23%}
.bottom{
border: 3px solid black;
padding: 10px;
margin: 5px;
float: bottom;
width:70% ;
height: 33%}
.input{
border: 1px solid black;
padding: 10px;
margin: 5px;
float: right;
width:10% ;
height: 23%}
</style>
</head>

<body>
<p class="right">
<p class="top">
<p class="bottom">
<div class="input"><input = "text"> </div>
sticks464



Joined: 31 Dec 2006
Posts: 1179

PostPosted: Sat May 17, 2008 4:44 am     Reply with quote

Several things your doing wrong which will not make your page look the way you want.
<input = "text"> is for forms and will not work for straight html. You can set an attribute for the body which will effect the entire page, and make changes only for the elements you want to appear differently.
There is no styles for the float attribute as center or bottom, only none, left or right.
You can use text-align but I don't think this is what you want. Try this
Code:
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;}
.right{
border: 3px solid black;
padding: 10px;
margin: 5px;
float: right;
width: 23%;
height: 100%}

.top{
border: 23px solid black;
padding: 10px;
margin: 5px auto;
width: 10% ;
height: 23%}

.bottom{
border: 3px solid black;
padding: 10px;
margin: 5px;
width: 70% ;
height: 33%}

.input{
border: 1px solid black;
padding: 10px;
margin: 5px;
float: right;
width: 10% ;
height: 23%;
clear: both;}
</style>

Code:

<body>
<p class="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce

aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>

<p class="right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce

aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. </p>

<p class="bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem.

Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan

aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. </p>

<div class="input"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div>
</body>
daggydoo



Joined: 22 Apr 2008
Posts: 10

PostPosted: Sun May 18, 2008 6:23 pm     thanks Reply with quote

I did not know about the float thing. I was wondering why clear: both;} in last line of css styles what is it for?
by the way yes you right text align I donot want to use. So I have made changes but what i have done with my input is this

.input input{
border: 12px solid red;
padding: 10px;
margin: 5px;
float: right;
width:10% ;
height: 23%
clear: both;}
This so that they all have the same shape, size, and color border.
Now Iam still not 100% on why you said <input="text"> will not work in straight html. But anyway yes I design a form. Thanks again it did help.
sticks464



Joined: 31 Dec 2006
Posts: 1179

PostPosted: Sun May 18, 2008 9:25 pm     Reply with quote

A great place to learn css, html other than this site
http://www.w3schools.com/
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial