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

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

WebArtz - The Web Design Forum » Web Designing & Coding » Web Design Talk » Layout #4

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

1Layout #4 Empty Layout #4 Fri Jan 22, 2010 6:53 pm

Veljko

Veljko
Registered Member
Registered Member
Layout #4 Tuj-layout

2Layout #4 Empty Re: Layout #4 Fri Jan 22, 2010 6:57 pm

Sanket

Sanket
Administrator
Administrator
Good job. But the radius of those boxes can be a little less.

http://www.webartzforum.com

3Layout #4 Empty Re: Layout #4 Fri Jan 22, 2010 7:42 pm

Fred100

Fred100
Registered Member
Registered Member
Wow nice work

Spoiler:

Spoiler Warning : If you are lady gaga fan don't open it

http://www.art-castle.biz/forum.htm

4Layout #4 Empty Re: Layout #4 Fri Jan 22, 2010 8:29 pm

ankillien

ankillien
Administrator
Administrator
Thats looks cool as always Veljko Very Happy

I suggest you to slich different images from the PSD instead of using the whole image as background.

5Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 1:51 am

Veljko

Veljko
Registered Member
Registered Member
Yes... I know how I will slice them, don't worry.

6Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 3:06 am

LH Justin

LH Justin
Registered Member
Registered Member
Fred100 wrote:Wow nice work

Spoiler:

Spoiler Warning : If you are lady gaga fan don't open it
Proof?

http://lhjgraphics.net/

7Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 3:37 am

Veljko

Veljko
Registered Member
Registered Member
She is not male, see her in her clothes, there's no spot in her panties... -.-'

8Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 4:03 am

Veljko

Veljko
Registered Member
Registered Member
It's coded... i have some troubles with centering...

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>
<title>Lady Gaga Balkan Fans</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
<!--
* {
    margin: 0px;
    padding: 0px;
}

body {

color: #717070;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #ede7e7;
background-image: url('http://www4.slikomat.com/09/0122/5j8-1.png');
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;

}

a:link {
   color: #e9c4aa;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #e9c4aa;
}
a:hover {
   text-decoration: underline;
   color: #e9c4aa;
}
a:active {
   text-decoration: none;
   color: #e9c4aa;
}
h2 {
   background-image: url(images/divider.png);
   background-repeat: repeat-x;
   background-position: bottom;
   padding-bottom: 5px;
   font-weight: bold;
   text-transform: capitalize;
   color: #0087c7;
}

h3 {
   color: #666666;
   text-transform: capitalize;
   font-size: 20px;
}
#container {

margin: auto;
width: 850px;

}

#featured {

width: 827px;
float: center;
height: 379px;
margin-top: 8px;

}


.featured-image {
float: center;
height: 379px;
width: 827px;

}

#navigation {
float: left;
height: 63px;
width: 850px;
}

#navigation li {
display: block;
list-style-type: none;
float: left;
background-image: url('');
background-repeat: no-repeat;
background-position: left;
margin-top: -20px;
}
 
#navigation li a {
color: #d29797;
font-weight: bold;
width: 135px;
height: 42px;
text-align: center;
text-transform: uppercase;
font-size: 12px;
padding-top: 26px;
float: left;
text-decoration: none;
margin-left: 2px;
}
   
#navigation li a:hover {
background-image: url('');
background-repeat: repeat-x;
color: #0087c7;
margin-left: 2px;

}
#right-content {
float: right;
width: 511px;
margin-top: 0px;
}
 
.right-top {
float: left;
height: 26px;
width: 511px;
background-image: url('http://www4.slikomat.com/09/0122/fwu-4.png');
background-repeat: no-repeat;
}
 
.right-middle {
background-image: url('http://www4.slikomat.com/09/0122/lv2-71.png');
background-repeat: repeat-y;
float: left;
width: 511px;
padding-right: 20px;
padding-left: 20px;
}
 
.right-middle h3 {
 margin-bottom: 10px;
}
   
.right-bottom {
 float: left;
height: 24px;
width: 511px;
background-image: url('http://www4.slikomat.com/09/0122/h9y-71.png');
background-repeat: no-repeat;
}

#left-content {
float: left;
width: 337px;
margin-top: 0px;
}
   
.left-top {
background-image: url('http://www4.slikomat.com/09/0122/8tw-Untitl.gif');
background-repeat: no-repeat;
float: left;
height: 31px;
width: 339px;
}
 
.left-middle {
background-image: url('http://www4.slikomat.com/09/0122/cw8-Untitl.gif');
background-repeat: repeat-y;
float: left;
width: 339px;
padding-right: 20px;
padding-left: 20px;
}
   
.left-bottom {
 background-image: url('http://www4.slikomat.com/09/0122/t53-Untitl.gif');
background-repeat: no-repeat;
float: left;
height: 26px;
width: 337px;
margin-bottom: 21px;
}


#footer {
background-image: url('http://www4.slikomat.com/09/0122/bp-71.png');
background-repeat: no-repeat;
float: left;
height: 68px;
width: 850px;
margin-top: 20px;
}
 
#footer p {
 color: #e75d5d;
text-align: center;
padding-top: 25px;
}


--!>
</style>

</head>
<body>
<div id="featured">       <div class="featured-image">
<img src="http://www4.slikomat.com/09/0122/lwi-asda.png" alt="VELJKO DESIGNS" />
</div></div>

<div id="container">
<div id="navigation">   
<ul>
<li><a href="#">Početna</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Galerija</a></li>
<li><a href="#">Lady Gaga</a></li>
<li><a href="#">Lyrics</a></li>
<li><a href="#">Sajt</a></li>


</ul>
</div>

<div id="left-content">
 <div class="left-top">
</div>
 <div class="left-middle"><h3>Dobrodošlica</h3><br><p>Dobrodošli na LadyGagaBalkan.com - vaš najveći <br> izvor informacija o pop senzaciji. Pokušavamo da<br>  vam svakim danom donosimo vesti iz GaGa sveta. Nadamo se da će vam se sajt dopasti i da ćete <br> se družiti na forumu. Uživajte! </p>
</div>
<div class="left-bottom">
</div>
</div>
<div id="right-content">
    <div class="right-top">
</div>
 <div class="right-middle">
<h3>Vesti</h3>
<p>
<script type="text/javascript">
<!--
rssmikle_url="http://www.ladygagabalkan.com/feed/?f=3";
rssmikle_frame_width="470";
rssmikle_frame_height="800";
rssmikle_target="_blank";
rssmikle_font_size="12";
rssmikle_font_name="Arial";
rssmikle_border="off";
rssmikle_css_url="";
rssmikle_title="on";
rssmikle_title_bgcolor="#e7e5e5";
rssmikle_title_color="#FFFFFF";
rssmikle_title_bgimage="http://";
rssmikle_item_bgcolor="#e7e5e5";
rssmikle_item_bgimage="http://";
rssmikle_item_title_length="100";
rssmikle_item_title_color="#db8989";
rssmikle_item_border_bottom="on";
rssmikle_item_description="on";
rssmikle_item_description_length="500";
rssmikle_item_description_color="#000";
rssmikle_item_description_tag="off";
rssmikle_item_podcast="icon";
//-->
</script>
<script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script><div style="font-size:10px; text-align:right;">
</p>
</div>

</div>

    <div class="right-bottom">
</div>
</div>
<div id="footer">
<p>Copyright 2010 by Veljko Designs | All Rights Reserved</p>
</div>
 
</div>

Sorry for double posting, need to make this topic new so you can see.

9Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 1:05 pm

Fred100

Fred100
Registered Member
Registered Member
LH Justin wrote:
Fred100 wrote:Wow nice work

Spoiler:

Spoiler Warning : If you are lady gaga fan don't open it
Proof?
I Just heard it , everyone says that one Layout #4 Icon_tongue , & People don't ask a guy is he male or not do they? Layout #4 Icon_neutral
Veljko wrote:She is not male, see her in her clothes, there's no spot in her panties... -.-'
Who stares that part of a MALE guy? Razz

http://www.art-castle.biz/forum.htm

10Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 9:23 pm

ankillien

ankillien
Administrator
Administrator
Veljko wrote:It's coded... i have some troubles with centering...

It looks fine. The content is centered.

11Layout #4 Empty Re: Layout #4 Sat Jan 23, 2010 10:01 pm

Veljko

Veljko
Registered Member
Registered Member
I have troubles with template, it's complicated, when I add two left contents then the right one falls out of place... -.-'

12Layout #4 Empty Re: Layout #4 Mon Jan 25, 2010 9:54 pm

ankillien

ankillien
Administrator
Administrator
Veljko wrote:I have troubles with template, it's complicated, when I add two left contents then the right one falls out of place... -.-'

That look fine buddy.
I tried adding more than 1 content box on left and it works fine.
Are you using Firefox?

Sponsored content


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

WebArtz - The Web Design Forum » Web Designing & Coding » Web Design Talk » Layout #4

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