SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive fullscreen website design

    Hello I am developing a full scree website. I have got my basic designs on the paper however I am having trouble with coding it.

    Here is a simple example of my site:
    Google Glass Start

    Since it will be simple like this I think designing it responsive will not be difficult.
    Please put me on to a right track.

  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
    6 Thread(s)
    Where are you getting stuck? As you say, the site you liked to is pretty simple. Have you studied its code?

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I am having trouble understanding the CSS code:
    http://www.google.com/glass/start/as...ogle-glass.css

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by successfulfail View Post
    Yes I am having trouble understanding the CSS code:
    http://www.google.com/glass/start/as...ogle-glass.css
    Lol. I would to. In fact I'd take one look at that and throw it all way. Never to return

  5. #5
    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
    6 Thread(s)
    Quote Originally Posted by successfulfail View Post
    Yes I am having trouble understanding the CSS code:
    http://www.google.com/glass/start/as...ogle-glass.css
    That's the wrong way to study it, obviously. Instead, use the dev tools in your browser. For example, in Chrome, right click > Inspect Element to view the HTML and CSS of the page.

    All the same, this sort of layout is not hard, so I would suggest you just start from basics and build your page up. Firstly, establish the layout that you need to create.

    When you say "a full screen website", it's not clear what you are really picturing. All websites are full screen, so to speak. Perhaps you mean something like this?

  6. #6
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,433
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The site has a fullscreen effect, actually a full window with a youtube movie, when you press the "How it feels" button, a javascript effect. That CSS is hard to understand because it`s compacted, that`s all. So if browse the whole document pressing enter after each element, you`ll get a nice code so everyone understands. I`m not sure if Dreamweaver does that automatically ?

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    When you say "a full screen website", it's not clear what you are really picturing. All websites are full screen, so to speak. Perhaps you mean something like this?
    Yes that is what exactly what I meant!

    I have studied the code and looks like its using percentages instead of pixels.

  8. #8
    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
    6 Thread(s)
    Quote Originally Posted by successfulfail View Post
    I have studied the code and looks like its using percentages instead of pixels.
    That's fine, though: just switch from % to px on the inner divs if that suits better. Keep width: 100% on the outer divs, though, or it won't work.

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't figure out how the color of header-outer and footer-outer is it is.
    I can't find any hex color values for the both of them.


    Here is the full code:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Layout: full width bands</title>
    <style media="all">
    
    body {
    	font: 100% Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,Frutiger,"Frutiger Linotype",Univers,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    	background: #30353b; margin: 0; padding: 0;
    }
    
    .header-outer, .main-outer, .footer-outer {
    	width: 100%;
    }
    
    .main-outer {
    	background: #f7f7f7;
    }
    
    .header, .main, .footer {
    	margin: 0 auto; 
    	width: 50em; 
    	padding: 20px 0; 
    	overflow:hidden; 
    	max-width: 98%;
    }
    
    .header, .footer {
    	color: white;
    }
    
    a {
    	color: #D45227; 
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    .footer p {
    	margin: 0; font-size: 0.85em;
    }
    
    .logo {
    	float: left; 
    	padding: 30px; 
    	background: #D45227;
    }
    
    h1, h2 {
    	margin: 0; 
    	padding: 0;
    }
    
    .content {
    	float: left; 
    	width: 69%; 
    	padding: 0 5% 0 0;
    }
    
    .sidebar {
    	width: 24%; 
    	float: left;
    }
    
    @media only screen
    and (max-width : 480px) {
    	body {-webkit-text-size-adjust: none;}
    	.content, .sidebar {float: none; width: 100%;}
    	.content {padding: 0;}
    	.sidebar {margin-top: 1em; padding-top: 1em; border-top: 1px solid #e7e7e7;}
    }
    </style>
    <meta name="viewport" content="width=device-width">
    </head>
    
    <body>
    <div class="header-outer">
    	<div class="header">
    		<div class="logo">Your Logo here</div>
    	</div>
    </div>
    
    <div class="main-outer">
    	<div class="main">
    		<div class="content">
    			<h1>Layout: 100% width bands</h1>
    			<p>This is a simple page layout with bands of color across the page.</p>
    			
    			<p>The basic idea is to have outer and inner divs for each section, the outer set to width: 100% and the inner divs centered with a width and margin: 0 auto;</p>
    			
    			<p>The body background color serves as the background for the header section and the footer, but extends to the bottom of the screen if there is extra space. (That's much nicer than having a white gap at the bottom of the page under the footer.) Of course, each section could have its own background color. It's up to you.</p>
    			
    			<p>The .header, .main and .footer divs are given a width in ems to make them more elastic, but the columns within the .main div are given % widths so that they will adjust in width on narrow browsers. (Squeeze the browser to a narrow width to see the effect. Also try zooming in on the page to see how nicely everything fits at a large size.)</p>
    			
    			<p>The .header, .main and .footer divs are set to overflow: hidden to ensure that they <a href="http://pageaffairs.com/notebook/containing-floats">encose any floated content</a> within them.</p>
    			
    			<p>@media rules are added so that, on small screens like handhelds, the floated columns will be unfloated.</p>
    			
    			<p>Return to <a href="http://pageaffairs.com/code/layout-full-width-bands">original Page Affairs article</a>.</p>
    			
    			<p>For more details on the fluid/elastic nature of this layout, see the <a href="http://pageaffairs.com/notebook/fluid-elastic-fantastic">Fluid, Elastic, Fantastic!</a> article.</p>
    		</div>
    		
    		<div class="sidebar">
    			<h2>Sidebar</h2>
    			
    			<p>Content relevant to the sidebar</p>
    		</div>
    		
    	</div>
    </div>
    
    <div class="footer-outer">
    	<div class="footer">
    		<p>Footer text goes here. Layout by <a href="http://pageaffairs.com/">Page Affairs</a></p>
    	</div>
    </div>
    
    </body>
    </html>

  10. #10
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by successfulfail View Post
    I can't figure out how the color of header-outer and footer-outer is it is.
    I can't find any hex color values for the both of them.
    I have solved the problem.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How would I put images like https://www.spotify.com has done?

    Looks like they are using CSS, not JavaScript.

  12. #12
    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
    6 Thread(s)
    Quote Originally Posted by successfulfail View Post
    How would I put images like https://www.spotify.com has done?

    Do you mean the background video? That's relying heavily on JS.

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Do you mean the background video? That's relying heavily on JS.
    https://www.spotify.com/nz/ is the website.
    Sorry, I forgot the fact that it redirects accordingly to the clients IP address.

  14. #14
    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
    6 Thread(s)
    If you mean the full-screen background images, there are various ways to do that, from JS to the new CSS3 background-size property.

  15. #15
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)


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
  •