SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 58
  1. #1
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Making a web page with HTML / CSS

    Good day,

    I am a very novel programmer. We are starting a web site for a business, and I decided to make by myself, until we get money to pay for a pro website.

    Our website is made with HTML and CSS.
    When I finished the virst finel version, I realized it looked different in IE6 IE7 IE8, Firefox ... and also in different screen resolutions.
    I am trying to fix that now. I'd appreciate any help in two issues I am facing:
    1.- website is in spanish and english. I used two smal round flags in the upper right corner to select language and point to the right weg page.
    Flags look good in IE8 and IE9, but in IE7 and lower, they are showed bigger, and also with the blue line indicating they are links (not showed in newer IE versions, as I replaced bkue color for backgorund one).
    First question: how to manage the different picture size in IE7 and lower versions?

    2.- in my first final version, I used many absolute positioning for pages elements based on pixels. Now, considering different screen sizes and resolutions, it is not working.
    Second question: what is a good idea to make the page design? (HTML and CSS). For instance, how to put the horizontal menu bar just under the header without pointing the exact pixel where it starts?

    Thanks a lot for any help.-

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Sir_Arcturua. Welcome to SitePoint.

    Unfortunately, we can't help you much unless you post a link and/or your code. A lnk is better, as then we can see the images you are talking about.

    It's best not to use absolute positioning for a website (except in special situations, usually for little page items, rather than the main page layout).

    Instead, let the elements stack on top of each other as they do by default, and use floats if things need to sit side by side. Beyond that, we need to see your coe to help much more.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    About the flag pictures swowed different in IE7 (and lower) and IE8-IE9, please take a look to the website I am trying to finish ...
    Libromania

    If you dont have IE7 and others for testing, take a look here:
    IE NetRenderer - Browser Compatibility Check -

    Till now I have uploaded the first page (please select spanish), and in the next one you will see the header only with three little flags on the upper right side.

    About the issue regarding how to make the page ...
    In order to save files, I am using Server Side Includes. The first one is "header_spanish.html", called from "home_spanish.shtml". Including files is working now, after a long fight to figure out how to do it

    This is "home_spanish.shtml" (where I pretend to include common files and add spanish text only):

    Code HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
        >
    <html lang="en">
    <head>
        <title><!-- Libromanía --></title>
        <link rel="STYLESHEET" type="text/css" href="styles.shtml">
    </head>
    <body>
        <!--#include virtual="spanish/header_spanish.html" -->
    </body>
    </html>

    This is "header_spanish.html", with the header and horizontal menu:

    Code HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	"http://www.w3.org/TR/html4/loose.dvd"
    	>
    <html lang="es">
    <head>
    	<title>Libromanía</title>
    </head>
    <body>
    	<div id="container">
    		<div id="header">
    			<div id="logo">
    				<img src="http://www.sitepoint.com/forums/images/logo.jpg" width="100%">
    			</div>
    			<div id="languages_flags">
    				<a href="http://www.sitepoint.com/forums/home_spanish.html">
    				<img src="http://www.sitepoint.com/forums/images/chile.png" width="20%">
    				</a>
    				<a href="http://www.sitepoint.com/forums/home_german.html">
    				<img src="http://www.sitepoint.com/forums/images/germany.png" width="20%">
    				</a>
    				<a href="http://www.sitepoint.com/forums/home_english.html">
    				<img src="http://www.sitepoint.com/forums/images/united_kingdom.png" width="20%">	
    				</a>
    			</div>
    			<div id="logo_slogantext">
    				Todos sus textos escolares, en un solo lugar ...
    			</div>
    		</div>
                    <div id="main_body">
    			<div id="menu">
    				<ul id="menu_links">
    					<li>
    						<a href="home_spanish.html">
    						Home
    						</a>
    					</li>
    					<li>
    						<a href="howtobuy_spanish.html">
    						Cómo comprar
    						</a>
    					</li>
    					<li>
    						<a href="ourservice_spanish.html">
    						Nuestro servicio
    						</a>
    					</li>
     
    					<li>
    						<a href="contactus_spanish.html">
    						Contacto
    						</a>
    					</li>
    				</ul>
    			</div>
                    </div>
    	</div>
    </body>
    </html>


    And finally, this is styles.shtml (or styles.css), where styles are defined. It is loo long, I am sending only styles about header and menu:

    Code css:
    body{
    	background-color: #ffffff;
    	text-align: center;
    	font-family: verdana, arial, helvetica;
    	background-image: url(images/red_mosaic.jpg);
    	}
    a{
    	text-decoration:none;
    	color: #ffffff;
    }
    #container{
    	margin: auto;
    	background-color: #ffffff;
    	width: 75%;
    	overflow: hidden;
    }
    #header{
    	background-color: #ffffff;
    	height: 150%;
    	width: 100%;
    }
    #logo{
    	margin-left: 1%;
    	padding: 0;
    	float: left;
    }
    #languages_flags{
    	float: right;
    	margin-right: 1%;
    	padding-top: 1%;
    }
    #logo_slogantext{
    	position: absolute;
    	top: 15%;
    	left: 45%;
    	color: #b10c34;
    	font-size: 130%;
    }
    #main_body{
    	margin: 0;
    }
    #menu{
    	background-image: url(images/menu.jpg);
    	border: solid;
    	border-color: #cccccc;
    	border-width: 1px;
    	height: 35px;
    }
    #menu_links{
    	margin: 0;
    	padding: 0;
    	margin-left: 70px;
    }
    #menu_links a:hover{
    	color: green;
    }
    #menu li{
    	margin-left: 47px;
    	color: #ffffff;
    	font-size: 22px;
    	padding: 4px;
    	float: left;
    	list-style: none;
    	margin-right:25px;
    }


    Thanks a lot!!!!!
    Last edited by Black Max; May 15, 2011 at 22:04. Reason: added code tags

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    Hi Ralph,

    About the flag pictures swowed different in IE7 (and lower) and IE8-IE9, please take a look to the website I am trying to finish ...
    Libromania
    The flags are a different size because you have set the size to 20% and IE7 thinks that a widthless right float is 100% wide and the image is therefore 20% of the layout width.

    Set a width on your float and then the images will be sized correctly.

    Code:
    #languages_flags{
        float: right;
        margin-right: 1%;
        padding-top: 1%;
        width:210px;
    }
    Although I don't know why you just give the images the correct pixel size as you are not scaling them in that element anyway.

    To remove the blue border on linked images just do this:
    a img{border:none}
    [/code]

    You have corrupted the top of the page and you have two doctypes and two stylesheets linked to. If you are using includes then only include the relevant html and not the whole page. The resulting html (view source) must be a well constructed and valid page.

    Float the slogan text but give it a width so it fits.

    Code:
    #logo_slogantext{
        float:left;
        width:550px;
        color: #b10c34;
        font-size: 130%;
    }
    As others have said avoid absolute positioning except for small doses.

    I'd do that top section like this:
    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">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
    }
    body {
        text-align: center;
        font-family: verdana, arial, helvetica;
        background:#fff url(http://www.libromania.cl/images/red_mosaic.jpg);
        padding:10px 0;
    }
    a {
        text-decoration:none;
        color: #ffffff;
    }
    a img {
        border:none
    }
    #container {
        margin:0 auto;
        background:#fff;
        width: 75%;
        overflow: hidden;
        text-align:left;
    }
    #header {
        background: #fff;
        width: 100%;
        overflow:hidden;
        position:relative;
    }
    #logo {
        margin:0 0 0 1%;
        display:inline;
        float: left;
        font-size:100%;
    }
    #logo span {
        color: #b10c34;
        font-size: 130%;
        font-weight:normal;
        display:block;
        margin:50px 0 0 401px;
    }
    #logo img {
        margin:0;
        float:left;
    }
    #languages_flags {
        position:absolute;
        right:0;
        top:0;
        margin:0 1% 0 0;
        padding:1% 0 0;
        list-style:none;
        clear:both;
    }
    #languages_flags li {
        display:inline;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <h1 id="logo"><img src="http://www.libromania.cl/images/logo.jpg" width="371" height="140" alt="Libromania"><span>Todos sus textos escolares, en un solo lugar ... </span></h1>
            <ul id="languages_flags">
                <li><a href="../spanish/home_spanish.html"> <img src="http://www.libromania.cl/images/chile.png" width="35px" alt="Chile Flag"></a></li>
                <li><a href="../german/home_german.html"> <img src="http://www.libromania.cl/images/germany.png" width="35px" alt="Germany Flag"></a></li>
                <li><a href="../english/home_english.html"> <img src="http://www.libromania.cl/images/united_kingdom.png" width="35px" alt="UK Flag"></a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    Last edited by Paul O'B; May 16, 2011 at 10:09.

  5. #5
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot Paul, I'll be checking this today and keeping you posted.
    Could you please explain me more what you mean with:
    "Although I don't know why you just give the images the correct pixel size as you are not scaling them in that element anyway."

    Thanks!!!!!

  6. #6
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    About your comment:
    You have corrupted the top of the page and you have two doctypes and two stylesheets linked to. If you are using includes then only include the relevant html and not the whole page. The resulting html (view source) must be a well constructed and valid page.
    I am trying to have a header (logo and flags and menu) and footer, in order not to have to repeat it in every page.
    Could you please explaine me a little more how should I include the styles (css files). At the beginning, I had an only styles.css file, but when I started with includes, it didnt work until I include also styles in a shtml file (styles.shtlm), which is in fact only a copy of styles.css file.

    Thanks!!!
    Last edited by Black Max; May 22, 2011 at 12:24.

  7. #7
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    About slogan text, you suggested to add:
    #logo_slogantext{
    float:left;
    width:550px;
    color: #b10c34;
    font-size: 130%;
    }

    But in your header code example, you made it different. Which one should I use?

    Thanks again!!!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    Hi again,

    About slogan text, you suggested to add:
    #logo_slogantext{
    float:left;
    width:550px;
    color: #b10c34;
    font-size: 130%;
    }

    But in your header code example, you made it different. Which one should I use?

    Thanks again!!!
    If you are using my last example as posted then use the code in that post only. If you are sticking with your original html then use that snippet above.

    The code in my example is completely different and more semantic than the code you were using and requires different styles.

    I am trying to have a header (logo and flags and menu) and footer, in order not to have to repeat it in every page.
    Could you please explaine me a little more how should I include the styles (css files). At the beginning, I had an only styles.css file, but when I started with includes, it didnt work until I include also styles in a shtml file (styles.shtlm), which is in fact only a copy of styles.css file.
    If you are building your page with includes then only include the relevant sections. The main page has the stylesheet and html and then you call into this main page your included sections.

    An include is not a stand alone page. It's just some html.

    What you should do is create the whole page first and make sure its working and then you just split the section into includes. There should be no duplication of any rules or html.

    Could you please explain me more what you mean with:
    "Although I don't know why you just give the images the correct pixel size as you are not scaling them in that element anyway."
    If you close the window you will see that those little flags don't change size so I suggested just using pixels and saving the browser some work. You made it difficult (especially for IE) to work out the actual size because you set the images at 20% width.

    The percentage will be relevant to the width of the container which as a widthless container is itself related to its content. Therefore you have a container that says I'm as a big as the elements inside me and then elements saying I'm 20% of the size of a container. It just can't be resolved properly because the content depends on the width of the container and the container depends on the width of its content.

  9. #9
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Once again, thanks a lot for your help!! I'll be starting over considering your suggestions.

    thanks!!!!

  10. #10
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One last thing ... when you use size in pixels like
    margin: 50px 0 0 401px;

    Is it not a problem with different screen resolutions? 800x600 ... 1024 ... 1600 ...

    Thanks!!!

  11. #11
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    About the header code u sent. Are you suggesting me to set styles directly in the HTML code instead of using a CSS style external file??

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    About the header code u sent. Are you suggesting me to set styles directly in the HTML code instead of using a CSS style external file??
    No, the CSS should be external. I only put it in the head for ease of use in testing in the forum.

    One last thing ... when you use size in pixels like
    margin: 50px 0 0 401px;

    Is it not a problem with different screen resolutions? 800x600 ... 1024 ... 1600 ...
    Your logo is a fixed width image of 371px and if you want the slogan text to always be at 30px to the side then it will need to be at margin-left 401px as I have shown. Otherwise when you close the window the slogan text will either drop down or go over the top of the logo as in your original example.

    You can't make every element in the page fluid and generally you would not scale images either because it looks bad in browsers. Images are best rendered at their native size. If you are scaling images then you need to use high quality images at a large native size and then scale then down so that you get a sharp image. Unfortunately that makes the image filesize much bigger so you would only do it for special images.

    Take a long look at how other CSS sites are constructed because there are generally good reasons that things are done the way they are. Also google fluid, elastic and fixed css sites for loads more info on this subject.

  13. #13
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No, the CSS should be external. I only put it in the head for ease of use in testing in the forum.

    ok. Let's say I have a header.html and another file called spanish.shtml including header.html file using include file instruction.
    The only way for me to be able to use an external styles.css file was to rename it as styles.shtml and use it as stylesheet in the spanish.shtml file.

    Is it correct?


    And the last last question. Could you please briefly explain the meaning of commands. I googled them but I am bot sure to understand the ay you used here:
    #logo span
    display inline
    clear both
    and why put the logo image as h1?

    Thanks, thanks a lot. I really appreciate your help !!!!!

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    ok. Let's say I have a header.html and another file called spanish.shtml including header.html file using include file instruction.
    The only way for me to be able to use an external styles.css file was to rename it as styles.shtml and use it as stylesheet in the spanish.shtml file.
    Is it correct?
    I'm not following you I'm afraid.

    There should be one css file which contains the css for all your includes.

    e.g. a template file like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title><!-- Libromanía --></title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <!--#include virtual="spanish/header_spanish.html" --> </body> </html>
    The header include would just contain the html for the header only:
    Code:
    <div id="header"> 
                <div id="logo"> 
                    <img src="http://www.sitepoint.com/forums/images/logo.jpg" width="100%"> 
                </div> 
                <div id="languages_flags"> 
                    <a href="http://www.sitepoint.com/forums/home_spanish.html"> 
                    <img src="http://www.sitepoint.com/forums/images/chile.png" width="20%"> 
                    </a> 
                    <a href="http://www.sitepoint.com/forums/home_german.html"> 
                    <img src="http://www.sitepoint.com/forums/images/germany.png" width="20%"> 
                    </a> 
                    <a href="http://www.sitepoint.com/forums/home_english.html"> 
                    <img src="http://www.sitepoint.com/forums/images/united_kingdom.png" width="20%">    
                    </a> 
                </div> 
                <div id="logo_slogantext"> 
                    Todos sus textos escolares, en un solo lugar ... 
                </div> 
            </div>
    You would just add the includes to thu above for your content and footer sections as required assuming you have created includes for them. The css should already be in the head of the page. Of course you could make the head content an include as well if you wanted.

    However this is getting too far away from css and you would need to ask about includes in detail in one of the programming forums (possibly apache or PHP)

    And the last last question. Could you please briefly explain the meaning of commands. I googled them but I am bot sure to understand the ay you used here:
    #logo span
    display inline
    clear both
    and why put the logo image as h1?

    Thanks, thanks a lot. I really appreciate your help !!!!!
    "#logo span" - That says style any span that is a child of an element called #logo. The space between logo and span is a descendant selector.

    "display inline" would normally set an element to display as an inline box rather than a block box but as it is added to a float then it has no use except to squash an IE6 double margin bug (see css faq on floats).

    "clear both" makes an element clear any floated content above in the html so that the element starts below the floats. In the example I gave it was applied to an absolute element which again has no prupose other than to squash an IE6 bug. Absolute elements are removed from the flow and do not need to be cleared.

    See the css faq on floats for more info or check out the reference.

    and why put the logo image as h1?
    You had no heading on your page and every page must have an h1 heading. On the home page I see the site name as being the main heading and therefore use an h1. Some people would just use a p element for the logo and then have the H1 as the heading for what the site is about. In most cases I find the logo and tagline already do this.

  15. #15
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Once again, thanks a lot for your help. I have lots of stuff to read and study from what you have said. I will keep you posted of my advanced.

    You are a great person, thankd for your time!!!

  16. #16
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,

    Please take a look to the page, two new sections are ready: menu and main message.
    For the main message, I used an h1 as you made in header, including image and text, and defining two styles for text (title and others). Do you think it is ok?
    Is it possible to make the same when the image is on the right side and the text on the left?

    Libromania

    I have a concern about screen resolution. Upper image is 371 px width, and the new one is 399 px. It is the half of a 800x600 screen resolution. The container is set 75% of the total width, it is about 600px total width.
    I guess the remaining 200 px would be not enough for the text, in header and in body.
    Is it possible to resize images for small screen resolutions?

    Thanks!!

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    Is it possible to make the same when the image is on the right side and the text on the left?
    If you mean you wanted the logo floated right and the text on the left then you would basically just reverse the process. i.e. Float the image right and then use a margin right on the text instead of the margin-left as existing.

    I have a concern about screen resolution. Upper image is 371 px width, and the new one is 399 px. It is the half of a 800x600 screen resolution. The container is set 75% of the total width, it is about 600px total width.
    I guess the remaining 200 px would be not enough for the text, in header and in body.
    Is it possible to resize images for small screen resolutions?

    Thanks!!
    You could set a max-width for the image that is its normal size but allow it to scale smaller by sizing it in percentages.

    You can really only use an h1 in your page once because it is a main heading. A page can't really have two main headings as that's not logical. Other headings should be h2 and then h3 etc. You can of course have more than one h2 (or other heading tags) as it stands for subsections.

    You can't put block elements in an h1 as it can only contain inline elements. Your right column should be a div as the parent with an h2 as the heading and then p elements as required.

    You are also using ids more than once which is not allowed as ids are unique and only one element per page can have the same id. Therefore if you need to add rules to more than one element then use a class.

    I notice in your list that you have applied the same id to each list item and even if you;d used a class there would be no need because you could target all the list items via their parent id. It's only the last list item that needs a class because that's the one without a margin.

    You have also wrapped a div around the ul menu and there was no need because the ul is thje wrapper for the list and there's no need to wrap a div around it.

    Here are all those changes wrapped into valid code and adjusted to fit. (Again the css is in the head for ease of use and it means you can just copy and paste the whole code and then run it in a browser while online and it will work. This will allow you to see it in action before you start copying it into the real file.)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>
    <!-- Libromanía -->
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <style type="text/css">
    /* General tags styles
    */
    
    html, body {
        margin:0;
        padding:0;
    }
    body {
        text-align: center;
        font-family: verdana, arial, helvetica;
        background-color: #ffffff;
        background-image: url(http://www.libromania.cl/images/red_mosaic.jpg);
        padding: 10px 0;
    }
    a {
        text-decoration:none;
        color: #ffffff;
    }
    a img {
        border: none;
    }
    p {
        margin: 0;
        padding: 0;
    }
    /* Container styles
    */
    #container {
        margin:0 auto;
        background-color: #ffffff;
        width: 75%;
        overflow: hidden;
        text-align: left;
        border: solid;
        border-color: #cccccc;
        border-width: 1px;
    }
    /* Index page styles
    */
    #index_title {
        font-family: ar hermann, verdana, arial, helvetica;
        color: #b10c34;
        font-weight: bold;
        font-size: 700%;
        text-align: center;
        margin-bottom: 2%;
    }
    #index_welcome {
        margin-bottom: 5%;
    }
    #margin_right_links {
        margin-right: 5%;
    }
    #index_welcome li {
        color: #b10c34;
        font-size: 200%;
        list-style: none;
        display: inline;
    }
    #index_welcome ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
    #index_flags {
        margin-bottom: 5%;
    }
    #index_flags li {
        list-style: none;
        display: inline;
    }
    #index_flags ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
    #index_language {
        margin-bottom: 7%;
    }
    #index_language li {
        color: #b10c34;
        font-size: 200%;
        list-style: none;
        display: inline;
    }
    #index_language ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }
    /* Header section styles
    */
    #header {
        background-color: #ffffff;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    #logo {
        margin: 0 0 0 1%;
        display: inline;
        float: left;
        font-size: 100%;
    }
    #logo span {
        color: #b10c34;
        font-size: 130%;
        font-weight: normal;
        display: block;
        margin: 80px 0 0 401px;
    }
    #logo img {
        margin: 0;
        float: left;
    }
    #languages_flags {
        position: absolute;
        right: 0;
        top: 0;
        margin: 0 1% 0 0;
        padding: 1% 0 0 0;
        list-style: none;
        clear: both;
    }
    #languages_flags li {
        display: inline;
    }
    /* Menu section styles
    */
    #menu {
        background-image: url(http://www.libromania.cl/images/menu.jpg);
        border: solid;
        border-color: #cccccc;
        border-width: 1px 0 1px 0;
        margin:0;
        width:100%;
        list-style: none;
        padding:8px 0;
        text-align: center;
    }
    #menu a:hover {
        color: green;
    }
    #menu li {
        color: #ffffff;
        font-size: 130%;
        display: inline;
        margin-right: 10%;
    }
    #menu li.last{margin-right:0;}
    /* Home page styles*/
    #home_main {
        margin: 0 0 0 0;
        display: inline;
        float: left;
        border: solid;
        border-color: #cccccc;
        border-width: 0 0 1px 0;
        width: 100%
    }
    #home_main .sideimg {
        float: left;
        height: auto;
        margin:0 15px 0 0;
        max-width: 399px;
        width: 45%;
        margin:0;
    }
    * html #home_main .sideimg {width:399px}/* ie6 doesn't understand min-width so gets fixed width instead*/
    #home_main p {
        margin: 2.5% 0 0 0;
        font-size: 65%;
        color: #000000;
        font-size: 100%;
        font-style: italic;
        display: block;
        text-align: center;
        font-weight:bold;
    }
    * html #home_main p {width:97%}/* ie6 italic bug */
    #home_main h2 {
        font-size: 180%;
        margin:0 0 10px;
        text-align:center;
    }
    .content {
        overflow:hidden;
        min-height:0;
        padding:20px;
    }
    * html .content {
        zoom:1.0
    }/* ie6 hack to make block new formatting context which overflow:hidden is doing for others above*/
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <h1 id="logo"><img src="http://www.libromania.cl/images/logo.jpg" width="371" height="140" alt="Libromania"> <span> Todos sus textos escolares, en un solo lugar ... </span></h1>
            <ul id="languages_flags">
                <li><a href="../home_spanish.shtml"> <img src="http://www.libromania.cl/images/chile.png" width="35px" alt="Chile Flag"></a></li>
                <li><a href="../home_german.shtml"> <img src="http://www.libromania.cl/images/germany.png" width="35px" alt="Germany Flag"></a></li>
                <li><a href="../home_english.shtml"> <img src="http://www.libromania.cl/images/united_kingdom.png" width="35px" alt="UK Flag"></a></li>
            </ul>
        </div>
    
            <ul id="menu">
                <li><a href="home_spanish.shtml">Home</a></li>
                <li><a href="howtobuy_spanish.shtml">Cómo comprar</a></li>
                <li><a href="ourservice_spanish.shtml">Nuestro servicio</a></li>
                <li class="last"><a href="contactus_spanish.shtml">Contacto</a></li>
            </ul>
    
        <div id="home_main">
            <p class="sideimg"><img src="http://www.libromania.cl/images/message.jpg" width="100%"  alt="Message"></p>
            <div class="content">
                <h2> ¿Por qué Libromanía? </h2>
                <p> ... porque le entregamos todos sus libros de una vez ... </p>
                <p> ... porque comprar con nosotros es fácil, cómodo y rápido ... </p>
                <p> ... porque ya no perderá tiempo en distintos lugares ... </p>
                <p> ... porque queremos ser su aliado en cada año escolar ... </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    I also shortened the main content id as you called it something like #home_main_message which was starting to get a bit long especially when you added other long selectors to it. Keep ids and classnames relatively short but recognisable.

    e.g.
    #header{}
    #outer{}
    #home_main{}
    .main{}
    .content{}
    #sidebar{}
    .intro{}
    #footer{}

    or similar......

  18. #18
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    wow ... thanks a lot!!! I have to review this in depth ...

    when you are adding new elements to the page, it is supposed they will be added down the last one. Why sometimes a new element is located over the existant ones?

    Thanks!!!!!

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    wow ... thanks a lot!!! I have to review this in depth ...

    when you are adding new elements to the page, it is supposed they will be added down the last one. Why sometimes a new element is located over the existant ones?

    Thanks!!!!!
    If you are talking about the flow of the page then elements will naturally flow one after the other and not overlap. You can even move them around with margins and they will not overlap (unless you use negative margins of course).

    Elements only overlap when they are positioned or floated. If you float an element and you don;t want text to wrap then you need to clear (or contain) the floats.

    If you absolutely place an element then it lives on its own island and cares not a jot for what happens to be in the way and will overlap whatever is there. That's why you can't use absolute positioning for structural layout (unless its the most basic of structure) and should use floats and static positioning instead. Just use absolute positioning for small snippets that can be safely tucked out of the way in a corner somewhere (such as your flags).

  20. #20
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Ive been reviewing the last code you sent me.
    - you said: "You can't put block elements in an h1 as it can only contain inline elements."
    In "logo_span" defined style, which is within the h1 tab, there is a "display: block" sentence, affecting the span. How does it work within an h1 tab accepting only inline elements?
    - in the new code, the Spanish special characters like á, é ... look now with signs. Should I use the &acute?
    - as in the header using an h1 tab, in the home_main section you are using a p tab to include an image. Is this the recommended way to do it? Should I normally wrapped images with tabs like h1, h2, p ...?
    - usually page height is defined by the size of components (or am I wrong?), what is the meaning of "height: auto"?

    Thanks!!!!

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    Hi Paul,

    Ive been reviewing the last code you sent me.
    - you said: "You can't put block elements in an h1 as it can only contain inline elements."
    In "logo_span" defined style, which is within the h1 tab, there is a "display: block" sentence, affecting the span. How does it work within an h1 tab accepting only inline elements?
    "Elements" are html and essentially they have nothing to do with CSS.

    The way an element looks can be changed with CSS but has nothing to do with the type of element it is. They are separate from each other and the rules of html cannot be changed by the application of CSS.

    A block element or an inline element is defined by the rules of html. This can't be changed. However you can make the elements display differently with css.

    With CSS you can make the block element display as an "inline box" but that doesn't make it an inline "element" (and vice versa). It just makes it a block element that displays as an inline box.

    You are confusing display:block with block element and display:inline with an inline element. They are different concepts although with css you can make elements behave exactly as you like.

    Whatever an element looks like it must still obey to the rules of html.

    Code:
    - in the new code, the Spanish special characters like á, é ... look now with signs. Should I use the &acute?
    That depends on the character coding you are using and you should read the definitive article by my good friend Tommy.

    in the home_main section you are using a p tab to include an image. Is this the recommended way to do it?
    An image is an inline element and needs to be in a block parent. A div or a p is a suitable container for this and keeps things neat and tidy.

    Having an image on its own is akin to having text outside of a p element.

    Code:
    <p>some text</p>
    silly anonymous text
    <p>more text</p>
    Although the above is valid (in some structures) it is clearly nonsense and semantically incorrect.

    If the image is inside the p element along with the text then that's fine. If on the other hand the image is inside a div but next to other block elements then that's not fine.

    Block elements should always but up to each other.

    Code:
    <div>stuff</div>
    <div>more stuff</div>
    This is bad:
    Code:
    <div>stuff</div>
    <span>inline stuff</span>
    <div>more stuff</div>
    and by the same token:

    Code:
    <div>stuff</div>
    <img src"" etc............. />
    <div>more stuff</div>
    It's not invalid but just semantically incorrect and best avoided.

    - usually page height is defined by the size of components (or am I wrong?), what is the meaning of "height: auto"?

    Thanks!!!!
    Height:auto means as you suspect that the height of an element will be dictated by its contents. "auto" is the default for height anyway and only needs to be specified if you are counteracting something previously set.

  22. #22
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Accents issue was solved when I implemented your changes online. So please dont considerate the second point in my last e-mail.

    Please take a look to this:
    http://www.libromania.cl/images/final_home.jpg

    This is the final home page I made using absolute positioning
    For the three sections, what is the suggested way to put them?
    1.- each one an li element put one next to other, as in the menu section
    2.- a division wrapping three divisions, with p tabs for text inside
    3.- other ...

    Thanks!!!

  23. #23
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Im afraid I didnt understand what you mean with:
    "Block elements should always but up to each other."

    Thanks!!!

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Sir_Arcturua View Post
    Im afraid I didnt understand what you mean with:
    "Block elements should always but up to each other."

    Thanks!!!
    I gave an example above that should have explained what I meant I'm not sure I can say it much differently but I'll try.

    An html always starts with a block element - It is invalid in strict doctypes to have an inline element as a direct child of the body.

    So when you finish a block element the next element you start should also be a block element..

    Code:
    <div>stuff</div> <div>more stuff</div>
    If you are adding content inside a div then you should keep the same concept.

    Code:
    <div>
        <p>stuff</p>    <p>more stuff</p>
    </div>
    You shouldn't do this:

    Code:
    <div>
        <span>stuff</span>    <p>more stuff</p>
    </div>
    The closing span butts up straight into an opening p element. This is bad practice.

    It should be:

    Code:
    <div>
       <p><span>stuff</span></p>    <p>more stuff</p>
    </div>
    Now sanity is restored and the elements are back at the correct level again. Of course there is no need for the span unless you are need an extra hook for styling etc.

    Regarding the bottom section as shown in the jpg then just float the three columns across the page. Give them a percentage width but allow a little extra for rounding errors.

    For example assuming you wanted 3 equal columns then instead of setting the percentage to 33.33%, just set them to 33% each as IE generally rounds up when working out the pixel width to use.

    In IE 3 * 33.333 = 101% which will means one float won't fit and will start below.

  25. #25
    SitePoint Addict
    Join Date
    May 2011
    Posts
    242
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks!!! I'll be making the next two sections (three floating columns and footer) as you said (footer as include as header).


Tags for this Thread

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
  •