Jump to content

Search the Community

Showing results for tags 'full bleed'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. Hello All, I am having an issue with a simple site where I would like an image inside a div to bleed top and bottom, no scroll bar, and have text on either side that is centered horizontally with the image. This is what I have for CSS: body { margin:0; padding:0; border:0; width:100%; background:#fff; max-height:100%; font-size:90%;}a { color:#7e99ad; text-decoration:none; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}a:hover { color:#000000; text-decoration:none;}a:active{ color:#000000; text-decoration:none;}h1 { margin:.8em 0 .2em 0; padding:0; font-size:18px; font-weight:lighter;}h2, h3 { margin:.8em 0 .2em 0; padding:0; font-size:14px; font-weight:lighter;}p { margin:.4em 0 .8em 0; padding:0;}img { margin:10px 0 0px;}#bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;}#bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%;}#ads img { display:block; padding-top:0px;}/* column container */.colmask { position:relative; clear:both; float:left; max-width:100%; overflow:hidden; }/* common column settings */.colright,.colmid,.colleft { float:left; max-width:100%; position:relative;}.col1{ float:left; position:relative; overflow:hidden; margin: 0; white-space: nowrap; padding: 0; text-align: center;}.col2,.col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden;}/* 2 Column (left menu) settings */.leftmenu { background:#fff; /* right column background colour */}.leftmenu .colleft { right:75%; /* right column width */ background:#fff; /* left column background colour */}.leftmenu .col1 { width:71%; /* right column content width */ left:102%; /* 100% plus left column left padding */}.leftmenu .col2 { width:13%; /* left column content width (column width minus left and right padding) */ left:6%; /* (right column left and right padding) plus (left column left padding) */ font:"Plantagenet Cherokee", "New times Roman", serif; color:#86A1BC;} /* Footer styles */#footer { clear:both; float:left; width:100%; border-top:1px solid #000;}#footer p { padding:10px; margin:0;} This is the HTML: <!doctype html><html><head><meta charset="UTF-8"><title>Thornton Rockwell Preservation Services</title><link href="stylesheet.css" rel="stylesheet" type="text/css"></head><body><!--CODE STARTS HERE --><div class="colmask leftmenu"> <div class="colleft"> <div class="col1"> <!-- Column 1 start --><h1><</h1> <img src="images/Abraham_Garfield/beforeafter.jpg" style="float: center; max-width: 100%;"> <h1>></h1> <!-- Column 1 end --> </div> <div class="col2"> <!-- Column 2 start --> <div id="ads"> <a href="Contact.html"><img src="images/Logo.png" width="100%"; border="0" alt="Thornton Rockwell Fine Art Conservation" /></a> </div> <br/> <br> <br/> <table style="width:75%; text-align:right" /> <tr> <td> <h1><p><a href="index.html">Portfolio</a></p></h1> <h1><p><a href="AGarfield.html">Abraham Garfield</a></p></h1> <h2><p><a href="Cenci.html">Beatrice Cenci 17th Century Copy</a></p></h2> <h2><p><a href="Deakin.html">Edwin Deakin</a></p></h2> <h2><p><a href="Healy.html">G.P.A. Healy</a></p></h2> <h2><p><a href="LadyJane.html">Lady Jane Grey</a></p></h2> <h2><p><a href="Hurd.html">Peter Hurd</a></p></h2> <h2><p><a href="RussianIcon.html">Russian Icon</a></p></h2> <h2><p><a href="Sully.html">Thomas Sully</a></p></h2> <h2><p><a href="Coulter.html">William A. Coulter</a></p></h2> </td> </tr> <tr> <td> <br/> <br/> <h1><p><a href="Contact.html">Contact</a></p></h1> </td> </tr> </div> <!-- Column 2 end --> </div> </div></div></body></html> Check out my screen shots as well. You will see that the page scrolls to fit in the whole image. I would like the image to bleed on top and bottom of page with NO scroll. I would like the arrows to be on either side of the image, horizontally centered with the image. Help!
×
×
  • Create New...