James_Purcell Posted May 19, 2016 Share Posted May 19, 2016 (edited) I need some help with http://www.ajb2k3.co.uk/AETT/template.html for some reason I cant get the css to work properly unless I add a "#" to the beginning of the line defining the opening of the content div. (i.e) # <div class="content"> (/\ That hash) If I take it away the code fails to display properly. Can someone point out what I'm missing? I've attached the html and css for this version if that will help. Please and thank you. template.html Edited May 20, 2016 by James_Purcell Link to comment Share on other sites More sharing options...
davej Posted May 19, 2016 Share Posted May 19, 2016 My initial thought is: "...another absolute positioning mess." But then -- I am not a css guru. Link to comment Share on other sites More sharing options...
Ingolme Posted May 19, 2016 Share Posted May 19, 2016 The issue is collapsing margins. The margin of the child element is no longer contained by the parent. An easy solution is to add "overflow: hidden" to the ".li" selector. I have to point out that your page took much too long to load. I would suggest using smaller images. One of your images is nearly 2 megabytes, the other one is 750 kilobytes and the smallest one is 360 kilobytes, which is still quite a lot. Your page is taking 30 seconds to a minute to load, most users would have closed the tab and left by then. Link to comment Share on other sites More sharing options...
James_Purcell Posted May 20, 2016 Author Share Posted May 20, 2016 The issue is collapsing margins. The margin of the child element is no longer contained by the parent. An easy solution is to add "overflow: hidden" to the ".li" selector. I have to point out that your page took much too long to load. I would suggest using smaller images. One of your images is nearly 2 megabytes, the other one is 750 kilobytes and the smallest one is 360 kilobytes, which is still quite a lot. Your page is taking 30 seconds to a minute to load, most users would have closed the tab and left by then. Ok I will look into that. overflow issue. Yeh, the size is stupid as I'm yet to sort out the compression. Link to comment Share on other sites More sharing options...
James_Purcell Posted May 20, 2016 Author Share Posted May 20, 2016 My initial thought is: "...another absolute positioning mess." But then -- I am not a css guru. .... don't mention that please, i am , er trying to find the placements before making it more flexible.. Link to comment Share on other sites More sharing options...
davej Posted May 23, 2016 Share Posted May 23, 2016 Here is a version that gets rid of the absolute positioning everywhere except inside the buttons. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="Captain James Purcell"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Diaries of James Purcell</title> <style> *{margin:0; padding:0;} p{margin:16px 0 10px 10px;} body{ background-image: url("image/01.jpg");/* purple pattern */ } .wrap{ background-image: url("image/Bluetablet.png");/* blue pattern with gold rings */ background-repeat: no-repeat; margin-left: 28px; margin-top: 20px; padding-bottom: 100px; overflow: auto; } .content{ background-image: url("image/content.png"); /* gray page */ background-repeat: no-repeat; width: 700px; margin-left: 15px; margin-top: 160px; padding-bottom: 6px; overflow: auto; } .Button1,.Button1:link,.Button1:visited,.Button2,.Button2:link,.Button2:visited{ background-image:url('image/wp023622a1_06.png'); /* yellowed paper */ background-position:-7px -80px; height:38px; width:64px; /*border:1px solid #555;*/ margin-left:20px; display:block; float:left; cursor:pointer; position:relative; } .Button1 span,.Button2 span{ color:#3d3d3d; text-align:center; font-size:11px; font-family:Arial,sans-serif; font-weight:normal; text-decoration:none; text-transform:none; font-style:normal; position:absolute; /* this is absolute inside relative */ bottom:3px; left:0; right:0; } .Button2,.Button2:link,.Button2:visited{ background-position:-7px 0px; height:25px; width:64px; margin-left:10px; outline-style:none; } .Button2:hover{height:38px;background-position:-7px -80px;} .Button2:active{height:38px;background-position:-7px -80px;} .menu{margin:0 0 0 12px;} .firstp{clear:both;margin-top:46px;} </style> </head> <body> <div class="wrap"> <div class="content"> <div class="menu"> <a href="index.html" id="nav_1_B1" class="Button1"><span>Home</span></a> <a href="http://purbry.wordpress.com" id="nav_1_B2" class="Button2"><span>Blog</span></a> <a href="Books.html" id="nav_1_B3" class="Button2"><span>Books</span></a> <a href="Downloads.html" id="nav_1_B4" class="Button2"><span>Downloads</span></a> <a href="Links.html" id="nav_1_B5" class="Button2"><span>Links</span></a> <a href="Shop.html" id="nav_1_B6" class="Button2"><span>Shop</span></a> <a href="About.html" id="nav_1_B7" class="Button2"><span>About</span></a> </div> <p class="firstp">Welcome to The Diaries of James Purcell.</p> <p>The Diaries of James Purcell are a collection of works covering the life of James Purcell based on personal diaries and records starting in 1872.</p> <p>These records when written into something that those inexperience in his hand writing can read, will show both the highs and lows of his life and that of his friends.</p> </div> </div> </body> </html> 1 Link to comment Share on other sites More sharing options...
James_Purcell Posted May 28, 2016 Author Share Posted May 28, 2016 Thanks, but you may need to get your screen looked at. The background is a deep red and the content is cream. Link to comment Share on other sites More sharing options...
davej Posted May 28, 2016 Share Posted May 28, 2016 Reddish purple? Anyway a real web-design expert would take those background patterns into Photoshop or a similar graphics editor and edit them so that a much smaller image could be used. In other words the pattern would be altered so that it would repeat cleanly both horizontally and vertically. 1 Link to comment Share on other sites More sharing options...
James_Purcell Posted May 29, 2016 Author Share Posted May 29, 2016 Reddish purple? Anyway a real web-design expert would take those background patterns into Photoshop or a similar graphics editor and edit them so that a much smaller image could be used. In other words the pattern would be altered so that it would repeat cleanly both horizontally and vertically. I am working on that atm! Seeing if I can get away with 3 different sizes of each. This is no where near needed to be made a live template. 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