HTML - Container Help - Full Bleed Look And Feel
Hi I'm having trouble acheiving something with a landing page.
I'm trying to get a 'full bleed' efect with a header, body, footer type of thing. I attached a mockup and folder with html/css/images for the landing page for reference For some reason I can't get the white background. I had it working fine when i first started writing the code, and as soon as I created a LEFT and RIGHT div column it disappeared. Any advice? Thanks! Similar TutorialsI want to know how to make a div stretch to the full height of a container! Here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>This site is currentely out of order! Chack back later.</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container" style="display:block"> <div id="leftside" style="display:block"><img src="images/leftside.gif" alt="" /></div> <div id="logo" style="display:block"> <img src="images/logo.gif" alt="" width="315" height="140" title="" /> </div> <div id="content" style="display:block"> <br /> <br /> <br /> <br /> <br /> <br /> </div> </div> </body> </html> And then the css: Code: /* START - Master */ div {display:none} /* Keep NO MATTER what - Keep at top */ body {background-color:#000000; background-image: url('images/watermark.gif'); background-repeat: no-repeat; background-attachment: fixed} #container {width: 85%; margin-left: 7.5%; background-color: #666666; color: #030303} #leftside {float: left; min-height: 100%; height: 100%; background-image: url('images/leftside.gif'); background-repeat: repeat-y} /* END - Master */ /* START - Header - No change */ #logo {width: 85%; margin-left: 7.5%; background-color: #7B7B7B; text-align: left; font-size:15pt; border: none} /* END - Header - No change */ /* START - Content */ /* END - Content */ /* START - Footer - No change */ /* END - Footer - No change */ The "leftside" image is supposed to be the full length of the header + content. Thanks! I know this is very rudimentary, but Im having trouble getting the header and footer of my site to bleed off the page. Right now I have it contained, and you can see that there is negative space around these elements. See here http://sassnyc.com/stage/andrewsass.com/ I'm trying to figure out how to fix this, and I know its simple... All of my links are relative, meaning if I type: Code: <a href="http://www.google.com">Google</a> the link tries to go to "http://<mydomain>.com/http://www.google.com" Am I missing something? I'm making a small little template for just messing around matching colours, and i've tried putting a vertical navigation bar on the left. I have the div with a <ul> inside of it, but it's not taking up the full width of the div. It's taking up 75% of the div. Does anybody have any answers for it happening? I have posted my code below. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <title>Untitled Document</title> <style type="text/css"> body { background-color: #6698FF; font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background: #4E5869; margin: 0; padding: 0; color: #000; } </style> </head> <body> <div id="wrap"> <div id="container"> <div id="header"></div> <div id="sidebar1"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> </div> <div id="content">dfgfdgdfg</div> <div id="sidebar2">sgdsgdfg</div> </div> </div> </body> </html> HTML Code: #wrap { width: 1050px; margin: 0px auto; } ul.nav { list-style: none; border-top: 1px solid #666; } ul.nav li { border-bottom: 1px solid #666; } ul.nav a, ul.nav a:visited { padding: 5px 5px 5px 15px; display: block; text-decoration: none; background: #8090AB; color: #000; } ul.nav a:hover, ul.nav a:active, ul.nav a:focus { background: #6F7D94; color: #FFF; } #container{ width:800px; min-height:700px; margin-left:auto; margin-right:auto; background-color:#5CB3FF; } #header{ } #sidebar1{ width:20%; float:left; background-color:#A0CFEC; } #content{ width:60%; float:left; background-color:#FFFFFF; } #sidebar2{ width:20%; float:left; background-color:#A0CFEC; } I need to create a link that will bring up a page that shows nothing but the <body> of the page, with no menu bars, status bars etc. I have an old page created with FrontPage years ago that does it perfectly, nothing from the browser shows at all, not menu, status scroll, etc shows. However, on my new fancy Joomla 1.5.10 site I cannot get it to work... even with the same code pasted in from the old site. I cannot get it not to display the menu and status bars when I try it on my Joomla site.. This is the code from the old site: <a href="BlackPage.htm"> <img border="0" src="luscher%20black%202.jpg" lowsrc="luscher%20black%202.jpg" width="100" height="71"></a> It even has a bunch of garbage in it and it works perfectly. Why can't I get the same thing to work on my Joomla site? Thanks Larry Hey all, i have a question. What is the main difference between an academic version and a full version of a program such as Dreamweaver? Are you only supposed to use the Academic version for educational purposes only? Meaning if i design a website with an academic version i can't legally put it up as a business website? I was always curious about how this actually works, thanks. Hi all friends, I am a photographer and I am trying to set up my website with a full screen gallery. The address is: http://provasitofoto.altervista.org If you go to the portfolio section and click on the any thumbnail you will see the chosen image go to full screen which is actually what I would love to have but....as you will probably notice, you will see only a part of the image, even if it is full screen it is "cutted". Now of course what I need is the possibility to view the entire image full screen, even stretched but with the ability to fit in any screen and browser. I am new to this kind of things znd so here I am asking for your help. Please consider me like a 5 years old baby and so explain to me step by step what I should do to solve this problem. Thanks in advance to any kind soul who are will to help me. God bless you. Marco from Italy Hi all I only know very basic HTML and at the moment. I have an image that is hosted on Buzztouch. http://www.buzztouch.com/application...elfordboat.jpg Now my Question What code would I need to write so when you click on a page the image appears full screen no mater what brower you use it on. ? thanks This splash page is supposed to take you to my website in "full-screen" ,but the pop-up keeps coming back as an error.. I know it's something simple,but I can't figure out what I'm doing wrong..can someone look at my code and let me know what is wrong? it's here - http://www.practiceboard.com/?4898323 Thanks!! Heather I'm fairly new to making websites, and I want to make a website with a full screen background image jpg, but I'd like it to be full screen in all resolutions. Is this posible? I want to use this image as a background http://img236.imageshack.us/img236/4...dexbackcu3.jpg and then add menus and text content. any tips? thanks! jdawest I have a thumbnail jpg on my main page and would like to display the full size jpg on a separate page when the thumbnail is clicked. I know, a total newbie thing, but you know how to do it and I don't! A simple example would be much appreciated. Hi, Im trying to get a website up and running for a small business just starting up without the finances to pay for a designer, I know a little bit of html, and have used dreamweaver before but im going to try and stick to HTML on this one if its possible so i can quite easily change it as i need to. This is what im trying to create http://img17.imageshack.us/my.php?image=helpq.jpg I have the black logo, as a large rectangle only. I have added those long black dividers in paint to show you what im trying to do. Been playing about with it for hours today and got no where I know i could do it as one MASSIVE image but that wouldnt be very economical would it. Thanks for any advice. Hello, I've got a pesky bug that I can't figure out... I'm designing a website for a record store and the width is a little larger than 800px.. on larger screens, it loads just fine.. however when I try to load it on a smaller screen and scroll to the right (to see the info that is cut off) all of the background colors of my elements continue to be cut off. This does not occur when I start with a small window on a big screen and resize... hope that makes some sort of sense here's the site Hi: This is probably a silly trivial question but I can't seem to find the answer in my books ('Beginning Web Programming with HTML,XHTML. and CSS' by Jon Duckett, and 'Javascript - The Definitive Guide (5th Edition) by David Flanagan): How do I ensure that my client's browser window is set to 'Full Screen' when loading is complete ?? (btw, my current page looks confusing if the client's browser window is much less than full size ) I hope there is something llike: onload window.size := 'fullscreen' )) Thanks for any hints - and for any pointers in my books above where I can read up properly on this) -Mel Smith Hi All, Nice site BTW, my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ? Can anybody help me out Thanks Hello. I've searched numerous times on Google for answers to this problem I'm having and I'm getting no help. I've posted here before with the same website but I have a different layout (or I'm making one) so I have a different problem. To view the website click here, although I don't have the new layout up on the web yet. I have a picture as the background and I have the semi-transparent tables, but the text is semi-transparent as well and I really don't like that. The code I have for the semi-transparent tables is: Code: table, tr, td { filter: alpha(opacity=75);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75); -moz-opacity:0.75; } So that's all fine and good, but I can't get the text to show up solid. Is there a way that I can have the semi-transparent tables and full opacity text? I'm extremely bad with CSS, so I don't know much what I'm doing here. Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe There are 5 copies of the same images are placed in a folder i.e. large(1024*768),medium(500*375),small(240*180),thu mnail(75*75),square(100*50) in size.... The following code upload number of Geocoded images(square size) when the page loads.I want when someone click on the any Geocoded image on the page ,it should show the large image(1024*768) of the same.And further click on the large image it must show again the square size image of the same. Following is the actual code.It is in .js file . var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var OSVMain = (function() { var map, markers, map_move_timeout; var photos = {}; function mapChange() { if( map_move_timeout ) clearTimeout(map_move_timeout); map_move_timeout = setTimeout(mapChangeTimeout, 500); updateLinks(); } function updateLinks() { var center = OSV.getMapCenter(map); var zoom = map.getZoom(); $('#permalink').attr('href',OSV.getURLBase()+'?lat ='+center.lat+'&lon='+center.lon+'&zoom='+zoom); $('#kmllink').attr('href',getLocateLink('kml')); } function getLocateLink(format) { var extent = OSV.getMapExtent(map); var url = OSV.getURLBase()+'/api/photos/locate.'+format+'?bbox='; url += [ extent.left, extent.bottom, extent.right, extent.top].join(','); return url; } function mapChangeTimeout() { map_move_timeout = null; var url = getLocateLink('json'); $.get( url, null, photosLoaded, 'json' ); } function photosLoaded(json) { var new_photos = {}; var size = new OpenLayers.Size(50, 50); var offset = new OpenLayers.Pixel(-25, -25); for( var i = 0, l = json.length; i < l; ++i ) { var p = new OSVPhoto(json[i]); if( photos[p.data.id] ) { new_photos[p.data.id] = photos[p.data.id]; photos[p.data.id] = null; } else { var position = new OpenLayers.LonLat(p.data.lon,p.data.lat); var icon = new OpenLayers.Icon(p.url('square'), size, offset); p.marker = new OpenLayers.Marker(position.clone().transform(epsg4 326, map.getProjectionObject()), icon); new_photos[p.data.id] = p; markers.addMarker(p.marker); } } for( var k in photos ) { var p = photos[k]; if( p && p.marker ) markers.removeMarker(p.marker); } photos = new_photos; } function setup() { var vectors; var popup; map = new OpenLayers.Map($('#map').get(0), { controls: [ new OpenLayers.Control.ArgParser(), new OpenLayers.Control.Attribution(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar() ], units: "m", maxResolution: 156543.0339, numZoomLevels: 20, displayProjection: new OpenLayers.Projection("EPSG:4326") }); var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", { displayOutsideMaxExtent: true, wrapDateLine: true }); map.addLayer(mapnik); var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", { displayOutsideMaxExtent: true, wrapDateLine: true }); map.addLayer(osmarender); var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels); var start = OSV.getStartLocation(); var numzoom = map.getNumZoomLevels(); if (start.zoom >= numzoom) start.zoom = numzoom - 1; map.setCenter(start.pos.clone().transform(epsg4326 , map.getProjectionObject()), start.zoom); OSV.setupMapEventHandlers(map); map.events.register("moveend", map, mapChange); map.events.register("zoomend", map, mapChange); mapChange(); markers = new OpenLayers.Layer.Markers("Markers", { displayInLayerSwitcher: false, numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508), maxResolution: 156543, units: "m", projection: "EPSG:900913" }); map.addLayer(markers); } return { setup: setup, 1:1 }; })(); $(function(){ OSVMain.setup(); }); Any suggestions ? Thanking you Below is code that works fine, but I wonder if someone could help so that it opens in a full size window so that they don't have to resize the pop up. Thank you. <p><frameset frameborder="0" rows="10%,*"></frameset><frame src="menu.html"></frame><frame name="frame"></frame>Adjust the percentage to give your frames the right height. The first frame is pointing at your menu so here is menu.html :</p> <table align="center"> <tbody> <tr> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 1</option> <option value="" selected="selected">Drop down 1</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 2</option> <option value="" selected="selected">Drop down 2</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 3</option> <option value="" selected="selected">Drop down 3</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 4</option> <option value="" selected="selected">Drop down 4</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> </tr> </tbody> </table> <table> <script language=Javascript> function change(select) { if( select.options[ select.selectedIndex].value) { select.form.action = select.options[ select.selectedIndex].value; select.form.submit(); } } </script> <tbody> </tbody> </table> |