SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Container & Navigation - Best Practice

    Hi

    Most of my site is positioned using absolute positioning however from reading various articles I'm not sure this is the best way... (http://www.togganet.co.uk/YAL.html)

    I'd like to set a page width so everything looks neat and need to know the best way to do so. I've added a container div but as everything is absolute it doesnt do anything currently.

    1. My container Div. I see 90% of websites nowadays have a border right and left (Guessing its for mobile browsing). How do I achieve this? I've changed the CSS to add a border but do i change every other element within it to float

    2. Navigation - To fill the page I have set each menu item a fixed column width. This is fine on a PC but on a mobile the furthest right menu items go below the other items (left) due to the limited page width

    My JD Fiddle below (Its a snippet of my code, not the entire page)

    http://jsfiddle.net/Dwaj6/

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Absolute is ok if you know what your doing. Unless you got some different stuff you can just lay the divs out in the order they go with no position. Divs will auto fill the space width wise. If you need them side by side use float left or display inline block

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to re-think the way that you have set this up if you want it to scale for different width browsers.

    To start with you would need to set the header to have an auto height and then allow the navigation items to wrap to a new line when the window is narrow. Although having dropdown menus that wrap can be awkward but you have little choice if that is your chosen menu design and you want to support various widths.

    Regarding the absolute positioning then you need to remove most (if not all) of it and put the content back in the flow of the page. The header as already mentioned should be in the flow of the page and not absolutely positioned and that will allow you to simply create a page wrapper (after the 100% wide header) that can hold your two columns in a centred layout. You just create a wrapper of defined percentage width and use auto margins. You can then float two main columns in that wrapper using a percentage width for each column and then stack content in each column as required remembering not to keep setting heights on everything. You rarely want to set a height on fluid content such as text because that doesn't allow it grow and stretch with the window or user preferences.

    Using content in the flow like this avoids using any positioning and allows content to react with its neighbours as required. You do need to take into account things like clearing and float containing but they are easily done these days.

    You then need to ensure that you create fluid containers for your content that can expand and contract as required which will mean scaling large images smaller when they reach a point that they may break out of the columns. (It may require media queries or may simply be as easy as setting a max-width:100% on the image and height:auto.)

    At some stage as the window gets narrower you would usually utilise media queries to turn the layout from two columns into one column which is quite easy when they are floated as you simply "unfloat" them and set them to width auto in the media query.

    Creating a fluid design is something that you need to build in from the start rather than trying to patch it up afterwards.

    See this recent thread for help along the same lines.

    Hope that helps

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    That's amazing

    Really appreciate the time you have spent writing this.

    Its something I want to move towards so will have a good read to digest it all.

    Thanks again!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's a rough start for you to show how you can lay the content out without absolute positioning or heights.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Yorkshire Amateur League</title>
    <style type="text/css">
    html { overflow-y:scroll }
    html, body, ul {
    	margin:0;
    	padding:0
    }
    body {
    	background: white;
    	color:#414141;
    	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    }
    ul { list-style:none }
    .inner:after, .clearfix:after, #navigation:after, #navigation > ul:after, #wrap:after {
    	content:".";
    	height:0;
    	display:block;
    	clear:both;
    	visibility:hidden;
    }
    .clearfix, .inner, #navigation, #navigation ul, #wrap:after { zoom:1.0 }
    /* header */
    #header {
    	background:#bed8f3;
    	border-bottom: 5px solid #515151;
    	margin:0 0 10px;
    	padding:0 0 1px;
    }
    .inner, #wrap {
    	max-width:1280px;
    	min-width:600px;
    	padding:0 10px;
    	margin:0 auto;
    }
    #wrap { padding:1px 10px; }
    .logo, .logo a, .logo span {
    	width:410px;
    	height:104px;
    	float:left;
    	position:relative;
    	cursor:pointer;
    	text-decoration:none;
    	overflow:hidden;
    }
    .logo span {
    	position:absolute;
    	top:0;
    	left:0;
    	background:url(http://www.togganet.co.uk/images/togganetheader.jpg) no-repeat 0 0;
    }
    #socialmedia {
    	float:right;
    	width:100px;
    	margin:12px 0 0;
    }
    #socialmedia li {
    	float:left;
    	margin:5px 5px 0 5px;
    }
    /*
    Navigation Bar****************************************************************************
    */
    
    #navigation {
    	width: 100%;
    	clear:both;
    }
    #navigation > ul > li {
    	list-style:inside none;
    	float:left;
    	display:block;
    	position:relative;
    	width:210px;
    }
    #navigation > ul > li > a {
    	outline:none;
    	display:block;
    	position:relative;
    	padding:0 20px;
    	line-height:42px;
    	font-family: "Century Gothic", Helvetica, Arial, sans-serif;
    	font-weight: bold;
    	text-align:center;
    	text-decoration:none;
    	text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
    }
    #navigation > ul > li:first-child > a { border-radius:5px 0 0 5px; }
    #navigation > ul > li > a:after {
    	content:'';
    	position:absolute;
    	border-right:1px solid;
    	top:-1px;
    	bottom:-1px;
    	right:-2px;
    	z-index:99;
    }
    #navigation ul li.has-sub:hover > a:after {
    	top:0;
    	bottom:0;
    }
    #navigation > ul > li.has-sub > a:before {
    	content:'';
    	position:absolute;
    	top:18px;
    	right:6px;
    	border:5px solid transparent;
    	border-top:5px solid #fff;
    }
    #navigation > ul > li.has-sub:hover > a:before { top:20px; }
    #navigation ul li.has-sub:hover > a {
    	background:#3f3f3f;
    	border-color:#3f3f3f;
    	top:-1px;
    	z-index:999;
    }
    #navigation ul li.has-sub:hover > ul { display:block; }
    #navigation ul li.has-sub > a:hover {
    	background:#3f3f3f;
    	border-color:#3f3f3f;
    }
    #navigation ul li > ul {
    	display:none;
    	position:absolute;
    	top:38px;
    	padding:10px 0;
    	background:#3f3f3f;
    	border-radius:0 0 5px 5px;
    	z-index:999;
    }
    #navigation ul li > ul { width:210px; }
    #navigation ul li > ul li {
    	display:block;
    	position:relative;
    }
    #navigation ul li > ul li a {
    	outline:none;
    	display:block;
    	position:relative;
    	margin:0;
    	padding:8px 20px;
    	font:10pt "Century Gothic", Helvetica, Arial, sans-serif;
    	color:#fff;
    	text-decoration:none;
    	text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
    }
    #navigation, #navigation > ul > li > ul > li a:hover { background:#bed8f3; }
    #navigation > ul > li > a {
    	border-right:1px solid #bed8f3;
    	color:#fff;
    }
    #navigation > ul > li > a:after { border-color:7da5d8; }
    #navigation > ul > li:hover > a {
    	background:#7da5d8;
    	font-size: 130%;
    }
    #wrap { clear:both; }
    /* two columns inside #wrap*/
    /* left column */
    #main {
    	float:left;
    	width:49%;
    }
    /*right column */
    #sidebar {
    	float:right;
    	width:49%;
    }
    /* generic box*/
    .box {
    	padding:10px;
    	background:#bed8f3;
    	border: 5px solid #515151;
    	clear:both;
    	margin:0 0 20px;
    }
    .box2 { background:#fff }
    h2.league, h3.highlight {
    	margin:0;
    	padding:10px;
    	background:#414141;
    	color:#fff;
    	font-size:140%;
    }
    .fl {
    	clear:both;
    }
    .fl img {
    	float:left;
    	margin:10px 10px 10px 1px;
    	outline:1px solid #000;
    }
    .fr {
    	clear:both;
    }
    .fr img {
    	float:right;
    	margin:10px 1px 10px 10px;
    	outline:1px solid #000;
    }
    img {
    	max-width:100%;
    	height:auto
    }
     @media screen and (max-width:620px) {
    .inner, #wrap {
    	min-width:0;
    	width:auto
    }
    #main, #sidebar {
    	float:none;
    	display:block;
    	margin:0;
    	width:auto;
    }
    }
    </style>
    </head>
    
    <body>
    <div id="header">
    		<div class="inner">
    				<h1 class="logo"><a href="#">Togganet.co.uk<span></span></a></h1>
    				<ul id="socialmedia">
    						<li class="facebook"> <a href="https://www.facebook.com/Togganet"><img src="http://www.togganet.co.uk/facebook.jpg" width="40" height= "40" alt="facebook logo" /> </a> </li>
    						<li class="twitter"> <a href="https://twitter.com/Togganet"><img src="http://www.togganet.co.uk/twitter.jpg" width="40" height= "40" alt="twitter logo" /> </a> </li>
    						<li class="googleplus"> <a href="https://plus.google.com/112836542433163989401" rel="publisher"><img src="http://www.togganet.co.uk/googleplus.jpg" width="40" height= "40" alt="googleplus logo" /> </a> </li>
    						<li class="youtube"> <a href="http://www.youtube.com/channel/UC-FMVrlafNsjppoxGmxoSIw/feed?view_as=public"><img src="http://www.togganet.co.uk/youtube.jpg" width="40" height= "40" alt="youtube logo" /> </a> </li>
    				</ul>
    				<!-- end of socialmedia-->
    				<div id="navigation">
    						<ul>
    								<li class='active'><a href='index.html'><span>Home</span></a></li>
    								<li class='has-sub'><a href='north.html'><span>North Yorkshire</span></a>
    										<ul>
    												<li><a href="north.html">North Yorks Home </a> </li>
    												<li><a href="YFL.html">York Football League </a> </li>
    												<li><a href="HAR.html">Harrogate & District </a> </li>
    												<li><a href="CRV.html">Craven & District </a> </li>
    												<li><a href="WEN.html">Wensleydale Creamery</a> </li>
    												<li><a href="SEL.html">Selby & District </a> </li>
    												<li><a href="SCAR.html">Scarborough & District</a> </li>
    												<li><a href="BECK.html">Beckett League</a> </li>
    										</ul>
    								</li>
    								<li class='has-sub'><a href='south.html'><span>South Yorkshire</span></a>
    										<ul>
    												<li><a href="south.html">South Yorks Home </a> </li>
    												<li><a href="SHC.html">Sheffield & Hallamshire County Senior</a> </li>
    												<li><a href="SYA.html">South Yorkshire Amateur</a> </li>
    												<li><a href="DON.html">Doncaster & District</a> </li>
    												<li><a href="SFP.html">Sheffield & District Fair Play</a> </li>
    												<li><a href="WRG.html">Wragg Over 35's League</a> </li>
    										</ul>
    								</li>
    								<li class='has-sub'><a href='east.html'><span>East Yorkshire</span></a>
    										<ul>
    												<li><a href="east.html">East Yorks Home </a> </li>
    												<li><a href="HPL.html">Humber Premier League</a> </li>
    												<li><a href="ERA.html">East Riding Amateur</a> </li>
    												<li><a href="ERC.html">East Riding County</a> </li>
    												<li><a href="DRF.html">Driffield & District</a> </li>
    										</ul>
    								</li>
    								<li class='has-sub'><a href='west.html'><span>West Yorkshire</span></a>
    										<ul>
    												<li><a href="west.html">West Yorks Home </a> </li>
    												<li><a href="WYL.html">West Yorkshire League</a>
    												<li><a href="WR.html">West Riding County Amateur</a>
    												<li><a href="yal.html">Yorkshire Amateur League</a> </li>
    												<li><a href="wake.html">Wakefield & District</a> </li>
    												<li><a href="spen.html">Spen Valley & District</a> </li>
    												<li><a href="lrt.html">Leeds Red Triangle</a> </li>
    												<li><a href="hdafl.html">Huddersfield & District</a> </li>
    												<li><a href="hal.html">Halifax & District</a> </li>
    												<li><a href="works.html">Huddersfield & District Works & Combination</a> </li>
    												<li><a href="ycfl.html">Yorkshire Christian League</a>
    										</ul>
    								</li>
    								<li class='active'><a href='yorkshirefootballpyramid.html'><span>Football Pyramid</span></a></li>
    						</ul>
    				</div>
    				<!-- end of navigation div --> 
    		</div>
    		<!-- end inner --> 
    </div>
    <!-- end header -->
    <div class="inner">
    		<div class="box">
    				<h2 class="league">Yorkshire Amateur League</h2>
    		</div>
    </div>
    <div id="wrap"> 
    		<!-- left column -->
    		<div id="main">
    				<div class="box">
    						<h3 class="highlight">Heading</h3>
    						<p class="fl"><img width="300" height="156" src="http://www.togganet.co.uk/blog/wp-content/uploads/2013/08/am1-300x156.jpg" alt="If in Doubt! Kick it ART!" class="size-medium wp-image-40"></p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box -->
    				
    				<div class="box box2">
    						<h3 class="highlight">Heading</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box -->
    				
    				<div class="box box2">
    						<h3 class="highlight">Heading</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box --> 
    				
    		</div>
    		<!-- end main -->
    		
    		<div id="sidebar">
    				<div class="box">
    						<h3 class="highlight">Heading</h3>
    						<p class="fr"><img width="300" height="156" src="http://www.togganet.co.uk/blog/wp-content/uploads/2013/08/am1-300x156.jpg" alt="If in Doubt! Kick it ART!" class="size-medium wp-image-40"></p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box -->
    				
    				<div class="box box2">
    						<h3 class="highlight">Heading</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box -->
    				<div class="box">
    						<h3 class="highlight">Heading</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box -->
    				
    				<div class="box box2">
    						<h3 class="highlight">Heading</h3>
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula dui, pharetra a lectus at, tincidunt commodo arcu. Aenean sed lobortis neque. Cras vel sollicitudin lorem, nec convallis metus. Curabitur risus nunc, convallis ut dapibus ut, interdum ut diam. Suspendisse erat leo, posuere eget tempor id, vehicula eget nibh. Aliquam ultricies purus eget pulvinar vestibulum. Donec urna libero, vehicula nec magna sagittis, pulvinar adipiscing sem. Sed scelerisque risus est, sit amet tempus metus mattis id. Morbi porttitor fermentum ligula, vitae ultricies turpis. Proin ut urna fringilla nisi tempus adipiscing eget mattis est. </p>
    				</div>
    				<!-- end box --> 
    				
    		</div>
    		<!-- end sidebar - right column --> 
    		
    </div>
    </body>
    </html>
    Just copy and paste and test in a browser and then resize to see how the page scales.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2013
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul thats fantastic

    Been playing with this and its great. Feels cleaner too, more flexible!

    Massive thanks!


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
  •