Page 2 of 2 FirstFirst 12
Results 36 to 67 of 67

Thread: I Need Help In A Few Things Please

  1. #36
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Good catch tpoynton.

    Usually negative margins are applied to top and left. 0,0 is the top left of the window. Or top left of the containing element if positioning something absolutely.

    (I think I'm correct with that information. Slam me if I'm wrong. )
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  2. #37

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    thanks for the link, I will learn from it, but I've moved a image before, and it specifically does not want to move (do not know why)

    the numbers I gave him, it just to see it move, then I would give him the exact location I wanted it to be

    update: I can move it just up and down, not sideways
    Last edited by IanS; 7-30-15 at 02:48 AM.

  3. #38
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Now that I think about it a little the magnitude and exactness of your margin concerns me
    Code:
    margin-right:-713px
    Why not -714? or -712? or even -720?
    What happens when someone using a screen less than 713px wide (or maybe even much wider than that) accesses your page?

    Just my opinion here:
    Once you start using paddings and margins more than about 20-30px you need to find a different way of positioning because on small screens, or even windows sized somewhat small, that huge margin will break your entire design. For example, you could limit the size of the containing element using percentages then float the image right/left/whatever.

    Example code:
    HTML Code:
    <div id="displayContainer">
    <img src="myimage.png" alt="my image">
    [...other content...]
    </div>
    CSS:
    Code:
    #displayContainer {
    width: 75%;
    }
    
    #displayContainer img {
    float: right;
    }
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  4. #39

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    My design is based on the width of 960 pixels, it's okay, right? The "-713" pixels, it is only to see it move, according to this, I know how to move it to the position i need

  5. #40
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    960px works for a computer with a browser opened to at least 960px wide. Less than that and the user will get side-to-side scrollbars. Do you like scrolling side-to-side? I don't!

    What about a phone or a tablet? When I open your page on my iPhone margin-right: -713px (if it even works) will wreck your design because the screen isn't even that wide.

    Some of the above rhetoric depends a lot on how you have fixed that 960px width. Is it width:960px; or max-width:960px;? Even with the latter once the page/screen/window gets below 960px in width, a 713px margin (positive or negative) will destroy the design.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  6. #41

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    again, the "-713" pixels, it is only for me to see where it moves, because I really do not know how much I have to move it, for it to be the position that I wanted, so I let him first high numbers (plus, minus) and then decreases and then doing "fine-tuning" until I place it the way I wanted.
    The next stage - Adjust for match the different screens, i do not know how to do it, as I mentioned in the beginning I'm new to all the HTML and CSS, I first building design, and then i see how to do it..

  7. #42
    Custom User Title tpoynton's Avatar
    Join Date
    Sep 2004
    Location
    Mass
    Posts
    2,177
    Rep Power
    17
    Builder has been very generous...if you want people to want to help you, get a website and put the pages online so you can provide a link to the pages you are working on and people can see the code. Sometimes your internet provider will give you access to free webpages, although Comcast just pulled the plug on theirs it seems.

  8. #43

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Wait, I think there is some confusion created here, I did not complain to anyone, on the contrary, everyone who helped me until now I say thank you very much,the last post, I wrote the number "-713 pixels" As I said in the same statement,this number, it was just a test to see how far it moves from the position I need it to be, then I adjust it, if it "plus" or "minus", but in this particular case, something that was not clear to me - why I give him certain number and he refused to move.
    I finally decided that i need to start from scratch, and build it again, maybe I missed something.
    And again I say now, thanks to everyone who helped, I appreciate it very much.

  9. #44

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Well, I said I'll start from the beginning, then i really started from scratch and this time i made changes (that's what I tried to do from the beginning and it is wrong), I'm stuck at the footer, how it is constructed now - I know, it's not built well, i need it to be built like i build it, i searched on Google, i found things how to do it, but everything I tried did not work as it need it to be, can someone please give me a solution how to do it right?
    and of course, I don't forget to say thank you to everyone who helps, I appreciate it very much

  10. #45

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I forgot to add the code here:

    HTML Code:
    <!DOCTYPE html>
    <head>
    <title>פריהנד</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style_freehand.css" />
    </head>
    <body>
    	  <div id="wrap">
            <div id="header">
    		  <img src="images/logo.png"/> 
            </div>
        </div>
    	<div id="nav">
    	<div class="navline">
    	    <ul>
    		    <li id="contact"><a href="#">יצירת קשר</a></li>
    			<li id="about"><a href="#">אודות</a></li>
    	    </ul>
    	</div>		
        </div>
    	<div id="main">
    	<div class="primary">
    		<div id="paper">
    		    <img src="images/general2.png" />
    		    <ul>
    		        <li id="text_on_paper"></li>
    		    </ul>
    	    </div>	
    	</div>	
    	<div class="secndary">	
    	        <h2><a href="#">דף הבית<img src="images/home.png" alt="home"></h2></a>
    			<ul>
    			<h2>פלאש<img src="images/flash.png" alt="flash"></h2>
    			</ul>
    			<ul>
    			   <li class="side"><a href="#">כללי</a></li>
    			   <li class="side"><a href="#">משחקים</a></li>
    			   <li class="side"><a href="#">יום הולדת</a></li>
    			   <li class="side"><a href="#">תאריכים חשובים</a></li>
    			</ul>
    			<h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"></h2></a>
    			<h2><a href="#">אילוסטרייטור<img src="images/illustrator.png" alt="illustrator"></h2></a>
    			<ul>
    			<h2>פוטושופ<img src="images/photoshop.png" alt="photoshop"></h2>
    			</ul>
    			<ul>
    			   <li class="side"><a href="#">ריטוש תמונות</a></li>
    			   <li class="side"><a href="#">פוסטרים</a></li>
    			   <li class="side"><a href="#">כללי</a></li>
    			</ul>
    			<h2><a href="#">הדפסים<img src="images/t-shirts.png" alt="t-shirts"></h2></a>
    			<h2><a href="#">לוגואים<img src="images/logos.png" alt="logos"></h2></a>
    			<h2><a href="#">זיכרון ושימחה<img src="images/zicaron_ve_simha.png" alt="zicaron_ve_simha"></h2></a>
    			<ul>
    			<h2>דרימוויבר<img src="images/dreamweaver.png" alt="dreamweaver"></h2>
    			</ul>
    			<ul>
    			   <li class="side"><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    			   <li class="side"><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    			   <li class="side"><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    			   <li class="side"><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    			   <li class="side"><a href="#">אמ פי 3</a></li>
    			   <li class="side"><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    			   <li class="side"><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    			   <li class="side"><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    			   <li class="side"><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    			   <li class="side"><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    			</ul>
    			<ul>
    			<h2>פרוייקט<img src="images/project.png" alt="project"></h2>
    			</ul>
    			<ul>
    			<li class="side"><a href="#">בניית אתר</a></li>
    			<li class="side"><a href="#">עיצוב גרפי</a></li>
    			</ul>
    			<h2><a href="#">חתונה<img src="images/wedding.png" alt="wedding"></h2></a>
    			<h2><a href="#">כרטיסי ביקור<img src="images/business_card.png" alt="business_card"></h2></a>
    			<ul>
    			<h2>בר מצווה<img src="images/bar_mitzva.png" alt="bar_mitzva"></h2>
    			</ul>
    			<ul>
    			<li class="side"><a href="#">אלבום דיגיטלי</li>
    			<li class="side"><a href="#">הזמנות</li>
    			</ul>
    		</div>	
    		</div>		
    	<div id="footer1">
    	    <ul>
    	        <li class="footer_links"><a href="#">דף הבית</a></li>
    			<li class="footer_links2">פלאש</li>
    			<li class="footer_links"><a href="#">כללי</a></li>
    			<li class="footer_links"><a href="#">משחקים</a></li>
    			<li class="footer_links"><a href="#">יום הולדת</a></li>
    			<li class="footer_links"><a href="#">תאריכים חשובים</a></li>
    			<li class="footer_links"><a href="#">פריהנד</a></li>
    			<li class="footer_links"><a href="#">אילוסטרייטור</a></li>
    	    </ul>
        </div>	
    	<div id="footer2">
    	    <ul>
    		    <li class="footer_links2">פוטושופ<li>
    			<li class="footer_links"><a href="#">ריטוש תמונות</a></li>
    			<li class="footer_links"><a href="#">פוסטרים</a></li>
    			<li class="footer_links"><a href="#">כללי</a></li>
    			<li class="footer_links"><a href="#">הדפסים</a></li>
    			<li class="footer_links"><a href="#">לוגואים</a></li>
    			<li class="footer_links"><a href="#">זיכרון ושימחה</a></li>
    	    </ul>
        </div>		
        <div id="footer3">
    	    <ul>
    	        <li class="footer_links2">דרימוויבר</li>
    			<li class="footer_links"><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    			<li class="footer_links"><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    			<li class="footer_links"><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    			<li class="footer_links"><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    			<li class="footer_links"><a href="#">אמ פי 3</a></li>
    			<li class="footer_links"><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    			<li class="footer_links"><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    			<li class="footer_links"><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    			<li class="footer_links"><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    			<li class="footer_links"><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    	    </ul>
        </div>
    	<div id="footer4">
    	    <ul>
    			<li class="footer_links2">פרוייקט</li>
    			<li class="footer_links"><a href="#">בניית אתר</a></li>
    			<li class="footer_links"><a href="#">עיצוב גרפי</a></li>
    			<li class="footer_links"><a href="#">חתונה</a></li>
    			<li class="footer_links"><a href="#">כרטיסי ביקור</a></li>
    			<li class="footer_links2">בר מצווה</li>
    			<li class="footer_links"><a href="#">אלבום דיגיטלי</a></li>
    			<li class="footer_links"><a href="#">הזמנות</a></li>
    			<li class="footer_links"><a href="#">אודות</a></li>
    	    </ul>
        </div>
    	<div id="footer5">
    	    <ul>
    	        <li class="footer_links2">phone</li>
    			<li class="footer_links"><a href="#">mail</a></li>
    	    </ul>
        </div>	
    	<div id="footer6">
    	    <ul>
    	        <li class="footer_copy">עוצב ע"י לירן כושר 2015</li>
    	    </ul>
        </div>	
       </div>
    </body>
    </html>
    Code:
    /* reset */
    
    html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, address, code, img, 
    small, strong, d1, dd, dt, ol, ul, li,
    fieldset, form, label {
    	  margin: 0;
    	  padding: 0;
    	  border: 0;
    	  outline: 0;
    	  font-size: 100%;
    	  vertical-align: baseline;
    	  background: transparent;
    }
    body {
    		line-height: 0.7;
    		font-family: helvetica, arial, san-serif;
    }
    ol, ul {
    		list-style:none;
    }
    
    /* end reset */
    
    
    
    /* main styles */
    
    #wrap {
    width: 960px;
    margin: auto;
    }
    
    #main {
    clear: both;
    width: 960px;
    margin: auto;
    }
    
    
    #header  img{
    clear:both;
    margin: auto;
    padding-top: 23px;
    padding-left: 370px;
    }
    
    #nav {
    clear: both;
    }
    
    #nav .navline  {
    width: 960px;
    height: 2px;
    background-color: #8C6239;
    margin-top: -1px;
    margin: auto;
    
    }
    
    #main .primary {
    float: left;
    width: 630px;
    padding-top:50px;
    padding-left: 10px;
    }
    
    #main .secndary {
    float: left;
    width: 300px;
    padding-left: 20px;
    text-align: right;
    padding-top: 30px;
    }
    
    #nav ul li {
    padding-left: 0px;
    padding-right: 2px;
    float: left;
    margin-top: 5px;
    margin-left: 100px;
    margin-right: -80px;
    position: relative;
    }
    
    h2 a {
    font-size: 22px;
    padding-top: 10px;
    color: #2B2B2B;
    width: 80px
    margin-right: 50px;
    }
    
    ul h2 {
    color: #2B2B2B;
    font-size: 22px;
    }
    
    h2 img {
    margin-left: 2px;
    vertical-align: middle;
    padding-top: 4px;
    }
    
    ul li.side {
    margin-right:43px;
    line-height: 1.0;
    }
    
    a {
    text-decoration: none;
    color: #2B2B2B;
    font-size: 16px;
    }
    
    a:hover {
    color: #062DD4;
    }
    
    a h2:hover {
    color: #062DD4;
    }
    
    
    body {
    background: url(images/top.png) no-repeat, url(images/bottom.png) bottom center no-repeat , url(images/BG-tile.jpg);
    }
    
    .footer_links a  {
    font-size: 90%;
    }
    
    .footer_links2   {
    font-size: 90%;
    
    color: #2B2B2B;
    }
    
    .footer_copy {
    font-size: 90%;
    }
    
    #footer1 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 532px;
    margin-left: 35px;
    margin-top: 110px;
    width: 260px;
    line-height: 1.4;
    }
    
    #footer2 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: -145px;
    margin-left: -109px;
    margin-top: 110px;
    width: 96px;
    line-height: 1.4;
    }
    
    #footer3 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 2px;
    margin-left: -117px;
    margin-top: 110px;
    width: 250px;
    line-height: 1.4;
    }
    
    #footer4 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: 150px;
    margin-left: 2px;
    margin-top: 110px;
    width: 230px;
    line-height: 1.4;
    }
    
    #footer5 {
    float: right;
    padding: 1px;
    text-align: right;
    margin-right: -120px;
    margin-left: 4px;
    margin-top: 110px;
    width: 150px;
    line-height: 1.4;
    }
    
    #footer6 {
    padding: 1px;
    text-align: right;
    margin: auto;
    width: 250px;
    }

  11. #46
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    From one of my previous responses:

    Quote Originally Posted by Builder View Post
    Start by fixing the errors in your HTML:
    https://validator.w3.org/#validate_by_input

    [...]

    <h2> is not a valid child of <ul>.
    AND you have a bunch of tags that are nested incorrectly, such as:
    Code:
    <h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"></h2></a>
    Which should be:
    Code:
    <h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"></a></h2>
    That stated, if it were me:
    HTML Code:
    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>פריהנד</title>
        <meta name="description" content="YOUR PAGE DESCRIPTION HERE">
        <link rel="stylesheet" href="style_freehand.css">
    </head>
    <body>
    	<header>
    		<img src="images/logo.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!"> 
            </header>
    
    	<nav>
    	    <ul>
    		<li id="contact"><a href="#">יצירת קשר</a></li>
    		<li id="about"><a href="#">אודות</a></li>
    	    </ul>
    	</nav>		
    
    	<main>
    	    <div class="primary">
    		<img src="images/general2.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!">
    		<ul>
    		        <li id="text_on_paper"></li>
    		</ul>
    	    </div>	
    	    <div class="secndary">	
    	        <h2><a href="#">דף הבית<img src="images/home.png" alt="home"></a></h2>
    		
    		<h2 class="ul">פלאש<img src="images/flash.png" alt="flash"></h2>
    
    		<ul>
    			<li><a href="#">כללי</a></li>
    			<li><a href="#">משחקים</a></li>
    			<li><a href="#">יום הולדת</a></li>
    			<li><a href="#">תאריכים חשובים</a></li>
    		</ul>
    		
    		<h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"></a></h2>
    		<h2><a href="#">אילוסטרייטור<img src="images/illustrator.png" alt="illustrator"></a></h2>
    		
    		<h2 class="ul">פוטושופ<img src="images/photoshop.png" alt="photoshop"></h2>
    		<ul>
    			<li><a href="#">ריטוש תמונות</a></li>
    			<li><a href="#">פוסטרים</a></li>
    			<li><a href="#">כללי</a></li>
    		</ul>
    		
    		<h2><a href="#">הדפסים<img src="images/t-shirts.png" alt="t-shirts"></a></h2>
    		<h2><a href="#">לוגואים<img src="images/logos.png" alt="logos"></a></h2>
    		<h2><a href="#">זיכרון ושימחה<img src="images/zicaron_ve_simha.png" alt="zicaron_ve_simha"></a></h2>
    
    		<h2 class="ul">דרימוויבר<img src="images/dreamweaver.png" alt="dreamweaver"></h2>
    
    		<ul>
    			<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    			<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    			<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    			<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    			<li><a href="#">אמ פי 3</a></li>
    			<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    			<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    			<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    			<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    			<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    		</ul>
    
    		<h2 class="ul">פרוייקט<img src="images/project.png" alt="project"></h2>
    
    		<ul>
    			<li><a href="#">בניית אתר</a></li>
    			<li><a href="#">עיצוב גרפי</a></li>
    		</ul>
    
    		<h2><a href="#">חתונה<img src="images/wedding.png" alt="wedding"></a></h2>
    		<h2><a href="#">כרטיסי ביקור<img src="images/business_card.png" alt="business_card"></a></h2>
    		
    		<h2 class="ul">בר מצווה<img src="images/bar_mitzva.png" alt="bar_mitzva"></h2>
    
    		<ul>
    			<li><a href="#">אלבום דיגיטלי</a></li>
    			<li><a href="#">הזמנות</a></li>
    		</ul>
    	    </div>	
    	</main>
    
    	<footer>
    	    <ul>
    	        <li><a href="#">דף הבית</a></li>
    		<li>פלאש</li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">משחקים</a></li>
    		<li><a href="#">יום הולדת</a></li>
    		<li><a href="#">תאריכים חשובים</a></li>
    		<li><a href="#">פריהנד</a></li>
    		<li><a href="#">אילוסטרייטור</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פוטושופ<li>
    		<li><a href="#">ריטוש תמונות</a></li>
    		<li><a href="#">פוסטרים</a></li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">הדפסים</a></li>
    		<li><a href="#">לוגואים</a></li>
    		<li><a href="#">זיכרון ושימחה</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>דרימוויבר</li>
    		<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    		<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    		<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    		<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    		<li><a href="#">אמ פי 3</a></li>
    		<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    		<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    		<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    		<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    		<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פרוייקט</li>
    		<li><a href="#">בניית אתר</a></li>
    		<li><a href="#">עיצוב גרפי</a></li>
    		<li><a href="#">חתונה</a></li>
    		<li><a href="#">כרטיסי ביקור</a></li>
    		<li>בר מצווה</li>
    		<li><a href="#">אלבום דיגיטלי</a></li>
    		<li><a href="#">הזמנות</a></li>
    		<li><a href="#">אודות</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>phone</li>
    		<li><a href="#">mail</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>עוצב ע"י לירן כושר 2015</li>
    	    </ul>
    	</footer>
    
    </body>
    </html>
    CSS:
    Code:
    /* reset */
    
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    
    /* end reset */
    
    
    
    /* main styles */
    
    body {
    	background: url(images/top.png) no-repeat, url(images/bottom.png) bottom center no-repeat , url(images/BG-tile.jpg);
    	font-family: helvetica, arial, sans-serif;
    }
    
    header {
    	max-width: 960px;
    	margin: auto;
    	padding-top: 23px;
    	text-align: center;
    }
    
    ol, ul {
    	list-style:none;
    }
    
    nav {
    	max-width: 960px;
    	border-top: 2px solid #8C6239;
    	margin: -1px auto;
    }
    
    nav ul li {
    	padding-right: 2px;
    	float: left;
    	margin: 5px -80px 0 100px;
    	position: relative;
    }
    
    main {
    	max-width: 960px;
    	margin: auto;
    	padding: 0 8px 0 8px;
    }
    
    main div {
    	float: right;
    	clear: both;
    	text-align: right;
    }
    
    .primary {
    	padding-top: 50px;
    }
    
    .secndary {
    	padding-top: 30px;
    }
    
    h2 a {
    	font-size: 1.5em;
    	padding-top: 10px;
    	color: #2B2B2B;
    	margin-right: 50px;
    }
    
    h2.ul {			/* replaces ul h2 */
    	color: #2B2B2B;
    	font-size: 1.5em;
    }
    
    h2 img {
    	margin-left: 2px;
    	vertical-align: middle;
    	padding-top: 4px;
    }
    
    .secndary li {
    	margin-right:43px;
    	line-height: 1em;
    }
    
    a {
    	text-decoration: none;
    	color: #2B2B2B;
    	font-size: 1em;
    }
    
    a:hover {
    	color: #062DD4;
    }
    
    footer {
    	clear: both;
    }
    
    footer ul {
    	display: inline-block;
    	float: right;
    	margin: 110px 10px 0 10px;
    }
    
    footer ul li {
    	white-space: nowrap;
    	line-height: 1.4em;
    	text-align: right;
    	font-size: 90%;
    	color: #2B2B2B;
    }
    There's probably a lot more I'd change as well, but that's a start. Adjust to your needs.

    Good luck,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  12. #47

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Okay, I made the changes you've written, and it annoys me, not your notes, but how i miss these things? Thank you for caught my attention
    for the upper part of the meta, how I wrote it, it was wrong? why do i need to change it?
    as for the bottom the footer, i did what you wrote, it shows me the footer vertically, why?

  13. #48
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by Hunter47 View Post
    for the upper part of the meta, how I wrote it, it was wrong? why do i need to change it?
    Your meta tag was not "wrong". But HTML5 allows you to shorten it. You also do not need the self-closing slash at the end of the tag.
    Therefore this:
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    becomes:
    Code:
    <meta charset="utf-8">
    The CSS link tag also doesn't need the type attribute in HTML5. It is implicit that the stylesheet is "text/css".
    You can leave them as they were if you like, but I prefer the more modern method.

    A good read on how to use HTML5: http://diveintohtml5.info/semantics.html

    The other meta tags I added are "best practice". They should be included but are not required. The viewport tag is for your future responsive design. It keeps mobile browsers from "lying" about their screen size. The description tag is for search engines. The text may get used as the description of your page in returns for searches pertaining to your subject.

    Quote Originally Posted by Hunter47 View Post
    as for the bottom the footer, i did what you wrote, it shows me the footer vertically, why?
    I have no clue. In the code I posted above all the footer ULs line up side-by-side. One thing to check on is a clear: left|right|both in your CSS. You had a bunch of unneeded clear:both in the CSS you post above. For the most part you don't need to "clear" an element unless an element above it is "floating".

    There is also a development tool in every browser called a "Console". You open it by hitting your F12 key. You can highlight elements and find out what CSS is being applied.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  14. #49

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I have to give each page a description or only to index?
    i did a test, i copied the text of the css you have written, and i put it in my file (i deleted everything i did), the design moved to the left, vertically, i really do not understand it, why is this happening?

  15. #50
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by Hunter47 View Post
    I have to give each page a description or only to index?
    Each page should have a unique description.

    Quote Originally Posted by Hunter47 View Post
    i did a test, i copied the text of the css you have written, and i put it in my file (i deleted everything i did), the design moved to the left, vertically, i really do not understand it, why is this happening?
    My CSS will not work with your HTML.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  16. #51

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    So what am I supposed to do? How do I make it work? I tried to combine your css file with mine - I told you what were the results - the footer does not respond as it should be

  17. #52
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    I gave you the HTML that works with it in this post. It does everything you wanted. All you need to do is copy/paste and you're done.

    Frankly I don't know how much more I can do. All the code you need (both HTML and CSS) has been done for you, unless you want to change something slightly. Change margins, paddings, font-sizes, I don't care. But it works.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  18. #53

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Okay, thank you very much for your help

  19. #54

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    There is a possibility to do what you did and translate it to plain html not html5? Because i just do not get along with it, it's better to work with the new, I simply can not organize the design the way I want.
    I try to separate the line which appears in "2015" and lower it which is actually the bottom line, and the footer will be above, I tried to do what you've done, and I can not do it.
    I'm going crazy here how to understand and to do it, and I'm really trying and trying, but there are people that it's easier for them and some people get more difficult for them to understand ...
    Again i say, I will be clear - I am really grateful for all the help, it is not obvious! (At least not to me)

  20. #55
    target='_blank' snowmaker's Avatar
    Join Date
    Nov 2002
    Location
    Not in Solomons anymore.
    Posts
    3,434
    Rep Power
    21
    Try some of the links given here - footer css at DuckDuckGo
    -bruce /* somdcomputerguy */
    'If you change the way you look at things, the things you look at change.'

  21. #56

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I will explain again, Builder did something that works, and I tried to do something like him, and tried to separate the footer itself and "2015" will be on a separate line.
    And if I fix it, then it again brings me to the problem of I can not arrange the design as much as I want to, because he used elements of html5, I know it's better to work with html5 but at this point it's a bit complicating to me, so I thought If he can (please, of course) to translate it to html,not html5 elements, so at least I understand how to do it, then I can later move to html5

  22. #57
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Change:
    HTML Code:
    	    <ul>
    	        <li>עוצב ע"י לירן כושר 2015</li>
    	    </ul>
    To:
    HTML Code:
    	    <p>עוצב ע"י לירן כושר 2015</p>
    Then add this to the CSS:
    Code:
    footer p {
    	clear: both;
    	float: right;
    }
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  23. #58
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by Hunter47 View Post
    so I thought If he can (please, of course) to translate it to html
    OK, here you go:
    HTML 4.01 Strict:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>פריהנד</title>
        <meta name="description" content="YOUR PAGE DESCRIPTION HERE">
        <link rel="stylesheet" href="style_freehand.css" type="text/htm">
    </head>
    <body>
    	<div id="header">
    		<img src="images/logo.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!"> 
            </div>
    
    	<div id="nav">
    	    <ul>
    		<li id="contact"><a href="#">יצירת קשר</a></li>
    		<li id="about"><a href="#">אודות</a></li>
    	    </ul>
    	</div>		
    
    	<div id="main">
    	    <div class="primary">
    		<img src="images/general2.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!">
    		<ul>
    		        <li id="text_on_paper"></li>
    		</ul>
    	    </div>	
    	    <div class="secndary">	
    	        <h2><a href="#">דף הבית<img src="images/home.png" alt="home"></a></h2>
    		
    		<h2 class="ul">פלאש<img src="images/flash.png" alt="flash"></h2>
    
    		<ul>
    			<li><a href="#">כללי</a></li>
    			<li><a href="#">משחקים</a></li>
    			<li><a href="#">יום הולדת</a></li>
    			<li><a href="#">תאריכים חשובים</a></li>
    		</ul>
    		
    		<h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"></a></h2>
    		<h2><a href="#">אילוסטרייטור<img src="images/illustrator.png" alt="illustrator"></a></h2>
    		
    		<h2 class="ul">פוטושופ<img src="images/photoshop.png" alt="photoshop"></h2>
    		<ul>
    			<li><a href="#">ריטוש תמונות</a></li>
    			<li><a href="#">פוסטרים</a></li>
    			<li><a href="#">כללי</a></li>
    		</ul>
    		
    		<h2><a href="#">הדפסים<img src="images/t-shirts.png" alt="t-shirts"></a></h2>
    		<h2><a href="#">לוגואים<img src="images/logos.png" alt="logos"></a></h2>
    		<h2><a href="#">זיכרון ושימחה<img src="images/zicaron_ve_simha.png" alt="zicaron_ve_simha"></a></h2>
    
    		<h2 class="ul">דרימוויבר<img src="images/dreamweaver.png" alt="dreamweaver"></h2>
    
    		<ul>
    			<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    			<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    			<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    			<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    			<li><a href="#">אמ פי 3</a></li>
    			<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    			<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    			<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    			<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    			<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    		</ul>
    
    		<h2 class="ul">פרוייקט<img src="images/project.png" alt="project"></h2>
    
    		<ul>
    			<li><a href="#">בניית אתר</a></li>
    			<li><a href="#">עיצוב גרפי</a></li>
    		</ul>
    
    		<h2><a href="#">חתונה<img src="images/wedding.png" alt="wedding"></a></h2>
    		<h2><a href="#">כרטיסי ביקור<img src="images/business_card.png" alt="business_card"></a></h2>
    		
    		<h2 class="ul">בר מצווה<img src="images/bar_mitzva.png" alt="bar_mitzva"></h2>
    
    		<ul>
    			<li><a href="#">אלבום דיגיטלי</a></li>
    			<li><a href="#">הזמנות</a></li>
    		</ul>
    	    </div>	
    	</div>
    
    	<div id="footer">
    	    <ul>
    	        <li><a href="#">דף הבית</a></li>
    		<li>פלאש</li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">משחקים</a></li>
    		<li><a href="#">יום הולדת</a></li>
    		<li><a href="#">תאריכים חשובים</a></li>
    		<li><a href="#">פריהנד</a></li>
    		<li><a href="#">אילוסטרייטור</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פוטושופ</li>
    		<li><a href="#">ריטוש תמונות</a></li>
    		<li><a href="#">פוסטרים</a></li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">הדפסים</a></li>
    		<li><a href="#">לוגואים</a></li>
    		<li><a href="#">זיכרון ושימחה</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>דרימוויבר</li>
    		<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    		<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    		<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    		<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    		<li><a href="#">אמ פי 3</a></li>
    		<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    		<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    		<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    		<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    		<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פרוייקט</li>
    		<li><a href="#">בניית אתר</a></li>
    		<li><a href="#">עיצוב גרפי</a></li>
    		<li><a href="#">חתונה</a></li>
    		<li><a href="#">כרטיסי ביקור</a></li>
    		<li>בר מצווה</li>
    		<li><a href="#">אלבום דיגיטלי</a></li>
    		<li><a href="#">הזמנות</a></li>
    		<li><a href="#">אודות</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>phone</li>
    		<li><a href="#">mail</a></li>
    	    </ul>
    
    	    <p>עוצב ע"י לירן כושר 2015</p>
    	</div>
    
    </body>
    </html>
    XHTML1.0 Strict:
    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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>פריהנד</title>
        <meta name="description" content="YOUR PAGE DESCRIPTION HERE"/>
        <link rel="stylesheet" href="style_freehand.css" type="text/css"/>
    </head>
    <body>
    	<div id="header">
    		<img src="images/logo.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!"/> 
            </div>
    
    	<div id="nav">
    	    <ul>
    		<li id="contact"><a href="#">יצירת קשר</a></li>
    		<li id="about"><a href="#">אודות</a></li>
    	    </ul>
    	</div>		
    
    	<div id="main">
    	    <div class="primary">
    		<img src="images/general2.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!"/>
    		<ul>
    		        <li id="text_on_paper"></li>
    		</ul>
    	    </div>	
    	    <div class="secndary">	
    	        <h2><a href="#">דף הבית<img src="images/home.png" alt="home"/></a></h2>
    		
    		<h2 class="ul">פלאש<img src="images/flash.png" alt="flash"/></h2>
    
    		<ul>
    			<li><a href="#">כללי</a></li>
    			<li><a href="#">משחקים</a></li>
    			<li><a href="#">יום הולדת</a></li>
    			<li><a href="#">תאריכים חשובים</a></li>
    		</ul>
    		
    		<h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"/></a></h2>
    		<h2><a href="#">אילוסטרייטור<img src="images/illustrator.png" alt="illustrator"/></a></h2>
    		
    		<h2 class="ul">פוטושופ<img src="images/photoshop.png" alt="photoshop"/></h2>
    		<ul>
    			<li><a href="#">ריטוש תמונות</a></li>
    			<li><a href="#">פוסטרים</a></li>
    			<li><a href="#">כללי</a></li>
    		</ul>
    		
    		<h2><a href="#">הדפסים<img src="images/t-shirts.png" alt="t-shirts"/></a></h2>
    		<h2><a href="#">לוגואים<img src="images/logos.png" alt="logos"/></a></h2>
    		<h2><a href="#">זיכרון ושימחה<img src="images/zicaron_ve_simha.png" alt="zicaron_ve_simha"/></a></h2>
    
    		<h2 class="ul">דרימוויבר<img src="images/dreamweaver.png" alt="dreamweaver"/></h2>
    
    		<ul>
    			<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    			<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    			<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    			<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    			<li><a href="#">אמ פי 3</a></li>
    			<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    			<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    			<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    			<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    			<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    		</ul>
    
    		<h2 class="ul">פרוייקט<img src="images/project.png" alt="project"/></h2>
    
    		<ul>
    			<li><a href="#">בניית אתר</a></li>
    			<li><a href="#">עיצוב גרפי</a></li>
    		</ul>
    
    		<h2><a href="#">חתונה<img src="images/wedding.png" alt="wedding"/></a></h2>
    		<h2><a href="#">כרטיסי ביקור<img src="images/business_card.png" alt="business_card"/></a></h2>
    		
    		<h2 class="ul">בר מצווה<img src="images/bar_mitzva.png" alt="bar_mitzva"/></h2>
    
    		<ul>
    			<li><a href="#">אלבום דיגיטלי</a></li>
    			<li><a href="#">הזמנות</a></li>
    		</ul>
    	    </div>	
    	</div>
    
    	<div id="footer">
    	    <ul>
    	        <li><a href="#">דף הבית</a></li>
    		<li>פלאש</li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">משחקים</a></li>
    		<li><a href="#">יום הולדת</a></li>
    		<li><a href="#">תאריכים חשובים</a></li>
    		<li><a href="#">פריהנד</a></li>
    		<li><a href="#">אילוסטרייטור</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פוטושופ</li>
    		<li><a href="#">ריטוש תמונות</a></li>
    		<li><a href="#">פוסטרים</a></li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">הדפסים</a></li>
    		<li><a href="#">לוגואים</a></li>
    		<li><a href="#">זיכרון ושימחה</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>דרימוויבר</li>
    		<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    		<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    		<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    		<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    		<li><a href="#">אמ פי 3</a></li>
    		<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    		<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    		<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    		<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    		<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פרוייקט</li>
    		<li><a href="#">בניית אתר</a></li>
    		<li><a href="#">עיצוב גרפי</a></li>
    		<li><a href="#">חתונה</a></li>
    		<li><a href="#">כרטיסי ביקור</a></li>
    		<li>בר מצווה</li>
    		<li><a href="#">אלבום דיגיטלי</a></li>
    		<li><a href="#">הזמנות</a></li>
    		<li><a href="#">אודות</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>phone</li>
    		<li><a href="#">mail</a></li>
    	    </ul>
    
    	    <p>עוצב ע"י לירן כושר 2015</p>
    	</div>
    </body>
    </html>
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  24. #59
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Both of the above use this CSS:
    Code:
    /* reset */
    
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    
    /* end reset */
    
    
    
    /* main styles */
    
    body {
    	background: url(images/top.png) no-repeat, url(images/bottom.png) bottom center no-repeat , url(images/BG-tile.jpg);
    	font-family: helvetica, arial, sans-serif;
    }
    
    #header {
    	max-width: 960px;
    	margin: auto;
    	padding-top: 23px;
    	text-align: center;
    	border-bottom: 2px solid #8C6239;
    }
    
    ol, ul {
    	list-style:none;
    }
    
    #nav {
    	max-width: 960px;
    	margin: auto;
    }
    
    #nav ul li {
    	display: inline;
    	margin:10px 0 0 50px;
    	position: relative;
    }
    
    #main {
    	max-width: 960px;
    	margin: auto;
    	padding: 0 8px 0 8px;
    }
    
    #main div {
    	float: right;
    	clear: both;
    	text-align: right;
    	padding-top: 50px;
    }
    
    h2 a {
    	font-size: 1.5em;
    	padding-top: 10px;
    	color: #2B2B2B;
    	margin-right: 50px;
    }
    
    h2.ul {			/* replaces ul h2 */
    	color: #2B2B2B;
    	font-size: 1.5em;
    }
    
    h2 img {
    	margin-left: 2px;
    	vertical-align: middle;
    	padding-top: 4px;
    }
    
    .secndary li {
    	margin-right:43px;
    	line-height: 1.0em;
    }
    
    a {
    	text-decoration: none;
    	color: #2B2B2B;
    	font-size: 16px;
    }
    
    a:hover {
    	color: #062DD4;
    }
    
    #footer {
    	clear: both;
    }
    
    #footer ul {
    	display: inline-block;
    	float: right;
    	margin: 110px 10px 0 10px;
    }
    
    #footer ul li {
    	white-space: nowrap;
    	line-height: 1.4em;
    	text-align: right;
    	font-size: 90%;
    	color: #2B2B2B;
    }
    
    #footer p {
    	clear: both;
    	float: right;
    }
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  25. #60

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Builder, thank you very much
    Just what is the difference between HTML 4.01 Strict to XHTML1.0 Strict? What is best to use?

  26. #61
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    I'm being facetious -- hopefully somewhat obviously.

    Look, HTML is HTML. CSS is CSS. Yes, there are different versions of each, but in the end HTML is about structure and CSS is about how that structure is displayed. So <div id="header"> in HTML 4.01 and XHTML 1.0 becomes <header> in HTML 5. And so on. You can write the same structure in any version you want. The only "translation" is to make sure you don't use an element from a newer HTML version in an older DOCTYPE. And that you use all the correct syntax, etc. for that DOCTYPE.

    As you can see, I made the same basic structure work in 3 different DOCTYPES with minimal changes. Using my "header" example above the only change in the CSS is to change header to #header (etc.). So what's to "translate"? It's HTML!

    The idea behind the code I've given you is to work with the "flow" of HTML rather than against the flow.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  27. #62
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by hunter47 View Post
    just what is the difference between html 4.01 strict to xhtml1.0 strict? What is best to use?
    html 5
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  28. #63
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Seriously, did you not see that all I did was change <header> to <div id="header"> et al?? Along with changing the appropriate selectors in the CSS.

    Let's go back to HTML 5 (with a couple of changes and corrections):

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>פריהנד</title>
        <meta name="description" content="YOUR PAGE DESCRIPTION HERE">
        <link rel="stylesheet" href="style_freehand.css">
    </head>
    <body>
    	<header>
    		<img src="images/logo.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!"> 
            </header>
    
    	<nav>
    	    <ul>
    		<li id="contact"><a href="#">יצירת קשר</a></li>
    		<li id="about"><a href="#">אודות</a></li>
    	    </ul>
    	</nav>		
    
    	<main>
    	    <div class="primary">
    		<img src="images/general2.png" alt="YOU MUST HAVE AN ALT ATTRIBUTE!!!!">
    		<ul>
    		        <li id="text_on_paper"></li>
    		</ul>
    	    </div>	
    	    <div class="secndary">	
    	        <h2><a href="#">דף הבית<img src="images/home.png" alt="home"></a></h2>
    		
    		<h2 class="ul">פלאש<img src="images/flash.png" alt="flash"></h2>
    
    		<ul>
    			<li><a href="#">כללי</a></li>
    			<li><a href="#">משחקים</a></li>
    			<li><a href="#">יום הולדת</a></li>
    			<li><a href="#">תאריכים חשובים</a></li>
    		</ul>
    		
    		<h2><a href="#">פריהנד<img src="images/freehand.png" alt="freehand"></a></h2>
    		<h2><a href="#">אילוסטרייטור<img src="images/illustrator.png" alt="illustrator"></a></h2>
    		
    		<h2 class="ul">פוטושופ<img src="images/photoshop.png" alt="photoshop"></h2>
    		<ul>
    			<li><a href="#">ריטוש תמונות</a></li>
    			<li><a href="#">פוסטרים</a></li>
    			<li><a href="#">כללי</a></li>
    		</ul>
    		
    		<h2><a href="#">הדפסים<img src="images/t-shirts.png" alt="t-shirts"></a></h2>
    		<h2><a href="#">לוגואים<img src="images/logos.png" alt="logos"></a></h2>
    		<h2><a href="#">זיכרון ושימחה<img src="images/zicaron_ve_simha.png" alt="zicaron_ve_simha"></a></h2>
    
    		<h2 class="ul">דרימוויבר<img src="images/dreamweaver.png" alt="dreamweaver"></h2>
    
    		<ul>
    			<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    			<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    			<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    			<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    			<li><a href="#">אמ פי 3</a></li>
    			<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    			<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    			<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    			<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    			<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    		</ul>
    
    		<h2 class="ul">פרוייקט<img src="images/project.png" alt="project"></h2>
    
    		<ul>
    			<li><a href="#">בניית אתר</a></li>
    			<li><a href="#">עיצוב גרפי</a></li>
    		</ul>
    
    		<h2><a href="#">חתונה<img src="images/wedding.png" alt="wedding"></a></h2>
    		<h2><a href="#">כרטיסי ביקור<img src="images/business_card.png" alt="business_card"></a></h2>
    		
    		<h2 class="ul">בר מצווה<img src="images/bar_mitzva.png" alt="bar_mitzva"></h2>
    
    		<ul>
    			<li><a href="#">אלבום דיגיטלי</a></li>
    			<li><a href="#">הזמנות</a></li>
    		</ul>
    	    </div>	
    	</main>
    
    	<footer>
    	    <ul>
    	        <li><a href="#">דף הבית</a></li>
    		<li>פלאש</li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">משחקים</a></li>
    		<li><a href="#">יום הולדת</a></li>
    		<li><a href="#">תאריכים חשובים</a></li>
    		<li><a href="#">פריהנד</a></li>
    		<li><a href="#">אילוסטרייטור</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פוטושופ</li>
    		<li><a href="#">ריטוש תמונות</a></li>
    		<li><a href="#">פוסטרים</a></li>
    		<li><a href="#">כללי</a></li>
    		<li><a href="#">הדפסים</a></li>
    		<li><a href="#">לוגואים</a></li>
    		<li><a href="#">זיכרון ושימחה</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>דרימוויבר</li>
    		<li><a href="#">אימולטור למשחקי פלייסטיישן 1</a></li>
    		<li><a href="#">אימולטור למשחקי סגה מגה דרייב</a></li>
    		<li><a href="#">(אימולטור למשחקי מגאסון (נינטנדו</a></li>
    		<li><a href="#">בדיקת יצרן ודגם לוח אם</a></li>
    		<li><a href="#">אמ פי 3</a></li>
    		<li><a href="#">שינוי סיומת קבצים בלחיצה אחת</a></li>
    		<li><a href="#">WinRAR פתיחת קבצים עם תוכנת</a></li>
    		<li><a href="#">Lock My PC נעילת המחשב עם תוכנת</a></li>
    		<li><a href="#">cdrLabel הצגת תכולת דיסק עם תוכנת</a></li>
    		<li><a href="#">UltraISO צריבת קבצים עם תוכנת</a></li>
    	    </ul>
    
    	    <ul>
    		<li>פרוייקט</li>
    		<li><a href="#">בניית אתר</a></li>
    		<li><a href="#">עיצוב גרפי</a></li>
    		<li><a href="#">חתונה</a></li>
    		<li><a href="#">כרטיסי ביקור</a></li>
    		<li>בר מצווה</li>
    		<li><a href="#">אלבום דיגיטלי</a></li>
    		<li><a href="#">הזמנות</a></li>
    		<li><a href="#">אודות</a></li>
    	    </ul>
    
    	    <ul>
    	        <li>phone</li>
    		<li><a href="#">mail</a></li>
    	    </ul>
    
    	    <p>עוצב ע"י לירן כושר 2015</p>
    	</footer>
    
    </body>
    </html>
    CSS:
    Code:
    /* reset */
    
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0;
    	font-size: 100%;
    	vertical-align: baseline;
    	background: transparent;
    }
    
    /* end reset */
    
    
    
    /* main styles */
    
    body {
    	background: url(images/top.png) no-repeat, url(images/bottom.png) bottom center no-repeat , url(images/BG-tile.jpg);
    	font-family: helvetica, arial, sans-serif;
    }
    
    header {
    	max-width: 960px;
    	margin: auto;
    	padding-top: 23px;
    	text-align: center;
    	border-bottom: 2px solid #8C6239;
    }
    
    ol, ul {
    	list-style:none;
    }
    
    nav {
    	max-width: 960px;
    	margin: auto;
    }
    
    nav ul li {
    	display: inline;
    	margin:10px 0 0 50px;
    	position: relative;
    }
    
    main {
    	max-width: 960px;
    	margin: auto;
    	padding: 0 8px 0 8px;
    }
    
    main div {
    	float: right;
    	clear: both;
    	text-align: right;
    	padding-top: 50px;
    }
    
    h2 a {
    	font-size: 1.5em;
    	padding-top: 10px;
    	color: #2B2B2B;
    	margin-right: 50px;
    }
    
    h2.ul {			/* replaces ul h2 */
    	color: #2B2B2B;
    	font-size: 1.5em;
    }
    
    h2 img {
    	margin-left: 2px;
    	vertical-align: middle;
    	padding-top: 4px;
    }
    
    .secndary li {
    	margin-right:43px;
    	line-height: 1.0em;
    }
    
    a {
    	text-decoration: none;
    	color: #2B2B2B;
    	font-size: 16px;
    }
    
    a:hover {
    	color: #062DD4;
    }
    
    footer {
    	clear: both;
    }
    
    footer ul {
    	display: inline-block;
    	float: right;
    	margin: 110px 10px 0 10px;
    }
    
    footer ul li {
    	white-space: nowrap;
    	line-height: 1.4em;
    	text-align: right;
    	font-size: 90%;
    	color: #2B2B2B;
    }
    
    footer p {
    	clear: both;
    	float: right;
    }
    It's the EXACT SAME THING as the HTML 4.01 and XHTML 1.0 examples posted above!
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  29. #64

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Quote Originally Posted by Builder View Post
    So what's to "translate"? It's HTML!
    I mean, you wrote html5 and I html4, it confused me a bit, because at this point I still do not know html5 and the way of writing it, so I asked to "translate" what you did to the "old" code.


    Quote Originally Posted by Builder View Post
    html 5
    ha ha this is obviously a situation that if it's possible - Currently not

  30. #65

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    I noticed this part:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    and:
    <!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">

    That's why I asked what the differences

  31. #66
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    19
    Quote Originally Posted by Hunter47 View Post
    That's why I asked what the differences
    Basically, it's semantics and what tags can be used. By "semantics" I mean that you need to use the tags and structure that each DOCTYPE requires. To extend my above example, you can't use <header> in HTML 4.x or XHTML 1.x.

    Let's say that in the future you decide to use the <video> tag to display a video on your page/site. <video> and <audio> make it stupid simple to add same to your page/site. Here's the catch: both tags are HTML 5 -only. They don't validate for any earlier version.

    But if you're really interested in learning some extremely geeky stuff about DOCTYPES, go to http://www.w3.org/QA/2002/04/valid-dtd-list.html. There's a mistake/omission on that page in that HTML 5 has been a "standard" since late October, 2014.
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  32. #67

    Join Date
    Jul 2015
    Location
    earth
    Posts
    36
    Rep Power
    0
    Okay, now I understand the differences, thanks

Posting Permissions

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