 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
daggydoo
Joined: 22 Apr 2008 Posts: 10
|
Posted: Sat May 17, 2008 12:29 am comments or suggest thanks |
|
|
|
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.
<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: 1171
|
Posted: Sat May 17, 2008 4:44 am |
|
|
|
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
|
Posted: Sun May 18, 2008 6:23 pm thanks |
|
|
|
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: 1171
|
|
|
|
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
|
|
|
|
|
 |
|
|
|
|
|
|
|