Jump to content

Div Help

ZulfadlyAshBurn

By ZulfadlyAshBurn
in HTML Help

 Share

Recommended Posts

ZulfadlyAshBurn Regular Member

ZulfadlyAshBurn

Posted
  • Author
Posted

sorry for not  posting the code. here you go.  absolute position is position relatively to the parent div.

index.php

<body>
	<div class="top">
	<ul id="nav">
	<li><img src="images/logo.png"/></li><br><li class="moveBar"> </li>
	<li><a id="current" href="index.php">Home</a> </li>
	<li><a href="inbox.php">Inbox</a> </li>
	<li><a href="notification.php">Notification</a> </li>
	<li><a href="logout.php">Logout</a> </li>
	</ul>
	</div>
	<div class="clear"></div>
	<div class="main">
	<div class="sidebar" align="center">
	<p align="center"><?php echo $rank; ?></p>
	<hr color="#C0C0C0">
	<img src="images/male_silhouette.png"/>
	<br><br>
	<p>Name: <?php echo $user; ?></p>
	<p>Contact: <?php echo $contact; ?></p>
	</div>
	</div>

	<div class="credits" align="right"> Created by Zulfadly AshBurn. All Rights Reserved!<div class="clear"/> </div>
<body>

 

main.css

body {
background-color: #E0E0E0  ;
}

.main {
height: auto;
width: 100%;
background-color: #F8F8F8;
padding-bottom: 10px;
}

div.top {
position:fixed;
height: 40px;
width: 100%;
border-style: solid;
font-size: 16;
border-bottom-color: #585858;
border-bottom-width: 1px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(240,240,240)),
    color-stop(0.74, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(240,240,240) 0%,
    rgb(255,255,255) 74%
);
}

div.top li {
float:left;
color: #E0E0E0;

}

div.top a {
color: #D0D0D0;
text-decoration:none;
padding: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
border-style: none;
border-width: 1px;

}

div.top a:hover {
color: #000000;
padding: 2px;

}

#nav #current{
color: #000000;
padding: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #C0C0C0;
background-color: #C0C0C0;
}
.sidebar {
width: 200px;
height: 500px;
-moz-box-shadow: 10px 10px 5px #E0E0E0 ;
-webkit-box-shadow: 10px 10px 5px #E0E0E0 ;
box-shadow: 10px 10px 5px #E0E0E0 ;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(248,248,248)),
    color-stop(0.4, rgb(243,243,243))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(248,248,248) 9%,
    rgb(243,243,243) 40%
);

}

.credits {
height: auto;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.4, rgb(240,240,240)),
    color-stop(0.51, rgb(248,248,248))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(240,240,240) 40%,
    rgb(248,248,248) 51%
);

}

.clear {
height: 4px;
}
.moveBar {
width: 90px;
}

Link to comment
https://forums.phpfreaks.com/topic/240878-div-help/#findComment-1237622
Share on other sites
cssfreakie Regular Member

cssfreakie

Posted
Posted

Assuming you use a strict doctype a few things are wrong with your code.

-don't forget end tags

-don't use align as attribute  (see: http://www.htmldog.com/guides/htmlintermediate/badtags/)

-use an alt tag on images

 

i adjusted it a bit have a look i added a comment in the style run that as is and see the difference.

 

<!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" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link type="text/css" rel="stylesheet" href="css/style.css" />
        <title></title>
        <style type="text/css">
            body {
background-color: #E0E0E0  ;
}

.main {
height: auto;
width: 100%;
background-color: #F8F8F8;
padding-bottom: 10px;
}

div.top {
position:fixed;
height: 40px;
width: 100%;
border-style: solid;
font-size: 16;
border-bottom-color: #585858;
border-bottom-width: 1px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(240,240,240)),
    color-stop(0.74, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(240,240,240) 0%,
    rgb(255,255,255) 74%
);
}

div.top li {
float:left;
color: #E0E0E0;
margin-right: 20px; /* <---------------             added this */
list-style: none;  /* remove this line if you want bullets */
}

div.top a {
color: #D0D0D0;
text-decoration:none;
padding: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
border-style: none;
border-width: 1px;

}

div.top a:hover {
color: #000000;
padding: 2px;

}

#nav #current{
color: #000000;
padding: 2px;
-moz-border-radius: 2px;
border-radius: 5px;
border-style: solid;
border-width: 1px;
border-color: #C0C0C0;
background-color: #C0C0C0;
}
.sidebar {
width: 200px;
height: 500px;
-moz-box-shadow: 10px 10px 5px #E0E0E0 ;
-webkit-box-shadow: 10px 10px 5px #E0E0E0 ;
box-shadow: 10px 10px 5px #E0E0E0 ;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.09, rgb(248,248,248)),
    color-stop(0.4, rgb(243,243,243))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(248,248,248) 9%,
    rgb(243,243,243) 40%
);

}

.credits {
height: auto;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.4, rgb(240,240,240)),
    color-stop(0.51, rgb(248,248,248))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(240,240,240) 40%,
    rgb(248,248,248) 51%
);

}

.clear {
height: 4px;
}
.moveBar {
width: 90px;
}

        </style>


    </head>
    <body>

	<div class="top">
	<ul id="nav">		
	<li><a id="current" href="index.php">Home</a> </li>
	<li><a href="inbox.php">Inbox</a> </li>
	<li><a href="notification.php">Notification</a> </li>
	<li><a href="logout.php">Logout</a> </li>
	</ul>
	</div>
	<div class="clear"></div>
	<div class="main">
	<div class="sidebar">
	<p>rank</p>
	<hr/>
	<img src="images/male_silhouette.png" alt=""/>
	<br/><br/>
	<p>Name: </p>
	<p>Contact: </p>
	</div>
	</div>

	<div class="credits" > Created by Zulfadly AshBurn. All Rights Reserved!<div class="clear"/> </div>

    </body>
</html>

 

a smart thing to do when debugging, run it through a validator or use a decent editor that indicates errors

Link to comment
https://forums.phpfreaks.com/topic/240878-div-help/#findComment-1237658
Share on other sites
ZulfadlyAshBurn Regular Member

ZulfadlyAshBurn

Posted
  • Author
Posted

For the side to side div, i have fixed it right. so its working properly. this is my script

 

 

index.php


<html>
<head>
	<title>Anderson Infocomm Portal | Home</title>
	<meta name="description" content="Anderson Infocoom Club Portal where event & duties updates are posted and members contirbution points to the club." />
	<meta name="keywords" content="Anderson, Secondary, School, Infocomm, Club, Andss, Portal, Social, Interactive" />
	<meta name="author" content="ZulfadlyAshBurn" />
	<meta name="generator" content="ZulfadlyAshBurn Codes" />
	<link href="styles/reset.css" rel="stylesheet" type="text/css" /> 
	<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="top"><img src="images/logo.png" alt="logo"/><div style="background-color: #707070; height: 2px"><><>
	<div class="main">

		<div class="sidebar">
			<h1 align="center"> Hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </h1>
		<>
		<div class="content">
		Hello
		<>
	<>

 

 

main.css


body {
background-color: #E0E0E0;
}
.top {
position: fixed;
top: 0px;
height: 40px;
width: 100%;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.82, rgb(248,248,248)),
    color-stop(0, rgb(232,232,232))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(248,248,248) 82%,
    rgb(232,232,232) 0%
);
}
.main {
width: 100%;
height: 100%;
}
.sidebar, .content  {
top: 50px;
float:left;
position:relative;
}
.main .sidebar {
width: 20%;
border-style:solid;
border-right-color: #A0A0A0;
border-right-width: 1;
}
.main .content {
width: 80%;
}

 

 

thhe problem i am having know, when i structure my top div to be at the top of the body section, when other elements are below the div, the content in that element will be over the top div when i scroll down.

Link to comment
https://forums.phpfreaks.com/topic/240878-div-help/#findComment-1237861
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.