SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Layout using html5 and css3 for jpeg

    Hi,

    Could anyone please tell me where to refer and how to create a html5 and css3 coding for it i mean a short description of tags to be used will be great helpful for me thank you.
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    There's not a "short description" for that, I'm afraid. What code you have so far? Do you know HTML/CSS at all? What's your starting point?

    If you don't know HTML/CSS at all, you are basically asking forum member to teach you web design. It would be better to get a book and learn the basics first. Of course, there are sites that lay out all the elements of HTML5 and CSS3, but are you sure you need them? (They aren't supported properly in a lot of browsers yet anyway.) You can do that layout perfectly well with current HTML 4.01 and CSS2 (perhaps with a few CSS3 rounded corners as an easy option for the rounded corners in the design).

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello can you please give me a rough idea of this layout like what are the tags used and one more doubt is i am planning to create seperatly the content sectio using html4 and css2 and then merge with html5 and css3 using there tags is this logic rite presently i am trying but if you could tell me how to deal with section it would be great help.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    presently i am trying ...
    That's great! Show us what you have so far so we can advise on the next step.

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    HTML5 is nothing like HTML 4.01 so you cannot really convert the two they are trying to redefine page layout and document structure. So unless there is something seriously important you have to experiment with in HTML5 you won't gain any benefit whatsoever over a normative language. Like the Admin Ralph said a code sample might help so we can see if you are using the correct FORM elements, etc.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    HTML5 is nothing like HTML 4.01 so you cannot really convert the two they are trying to redefine page layout and document structure. So unless there is something seriously important you have to experiment with in HTML5 you won't gain any benefit whatsoever over a normative language. Like the Admin Ralph said a code sample might help so we can see if you are using the correct FORM elements, etc.
    dude just could you mail me similar problem coding relevent to jpeg i tryed using grid but it does not seem working tough any link would be very helpful.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    HTML5 is nothing like HTML 4.01 so you cannot really convert the two they are trying to redefine page layout and document structure. So unless there is something seriously important you have to experiment with in HTML5 you won't gain any benefit whatsoever over a normative language. Like the Admin Ralph said a code sample might help so we can see if you are using the correct FORM elements, etc.
    once if you help me in tackling the problem in xhtml i can code it to html 5 then just a procedure how to handle a problem is enough my mind is just blank even after goin basic's of html just how should i deal with this problem using xhtml will help me a lot i tried grid 960 but failed in it

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,444
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    dude just could you mail me similar problem coding relevent to jpeg
    No, sorry, that's not going to happen. The whole point of posting questions and replies in a forum like this is that it can benefit not only the person who first asked the question, but anybody else who comes along with a similar problem. That doesn't work if you start asking for e-mails or PMs. Please keep the discussion here in the open.

    Quote Originally Posted by bhatpajju13 View Post
    i tryed using grid but it does not seem working tough any link would be very helpful.
    You're still not giving us very much to go on. What code did you try and in what way does it not work? If you can provide a link to the site under development, that would be the easiest way for us to see what you have so far and how to improve on it. If you can't do that, then the next best thing is to post the full HTML and CSS that you've used, so we can see where any problems lie.

    Don't serve your porridge and then go out for a walk.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    i tried grid 960 but failed in it
    Those things just make life harder, I think. If you know HTML basics, just code the page yourself. Start with the basic wrapper—easy. Then maybe the header, if you have one. Then add in the content area, with a div floated left, and another floated right for the sidebar. If you can't at least get the basic layout started, our suggestions probably won't be much help. It sounds like you'd be better off hiring someone, to be honest.

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by ralph.m View Post
    Those things just make life harder, I think. If you know HTML basics, just code the page yourself. Start with the basic wrapper—easy. Then maybe the header, if you have one. Then add in the content area, with a div floated left, and another floated right for the sidebar. If you can't at least get the basic layout started, our suggestions probably won't be much help. It sounds like you'd be better off hiring someone, to be honest.
    rose infomedia.html

    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    
    <!------------ content --------------->
    
     <section id="content"><div class="ic">More Website Templates @ TemplateMonster.com. December10, 2011!</div>
                <div class="main">
                    <div class="container_12">
                        <div class="wrapper">
                            <article class="grid_8">
                            	<h3>Welcome! Why Choose Us?</h3>
                                <em class="text-1 margin-bot">Consulting is one of <a class="link" target="_blank" href="http://blog.templatemonster.com/free-website-templates/">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution. It is also XHTML &amp; CSS valid.</em>
                                <div class="wrapper p4">
                                	<article class="grid_4 alpha">
                                    	<div class="wrapper p1">
                                        	<figure class="img-indent2"><img src="images/page1-img1.png" alt="" /></figure>
                                            <div class="extra-wrap">
                                            	<div class="indent-top">
                                                	<h4>E-Buiseness Solutions </h4>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="prev-indent-bot">This <a class="color-2" href="http://blog.templatemonster.com/2011/12/10/free-website-template-jquery-slider-consulting-business/" target="_blank" rel="nofollow">Consulting Template</a> goes with two<br> packages – with PSD source files and<br> without them.</p>
                                        <a class="link-1" href="#">Know More</a>
                                    </article>
                                    <article class="grid_4 omega">
                                    	<div class="wrapper p1">
                                        	<figure class="img-indent2"><img src="images/page1-img2.png" alt="" /></figure>
                                            <div class="extra-wrap">
                                            	<div class="indent-top">
                                                	<h4>Development<em>Strategies</em></h4>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="prev-indent-bot">PSD source files of this Consulting Template<br> are available for free for the registered<br> members of TemplateMonster.com.</p>
                                        <a class="link-1" href="#">Know More</a>
                                    </article>
                                </div>
                                <div class="wrapper">
                                	<article class="grid_4 alpha">
                                    	<div class="wrapper p1">
                                        	<figure class="img-indent2"><img src="images/page1-img3.png" alt="" /></figure>
                                            <div class="extra-wrap">
                                            	<div class="indent-top">
                                                	<h4>Planning<em>Need Help?</em></h4>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="prev-indent-bot">The basic package of this Consulting<br> Template (without PSD source) is available<br> for anyone without registration.</p>
                                        <a class="link-1" href="#">Know More</a>
                                    </article>
                                    <article class="grid_4 omega">
                                    	<div class="wrapper p1">
                                        	<figure class="img-indent2"><img src="images/page1-img4.png" alt="" /></figure>
                                            <div class="extra-wrap">
                                            	<div class="indent-top">
                                                	<h4>INTEGRATION<em>Exploit your ideas</em></h4>
                                                </div>
                                            </div>
                                        </div>
                                        <p class="prev-indent-bot">This template has several pages: <a class="color-2" href="index.html">Home</a>,<br>  <a class="color-2" href="company.html">Company</a>, <a class="color-2" href="services.html">Services</a>, <a class="color-2" href="projects.html">Projects</a>, <a class="color-2" href="contact.html">Contacts</a> (note<br> that contact us form – doesn’t work).</p>
                                        <a class="link-1" href="#">Know More</a>
                                    </article>
                                </div>
                            </article>
                            <article class="grid_4">
                            	<h3>Testimonials</h3>
                                <div class="wrapper p3">
                                	<figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img5.jpg" alt="" /></a></figure>
                                    <div class="extra-wrap">
                                    	<span class="text-2">Director</span>
                                        <h4 class="p2">Mary Ryan</h4>
                                        <p class="prev-indent-bot">Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...</p>
                                        <a class="link-1" href="#">Read More</a>
                                    </div>
                                </div>
                                <div class="wrapper p3">
                                	<figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img6.jpg" alt="" /></a></figure>
                                    <div class="extra-wrap">
                                    	<span class="text-2">Senior assistant</span>
                                        <h4 class="p1">Bill Joel</h4>
                                        <p class="prev-indent-bot">Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...</p>
                                        <a class="link-1" href="#">Read More</a>
                                    </div>
                                </div>
                                <div class="wrapper">
                                	<figure class="img-indent"><a href="#"><img class="img-border" src="images/page1-img7.jpg" alt="" /></a></figure>
                                    <div class="extra-wrap">
                                    	<span class="text-2">Junior researcher</span>
                                        <h4 class="prev-indent-bot">Michael Anderson</h4>
                                        <p class="prev-indent-bot">Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...</p>
                                        <a class="link-1" href="#">Read More</a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
                <div class="block"></div>
            </section>
        </div>
    style.css

    Code CSS:
    /* Getting the new tags to behave */
    article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
    mark, rp, rt, ruby, summary, time {display:inline}
     
    /* Global properties ======================================================== */
    html {width:100%}
     
    body {font-family:Arial, Helvetica, sans-serif; font-size:100%; color:#333; min-width:960px; background:#f1f1f1}
    .ic {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
    .main {
    	width:960px; 	
    	padding:0;
    	margin:0 auto;
    	font-size:0.8125em;
    	line-height:1.3846em;
    }
     
    a {color:black; outline:none}
    a:hover {text-decoration:none}
     
     
    .wrapper {width:100%; overflow:hidden; position:relative}
    .extra-wrap {overflow:hidden}
     
    p {margin-bottom:18px}
    .p1 {margin-bottom:8px}
    .p2 {margin-bottom:15px}
    .p3 {margin-bottom:30px}
    .p4 {margin-bottom:40px}
    .p5 {margin-bottom:50px}
     
    .reg {text-transform:uppercase}
     
    .fleft {float:left}
    .fright {float:right}
     
    .alignright {text-align:right}
    .aligncenter {text-align:center}
     
     
    .color-1 {color:#fff}
    .color-2 {color:#333}
    .color-3 {color:#39b9d6}
     
    .img-border {border:1px solid #fff}
     
    /*********************************boxes**********************************/
    .indent {padding:20px}
    .indent-top {padding-top:24px}
    .indent-left {padding-left:2px}
    .indent-left2 {padding-left:40px}
    .indent-left3 {padding-left:20px}
    .indent-left4 {padding-left:10px}
    .indent-right {padding-right:150px}
     
    .indent-bot {margin-bottom:20px}
    .indent-bot2 {margin-bottom:28px}
     
    .prev-indent-bot {margin-bottom:10px}
    .img-indent-bot {margin-bottom:25px}
    .margin-bot {margin-bottom:35px}
     
    .img-indent {float:left; margin:0 20px 0px 0}	
    .img-indent2 {float:left; margin:0 15px 0px 0}	
    .img-indent3 {float:left; margin:0 6px 0px 0}	
     
    .buttons a:hover {cursor:pointer}
     
    .menu li a,
    .list-1 li a,
    .list-2 li a,
    .link,
    .button,
    h1 a {text-decoration:none}	
     
     
     
    /*********************************content*************************************/
    #content {
    	width:100%; 
    	border-top:1px solid #fff;
    	background:url(../images/content-tail.gif) center top repeat-x #f1f1f1;
    	padding:0;
    	position:relative;
    	z-index:1;
    }
    	#page1 #content {border-top:none; background:grey; padding:43px 0 60px}
     
    .content-bg {
    	width:100%;
    	padding:24px 0 49px;
    	background:url(../images/content-bg.jpg) center top no-repeat;
    }
     
    h3 {
    	font-size:26px; 
    	line-height:2em; 
    	color:#333;
    	margin-bottom:3px;
    }
    h4 {
    	font-size:17px; 
    	line-height:1.2em; 
    	color:#39b9d6;
    	text-transform:uppercase;
    }
     
    	h4 strong {
    		display:block;
    		margin-top:-3px;
    	}
     
     
    .text-1 {
    	display:block;
    	font-size:18px;
    	line-height:24px;
    	color:#999;
    }
    .text-2 {
    	display:block;
    	color:#929292;
    }
     
    .link-1 {
    	display:inline-block; 
    	padding-right:15px; 
     
    }
     
    dl span {float:left; width:88px}

    grid.css

    Code CSS:
    /*
    	Variable Grid System.
    	Learn more ~ [url]http://www.spry-soft.com/grids/[/url]
    	Based on 960 Grid System - [url]http://960.gs/[/url]
     
    	Licensed under GPL and MIT.
    */
     
     
    /* Containers
    ----------------------------------------------------------------------------------------------------*/
    .container_12 {
    	margin-left: auto;
    	margin-right: auto;
    	width: 960px;
    }
     
    /* Grid >> Global
    ----------------------------------------------------------------------------------------------------*/
     
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 {
    	display:inline;
    	float: left;
    	position: relative;
    	margin-left: 10px;
    	margin-right: 10px;
    }
     
    /* Grid >> Children (Alpha ~ First, Omega ~ Last)
    ----------------------------------------------------------------------------------------------------*/
     
    .alpha {
    	margin-left: 0;
     
    }
     
    .omega {
    	margin-right: 0;
     
    }
     
    /* Grid >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/
     
    .container_12 .grid_1 {
    	width:60px;
    }
     
    .container_12 .grid_2 {
    	width:140px;
    }
     
    .container_12 .grid_3 {
    	width:220px;
    }
     
    .container_12 .grid_4 {
    	width:300px;
    }
     
    .container_12 .grid_5 {
    	width:380px;
    }
     
    .container_12 .grid_6 {
    	width:460px;
    }
     
    .container_12 .grid_7 {
    	width:540px;
    }
     
    .container_12 .grid_8 {
    	width:620px;
    	}
     
    .container_12 .grid_9 {
    	width:700px;
     
    }
     
    .container_12 .grid_10 {
    	width:780px;
    }
     
    .container_12 .grid_11 {
    	width:860px;
    }
     
    .container_12 .grid_12 {
    	width:940px;
    }
     
     
     
    /* Prefix Extra Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/
     
    .container_12 .prefix_1 {
    	padding-left:80px;
    }
     
    .container_12 .prefix_2 {
    	padding-left:160px;
    }
     
    .container_12 .prefix_3 {
    	padding-left:240px;
    }
     
    .container_12 .prefix_4 {
    	padding-left:320px;
    }
     
    .container_12 .prefix_5 {
    	padding-left:400px;
    }
     
    .container_12 .prefix_6 {
    	padding-left:480px;
    }
     
    .container_12 .prefix_7 {
    	padding-left:560px;
    }
     
    .container_12 .prefix_8 {
    	padding-left:640px;
    }
     
    .container_12 .prefix_9 {
    	padding-left:720px;
    }
     
    .container_12 .prefix_10 {
    	padding-left:800px;
    }
     
    .container_12 .prefix_11 {
    	padding-left:880px;
    }
     
     
     
    /* Suffix Extra Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/
     
    .container_12 .suffix_1 {
    	padding-right:80px;
    }
     
    .container_12 .suffix_2 {
    	padding-right:160px;
    }
     
    .container_12 .suffix_3 {
    	padding-right:240px;
    }
     
    .container_12 .suffix_4 {
    	padding-right:320px;
    }
     
    .container_12 .suffix_5 {
    	padding-right:400px;
    }
     
    .container_12 .suffix_6 {
    	padding-right:480px;
    }
     
    .container_12 .suffix_7 {
    	padding-right:560px;
    }
     
    .container_12 .suffix_8 {
    	padding-right:640px;
    }
     
    .container_12 .suffix_9 {
    	padding-right:720px;
    }
     
    .container_12 .suffix_10 {
    	padding-right:800px;
    }
     
    .container_12 .suffix_11 {
    	padding-right:880px;
    }
     
     
     
    /* Push Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/
     
    .container_12 .push_1 {
    	left:80px;
    }
     
    .container_12 .push_2 {
    	left:160px;
    }
     
    .container_12 .push_3 {
    	left:240px;
    }
     
    .container_12 .push_4 {
    	left:320px;
    }
     
    .container_12 .push_5 {
    	left:400px;
    }
     
    .container_12 .push_6 {
    	left:480px;
    }
     
    .container_12 .push_7 {
    	left:560px;
    }
     
    .container_12 .push_8 {
    	left:640px;
    }
     
    .container_12 .push_9 {
    	left:720px;
    }
     
    .container_12 .push_10 {
    	left:800px;
    }
     
    .container_12 .push_11 {
    	left:880px;
    }
     
     
     
    /* Pull Space >> 12 Columns
    ----------------------------------------------------------------------------------------------------*/
     
    .container_12 .pull_1 {
    	left:-80px;
    }
     
    .container_12 .pull_2 {
    	left:-160px;
    }
     
    .container_12 .pull_3 {
    	left:-240px;
    }
     
    .container_12 .pull_4 {
    	left:-320px;
    }
     
    .container_12 .pull_5 {
    	left:-400px;
    }
     
    .container_12 .pull_6 {
    	left:-480px;
    }
     
    .container_12 .pull_7 {
    	left:-560px;
    }
     
    .container_12 .pull_8 {
    	left:-640px;
    }
     
    .container_12 .pull_9 {
    	left:-720px;
    }
     
    .container_12 .pull_10 {
    	left:-800px;
    }
     
    .container_12 .pull_11 {
    	left:-880px;
    }
     
     
     
     
    /* Clear Floated Elements
    ----------------------------------------------------------------------------------------------------*/
     
    /* [url]http://sonspring.com/journal/clearing-floats[/url] */
     
    .clear {
    	clear: both;
    	display: block;
    	overflow: hidden;
    	visibility: hidden;
    	width: 0;
    	height: 0;
    }
     
    /* [url]http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack[/url] */
     
    .clearfix:after {
    	clear: both;
    	content: ' ';
    	display: block;
    	font-size: 0;
    	line-height: 0;
    	visibility: hidden;
    	width: 0;
    	height: 0;
    }
     
    .clearfix {
    	display: inline-block;
    }
     
    * html .clearfix {
    	height: 1%;
    }
     
    .clearfix {
    	display: block;
    }

    this is the code i fetched from template i want same to be implemented to my to jpeg is it possible i am on my way off coding it any help would be greater.
    Last edited by TechnoBear; Sep 27, 2012 at 08:02. Reason: Changing CSS highlight tags

  11. #11
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,444
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    OK, that's the template you downloaded and it looks to be a pretty similar layout to the one you're trying to achieve. How have you attempted to modify it? What specific problems do you have? As ralph.m said, it's probably easier to code your own page from scratch, but if you really want to adapt this template, that's up to you. We're more than happy to help you sort out your problems with your code, but you do need to show us what you've done so far, so that we can work from there.
    Don't serve your porridge and then go out for a walk.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face

    Quote Originally Posted by TechnoBear View Post
    OK, that's the template you downloaded and it looks to be a pretty similar layout to the one you're trying to achieve. How have you attempted to modify it? What specific problems do you have? As ralph.m said, it's probably easier to code your own page from scratch, but if you really want to adapt this template, that's up to you. We're more than happy to help you sort out your problems with your code, but you do need to show us what you've done so far, so that we can work from there.

    i tried to give background grid alpha and omega but nothing seems to work presently am trying in html4 onside but if you help me it would be great once i get through in this field i think it will be good to solve myself nothing seems to work with this code so i decded to solve using my own method from scratch but it would be very helpful if you help me in solving this problem and even i can help others beacuse i will come to know a grid system which would be very helpful for me.

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Please don't use adjacent hyphens within the HTML comment delimiters:

    It can do strange things to browser rendering; so don't use any extra -- within any normal standard <!-- Comment -->


    Since asked of me to look at that image regarding markup; there is a main heading, paragraph then four sub heading(s); four unordered lists, several hyperlinks; a heading and form (including form controls and labels). Then another heading and two block quotations that pretty much covers the majority of markup you need if you chose HTML 4.01. I don't work with grid systems or non normative markup. But that's probably what I would have loosely considered doing with the markup semantics only (not considering extra CSS styling wrappers, etc.).

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Please don't use adjacent hyphens within the HTML comment delimiters:

    It can do strange things to browser rendering; so don't use any extra -- within any normal standard <!-- Comment -->
    hello admin so far i have come to this point now could please help me in providng little detail how to deal with those boxes and contact form section and mainly a single line over there please. :O
    Attached Images Attached Images
    Attached Files Attached Files

  15. #15
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I am not the Admin; the 'temporary' SPF Admin is: Ralph the Mighty @ralph.m ; so perhaps if you ask him nicely he'll help you with the CSS layout?

    Your latest markup example is abusing TABLE elements for layout, which is not at all very good semantically since there isn't any data table to be found on that image. Neither can you have those right angle brackets: ">>" within markup it wouldn't validate: http://validator.w3.org/

    Those listed items are more likely to be an UL rather than a paragraph:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <style type="text/css">
        <!--
        ul {
          list-style-type: none;
          padding: 0;
        }
        ul li:before {
          content: ">> ";
        }
        -->
        </style>
        <title>
          Example
        </title>
      </head>
      <body>
        <div>
          <h3>
            E Business Solutions
          </h3>
          <ul>
            <li>foo
            </li>
            <li>bar
            </li>
          </ul>
          <p>
            <a href="#">More..</a>
          </p>
        </div>
      </body>
    </html>
    The contact form should have the relevant FORM controls and labels so it functions as a form; it isn't a collection of P (paragraphs) it should actually function. Loosely it should contain; FORM, LEGEND, FIELDSET, LABEL and INPUT elements. Obviously below is an extremely crude example.

    HTML Code:
        <div>
          <h3>
            Contact US
          </h3>
          <form action="form-to-email.php" method="post">
            <fieldset>
              <legend>Enter your Contact Details:</legend>
              <label for="txtname">NAME:</label> <input type="text"
              id="txtname" /><br />
              <label for="txtemail">EMAIL:</label> <input type="text"
              id="txtemail" /><br />
              <label for="txtComment">COMMENT:</label> 
              <textarea id="txtComment" rows="10" cols="80"></textarea><br />
              <input type="submit" id="cmdSubmit" value="Submit" />
              <input type="reset" id="cmdReset" value=
              "Reset" /><br />
            </fieldset>
          </form>
        </div>
    The "Recent Comments" are in reality BLOCKQUOTE and should be treated as such, for example:

    HTML Code:
        <div>
          <h3>
            RECENT COMMENTS
          </h3>
          <blockquote>
            <p>
              "I killed mothers with their babies. I've killed great
              philosophers, proud young warriors, and
              revolutionaries. I've killed the evil, the good, the
              intelligent, the weak, and the beautiful. I have done
              this in the service of His Divine Shadow and his
              predecessors, and I have never once shown any mercy."
            </p>
            <p>
              - [Kai, Last of the Brunnen-G]
            </p>
          </blockquote>
        </div>
    That should give you a very loose idea of how you would approach the markup semantics obviously the examples I have given aren't exactly what you are after. Though it will give you a starting point. Without the proper markup usage there isn't much point in skipping to the CSS positioning, you should get the markup sorted first so you have a solid foundation to apply the CSS this is how a true master would work.

  16. #16
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,444
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    As xhtmlcoder says, using a table for layout is not the way to go about things, and hasn't been for many years now.

    ralph.m gave you the basics for your layout in post #9. Start with something like this:
    Code HTML4Strict:
    <div id="wrapper">
    <div id="main-content">
    <h1>Welcome! Why Choose us?</h1>
        <p>At RoseInfomedia  we convert your concept into a brilliant website. When companies world-wide need a unique and original website they turn to us.  Whether you want to create a lasting impression for your brand, or increase leads and sales, our team has the creativity, technology, and marketing.</p>
    <div class="category"><!-- E-business solutions content goes here --></div>
    <div class="category"><!-- Technology content goes here --></div>
    <div class="category"><!-- Products content goes here --></div>
    <div class="category"><!-- IT Support Solutions content goes here --></div>
    </div>
    <div id="sidebar">Contact Us form, etc.</div>
    </div>

    Code CSS:
    #main-content {width: 60%; float: left;}
     
    #sidebar {width: 30%; float: right;	}
     
    .category {width: 48%; float: left;}
    Don't serve your porridge and then go out for a walk.

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face layout

    hi following jpeg is the layout i require

    rose infomedia contain top and header part coded in html5 and css3

    rose content contains code for content section in html4 and css

    please can anyone could help me in solving the layout within monday it would be great help.
    Attached Images Attached Images
    Attached Files Attached Files

  18. #18
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,444
    Mentioned
    274 Post(s)
    Tagged
    5 Thread(s)
    You can use the same kind of layout outline I provided - it's equally valid in HTML4 and HTML5. There seems to me to be no point in starting a layout in HTML5, which is so recent that the specs are still incomplete, and then using a table layout in the middle of it that's ten years out of date.
    Don't serve your porridge and then go out for a walk.

  19. #19
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    HTML5 probably isn't even going to be a full recommendation and supported in all mainstream browsers until around 2020, which be years away... by which time they'll be revisions; 5.1, 5.2, etc. and several other major changes.

    Currently no browser fully supports it; the Search Engines don't utilise it; most Assistive Technologies mainly ignore it, and legacy browsers cannot cope with it. Whoever wrote the header was mostly wasting their time with non normative markup (they might as well have applied "divitis" instead) and JS polyfills that don't work if JavaScript is disabled.

    You cannot sensibly get enough control with abusing TABLE elements anyway for that design best you scrap the idea of using TABLE for layout it's not really viable. Neither can you get the CSS layout until the markup structure is in good order. The Bear more-or-less created the main content layout structure in post: #16.

  20. #20
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout

    hi could you help me in solving by tommorrow

    first is jpeg of layout

    second one top and header section

    content and footer section is in last one which is still under coding.
    Attached Images Attached Images
    Attached Files Attached Files

  21. #21
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    So you work for a professional web design company and you can't do this basic work?

    Are you having a laugh?
    You want us to code your entire layout by Monday so you don't get your butt kicked by your boss for not being able to do the work you have been employed (and I presume PAID) to do?

    Forgive my bluntness but this is a little outrageous.
    We are not here to do your work, we are here to help people LEARN.

    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  22. #22
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    So you work for a professional web design company and you can't do this basic work?

    Are you having a laugh?
    You want us to code your entire layout by Monday so you don't get your butt kicked by your boss for not being able to do the work you have been employed (and I presume PAID) to do?

    Forgive my bluntness but this is a little outrageous.
    We are not here to do your work, we are here to help people LEARN.

    just could you help me in solving i asked but you seem to talk little bit more than others.just please say no rather than talking other things.

  23. #23
    SitePoint Enthusiast
    Join Date
    May 2012
    Location
    Karkala, India
    Posts
    79
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you had given me few lines how to go further than talking such nonsense would have been great for me to go ahead

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bhatpajju13 View Post
    if you had given me few lines how to go further ...
    The problem is, you need more than a "few lines" of help. You need guidance on the whole job from beginning to end. We aren't trying to be mean to you here, truly. You are simply asking for too much in a forum. We can't do the work for you, I'm afraid. We sympathise with your situation, but it's something you and your boss need to face honestly.

    I'll close this thread now, because it is not going anywhere useful. Best of luck, though.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •