caitlind
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by caitlind
-
-
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!
Glitches During HTML Download
in HTML/XHTML
Posted
Hello! I am by no means a professional - excuse what may be a silly question, and definitely silly code!
I have 2 problems I would define as glitching and shifting that I cannot solve:
Here is the site I am discussing: http://conservefineartsonoma.com/index.html
1.) A complete shift of text and a smaller header logo when you click the CONTACT link. http://conservefineartsonoma.com/Contact.html
2.) When each link on the page is clicked, the entire page formatting shifts until the page has downloaded. What is this?? It's driving me bonkers....
I have included the CSS and a few pages from the site to this posting since I have no idea which part of the code is at fault for either of these problems.
Any help would very VERY much appreciated - trying to get it nice n smooth!
stylesheet.css
Contact.html
Deakin.html
index.html