Jump to content
xisto Community

rvovk

Members
 View Profile  See their activity

  • Content Count

    381

  • Joined

  • Last visited

Posts posted by rvovk

  3. Posted · Report reply

    Today's tutorial is meant for spicing up graphical looks of textarea in our websites. Instead of plain squared edges we will gain rounded edges. Result of this tutorial will look like this:

     

    Posted Image

     

    So let begin with CSS file. First we will define body:

     

    body{ 	width:100%;  margin:0;   padding:0;   text-align:center; 	background:#FFFFFF;}

    We have choosen that our body background will be white (#FFFFFF). Cause we will be using rounded corners for our textarea with background color bright blue (#B4D5ED). Rounded corner's images are:

     

    Topleft Posted Image

    Topright Posted Image

    Bottomright Posted Image

    Bottomleft Posted Image

     

    We will embed then into our textarea, next pictures is showing us how it is done:

     

    Posted Image

     

    It is like pilling onion. In HTML. If we look at text which is defined with class TEXT which is relativly looking at the top, then we have class TOPLEFT, TOPRIGHT, BOTTOMRIGHT and BOTTOMLEFT which are in sequence from topleft clockwised to bottomright, at the bottom lies class TEXTAREA which is cover with other classes and being formatted that way.

     

    Posted Image

     

    So documents starts rendering with BODY and goes towards up to last class, which is TEXT and all classes (or ID) are closed with </div>. I see this as pyramidal structure.

     

    So HTML file looks like this:

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd;<html><head><link rel="shortcut icon" href="slike/favicon.ico" type="image/x-icon"><title>Rounded edges for textarea with CSS.</title><meta http-equiv="content-type" content="text/html;charset=windows-1250"><style type="text/css" media="all">@import "layout1.css";</style></head><body><div class="textarea"><div class="topleft"><div class="topright"><div class="bottomright"><div class="bottomleft"><p class="text">Things in the future have changed dramatically. I bought Canon A40 in year 2002 and took several interesting pictures with it. Later I bought Sony DSC S-75 cause I liked its macro potencial. But I sold it quickly cause it had lot of noise in images and awful white balance. Just before end of year 2003 I bought myself second hand Canon G3 which I am still using. Canon G3 is very good prosumer camera with pleasant results.</p></div><!--bottomleft--></div><!--bottomright--></div><!--topright--></div><!--topleft--></div><!--textarea--></body></html>

    Textarea is defined in CSS with next code. There is no padding (if there was any then your background would be corrupted). Background is set to #B4D5ED and width to 300px.

     

    .textarea{	margin:10px auto 0 auto;	padding:0;	width:300px;	background:#B4D5ED;}

    Div classes for rounded edges are name with TOPLEFT, TOPRIGHT, BOTTOMRIGHT, BOTTOMLEFT. They are almost same code, so I will explain only one.

     

    So here is code for all divclasses of rounded edges. As we saw at beggining we have background images that are named same as div classes. Margin and padding is set to 0, cause we don't wanna have corrupted background, url is defining relative path to your background image. Position is declared for class TOPLEFT with code: top left no-repeat. This defines topleft positon and no-repeat, cause we wanna for every image to be presented only once. Same goes for other div classes, only position is changes and name of image file.

     

    .topleft{	margin:0;	padding:0;	background:url(topleft.jpg) top left no-repeat;}		.topright{	margin:0;	padding:0;	background:url(topright.jpg) top right no-repeat;}		.bottomright{	margin:0;	padding:0;	background:url(bottomright.jpg) bottom right no-repeat;}		.bottomleft{	margin:0;	padding:0;	background:url(bottomleft.jpg) bottom left no-repeat;}

    Code for text is next. This rather formatting of text, important thing is that we used padding of 10px to have same space around text.

     

    p.text{  font:12px/16px verdana, arial, serif;	color: #000000;	margin:0;	padding:10px;	text-align:justify;	}

    Working example is available: here.

    CSS file is available: here.

     

    Any suggestions are welcome.

    Best regards.

  7. Posted · Edited by cmatcmextra (see edit history) · Report reply

    2. DON'T change position. height or width of any element of layout. Try to apply 2D (rasterized graphics) to elements. Use of color scheme that was used in original template MUST NOT be changed.
    3. Layers LEFT BAR and LEFT HEADING needs some workout, be imaginitive here. Try to do film strip out of it. Example of film strip: here. Work on header too. But remember: NO COLOR CHANGING, NOR POSITION, NOR SHAPE!


    Oke after some suggestions I have decided that this rules can be obeyed, but if you think you can make totaly new layout, then go ahead and try to be innovative :D

    I will be satisfied with new layout but it should be done very well.
    So Sprite give your best to me.

    So anyone thinking about new layout can make new layout, others can work on old one, so we will have wider choice of layouts at the end, if any :D

    Notice from cmatcmextra:
    Quote tags fixed

  9. Posted · Report reply

    I am having SMC Barricade g Wireless Router 2.4GHz 54 Mbps Wireless Cable/DSL as router/access point this days. It acts like LAN Adapter with 54MBps of speed. Default router's IP is 192.168.2.1 which is your getaway to your ISP. You can be using cable or wireless connection to Router. I used it computer on second floor and router on 1st floor and it did worked OK, but not OK on every place. But for same floor this solution is ideal.Standard 802.11b is for 11MB LAN and 802.11g is for 54MB LAN.

  10. Posted · Report reply

    Rules are following:

    1. Original template and picture of sunflower are available in links I gave.

    2. DON'T change position. height or width of any element of layout. Try to apply 2D (rasterized graphics) to elements. Use of color scheme that was used in original template MUST NOT be changed.

    3. Layers LEFT BAR and LEFT HEADING needs some workout, be imaginitive here. Try to do film strip out of it. Example of film strip: here. Work on header too. But remember: NO COLOR CHANGING, NOR POSITION, NOR SHAPE!

    4. DON'T tag finnished layout with your Copyright signs. Copyright will belong to me, since I am awarding winning contestors with hosting credits:

    1st place gets 160 hosting credits
    2nd place gets 100 hosting credits
    3rd place gets 70 hosting credits

    (Credits are divided if more members were in same project e.g. 2 members@template -->80 credits for each one for 1st place).

    5. Choosing of wining templates will be done by Rvovk, there will also be vote on Xisto, but final word is on me.

    6. Deadline for templates is Semptember 1st. Results will be declared on September 10th.

    7. All works are sent to email: robertv@najdi.si

    8. Sent templates must be in TIFF (uncompressed and unmreged) format, enclosed with list of member or members that worked on project and PM me here at Xisto that you have sent me work at my email.

    9. If any rules aren't followed then you template will not come to finals.

    10. I wish you all Godspeed.

    Robert



  19. Posted · Report reply

    The thing is that I am not good in graphics things, kinda at low level. So I need few people that are willing to take contest in making graphical layout for this site. For the time being I am only gathering information if anyone is willing participate in this contest. There is no need working on it. If there will not enough be enough participants then rules stay same:

    ---------------------------------

    1st gets 160 hosting credits
    2nd gets 100 hosting credits
    3rd gets 70 hosting credits

    ---------------------------------

    Color scheme of site stays the same, also layout. I want to see your new ideas to spice up this graphical layout that have been done by me, although there will be some changes to this layout, not major one, I will present this changes later on when whole thing will be started.

    ---------------------------------

    In hope of seeing interest for this contest.

    Best regards, Robert

  21. Posted · Report reply 

    Well, I beleive there's life after Death. Or more correctly my religion suppose me to beleive that. But however I beleive it, cause there must be something to be "paid" what we have done in our past life. Otherwise it will not be fair.Just my opinion tough

    It is sad that this can not be done while you are alive, here on Earth. It is just sad, what it is afterdeath nobody knows, even tho I am catholic I don't have prove that there is life after death, maybe my logic wins my belief in this situation. But I am not saying there isn't life after death, so anyway I am trying to be nice person anyway.

  22. Posted · Report reply

    Mayank, yes I know, it would be nice to have this site in English, cause it is really good. I am working on this site for one year or little more now. Even though I don't get payed for it I love working on this project. Website building is hobby for me :D On this site you have also MP3 section, this is about Brassband from Crnomelj, Slovenia, the nicest area in SLovenia were I lived for 5 years.Cmatcmextra, thanx for making my code even better. But I believe that people are still using Windows 98 and XP is worldwide, so I guess 800px width should be standard in future. You will never be able to make universal width for everyone, but 8oopx isn't bad at all, I like this width most on 1280*1024 monitors.

  23. Posted · Report reply

    I think this guy has serious problem, his girl gives him obvious signs that she doesn't like or love him. In my opinion in love there shouldn't be provocations like this. They should have talked aboout this problem at the moment it has started. But now it has been lasting too long and things are deep burried inside of him. If they can talk and get things stright out then there is a chance, but two years is long time and if they haven't talked by now, then there is possibility they will never. I would end relationship like this.

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept