Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: CSS details

  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS details

    Hi,

    I want to make this page, i had some lessons about CSS and html, but when it comes to us it on a real website, here is the result..
    The page must look like this

    Attachment 12624


    then the css code must be :
    Code:
    nav {
    height:46px;
    width:100%;
    background-color:red
    margin:0;
    text-align:center
    }
    
    #nav_container {  /* inside the nav */ 
    height:46px;
    width:1000px;
    background-color:red;
    margin:0 auto;
    }
    
    #logo {
    height:46px;
    width:160px;
    margin:0;
    padding:0;
    border-right:1px solid black;
    display:inline-block;
    }
    
    #search {
    height:46px;
    width:48px;
    margin:0;
    padding:0;
    border-right:1px solid black;
    display:inline-block;
    }
    
    
    #menu {
    height:46px;
    width:48px;
    margin:0;
    padding:0;
    border-right:1px solid black;
    display:inline-block;
    }
    
    /* then the categories links are made in a list */
    
    nav ul {
    
    list-style-type: none;
    margin-left:105px;
    
    }
    
    nav li
    {
        display: inline-block;
    }
    
    #cat {
    	height:35px;
    	width:62px;
    	margin-right:7px;
    	padding:3px;
    	color: red;
    	font: gautami bold;
    	font-size:10px;
    	
    	background: white;
    }
    
    #gif {
    
    height:33px;
    width:73px;
    margin-left:2px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:2px solid white;
    
    padding:3px;
    color: red;
    font: gautami bold;
    font-size:10px;
    	
    background: blue;
    
    }
    
    
    
    
    
    /* And then comes the body
    
    section {
    width:1000px,
    }
    
    article {
    width:918px;
    text-align:center;
    }
    
    article h1 {
    font-size:20px;
    }
    
    article p {
    font-size : 12px; 
    }
    
    #publication-side {
    width:284px;
    height:330px; 
    display: inline-block;
    
    }
    
    #publication-center {
    
    width:284px;
    height:330px; 
    display: inline-block;
    
    margin: 0 32px 0 32px;
    
    }


    well, after coding only the <nav>, the result was this ..

    CSS details-sans-titre.jpg

  • #2
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the website plan
    the attachement is not valid

    CSS details-index-page.png

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello cyber-junkie,
    Give us your markup too, saves us having to reproduce it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Hi Cyber-junkie,

    Welcome to the forums!

    Like Excavator said we need to see your markup. We don't fix the website for you but we will help you over come your problems. You wont learn anything if we do all the work for you.

    Thanks.

  • #5
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's the point, i want you to show me where the problem is

    Well this is how it came today :

    CSS details-sans-titre.jpg

    i was using 3 pictures ( logo, search and menu );

    and here is the code :

    HTML :

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="style-site.css" />
            <title>Zozor - Carnets de voyage</title>
        </head>
        <body>
            
                <header>
                    <nav>
    					<div id="nav_container">
    						<ul>
    							<li id="logo"		><a href="#"><img src="logo.jpg"></a></li>
    							<li	id="recherche"	><a href="#"><img src="search.jpg" height="46px" width="48px" /></a></li>
    							<li	id="menu"		><a href="#"><img src="menu.jpg" height="46px" width="48px" /></</a></li>
    							<li	id="cat"		><a href="#">LOL</a></li>
    							<li	id="cat"		><a href="#">WIN</a></li>
    							<li	id="cat"		><a href="#">FAIL</a></li>
    							<li	id="cat"		><a href="#">CUTE</a></li>
    							<li	id="cat"		><a href="#">OMG</a></li>
    							<li	id="cat"		><a href="#">CHOC</a></li>
    							<li	id="cat"		><a href="#">WTF</a></li>
    							<li	id="cat"		><a href="#">HOT</a></li>
    							<li	id="gif"		><a href="#">Gif</a></li>
    						</ul>
    					</div>
                    </nav>
                </header>
                
                
                
                <section>
                    <article>
                        <h1>The Buzz</h1>
    						<div id="publication-side">
    							
    							<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
    						</div>
    						<div id="publication-side">
    							
    							<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
    							
    						</div>
    						<div id="publication-side">
    							<p>Lorem ipsum dolor sit amet...</p>
    							
    						</div>
    						<div id="publication-side">
    							
    							<p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
    						</div>
    						<div id="publication-side">
    							
    							<p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
    							
    						</div>
    						<div id="publication-side">
    							<p>Lorem ipsum dolor sit amet...</p>
    							
    						</div>
                    </article>
                </section>
                
                <footer>
                   
                    
                </footer>
           
        </body>
    </html>


    and the CSS :

    Code:
    nav {
    height:46px;
    width:100%;
    background-color:red
    margin:0;
    text-align:center
    }
    
    #nav_container {  /* inside the nav */ 
    height:46px;
    width:1000px;
    background-color:red;
    margin:0 auto;
    }
    
    #logo {
    height:46px;
    width:160px;
    margin:0;
    padding:0;
    border-right:1px solid black;
    display:inline-block;
    }
    
    #search {
    height:46px;
    width:48px;
    margin:0;
    padding:0;
    border-right:1px solid black;
    display:inline-block;
    }
    
    
    #menu {
    height:46px;
    width:48px;
    margin:0;
    padding:0;
    border-right:1px solid black;
    display:inline-block;
    }
    
    /* then the categories links are made in a list */
    
    nav ul {
    
    list-style-type: none;
    margin-left:105px;
    
    }
    
    nav li
    {
        display: inline-block;
    }
    
    #cat {
    	height:35px;
    	width:62px;
    	margin-right:7px;
    	padding:3px;
    	color: red;
    	font: gautami bold;
    	font-size:10px;
    	
    	background: white;
    }
    
    #gif {
    
    height:33px;
    width:73px;
    margin-left:2px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border:2px solid white;
    
    padding:3px;
    color: red;
    font: gautami bold;
    font-size:10px;
    	
    background: blue;
    
    }
    
    
    
    
    
    /* And then comes the body */
    
    section {
    width:1000px,
    }
    
    article {
    width:918px;
    text-align:center;
    }
    
    article h1 {
    font-size:20px;
    }
    
    article p {
    font-size : 12px; 
    }
    
    #publication-side {
    width:284px;
    height:330px; 
    display: inline-block;
    
    }
    
    #publication-center {
    
    width:284px;
    height:330px; 
    display: inline-block;
    
    margin: 0 32px 0 32px;
    
    }


  •  

    Posting Permissions

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