#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    1
    Rep Power
    0

    Question Can it be done with css?


    Hello everybody, im Mario and im relatively new to web design. Recently I saw some website and I liked a lot and wanted to make something like it (the more I make, the more I learn )

    So here are 2 questions that im wondering.

    Here is my html code:
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Dream portfolio</title>
        
    	<!-- CSS -->
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    	<link rel="stylesheet" type="text/css" href="css/lightbox.css">
    
    	<!--lightbox script -->
    	<script src="js/jquery-1.7.2.min.js"></script>
    	<script src="js/lightbox.js"></script>
    	<!-- End of lightbox script -->
    
    </head>
    
    <body>
    <div id="page-wrap">
    	
    	<div id="left-side">
    	
    		<div id="logo">
    		<br>
    		<a href="index.html">The<em>dream</em></a>
            <p>Portfolio</p>
    		</div> <!-- End of "logo" -->
    		
    		<nav>
    		
    			<div id="navigation-block">
    				<img src="background.jpg" id="hide" />
    				<ul id="sliding-navigation">
    					<li class="sliding-element"><h3>Menu</h3></li>
    					<li class="sliding-element"><a href="index.html">Home</a></li>
    					<li class="sliding-element"><a href="work.html">My Work</a></li>
    					<li class="sliding-element"><a href="gallery.html">Gallery</a></li>
    					<li class="sliding-element"><a href="contact.html">Contact</a></li>
    				</ul>
    			</div>
    		
    		</nav> <!-- End of "nav" -->
    		
    		
    	
    	</div> <!-- End of "left-side" -->
    	
    	<div class="right-side">
    	
    		<section>
    		
    			<div class="picture1">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/001.jpg" rel="lightbox[roadtrip7]"><img src="images/001 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture2">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/002.jpg" rel="lightbox[roadtrip7]"><img src="images/002 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture3">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/003.jpg" rel="lightbox[roadtrip7]"><img src="images/003 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture4">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/004.jpg" rel="lightbox[roadtrip7]"><img src="images/004 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture5">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/005.jpg" rel="lightbox[roadtrip7]"><img src="images/005 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture6">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/006.jpg" rel="lightbox[roadtrip7]"><img src="images/006 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture7">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/007.jpg" rel="lightbox[roadtrip7]"><img src="images/007 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture8">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/008.jpg" rel="lightbox[roadtrip7]"><img src="images/008 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture9">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/009.jpg" rel="lightbox[roadtrip7]"><img src="images/009 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture10">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/010.jpg" rel="lightbox[roadtrip7]"><img src="images/010 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture11">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/011.jpg" rel="lightbox[roadtrip7]"><img src="images/011 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture12">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/001.jpg" rel="lightbox[roadtrip6]"><img src="images/001 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture13">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/002.jpg" rel="lightbox[roadtrip6]"><img src="images/002 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture14">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/003.jpg" rel="lightbox[roadtrip6]"><img src="images/003 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture15">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/004.jpg" rel="lightbox[roadtrip6]"><img src="images/004 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture16">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/005.jpg" rel="lightbox[roadtrip6]"><img src="images/005 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture17">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/006.jpg" rel="lightbox[roadtrip6]"><img src="images/006 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture18">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/007.jpg" rel="lightbox[roadtrip6]"><img src="images/007 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture19">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/008.jpg" rel="lightbox[roadtrip6]"><img src="images/008 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture20">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/009.jpg" rel="lightbox[roadtrip6]"><img src="images/009 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture21">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/010.jpg" rel="lightbox[roadtrip6]"><img src="images/010 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    			
    			<div class="picture22">
    			<div id="mainwrapper">
    			<div id="box-6" class="box">
    				<a href="images/011.jpg" rel="lightbox[roadtrip6]"><img src="images/011 - Copy.jpg"></a>
    			</div>
    			</div>
    			</div> <!-- End of "picture" -->
    			
    	
    		
    		</section> <!-- End of "section" -->
    	
    	</div><!-- End of "right-side" -->	
    	
    	<div class="clear"></div> <!-- kraj clear -->
    
    </div> <!-- End of "page-wrap" -->
    
    </body>
    </html>
    Here is my CSS code:
    Code:
    html, body, #page-wrap
    {
    	height: 100%;
    }
    
    body
    {
    	margin: 0px;
    	padding: 0px;
    	font-family: "Lucida Grande", Verdana, sans-serif;
    	font-size: 100%;
    }
    
    #page-wrap
    {
    	width: 100%;
    }
    
    a:link 
    {
    	color: #F00;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    a:visited 
    {
    	color: #F00;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    a:hover 
    {
    	color: #0060ff;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    a:active 
    {
    	color: #999;
    	text-decoration: none;
    	font-weight: bold;
    	text-align: center;
    }
    
    #left-side
    {
    	width: 225px;
    	min-width: 15.3%;
    	max-width: 15.3%;
    	min-height: 100%;
    	float: left;
    	position:relative;
    	border-right:3px solid yellow; 
    	background: #1d1d1d;
    }
    
    #logo
    {
    	position:absolute;
    	top:0;
    	width:100%;
    	height: 90px;
    	padding-top: 10px;
    	text-transform: uppercase;
    	text-align: center;
    }
    
    #logo a
    {
    	color: #999;
    	font-size: 12px;
    }
    
    #logo a em
    {
    	color: yellow;
    	font-size: 34px;
    	font-style: normal;
    }
    
    #logo p
    {
    	color: #999;
    	font-size: 12px;
    }
    
    nav
    {
    	width:100%;
    }
    
    #navigation-block 
    {
    	position:relative;
    	top:120px;
    	left:27px;
    }
    
    #hide 
    {
    	position:absolute;
    	top:-50px;
    	left:-190px;
    }
    
    ul#sliding-navigation
    {
    	list-style: none;
    	font-size: .75em;
    	margin: 30px 0;
    	padding: 0;
    }
    
    ul#sliding-navigation li.sliding-element h3,
    ul#sliding-navigation li.sliding-element a
    {
    	display: block;
    	width: 150px;
    	padding: 5px 18px;
    	margin: 0;
    	margin-bottom: 5px;
    }
    
    ul#sliding-navigation li.sliding-element h3
    {
    	color: yellow;
    	background:#333 url(../images/heading_bg.jpg) repeat-y;
    	font-weight: normal;
    }
    
    ul#sliding-navigation li.sliding-element a
    {
    	color: #999;
    	background:#222 url(../images/tab_bg.jpg) repeat-y;
    	border: 1px solid #1a1a1a;
    	text-decoration: none;
    	font-weight: normal;
    }
    
    ul#sliding-navigation li.sliding-element a:hover 
    { 
    	color: #ffff66; 
    }
    
    .right-side
    {
    	height:100%;
    	position:fixed; 
    	top:0; 
    	right:0; 
    	float: right;
    	width: 84.50%;
    	background: #1d1d1d;
    }
     
    section
    { 
    	width: 100%;
    	height: 100%;
    	overflow: auto;
    }
    
    .picture1 .picture2 .picture3 .picture4 .picture5 .picture6 .picture7 .picture8 .picture9
    {
    	width: 100%;
    	float: left;
    }
    
    .picture10 .picture11 .picture12 .picture13 .picture14 .picture15 .picture16 .picture17 .picture18 .picture19 .picture20 .picture21 .picture22
    {
    	width: 100%;
    	float: left;
    }
    
    #mainwrapper .box 
    {
    	cursor: pointer;
    	height: 300px;
    	float: left;
    	position: relative;
    	overflow: hidden;
    	width: 400px;
    }
    
    #mainwrapper .box img 
    {
    	position: absolute;
    	left: 0;
    }
    
    .clear
    {
    	clear: both;
    }
    Question one, can it be done with css, boxes on right side (pictures) to automatically re-size according to user's browser resolution so it can fill the right side? (example, in pixels, when a user opens website in browser that has enough space on right side for 1000px and my images are default 400px width that they grow to 500px and fill the right side? And opposite for shrinking? Or is that done only with JS/JQUERRY?

    Question two, is there some sort of code for left side so that when user down scale's browser so that left side with menu doesnt shrink?

    If it's not breaking any rules, I've uploaded site to free webhost so www.marioweb.dx.am (if it is not according to rules pls moderator, im sorry and pls remove this)

    I hope you understood what I've posted, if not ill try to explain with more details TYVM and cheers
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    Thank you for posting the link, it made things a lot easier since I use Firebug to debug.

    2) Yes this is possible. Percentage widths take the size off their parent, which in your current layout is the page wrapper which takes a percentage width from the body. You shrink the browser window, so does the body size, and everything that takes a percentage from the body shrinks along with it.

    Instead of using percentage widths, you would need to use set widths (for example width:225px; ). Set a width for your left side, do the same for your right side, and set the page wrapper min-width to their combined widths + left/right margins + left/right paddings + borders.

    1) You can make images shrink when you shrink your browser window by setting max-width:100% and max-height:100% in CSS on img, and not specifying a height or width in the HTML img code. Once you have a set width on its parent though it will stop this resizing behaviour.

    As for upscaling the images, you'll lose the image's aspect ratio if you set a min-width or a min-height.


    However, the problem is to get the answers to your two questions combined on one page. I'm not sure how to get that to work.

    On another note: I don't know why you're using so many divs to house one image, but you can only use IDs once per page. To avoid strange behaviour and help you debugging your website, please validate your code.
    Last edited by LDHosting; June 16th, 2013 at 04:57 PM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com

IMN logo majestic logo threadwatch logo seochat tools logo