SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    problem in css layout(responsive)

    i am creating a Responsive webpage. its structure is as follows:

    <body>
    <div class="page">

    <div class="header">
    </div>

    <div class="content">
    </div>

    <div class="footer">
    </div>

    </div><!--page ends-->

    </body>


    when i give div header a margin-top:10px then the div page also moves along with it. also i am not able to provide margin-top:1000px to div content. please help. html and css coding i am going to provide you below.

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    
    
    /*---------------------------Reset Begins---------------------------------*/
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, hgroup,
    menu, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    hgroup, menu, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    
    
    /*-------------------------------------Reset Ends------------------------------------------*/
    
    
    
    
    
    
    
    
    
    
    
    
    h1{
    font-size:1.5em;	
    }
    
    h2{
    font-size:1.4em;	
    }
    
    h3{
    font-size:1.3em;	
    }
    
    body{
    margin:0;
    padding:0;	
    position:relative;
    }
    
    .page{
    	margin:0;
    	padding:0;
    width:100%;
    height:auto;
    background-color:#993;
    position:relative;
    top:0px!important;
    }
    
    
    .header,.content,.footer{
    margin:auto;
    width:80%;
    clear:both;
    position:relative;
    }
    
    
    
    
    .logo{
    background-color:#CC3300;
    width:30%;	
    float:left;
    clear:both;
    }
    
    .page .header .logo img{
    width:80%;
    max-width:80%;
    margin:5% 10%;	
    }
    
    .header{
    margin-top:0px;	
    }
    
    
    .content{
    margin-top:1000px;	
    }
    
    
    .nav{
    background-color:#CC3300;
    width:70%;
    float:left;	
    clear:right;
    height:70px;
    }
    
    .nav ul{	
    width:100%;
    }
    
    .nav ul li{
    	float:left;
    display:inline-block;
    width:22%;
    overflow:hidden;
    margin: 0 2% 0 0;
    padding:0 0 0 0;
    }
    
    .nav ul li a{
    	display:block;
    	min-height:45px;
    	height:auto;
    background-color:#69C;
    padding:25px 0 0 20%;
    text-decoration:none;
    
    }
    
    
    
    .nav ul li a:hover{
    background-color:#000;;
    }



    Code:
    <!DOCTYPE html>
    
    <!--[if lt IE 7 ]> <html lang="en" class="ie ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="ie ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="ie ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="ie ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
    <head>
    
    <meta charset="utf-8" />
    
    <title>ROBOT…OR NOT?</title>
    
    <meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com" />
    <meta name="robots" content="index, follow" />
    <meta name="description" content="A demonstration site for Ethan Marcotte's book, RESPONSIVE WEB DESIGN" /> 
    <meta name="keywords" content="responsive, responsive design, responsive web design, css, fluid grids, media queries, ethan, ethan marcotte, lol keywords lol" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <link rel="stylesheet" href="stylesheet.css" media="screen, projection" />
    <!--
    <script src="http://use.typekit.com/daz7uli.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
    <script src="-/js/respond.js"></script>
    -->
    </head>
    
    <body>
    
    <div class="page">
    
    <div class="header">
    
    <div class="logo">
    
    <!--<div class="outer_logobox"> -->
    <img src="img/logo.png" />
    <!--
    </div>outer logo box ends-->
    
    </div><!--logo ends-->
    
    
    <div class="nav">
    <ul>
    			<li id="nav-blog"><a href="#">The ’Bot Blog</a></li>
    			<li id="nav-rated"><a href="#">Top Rated</a></li>
    			<li id="nav-droids"><a href="#">Droids of the Day</a></li>
    			<li id="nav-contact"><a href="#">Contact Us</a></li>
    </ul><!-- /end ul#nav-primary.nav -->
    </div><!--nav ends-->
    
    </div><!--header Ends-->
    
    <div class="content">
    <div class="about">
    
    <div class="headingabout">
    Recently in The Bot Blog
    </div><!--headingabout ends-->
    
    <div class="datebox">
    <h1>10</h1> <h2>october</h2>
    </div><!--date ends-->
    
    
    <div class="contentabout">
    “KILL ALL HUMANS?” BUT WHY?
    
    Somewhere in my stomach I felt a cold, hard knot. Take stainless steel alloyed with titanium and plate it with three inches of lead. Take a brain made up of super-charged magnetic crystals enclosed in a leaden cranium and shielded by alloy steel. A bullet wouldn’t pierce it; radiations wouldn’t derange it; an axe wouldn’t break it.
    
    
    </div><!--contentabout ends-->
    
    <div class="postedby">
    </div><!--postedby ends-->
    
    <div class="recententries">
    </div><!--recententries ends-->
    
    
    </div><!--about ends-->
    
    
    <div class="robot">
    <div class="robotimg">
    <img src="img/robot.jpg" />
    </div><!--robotimg ends-->
    
    <div class="robotheading">
    YOU CAN NEVER BE TOO SURE.
    </div><!--robotheading ends-->
    
    <div class="robotcontent">
    Never wonder again if your new potted plant is secretly a rampaging killbot, beeping away maliciously into the night. Stop worrying whether that “android” you bought is actually a toaster with pipe cleaners taped to its sides.
    
    Welcome to ROBOT OR NOT. We answer these questions so you don’t have to.
    </div><!--robotcontent ends-->
    
    </div><!--robot ends-->
    
    
    <div class="gallery">
    
    <div class="galleryheading">
    
    </div><!--galleryheading ends-->
    
    <div class="gallerybots">
    </div><!--gallerybots ends-->
    
    <div class="gallerynots">
    </div><!--gallerynots ends-->
    
    
    
    
    </div><!--gallery ends-->
    
    
    </div><!--content Ends-->
    
    <div class="footer">
    
    <div class="footerinfo">
    
    </div><!--footerinfo ends-->
    
    </div><!--footer ends-->
    
    
    </div><!--Page ends-->
    
    
    
    
    
    
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Yep, that's standard CSS. It's called "collapsiing margins". An easy way to stop it is to give a top border or top padding the the .page div. E.g.

    Code:
    .page {border-top: 1px solid #993;}

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    India
    Posts
    73
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yep, that's standard CSS. It's called "collapsiing margins". An easy way to stop it is to give a top border or top padding the the .page div. E.g.

    Code:
    .page {border-top: 1px solid #993;}
    Thankyou so much sir! i was unaware of that


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
  •