Log in

View Full Version : upper part of a website



philips
07-30-2011, 02:42 PM
Hello all,

I am attaching the html and css codes. I will greatly appreciate your help.

Thanks :)

JShor
07-31-2011, 03:16 AM
In the future, please use the CODE tags to post code on the forum. :) (Note: this isn't a solution, I'm just formatting the code).

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrap">
<div id="topb"><p><h1>HEAD</h1></p></div>
<div id="leftb"></div>
<div id="middleb"></div>
<div id="rightb"></div>
</div>
</body>
</html>


CSS:


@charset "utf-8";
/* CSS Document */

body {
background: #FFF;
margin: 0;
padding: 0;
}

input, select {
margin: 0;
}

#wrap {
margin: 0 auto;
width: 797px;
}

#topb {
background: #FFF;
width: 797px;
height: 60px;
border-bottom: 3px solid #666;
}

#topb h1 {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: normal;
text-align: center;
}

#leftb {
background: #EEE;
width: 169px;
float: left;
padding: 4px;
}

#middleb {
background: #FFF;
width: 432px;
float: left;
padding: 4px;
}

#rightb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
border-left: 3px solid #666;
}

philips
07-31-2011, 12:26 PM
Thank you. I have not noticed however any changes when I looked it up in my browser. :D

philips
08-04-2011, 10:10 PM
Hi, I would like to be able to type my text in the very upper white part, and just under the black navigation menu. I am having difficulty here. Your assistance is appreciated.

Here is what I have so far (and thanks to the person who contributed some of the code on this forum :)):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="blog_container">

<div id="blog_top_panel">
<div id="blog_header" style="width: 1px; height: 54px">
<div id="site_title">&nbsp;</div>
<div id="slogan">&nbsp;</div>
</div>

</div> <!-- end of top panel -->

<div id="blog_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="subpage.html">BLOG NEWS</a></li>
<li><a href="subpage.html">ABOUT ME</a></li>
<li><a href="index.html">WHAT I DO</a></li>
<li><a href="index.html">CURRICULUM VITAE</a></li>
<li><a href="index.html">QUESTIONS</a></li>
<li><a class="lastmenu" href="index.html">CONTACT</a></li>
</ul>

<form method="get" action="#">
<input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search"

value="GO" />
</form>
</div> <!-- end of menu -->

<div id="wrap">
<div id="topb"><p><h1>HEADER</h1></p></div>
<div id="leftb" style="width: 169px; height: 565px">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<div id="middleb" style="width: 520px; height: 802px">new blog page'
welcome to my new webblog page. It is still under contruction<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</div>
<div id="rightb" style="width: 169px; height: 746px"></div>
</div> <!-- end of skeleton -->



CSS:


@charset "utf-8";
/* CSS Document */

body {
background: #FFF;
margin: 0;
padding: 0;
}

input, select {
margin: 0;
}

#wrap {
margin: 0 auto;
width: 960px;
}

/* top panel */
#blog_top_panel {
width: 960px;
height: 45px;
margin: 0;
padding: 0;
font-color: #333;
font-size: 13px;
font-type: Arial Narrow, San Serif;
font-weight: bold;
background: none;
}

#blog_header {
float: left;
display: inline;
margin: 40px 0 0 30px;
}

#blog_header #site_title{
padding: 10px 0 8px 0;
margin: 0;
color: #FFF;
font-size: 50px;
font-weight: bold;
background: none;
}

#blog_header #slogan{
padding-left: 3px;
margin: 0;
color: #CCC;
font-size: 12px;
font-weight: bold;
}

.blog_ad_468x60 {
float: right;
color: #FFFFFF;
margin: 40px 15px 0 0;
width: 468px;
height: 60px;
}

.blog_ad_468x60 img{
border: none;
}
/* end of top panel */

/*------------- Menu ------------------*/
#blog_menu {
width: 960px;
height: 35px;
background: #000;
border-bottom: 1px solid #333;
}

#blog_menu ul {
float: left;
width: 750px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#blog_menu ul li{
display: inline;
}

#blog_menu ul li a{
float: left;
padding: 0 25px;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#blog_menu ul li .lastmenu{
border-right: none;
}

#blog_menu li a:hover, #blog_menu li .current{
color: #b3d7fc;
}

#blog_menu form{
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;
}

#blog_menu form input{
width: 120px;
color: #FFFFFF;
background: #000;
height: 20px;
border: 1px solid #666;
}

#blog_menu form .button{
border: none;
background: none;
color: #FFF;
font-weight: bold;
cursor: pointer;
width: 40px;
}

/* ----------------- end of menu----------------*/

#topb {
background: #FFF;
width: 960px;
height: 60px;
border-bottom: 3px solid #666;
}

#topb h1 {
margin: 0;
padding: 0;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
text-align: center;
}

#leftb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
}

#middleb {
background: #FFF;
width: 520px;
float: left;
padding: 4px;
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
font-color: #333
font-weight: normal;
}

#rightb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
border-left: 1px solid #CCC;

/* ----------------- end of skeleton----------------*/

philips
08-05-2011, 10:40 AM
Any help??:confused:

philips
08-05-2011, 12:50 PM
What am I not getting any assistance :confused:

molendijk
08-05-2011, 02:15 PM
I didn't notice your question until now. I'm not sure I understand what you really want. Anyhow, your site will me more like the one you are referring to if you add to #blog_menu { in the stylesheet:

position: absolute; left: 50%; margin-left:-480px;
And in the page itself:

<div id="topb"><p><h1 style="margin-top: 60px">HEADER</h1></p></div>
Arie Molendijk.

philips
08-05-2011, 03:01 PM
Hi... no problem and thank you for your help

As I wrote, I would like to be able to add text to the very upper part of the page and secondly, I would like to be able to add text just under the black navigation bar.

I would be thankful if you can show me what code and where to place it. Thank you

Here is the HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="blog_container">

<div id="blog_top_panel">
<div id="blog_header" style="width: 1px; height: 54px">
<div id="site_title">&nbsp;</div>
<div id="slogan">&nbsp;</div>
</div>

</div> <!-- end of top panel -->

<div id="blog_menu">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="subpage.html">BLOG NEWS</a></li>
<li><a href="subpage.html">ABOUT ME</a></li>
<li><a href="index.html">WHAT I DO</a></li>
<li><a href="index.html">CURRICULUM VITAE</a></li>
<li><a href="index.html">QUESTIONS</a></li>
<li><a class="lastmenu" href="index.html">CONTACT</a></li>
</ul>

<form method="get" action="#">
<input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search"

value="GO" />
</form>
</div> <!-- end of menu -->

<div id="wrap">
<div id="topb"><p><h1>HEADER</h1></p></div>
<div id="leftb" style="width: 169px; height: 565px">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<div id="middleb" style="width: 520px; height: 802px">new blog page'
welcome to my new webblog page. It is still under contruction<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</div>
<div id="rightb" style="width: 169px; height: 746px"></div>
</div> <!-- end of skeleton -->

AND here is the CSS:


@charset "utf-8";
/* CSS Document */

body {
background: #FFF;
margin: 0;
padding: 0;
}

input, select {
margin: 0;
}

#wrap {
margin: 0 auto;
width: 960px;
}

/* top panel */
#blog_top_panel {
width: 960px;
height: 45px;
margin: 0;
padding: 0;
font-color: #333;
font-size: 13px;
font-type: Arial Narrow, San Serif;
font-weight: bold;
background: none;
}

#blog_header {
float: left;
display: inline;
margin: 40px 0 0 30px;
}

#blog_header #site_title{
padding: 10px 0 8px 0;
margin: 0;
color: #FFF;
font-size: 50px;
font-weight: bold;
background: none;
}

#blog_header #slogan{
padding-left: 3px;
margin: 0;
color: #CCC;
font-size: 12px;
font-weight: bold;
}

.blog_ad_468x60 {
float: right;
color: #FFFFFF;
margin: 40px 15px 0 0;
width: 468px;
height: 60px;
}

.blog_ad_468x60 img{
border: none;
}
/* end of top panel */

/*------------- Menu ------------------*/
#blog_menu {
width: 960px;
height: 35px;
background: #000;
border-bottom: 1px solid #333;
}

#blog_menu ul {
float: left;
width: 750px;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#blog_menu ul li{
display: inline;
}

#blog_menu ul li a{
float: left;
padding: 0 25px;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#blog_menu ul li .lastmenu{
border-right: none;
}

#blog_menu li a:hover, #blog_menu li .current{
color: #b3d7fc;
}

#blog_menu form{
float: right;
width: 170px;
margin: 0;
padding: 5px 0 0 0;
text-align: left;
}

#blog_menu form input{
width: 120px;
color: #FFFFFF;
background: #000;
height: 20px;
border: 1px solid #666;
}

#blog_menu form .button{
border: none;
background: none;
color: #FFF;
font-weight: bold;
cursor: pointer;
width: 40px;
}

/* ----------------- end of menu----------------*/

#topb {
background: #FFF;
width: 960px;
height: 60px;
border-bottom: 3px solid #666;
}

#topb h1 {
margin: 0;
padding: 0;
font-family: "Arial Narrow", Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
text-align: center;
}

#leftb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
}

#middleb {
background: #FFF;
width: 520px;
float: left;
padding: 4px;
font-family: "Arial", Helvetica, sans-serif;
font-size: 14px;
font-color: #333
font-weight: normal;
}

#rightb {
background: #FFF;
width: 169px;
float: left;
padding: 4px;
border-left: 1px solid #CCC;

/* ----------------- end of skeleton----------------*/

molendijk
08-05-2011, 03:19 PM
You mean text above the black navigation bar and text under HEADER? You can just write it down there. But that's not what you mean?
Do you want a visitor to write text to your page?
===
Arie.

philips
08-05-2011, 03:28 PM
Yes you are right. Text above the black navigation (where the white area is) bar And text just above the HEADER as shown in the attached snapshot.

No, I do not want visitors to write anything on my page. ;)

Many thanks :)

philips
08-05-2011, 03:32 PM
Apart from that... I have no idea why my black navigation bar shows to the left.:rolleyes: I'll appreciate it if you help me make it show in the centre instead:)

molendijk
08-05-2011, 05:55 PM
Something like this?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><div style="position:relative; left:50%; width: 960px; margin-left:-480px">

<div style="position: absolute; left:55px; margin-top:10px; height:35px; overflow: auto; font-family: verdana; font-size: 12px;">Text comes here</div>
<div id="blog_container">
<div id="blog_top_panel">
<div id="blog_header" style="width: 1px; height: 54px">
<div id="site_title">&nbsp;</div>
<div id="slogan">&nbsp;</div>
</div>
</div>
</div>

<!-- end of top panel -->
<div id="blog_menu" >
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="subpage.html">BLOG NEWS</a></li>
<li><a href="subpage.html">ABOUT ME</a></li>
<li><a href="index.html">WHAT I DO</a></li>
<li><a href="index.html">CURRICULUM VITAE</a></li>
<li><a href="index.html">QUESTIONS</a></li>
<li><a class="lastmenu" href="index.html">CONTACT</a></li>
</ul>
<form method="get" action="#"><input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search" value="GO" /></form>
</div>
<!-- end of menu -->
<div style="position: absolute; left:55px; margin-top:10px; height:35px; overflow: auto; font-family: verdana; font-size: 12px;">Text comes here</div>
</div>


<div id="wrap">
<div id="topb" style="margin-top: 20px">
<h1>HEADER</h1>
</div>
<div id="leftb" style="position: relative; left: 50%; margin-left: -260px; width: 169px; height: 565px">
<p>&nbsp;</p>
<div id="middleb" style="width: 520px; height: 802px; ">new blog page' welcome to my new webblog page. It is still under contruction
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="rightb" style="width: 169px; height: 746px; "></div>
</div>
</div>
<!-- end of skeleton -->
</body>
</html>
Arie.

philips
08-05-2011, 06:06 PM
Yes exactly thank you very much. However the grey vertical line on the left side is no longer showing to the left as it used to :D

molendijk
08-05-2011, 06:47 PM
I hadn't noticed the left border. You could do this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My blog</title>
<!-- David's Blog -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body><div style="position:relative; left:50%; width: 960px; margin-left:-480px">

<div style="position: absolute; left:55px; margin-top:10px; height:35px; overflow: auto; font-family: verdana; font-size: 12px;">Text comes here</div>
<div id="blog_container">
<div id="blog_top_panel">
<div id="blog_header" style="width: 1px; height: 54px">
<div id="site_title">&nbsp;</div>
<div id="slogan">&nbsp;</div>
</div>
</div>
</div>

<!-- end of top panel -->
<div id="blog_menu" >
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="subpage.html">BLOG NEWS</a></li>
<li><a href="subpage.html">ABOUT ME</a></li>
<li><a href="index.html">WHAT I DO</a></li>
<li><a href="index.html">CURRICULUM VITAE</a></li>
<li><a href="index.html">QUESTIONS</a></li>
<li><a class="lastmenu" href="index.html">CONTACT</a></li>
</ul>
<form method="get" action="#"><input name="search" value="Search..." type="text" /> <input class="button" type="submit" name="Search" value="GO" /></form>
</div>
<!-- end of menu -->
<div style="position: absolute; left:55px; margin-top:10px; height:35px; overflow: auto; font-family: verdana; font-size: 12px;">Text comes here</div>
</div>


<div id="wrap">
<div id="topb" style="margin-top: 20px">
<h1>HEADER</h1>
</div>
<div id="leftb" style="width: 169px; height: 565px">
<p>&nbsp;</p>
<div id="middleb" style="position: relative; left:230px; width: 520px; height: 802px; ">new blog page' welcome to my new webblog page. It is still under contruction
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="rightb" style="width: 169px; height: 746px; "></div>
</div>
</div>
<!-- end of skeleton -->
</body>
</html>
Or do you want the leftborder to the extreme left?
===
Arie.

philips
08-05-2011, 06:58 PM
I hadn't noticed any difference from the previous one. The vertical thin grey line was neither to the extreme left nor to the right it as simply to the left side

philips
08-05-2011, 07:20 PM
Just don't worry about it. I found an easy way to create a blog website fast: WORDPRESS:)

Thank you for your help throughout