www.webdeveloper.com
Results 1 to 4 of 4

Thread: Stetching [need help to fix it]

  1. #1
    Join Date
    Jun 2014
    Posts
    1

    Stetching [need help to fix it]

    Hello folks
    I tried to design this page for myself:

    FIRST PICTURE [What I Want]

    And I did, but the problem is my page is kinda stretching. How can I fix it? It looks like this:

    SECOND PICTURE [WHAT I've DESIGNED]

    But I want it to be just like the first picture. I tried fixing it with testing different "width" and adding "div style", but it didn't help.
    here's my code, first HTML and second CSS:

    Code:
    <!DOCTYPE html>
    <html lang="ar" dir="rtl">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title></title>
    
    <link rel="stylesheet" href="css/page.css" media="screen">
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="header">
    
    <div id="header-content-top">
    TEST
    </div><!-- end #header-content-top -->
    
    <div id="header-content-bottom">
    <ul id="social">
     <li><a href="http://www.gmail.com">
    	<span style="position: absolute; right: 7px; top: 24px; width: 46px; height: 46px"></span></a></li>
     <li><a href="http://www.yahoo.com">
    	<span id="yah" style="position: absolute; right: 3px; top: 25px; width: 46px; height: 46px"></span></a></li>
     <li><a href="http://www.google.com">
    	<span id="goo" style="position: absolute; right: -3px; top: 25px; width: 46px; height: 46px"></span></a></li>
     <li><a href="http://www.rss.com">
    	<span id="rss" style="position: absolute; right: -8px; top: 25px; width: 46px; height: 46px"></span></a></li>
    </ul>
    </div><!-- end #header-content-bottom -->
    
    </div><!-- end #header -->
    
    <div id="content">
    <p>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    TEST
    <br>
    </br>
    </p>
    </div><!-- end #content -->
    
    <ul id="navigation">
     <li><a href="">TEST</a></li>
     <li><a href="">TEST</a></li>
     <li><a href="">TEST</a></li>
     <li><a href="">TEST</a></li>
    </ul><!-- end #navigation -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    Code:
    html,body {
        height:100%;
        margin:0;
        direction:rtl;
    font: 16px Tahoma, sans-serif;
     }
    #container {
        min-height:100%;
        background-color:#fcdfb3;
        background-image:url(../images/container-bg.png);
        background-size:25% 1px;
        background-position:100% 0;
        background-repeat:repeat-y;
        overflow:hidden;
     }
    #header {
        height:213px;
        padding:0 1.5%;
        background-color:#fff;
        background-image:url(../images/header-bg.png);
        background-repeat:repeat-x;
        font-size:200%;
        color:#d68533;
     }
    #header-content-top {
        line-height:89px;
        margin-bottom:48px;
     }
    #header-content-bottom {
        height:46px;
        padding:15px 0;
     }
    #social {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #social li {
        float:left;
        margin:0 2px;
     }
    #social a,#social span  {
        position:relative;
        display:block;
        width:46px;
        height:46px;
        font-size:40%;
     }
    #social span {
        position:absolute;
        top:0;
        left:0;
        background-image:url(../images/social-bg.png);
     }
    #social a:hover {
        opacity:0.6;
     }
    #yah {
        background-position:-46px 0;
     } 
    #goo {
        background-position:0 -46px;
     }
    #rss {
        background-position:-46px -46px;
     }   
    #content {
        float:left;
        width:47%;
        padding:1.5%;
        margin:20px 12.5%;
        border-radius:15px;
        box-shadow:inset 0 0 2px  #301409;
        background-color:#ecbd75;
        font-size:100%;
        color:#41251a;
     }
    #content h1 {
        text-align:center;
     }
    #navigation {
        float:right;
        width:25%;
        padding:0;
        margin:0;
        list-style-type:none;
     }
    #navigation li {
        border-bottom:1px solid #d68533;
     }
    #navigation a {
        display:block;
        line-height:42px;
        background-color:#41251a;
        font-size:100%;
        color:#d68533;
        text-decoration:none;
        text-align:center;
     }
    #navigation a:hover {
        background-color:#d68533;
        color:#41251a;
     }
    Thanks

  2. #2
    Join Date
    Mar 2012
    Posts
    1,203
    You need to add a max-width for body in the CSS. E.g.

    body {
    max-width:800px:
    }

  3. #3
    Join Date
    May 2014
    Posts
    622
    Biggest problem I'm seeing is WAY too much absolute positioning and non-semantic markup.... but that's to be expected from the "I can draw a pretty picture in Photoshop" design method, which to be frank puts the cart before the horse and is a completely back-assward way of making a site.

    First thing I'd do is get some semantic markup on that... probably with a RECOMMENDATION doctype, not that HTML 5-tardery. Something like:

    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"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Test Template
    </title>
    
    </head><body>
    
    <div id="top">
    
    	<h1>
    		Site Title
    	</h1>
    	
    	<ul id="social">
    	 <li><a href="http://www.gmail.com">gmail<span></span></a></li>
    	 <li><a href="http://www.yahoo.com">yahoo<span></span></a></li>
    	 <li><a href="http://www.google.com">google+<span></span></a></li>
    	 <li><a href="http://www.rss.com">RSS<<span></span></a></li>
    	</ul>
    	
    <!-- #top --></div>
    
    <div id="columnWrapper">
    
    	<div id="extras">
    
    		<ul id="navigation">
    			<li><a href="#">TEST</a></li>
    			<li><a href="#">TEST</a></li>
    			<li><a href="#">TEST</a></li>
    			<li><a href="#">TEST</a></li>
    		</ul>
    		
    		<!-- extra wrapping DIV is so if you want something after the navigation -->
    		
    	<!-- #extras --></div>
    
    	</div><!-- end #header -->
    
    	<div id="content">
    		<h2>Content</h2>
    		<p>
    			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo commodo nisl, non accumsan quam hendrerit sed. Vivamus tempus, felis eget euismod congue, libero nisi vulputate lectus, in facilisis libero augue id nibh. Duis blandit lobortis augue vel laoreet. Pellentesque eget arcu convallis, semper elit nec, fermentum arcu. Phasellus sollicitudin sit amet sem ac accumsan. Nullam auctor elementum luctus. Curabitur porta imperdiet lacus vitae pharetra. In molestie nunc a augue cursus, vel congue felis dictum. Quisque tempus gravida mauris. Fusce lectus mi, egestas vitae viverra sit amet, feugiat quis dolor. Suspendisse mollis elementum tortor ac aliquam. Donec tristique enim non mauris dignissim elementum. 
    		</p><p>
    			*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc tincidunt scelerisque tellus a ultrices. Quisque varius nibh ac gravida lacinia. Fusce vehicula mi vel purus adipiscing pharetra. Pellentesque adipiscing a lectus eu ultrices. Cras eget dictum est. Donec purus elit, euismod non consequat in, feugiat vehicula orci. Sed est nulla, sollicitudin eu orci nec, euismod gravida nulla. Nunc eget luctus quam. Vivamus condimentum pulvinar eleifend. Aenean in risus mauris. Curabitur vestibulum dapibus tincidunt. Nunc lobortis nulla sit amet turpis faucibus pellentesque. Integer hendrerit tristique bibendum. Etiam vitae faucibus massa. 
    		</p><p>
    			Praesent nulla purus, posuere at condimentum non, tincidunt sed odio. Aliquam ornare orci a sapien blandit, a vulputate nibh luctus. Aenean ultrices vel ligula suscipit congue. Proin id sapien ullamcorper, imperdiet ante nec, sagittis nunc. Morbi sed ligula eu nibh consequat dignissim in eget orci. Nunc id bibendum nunc. Ut egestas diam nec dictum ornare. Nullam malesuada aliquam mauris, vel tempor mauris euismod in. Mauris molestie mi at velit vulputate aliquam tempor sit amet lectus. Phasellus dapibus tincidunt quam, a vulputate sapien aliquet ac. Nunc ligula ante, dapibus sed bibendum nec, bibendum ac arcu.
    		</p>
    			 
    	<!-- #content --></div>
    	
    <!-- #columnWrapper --></div>
    
    <hr />
    
    <div id="footer">
    	I assume you have a footer?
    <!-- #footer --></div>
    
    </body></html>
    Though to style that with CSS, I'd have a LOT of questions -- are those white gaps supposed to be between the sections? Is it supposed to fit full screen width with the style, or should it have some other background when it doesn't fit? "stretching" is a bit vague...

    Really though it's why drawing a pretty picture before you have semantic markup of your content (or a reasonable facsimile of future content) and a working CSS layout is a broken approach to web development; no matter how many artsy fartsy types might claim otherwise.

    *laugh* you know, looking at this I'd be tempted to see if I could style it using just background textures and then doing the gradient stuff using CSS3. I might take a stab at that for laughs.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    622
    Ok, took some rewriting of the markup -- ended up DIV heavy, but also image-light since it uses just two images.

    http://www.cutcodedown.com/for_other.../template.html

    as with all my examples the directory:

    http://www.cutcodedown.com/for_others/pradW

    is unlocked for easy access to the bits and pieces. I used a stock leather texture I had lying around as a alpha transparency (something I normally don't do) over the background-color but under the box-shadows. I use box-shadow with negative side margins cut-off by overflow instead of linear-gradient since that would take multiple backgrounds and would be harder to make gracefully degrade.

    I opened the layout up to be semi-fluid and elastic, so it auto-scales to the user font preferences and adjusts to the available screen space, then threw a bit of responsive layout code at it too... and I added a footer so that... well, it has a footer. CSS Sprites were used to give it hover states on the social buttons, and I gave it some other hover states while at it. Also tossed a styled footer while in there.

    Which kinda looks like crap with the white background -- but I assumed you were going to have a background-color or image on BODY we're not seeing... as well as a bunch of content in the header and sidebar we're not seeing either.

    Naturally as most of this uses CSS3 it loses the shadows/highlights/rounded corners in IE8/earlier -- in my book "OH WELL!" -- if it still works back to at least IE7 is it really worth putting extra effort in to make it look perfect? Not unless someone is shelling out boku bucks for it. IE6 may require a few selector hacks to force a solid background color, I didn't bother testing there.

    It's funny, past few days I've been playing with a similar theme colour-wise; the header and footer are supposed to be metallic copper, but the content area colors are almost the same; and here I was thinking "nobody else seems to be using these colors"
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles