WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Tables codes for the body on Tue Aug 31, 2010 10:30 pm

Guest


Guest
Hello again Very Happy

I am trying to add tables to my site like that concept(LIKE THAT not a copy! Razz ) http://a.imageshack.us/img835/2040/mysitelayout.jpg


my code is this one:
you can see the css,body etc.
So,can someone add the black bordered tables to the body like the image above?
i want the tables to be:
2 side widgets,a main table body to the middle and a table with much width to the footer(like that site

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>Test</title>
<style type="text/css">
body {
   font-family:Tahoma, Geneva, sans-serif;
   margin: 0;
   background-color:#333d3a;
   background-image:url(http://i38.tinypic.com/t7ziok.png);
}

.container {
   margin: 0 auto;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
   -moz-border-radius: 10px;
   background-color: #222725;
   width: 800px;
   border: 1px solid #424242;
   margin-bottom: 50px;
margin-top: 70px;
}
#outercontainer {
   background-image:url(http://i33.tinypic.com/otlm49.png);
   background-repeat:no-repeat;
   background-position: top center;
   margin: 0 auto;
}

a:link {
   text-decoration: none;
   color: #f1d11c;
}
a:visited {
   text-decoration: none;
   color: #F90;
}
a:hover {
   text-decoration: underline;
   color: #FC0;
}
a:active {
   text-decoration: none;
   color: #FFF;
}

</style>
</head>
<body>
<div id="outercontainer"></div><div class="container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.

Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.

Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.

Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus.

Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy.</div>
</body>
</html>

Regards guys and many thanks to the guy who will help me! Very Happy

2 Re: Tables codes for the body on Tue Aug 31, 2010 10:54 pm

ankillien

avatar
Administrator
Administrator
Hello!

I don't know what what exactly you are looking for, but may be this table code would help...

Code:
<table width="100%" border="1" cellpadding="5" cellspacing="5">
<tr>
<td colspan="3" align="center">Header</td>
</tr>
<tr>
<td width="20%">Left</td>
<td width="60%">Center</td>
<td width="20%">Right</td>
</tr>
<tr>
<td colspan="3" align="center">Footer</td>
</tr>
</table>

3 Re: Tables codes for the body on Tue Aug 31, 2010 10:57 pm

Guest


Guest
no thats not what i want.
If you check the image,you will see that these tables look like "fm widgets".So,what i ask for,is,can you make me some tables that look like fm widgets and styled and decorated like the image above?

4 Re: Tables codes for the body on Tue Aug 31, 2010 11:07 pm

ankillien

avatar
Administrator
Administrator
The image on the top-left corner of a box?
That can be done with a div...

Code:
<div style="background:#333 url('IMAGE URL HERE') top left no-repeat; border:1px solid #000; padding:5px; color:#FFF; width:250px;">
content here
</div>

5 Re: Tables codes for the body on Tue Aug 31, 2010 11:10 pm

Guest


Guest
well,i am not talking about that.Do you see how these "widgets or tables" are structured?They have that grey colored contect and a black border.I want to make this one but with a placement like the aws.gr site.2 side tables,1 main and one at the footer!

EDIT:Algiht,so i decided to design it myself.Take a loook at the tables i have designed to the main body.Thats what i want you to code me!With the black border!

http://i37.servimg.com/u/f37/14/37/15/04/image010.jpg

please guys!i really need it!

6 Re: Tables codes for the body on Wed Sep 01, 2010 2:31 am

Emilio

avatar
Registered Member
Registered Member
Nice drawings skillz , isn't that the background of ego?

http://www.graphilicious.forumotion.Com

7 Re: Tables codes for the body on Wed Sep 01, 2010 2:42 am

Guest


Guest
Thanks,nope its the explosion background i want Razz

8 Re: Tables codes for the body on Wed Sep 01, 2010 9:43 am

ankillien

avatar
Administrator
Administrator
Do you only want the table structure coded or you want it completely done with CSS and images?

9 Re: Tables codes for the body on Wed Sep 01, 2010 3:07 pm

Guest


Guest
i want tables but it would be better if you add a grey-white gradient image as background to all of them like this one http://i50.tinypic.com/wcoaqd.png as background image edit:or that http://www.aws.gr/imgs/a8.gif

i want the contect to be white-gray not black

10 Re: Tables codes for the body on Wed Sep 01, 2010 9:14 pm

ankillien

avatar
Administrator
Administrator
Here is a new code...

Code:
<style type="text/css">
td {
padding : 20px;
border : 1px solid #333;
border-collapse : collapse;
background : url(jjj.png) repeat-x bottom;
}
</style>

<table width="100%" border="1">
<tr>
<td colspan="3" align="center">Header</td>
</tr>
<tr>
<td width="20%">Left</td>
<td width="60%">Center</td>
<td width="20%">Right</td>
</tr>
<tr>
<td colspan="3" align="center">Footer</td>
</tr>
</table>

Hope its fine. Sorry, if I still didn't understand what exactly you want.

11 Re: Tables codes for the body on Thu Sep 02, 2010 1:26 am

Guest


Guest
nope thats not what i want as well.Anyway,thanks for any help,lock this.I will find onother solution.

12 Re: Tables codes for the body on Thu Sep 02, 2010 8:43 am

ankillien

avatar
Administrator
Administrator
Solved | Locked

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum