Trying to set a white margin.

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »

45 Replies - 1503 Views - Last Post: 15 May 2014 - 05:49 AM

#1 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Trying to set a white margin.

Posted 05 May 2014 - 07:46 AM

I am trying to create a white margin on all margins of this page and I would like for the margin to be white and to contain the links that I am throwing on the page. I tried W3 schools but couldn't get the specifics on how to alter what is inside the margins.

CSS

Here is my code so far:

Body{ //background: url('Hello Sunshine.JPG') no-repeat  fixed;
      //This code sets image to fit the screen.
      //margin:10px 50px;
       background: url('Irie Photo.jpg');
      -moz-background-size: cover;
      -webkit-background-size: cover;
        background-size: cover;
        background-position: top center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed;
        
}
Body{
    //I want to set a margin with white background, that has all the links set inside the margin
    margin:10px 50px;
}



//Puts white container at top with grey background
.container {width:900px;
      margin: auto  auto;
      padding:5px;
      border:10px solid #cccccc;
      background:#ffffff; }




h1
{
    //Change Font
    color:yellow
    text-align:center;
    font-family: "Brush Script MT", cursive;
    font-size:40px;
}
p
{
    font-family: "Brush Script MT", cursive;
    font-size:20px;
}


Is This A Good Question/Topic? 0
  • +

Replies To: Trying to set a white margin.

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3641
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Trying to set a white margin.

Posted 05 May 2014 - 07:55 AM

Margins are invisible, they don't have any colour.

Also note that // are not valid comment delimiters in css, only /* these ones */
Was This Post Helpful? 0
  • +
  • -

#3 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 07:59 AM

Ok, so I need to avoid margins then.

If I want to do white edges on the page with the links contained inside, should I use .container? And if I use container can I add one on every edge of my page?

If I were to use something what exactly should I use?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3641
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Trying to set a white margin.

Posted 05 May 2014 - 08:03 AM

I'm confused by your statement to 'avoid margins'. You don't avoid them, you use them to separate elements.

Anyway, borders can be coloured and you have four borders to an element that you can work with.
Was This Post Helpful? 0
  • +
  • -

#5 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 08:12 AM

So if I use this code:

p
{
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}


How do I make the borders solid white and change the width and also put links in the borders? If this is at all possible..
Was This Post Helpful? 0
  • +
  • -

#6 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 08:36 AM

Okay I have figured out how to make the border white, I guess all I need to know is how to put links inside the border if that is possible.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3641
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Trying to set a white margin.

Posted 05 May 2014 - 08:47 AM

You don't put anything inside a border. If you want something to appear within the white area then you need to use positioning to overlap elements.

I don't know why you wouldn't use an element with a white background and put links inside of this element.

To be honest you seem unfamiliar with how margins and borders work. This is fundamental to css so you should be studying this subject.
Was This Post Helpful? 1
  • +
  • -

#8 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 08:48 AM

I am probably not explaining what I am trying to do correctly. My image that I am using for the background doesn't have a white background.

So should I set the background to be white and then create another element that holds the image I want?
Was This Post Helpful? 0
  • +
  • -

#9 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 09:01 AM

Ok I get what you are saying now. So what I am doing is setting the background as white, inside the body element, and creating an element that would hold the image I want and to have that element positioned in the center and large enough to leave a white edge on the page.

What element would i use to do this?
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3641
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Trying to set a white margin.

Posted 05 May 2014 - 09:03 AM

Probably a DIV.
Was This Post Helpful? 1
  • +
  • -

#11 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 09:04 AM

Thanks! I will research on how to use that then :)
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3641
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Trying to set a white margin.

Posted 05 May 2014 - 09:22 AM

No worries. I think htmldog is quite good.
Was This Post Helpful? 0
  • +
  • -

#13 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 09:51 AM

Okay I have it mostly figure out but I am stuck on one thing. I have uploaded the image of what my page looks like. The body background is supposed to be white and the image is supposed to fill the rest of the page with white showing on each edge (about an inch on all sides). As you can see with the attached image of my page that isn't happening. And I can't figure out why so if you could see my error let me know please.

Here is my code again.

<html>
   
        
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home</title>
        <link rel="stylesheet" href="CascadeSheet.css">
    </head>
    
   
    
    <body>
         <table style="width:500px">
                <td>
        <a href="products.jsp?LIST=all">Shop All Products</a><br><br></td>
        <td>
        <a href="products.jsp?LIST=guitar">About Julia</a><br><br></td>
        <td><a href="products.jsp?LIST=bass">How to Order</a><br><br></td>
        <td><a href="products.jsp?LIST=drum">Julia's Blog</a><br><br></td>
        
        </table>
        
         <div id="list" style="margin-left:1px;width:140px;float:left;">
                <br>
                <a href="signup.jsp">Sign Up</a><br><br>
                <a href="login.jsp">Log In</a><br><br>
                <a href="logout.jsp">Log Out</a><br><br><hr><br>
                
                
                
                
                <a href="cartView.jsp">View Cart</a><br><br>
                <a href="orders.jsp">Order History</a><br><br><hr>
                <br>
                Julia's Blog Roll
                <br>
               
                
                
                
            </div>
        <div class ="relative">
        
           
        
        
        
        <div id="left"></div>
        <div id="right"></div>
        <div id="top"></div>
        <div id="bottom"></div>
        <div id="page" style="width:1000px;">
            
            <div id="header1" style="margin-bottom:0;text-align:center;"><h1>Welcome to the Irie Collection<br></h1></div><hr>
            
           
            
            
            
            
            
            <div id="footer" style="clear:both;text-align:center;"></div>
        
        
            
        </div>
        </div>
        <p></p>
    </body>
</html>


Body{

       background: #ffffff 
      -moz-background-size: cover;
      -webkit-background-size: cover;
        background-size: cover;
        background-position: top center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed;


}

.relative {
  position: relative;
  top: 50px;
  left: 100px;
  bottom: 50px;
  right: 50px;
  background: url('Irie Photo.jpg');
  -moz-background-size: cover;
      -webkit-background-size: cover;
        background-size: cover;
        background-position: top center !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed;

}








.container {width:900px;
      margin: auto  auto;
      padding:5px;
      border:10px solid #cccccc;
      background:#ffffff; }




h1
{
    //Change Font
    color:yellow
    text-align:center;
    font-family: "Brush Script MT", cursive;
    font-size:40px;
}
p
{
    font-family: "Brush Script MT", cursive;
    font-size:20px;
}

Attached image(s)

  • Attached Image

This post has been edited by jphoc13: 05 May 2014 - 10:58 AM

Was This Post Helpful? 0
  • +
  • -

#14 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3641
  • View blog
  • Posts: 12,619
  • Joined: 12-December 12

Re: Trying to set a white margin.

Posted 05 May 2014 - 10:51 AM

It is hard to see with all those broken comments. Remove them.

It is body in lowercase, not Body.

color:yellow must be followed by a semi-colon.

You can use both a background-image and background-color for an element. If the image doesn't fill the area then the background-color will show outside the image.

Give your page a valid DOCTYPE as well.

PS Adding !important is not a good approach or solution; it won't help you to understand what is going on and will cause more problems later on.

This post has been edited by andrewsw: 05 May 2014 - 10:53 AM

Was This Post Helpful? 0
  • +
  • -

#15 jphoc13  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 190
  • Joined: 08-July 13

Re: Trying to set a white margin.

Posted 05 May 2014 - 03:00 PM

Here is what I have for the CSS, and it creates the white background that I want on the left and right. But I can't figure out how to get the top and bottom to have the white background as well.

body{

        background: #ffffff; 
      -moz-background-size: cover;
      -webkit-background-size: cover;
        background-size: 1300px 1300px;
        background-position: top center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-image: url("Irie Photo.jpg")
        
}

This post has been edited by jphoc13: 05 May 2014 - 03:02 PM

Was This Post Helpful? 0
  • +
  • -

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • Last »