Div Help

ZulfadlyAshBurn · July 1, 2011

Im currently coding a social site for my cca. i want the div element to be side by side and one is fixed position another is absolute. When im using a higher res screen, the div is in diff place.

cssfreakie · July 1, 2011

apart from abbreviating vital words. Do you have some code? Apart from that, do you know why you use position absolute?

ZulfadlyAshBurn · July 2, 2011

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;
}

cssfreakie · July 2, 2011

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

ZulfadlyAshBurn · July 3, 2011

somehow the page looks kinda weird.

please see the attachment. im trying to achieve something like the orig one..

[attachment deleted by admin]

ZulfadlyAshBurn · July 3, 2011

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.

bedankjes · July 7, 2011

search for the z-index and display attributes in CSS, that might help! Good luck!

Sign In

Div Help

Recommended Posts

ZulfadlyAshBurn

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

ZulfadlyAshBurn

Link to comment

Share on other sites

cssfreakie

Link to comment

Share on other sites

ZulfadlyAshBurn

Link to comment

Share on other sites

ZulfadlyAshBurn

Link to comment

Share on other sites

bedankjes

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information