[Solved] Why does # make my css work?

James_Purcell · May 19, 2016

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

davej · May 19, 2016

My initial thought is: "...another absolute positioning mess."

But then -- I am not a css guru.

Ingolme · 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.

James_Purcell · 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.

James_Purcell · 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..

davej · 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>

James_Purcell · 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.

davej · 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.

James_Purcell · 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.

Sign In

[Solved] Why does # make my css work?

Recommended Posts

James_Purcell

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

James_Purcell

Link to comment

Share on other sites

James_Purcell

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

James_Purcell

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

James_Purcell

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity