4 replies [Last post]
zmarcoz
zmarcoz's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-8
Joined: 2012-11-19
Posts: 7
Points: 11

I am new. I read many forums, used many css online creator, but I am still not able to get what I want

I want a css layout which

  • Use 75% of the screen width, white color within 75%, color "123456" for the region outside the 75%
  • has header and footer
  • Between header and foot are is 4 columns,their widths are 15%, 15%, 55%,15%

Please help. I have spent days on this.

Thanks Sad(

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi zmarcoz, This should get

Hi zmarcoz,
This should get you started.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
 
body{
  background:#123456;
}
#container{
  margin: 0 12.5%;
  background:#FFF;
}
.col{
  float:left;
  margin:0;
  width: 15%;
  min-height:80%
}
#col3{
  width:55%;
}
.col:nth-of-type(2n){
  background:#CCC; /* just to see the cols */
}
 
#header, #footer{
  height:100px; 
 clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="header"><p>header</p> </div>
 
<div id="col1" class="col"> <p>content</p> </div>
<div id="col2" class="col"> <p>content</p></div>
<div id="col3" class="col"> <p>content</p></div>
<div id="col4" class="col"> <p>content</p></div>
 
<div id="footer"> <p>footer</p></div>
</div>
</body>
</html>

zmarcoz
zmarcoz's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-8
Joined: 2012-11-19
Posts: 7
Points: 11

Thanks for your reply May I

Thanks for your reply
May I know what is the difference between code that starts with # and start with "."?

.col{
  float:left;
  margin:0;
  width: 15%;
  min-height:80%
}
#col3{
  width:55%;
}

zmarcoz
zmarcoz's picture
Offline
newbie
Last seen: 9 years 37 weeks ago
Timezone: GMT-8
Joined: 2012-11-19
Posts: 7
Points: 11

Would you please give me a

Would you please give me a bit more help on this?

I set your code and added a couple lines for asp:ContentPlaceHolder for my template. For some unknown reason, the page mess up.

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
 
<style type="text/css">
 
body{
  background:#123456;
}
#container{
  margin: 0 12.5%;
  background:#FFF;
}
.col{
  float:left;
  margin:0;
  width: 15%;
  min-height:80%
}
#col3{
  width:55%;
}
.col:nth-of-type(2n){
  background:#CCC; /* just to see the cols */
}
 
#header, #footer{
  height:100px; 
 clear:both;}
 
#MyRow{
  height:100px; 
 clear:both;}
</style>
 
</head>
<body>
<div id="container">
<div id="header"><p>header</p> </div>
 
 <div id = "row0" class = "MyRow"><asp:ContentPlaceHolder ID="HeadContent1" runat="server">
                <p>abc&gt;abcd</p>
            </asp:ContentPlaceHolder></div>
 
<div id="col1" class="col"> <p>content</p> </div>
<div id="col2" class="col"> <p>content</p></div>
<div id="col3" class="col3"> <p>content</p></div>
<div id="col4" class="col"> <p>content</p></div>
<div id = "row1" class = "MyRow"><asp:ContentPlaceHolder ID="MainContent" runat="server">
                <p>abc&gt;abcd</p>
            </asp:ContentPlaceHolder></div>
<div id="footer"> <p>footer</p></div>
</div>
</body>
</html>

The follow is my html code.

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>

The page looks like this
Capture.PNG

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

The main diference between #

The main diference between # id and . class is that an id should be unique on the page a class can be reused.

You put your asp in the wrong place use the divs I provided and replace the <p>content</p> or <p>header</p>with the asp tag.

I think you want something like:

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
 
<style type="text/css">
 
body{
  background:#123456;
}
#container{
  margin: 0 12.5%;
  background:#FFF;
}
.col{
  float:left;
  margin:0;
  width: 15%;
  min-height:80%
}
#col3{
  width:55%;
}
.col:nth-of-type(2n){
  background:#CCC; /* just to see the cols */
}
 
#header, #footer{
  height:100px; 
 clear:both;}
 
#MyRow{
  height:100px; 
 clear:both;}
</style>
 
</head>
<body>
<div id="container">
<div id="header"><asp:ContentPlaceHolder ID="HeadContent1" runat="server">
                <p>abc&gt;abcd</p>
            </asp:ContentPlaceHolder> </div>
<div id="col1" class="col"> <p>content</p> </div>
<div id="col2" class="col"> <p>content</p></div>
<div id="col3" class="col3"><asp:ContentPlaceHolder ID="MainContent" runat="server">
                <p>abc&gt;abcd</p>
            </asp:ContentPlaceHolder> <p>content</p></div>
<div id="col4" class="col"> <p>content</p></div>
<div id="footer"> <p>footer</p></div>
</div>
</body>
</html>