BamBamm Posted November 3, 2015 Share Posted November 3, 2015 I am trying to center my images with a background object. http://www.appleblossomentertainment.com What is it I need to do? #tooplate_middle { clear: both; width: 880px; height: 240px; padding: 50px; overflow: hidden; background: url(../images/middle.png);}#mid_title { font-size: 30px; line-height: 38px; font-weight: 400; color: #fff; margin-bottom: 20px; }@import url(http://fonts.googleapis.com/css?family=Varela+Round);html,body { background: #333 url("http://codepen.io/images/classy_fabric.png");}.slides { padding: 0; width: 609px; height: 220px; display: block; margin: 0 auto; position: relative;}.slides * { user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }.slides input { display: none;}.slide-container { display: block;}.slide { top: 0; opacity: 0; width: 609px; height: 220px; display: block; position: absolute; transform: scale(0); transition: all .7s ease-in-out;}.slide img { width: 100%; height: 100%;}.nav label { width: 200px; height: 100%; display: none; position: absolute; opacity: 0; z-index: 9; cursor: pointer; transition: opacity .2s; color: #FFF; font-size: 156pt; text-align: center; line-height: 380px; font-family: "Varela Round", sans-serif; background-color: rgba(255, 255, 255, .3); text-shadow: 0px 0px 15px rgb(119, 119, 119);}.slide:hover + .nav label { opacity: 0.5;}.nav label:hover { opacity: 1;}.nav .next { right: 0;}input:checked + .slide-container .slide { opacity: 1; transform: scale(1); transition: opacity 1s ease-in-out;}input:checked + .slide-container .nav label { display: block;}.nav-dots { width: 100%; bottom: 9px; height: 11px; display: block; position: absolute; text-align: center;}.nav-dots .nav-dot { top: -5px; width: 11px; height: 11px; margin: 0 4px; position: relative; border-radius: 100%; display: inline-block; background-color: rgba(0, 0, 0, 0.6);}.nav-dots .nav-dot:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.8);}input#img-1:checked ~ .nav-dots label#img-dot-1,input#img-2:checked ~ .nav-dots label#img-dot-2,input#img-3:checked ~ .nav-dots label#img-dot-3,input#img-4:checked ~ .nav-dots label#img-dot-4,input#img-5:checked ~ .nav-dots label#img-dot-5,input#img-6:checked ~ .nav-dots label#img-dot-6 { background: rgba(0, 0, 0, 0.8);}#mid_left { float:left; width:400px; }#mid_slider { position:relative; float: right; width: 440px; height: 220px; }#tooplate_middle img { float: right; margin-left: 60px; }#mid_left p { margin-bottom: 30px; color: #fff; } The image slider I wanted was more like the one at http://www.eaglegunusa.com/, but I couldn't find code on the net for it. 1 Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted November 3, 2015 Share Posted November 3, 2015 The validator reports 22 errors: https://validator.w3.org/check?uri=http%3A%2F%2Fwww.appleblossomentertainment.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 Most of them are serious structural error, plus you are using a very weak doctype and some errors are related to using non-xml formats in an XHTML page. You should not expect CSS properties to be consistently applied when the structure is broken. So start by fixing the errors and then see how much of a problem (if any) that you still have. Link to comment Share on other sites More sharing options...
BamBamm Posted November 3, 2015 Author Share Posted November 3, 2015 (edited) Screw it, I guess I have to pay someone. Thanks for letting me know. Edited November 3, 2015 by BamBamm Link to comment Share on other sites More sharing options...
dauruk0512 Posted November 4, 2015 Share Posted November 4, 2015 just choose some one here to fixed your problem Link to comment Share on other sites More sharing options...
marryjhonson Posted November 21, 2015 Share Posted November 21, 2015 <center><img src="lalpicture.jpg" alt="what image shows" height="150" width="200"></center> Link to comment Share on other sites More sharing options...
dsonesuk Posted November 21, 2015 Share Posted November 21, 2015 <center><img src="lalpicture.jpg" alt="what image shows" height="150" width="200"></center> Validate that solution and prepare thy self for the truth. Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted November 24, 2015 Share Posted November 24, 2015 <center><img src="lalpicture.jpg" alt="what image shows" height="150" width="200"></center> It is hard believe that anyone would still be suggesting something that is obsolete and has not been considered good practice since the last century. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now