9 Replies - 650 Views - Last Post: 26 May 2014 - 05:21 PM

#1 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 67
  • Joined: 23-April 14

Can't create a margin around my image

Posted 25 May 2014 - 04:58 AM

I'm trying desperately to create a margin around an image but no matter what I do, it never seems to work. I've now made a ridiculously large margin so I can easily see if it's working, but it still isn't.


CSS

body
{
background: url('background.jpg') repeat-x fixed;
font-size:100%;
}

h1
{
color:#FFBF2A;
text-align:left;
text-transform:uppercase;
text-indent:50px;
text-shadow: 4px 4px 10px #000000;
font-family:Garamond, serif;
font-size:3em;
}

h2
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2.75em;
}

h2
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2.5em;
}

h3
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2.25em;
}

h4
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2em;
}

h5
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:1.75em;
}

h6
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:1.5em;
}

p
{
color:#FFFFFF;
text-align:justify;
font-family:Helvetica, sans-serif;
font-size:1em;
}

a:link
{
color:#FFFFFF;
text-decoration:underline;
}

a:visited
{
color:#C0C0C0;
text-decoration:underline;
}

a:hover
{
color:#FFFF00;
text-decoration:none;
}

a:active
{
color:#FFFF99;
text-decoration:underline;
}

div.header
{
/*width:100px;*/
height:100px;
background-color:#000000;
/*opacity:0.4;*//* Transparent bar at top. Needs work */
/*filter:alpha(opacity=40); /*For IE8 and earlier */
align:center;*/
}*/

img.margin
{
margin-top:100px;
}


HTML

<!DOCTYPE html>

<html>

<head>

 <!--[if lt IE 9]>
 <script src="html5shiv.js"></script>
 <![endif]-->

 <link rel="stylesheet" type="text/css" href="style.css">

 <title>
  JRCSalter.com - The official home of JRC Salter
 </title>

</head>

<body>

<!-- <div class='header'> -->
<img class='margin' src='jrcsalterdotcom_Logo_JPG.jpg' alt='Home' height='90px'>
<!-- </div> -->
<h1>JRCSalter.com</h1>
<p><a href='http://www.calnis.com/'>Visit Calnis</a></p>

</body>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Can't create a margin around my image

#2 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,488
  • Joined: 12-December 12

Re: Can't create a margin around my image

Posted 25 May 2014 - 07:15 AM

The css for div.header is broken (unmatched comment-delimiters) which breaks the img.margin rule that follows this.
Was This Post Helpful? 1
  • +
  • -

#3 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 67
  • Joined: 23-April 14

Re: Can't create a margin around my image

Posted 25 May 2014 - 08:32 AM

Thanks. Those bleedin' comments. It's amazing the things you miss.

Okay, so these are the changes:

div.header
{
/*width:100px;*/
height:100px;
background-color:#000000;
opacity:0.4;/* Transparent bar at top. Needs work */
/*filter:alpha(opacity=40); /*For IE8 and earlier */
align:center;
}

img.margin
{
margin-top:5px;
margin-left:5px;
}


but I'm still encountering another persistent problem. I want the bar at the top to be transparent, but not the image on top. Every time I run it, the image is just as transparent as the bar.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,488
  • Joined: 12-December 12

Re: Can't create a margin around my image

Posted 25 May 2014 - 08:45 AM

I assume you mean semi-transparent? For 'transparent' you just wouldn't set a background colour, or use 'transparent'.

The best way to prevent the child from (effectively) inheriting opacity is to use rgba to set the transparency (alpha):
div.header {
    width: 300px;
    height: 100px;
    background-color: rgba(240,240,240,0.7);
    /* opacity:0.4; Transparent bar at top. Needs work */
    /*filter:alpha(opacity=40); For IE8 and earlier */
    text-align: center;
}

Note that it is text-align, not align.
Was This Post Helpful? 0
  • +
  • -

#5 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 67
  • Joined: 23-April 14

Re: Can't create a margin around my image

Posted 25 May 2014 - 10:55 AM

Okay so this is my cleaned up code and it works fine now. Except I can't get the main part to be in a box like the header and footer. I've copied and pasted the same code and just given it a different class, but it still isn't working. For clarification, the part I'm struggling with is the div.content part:

CSS
body
{
background: url('background.jpg') repeat-x fixed;
font-size:100%;
}

h1
{
margin-left:10%;
margin-right:10%;
color:#FFBF2A;
text-align:left;
text-transform:uppercase;
text-indent:50px;
text-shadow: 4px 4px 10px #000000;
font-family:Garamond, serif;
font-size:3em;
}

h2
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2.75em;
}

h2
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2.5em;
}

h3
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2.25em;
}

h4
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:2em;
}

h5
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:1.75em;
}

h6
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:1.5em;
}

p
{
margin-left:10%;
margin-right:10%;
color:#FFFFFF;
text-align:justify;
font-family:Helvetica, sans-serif;
font-size:1em;
}

a:link
{
color:#FFFFFF;
text-decoration:underline;
}

a:visited
{
color:#C0C0C0;
text-decoration:underline;
}

a:hover
{
color:#FFFF00;
text-decoration:none;
}

a:active
{
color:#FFFF99;
text-decoration:underline;
}

div.header
{
margin-left:10%;
margin-top:5%;
margin-right:10%;
background-color: rgba(35, 35, 35, 0.6);
}

div.menu
{
margin-left:10%;
margin-top:10px;
margin-right:10%;
background-color:transparent;
}

div.content
{
margin-left:10%;
margin-top:5%;
margin-right:10%;
background-color: rgba(35, 35, 35, 0.6);
}

div.footer
{
margin-left:10%;
margin-top:2%;
margin-right:10%;
background-color: rgba(35, 35, 35, 0.6);
}

img.margin
{
margin: 10px;
}


HTML
<!DOCTYPE html>

<html>

<head>

 <!--[if lt IE 9]>
 <script src="html5shiv.js"></script>
 <![endif]-->

 <link rel="stylesheet" type="text/css" href="style.css">

 <title>
  JRCSalter.com - The official home of JRC Salter
 </title>

</head>

<body>

<div class='header'>
<img class='margin' src='jrcsalterdotcom_Logo_JPG.jpg' alt='Home' height='90px'>
</div>

<div class='menu'>
<p class='menu_bar'>This | is | the | menu</p>
</div>

<div class='content'>
<h1>JRCSalter.com</h1>
<p><a href='http://www.calnis.com/'>Visit Calnis</a></p>
</div>

<div class='footer'>
<h6>JRCSalter.com</h6>
<p><a href='http://www.calnis.com/'>Visit Calnis</a></p>
</div>

</body>

</html>


Now, I can change the class to 'header' and it does what I want it to (though I can't use 'header' because I'm going to do other things with it in the future), but I don't see why it doesn't work right when I use the class I want.
Was This Post Helpful? 0
  • +
  • -

#6 grizrule  Icon User is offline

  • D.I.C Head

Reputation: 9
  • View blog
  • Posts: 88
  • Joined: 29-December 13

Re: Can't create a margin around my image

Posted 25 May 2014 - 11:30 AM

Although this doesn't solve your problem but can make your code more readable, I noticed the styling for h2 - h6 was repeated, except for the size.

Revised CSS (for h2 - h6, not h1):


h1
{
margin-left:10%;
margin-right:10%;
color:#FFBF2A;
text-align:left;
text-transform:uppercase;
text-indent:50px;
text-shadow: 4px 4px 10px #000000;
font-family:Garamond, serif;
font-size:3em;
}

h2,h3,h4,h5,h6 
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
}

h2
{
font-size:2.75em;
}

h2
{
font-size:2.5em;
}

h3
{
font-size:2.25em;
}

h4
{
font-size:2em;
}

h5
{
font-size:1.75em;
}

h6
{
font-size:1.5em;
}



Was This Post Helpful? 0
  • +
  • -

#7 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 67
  • Joined: 23-April 14

Re: Can't create a margin around my image

Posted 26 May 2014 - 12:36 PM

Okay, so everything seems fine and I've got the layout I want. But I've tested resizing the window, and the elements to the right of my first image jump down to below it when the window is narrow. This is good, but the translucent bar doesn't accommodate them when they do this. It's not a huge issue, as few people have their windows that narrow, but I'm also thinking of how it might appear on a mobile, plus I like to make sure it all works as I want it to regardless.

CSS:

body
{
background: url('background.jpg') repeat-x fixed;
font-size:100%;
}

h1, h2, h3, h4, h5, h6, p
{
margin:5px;
}

h1
{
margin-left:10px;
margin-right:10px;
color:#FFBF2A;
text-align:left;
text-transform:uppercase;
text-indent:50px;
text-shadow: 4px 4px 10px #000000;
font-family:Garamond, serif;
font-size:3em;
}

h6
{
color:#FFFFFF;
text-align:left;
text-indent:50px;
font-family:Garamond, serif;
font-size:1.5em;
}

p
{
margin-left:10px;
margin-right:10px;
color:#FFFFFF;
text-align:justify;
font-family:Helvetica, sans-serif;
font-size:1em;
}

a:link
{
color:#FFFFFF;
text-decoration:underline;
}

a:visited
{
color:#C0C0C0;
text-decoration:underline;
}

a:hover
{
color:#FFFF00;
text-decoration:none;
}

a:active
{
color:#FFFF99;
text-decoration:underline;
}

div.header
{
height:120px;
margin-left:10%;
margin-top:5%;
margin-right:10%;
background-color: rgba(35, 35, 35, 0.6);
}

div.menu
{
margin-left:10%;
margin-top:10px;
margin-right:10%;
background-color:transparent;
clear:both;
}

div.content
{
margin-left:10%;
margin-top:10px;
margin-right:5px;
margin-bottom:10px;
width:59.5%;
background-color: rgba(35, 35, 35, 0.6);
float:left;
}

div.sidebar
{
margin-top:10px;
margin-right:10%;
margin-left:5px;
margin-bottom:10px;
width:19.5%;
background-color: rgba(240, 240, 240, 0.6);
float:right;
}

div.footer
{
margin-left:10%;
margin-right:10%;
background-color: rgba(35, 35, 35, 0.6);
clear:both;
}

div.stuff
{
width:200px;
height:70px;
float:left;
}

img
{
margin:10px;
float:left;
}


HTML:
<!DOCTYPE html>

<html>

<head>

 <!--[if lt IE 9]>
 <script src="html5shiv.js"></script>
 <![endif]-->

 <link rel="stylesheet" type="text/css" href="style.css">

 <title>
  JRCSalter.com - The official home of JRC Salter
 </title>

</head>

<body>

<div class='header'>
<img src='jrcsalterdotcom_Logo_JPG.jpg' height='100px'>
 <div class='stuff'>
  <img src='jrcsalterdotcom_Logo_JPG.jpg' height='50px'>
 </div>
 <div class='stuff'>
  <img src='jrcsalterdotcom_Logo_JPG.jpg' height='50px'>
 </div>
</div>

<div class='menu'>
<p class='menu_bar'><a href="index.html">Home</a> | <a href="books.html">Books</a> | <a href="the_calnis_chronicles.html">The Calnis Chronicles</a> | <a href="arabian_nights.html">The Arabian Nights</a></p>
</div>

<div class='content'>
<h1>JRCSalter.com</h1>
<p><a href='http://www.calnis.com/'>Visit Calnis</a></p>
</div>

<div class='sidebar'>
<p>stuff</p>
</div>

<div class='footer'>
<h6>JRCSalter.com</h6>
<p><a href='http://www.calnis.com/'>Visit Calnis</a></p>
</div>

</body>

</html>

Was This Post Helpful? 0
  • +
  • -

#8 astonecipher  Icon User is offline

  • D.I.C.
  • member icon

Reputation: 792
  • View blog
  • Posts: 3,463
  • Joined: 03-December 12

Re: Can't create a margin around my image

Posted 26 May 2014 - 12:44 PM

You can set a minimum width for the document to prevent that. The minimum spec currently designed for is 1024 pixels wide.

min-width: 1024px;
Was This Post Helpful? 1
  • +
  • -

#9 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 67
  • Joined: 23-April 14

Re: Can't create a margin around my image

Posted 26 May 2014 - 12:51 PM

Thanks. I'll implement that.
Was This Post Helpful? 0
  • +
  • -

#10 forev3r  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 24-May 14

Re: Can't create a margin around my image

Posted 26 May 2014 - 05:21 PM

You could use a wrapper around the image like a div and set a padding to it like a complete margin.

here is a link with examples CSS: Padding
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1