I have a bunch of problems, the main problem is about positioning a div at the the top left corner of the screen, and another at top but in the right side of it let's take a look in the code:
| Quote: |
<html>
<head>
<?
$page = $_GET["page"].".php";
if ($page == "") {$page = "territorio/content.php"; }
?>
<link rel="stylesheet" type="text/css" href="default.css"></link>
<title><?php include("info.php"); echo getPageInfo("title"); ?></title>
<head>
<body>
<div class="logo"> // must be in top-left
</div>
<div id="header"> // must be in top in the right side of the logo div
</div>
<div id="menu">
<?php
include("menu.php");
echo getMainMenu();
?>
</div>
<div id="content">
<?php
if (file_exists($page)){
include("$page");
}else{
include("404.php");
}?>
</div>
<div id="contexto"> //this one have a problem that i don't know exactly what's generating if someone see any thing that can help
</div>
</body>
</html>
|
| Quote: |
body{
/*background-image: url("images/back-main.gif");*/
font-family: sans-serif;
}
div#menu {
width: 15%;
height: 80%;
float: left;
}
ul#menu{
width: 100%;
list-style-type: none;
margin-top: 1%;
margin-left: 10px;
width: 100% ;
margin-left: 0px;
padding-left: 0px;
}
li#menu{
margin-top: 1%;
width: 100%;
border-left: 5px green solid;
border-top: 1px green solid;
border-bottom: 1px green solid;
}
a:link{
color: #006677;
text-decoration: none;
}
a:visited{
color: #337700;
text-decoration: none;
}
li#menu:hover{
background-color: #ff0000;
border-color: #005500;
color: #000088;
}
a:hover{
text-decoration: none;
}
div#header{
float:none;
width: 75%;
height: 20%;
border: blue 1px solid;
background-image:url("back-header.gif");
}
div#content{
width: 84%;
height: 80%;
float: right;
}
div.logo{
float: none;
overflow: none;
padding-top: 2.5%;
padding-left: 2.5%;
width:15%;
height:20%;
border: green 1px solid;
}
div#banner{
overflow: none;
padding-top: 1.5%;
padding-bottom: 1.5%;
margin-left: 25%;
width:75%;
height:100%;
}
div#contexto{
width:100%;
height:5%;
float: bottom;
font-size:smaller;
text-align: center;
padding-top: 0.5%;
padding-bottom: 0.5%;
border: red 1px solid;
}
|
please ignore the PHP by now...
Thanks and regards...
i missed.
[/img] I'm not sure how it is supposed to look like but I would try for left: | Code: |
| position:absolute; top:5; left:5; |
and for right: | Code: |
| position:absolute; top:5; right:5; |
in your stylesheet. ( you can change the value of top/left/right depending on how much space you want on the sides ) try using topmargins, top margin left and all that.
why dont you use tables instead of divs as it will affect your design. i mean div seems to have different readons in different browsers. you could try various browsers before keeping it online. best is to use tables, i guess.
What are you going to put into the div layers? Like if you are going to be putting images into them, there is no need to have to div layers at all.
| aningbo wrote: |
try using topmargins, top margin left and all that.
why dont you use tables instead of divs as it will affect your design. i mean div seems to have different readons in different browsers. you could try various browsers before keeping it online. best is to use tables, i guess. |
Tables should really only be used for what they were designed for, displaying tabular data. They shouldn't be used for layout purposes.
As has already been mentioned. If these divs are to be fixed in place then use absolute positioning
e.g.
| Code: |
<!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">
<head>
<title>Strict</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
<!--
html, body
{
margin:0;
padding:0;
}
#top
{
margin:0;
padding:0;
width:100%;
height: 100px;
}
#logo
{
position: absolute;
top: 0;
left: 0;
background: #ff5;
height: 100px;
width: 25%;
}
#header
{
position: absolute;
top: 0;
right: 0;
background: #0fa;
height: 100px;
width: 75%;
}
-->
</style>
</head>
<body>
<div id="top">
<div id="logo">
LOGO HERE
</div>
<div id="header">
Header here
</div>
</div>
</body>
</html>
|
Yeah, tables are too large in filesize to be used for design, and generally bad practice, so stick with divs.
I know this will work, since this is usually how i design, but I don't know if this is the correct way of doing it.
| Code: |
<style type="text/css">
#Container {
width:300px;
margin-left:auto;
margin-right:auto;
}
#left {
width:50px;
left:10px;
float:left;
}
#right {
width:50px;
right:10px;
float:right;
}
</style>
<div id="Container">
<div id="left">left content here</div>
<div id="right">right content here</div>
</div> |
this will give you a centered thing that is 200 px wide, and it will have 2 divs inside of it, one div on the left, one div on the right, each div is 50px's wide and is 10px's from the left and right side of the container div respectively
hope this helps | Quote: |
| Tables should really only be used for what they were designed for, displaying tabular data. They shouldn't be used for layout purposes. |
I seriously dont understand as to why you would say this!!!!! have u actually experimented on using divs in every browser....?? using tables' the best and not divs because some of the few items dont actually show up where u want to be. like they may show you at the exact position for IE while shows you elsewhere in firefox/opera etc etc
still your personal preference. i go with tables. had such bad experience with divs... lolLOL each to their own I guess 
but the "correct" way is to use divs. Have a read of these
http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html
http://www.hotdesign.com/seybold/ loz. i'll go through the links tomorrow. Its late now (here) and gotta get some slip.
D'Artagnan, I highly recommend you to use
instead of using
because if in the server's PHP configuration short tags has disabled, your script won't work 
i still dont agree with it. div sucks... hehehehe. most websites ends up using tables. i seriously haven't seen pro websites using div for main layout!
| santosh_iit32 wrote: |
| i still dont agree with it. div sucks... hehehehe. most websites ends up using tables. i seriously haven't seen pro websites using div for main layout! |
My site
Microsofts site
Yahoo
America Online aka AOL
You get the point...
Divs & advanced CSS are no longer the future - they are the present, and they are here to stay. Table based layouts cant do anything like as complex layouts as float/position based layouts (what you would call div layouts)
Just because you dont know how to use div's & proper css (I expect you dont) doesn't mean they suck - it means you are newb.
I have yet to see a table based site which couldn't have been built more effectively using css&div's.
ALSO: Divs ARE more predictable cross-browser compared to tables - in fact, unless you use incorrect markup, they nearly always work perfectly with only a few minor fixes for IE6...
BACK ON SUBJECT: You could use floats for the above task, if you dont want to take the divs out of the document flow.i have been designing websites for over 4 years now and mainly code in c/c++ ... yeah sure, i'm still a newbie hehehe
| santosh_iit32 wrote: |
| i have been designing websites for over 4 years now and mainly code in c/c++ ... yeah sure, i'm still a newbie hehehe |
Sorry for calling you a newb...
I have been coding xHTML&CSS for 4-5 years as well, and I respect how hard the switch from tables to divs can be (took me at least 6 months to reach the same skillz I had had with tables), however srsly trust me...once your used to divs&css your coding is so much faster and your control over the way your pages look is so much more omnipotent...hehehe i like that. never mind... good luck with it.
LukeakaDanish, what do you think of using a combination of both CSS and tables. Personally I see tables to be more reliable when it comes to cross-platform and remember there are issues like IE6 where lots of people still use and the older versions of browsers which support tables better than css attributes.
An example of an combination design (it's also a fluid design) would be my games website in my sig.
| vahsi000 wrote: |
LukeakaDanish, what do you think of using a combination of both CSS and tables. Personally I see tables to be more reliable when it comes to cross-platform and remember there are issues like IE6 where lots of people still use and the older versions of browsers which support tables better than css attributes.
An example of an combination design (it's also a fluid design) would be my games website in my sig. |
I don't see that as a bad idea at all. In fact, the perfect situation is having skills for both layout technologies - even I use tables for some things (forms are a good example), where div layout would be too complex to bother with.
Coding for IE6 is irritating, but nothing more than that - and the VERY SMALL percentage that use older browsers still (NS4 or IE5) must be used to pages displaying randomly anyway - so I have stopped supporting them when designing...
In fact, the only major cross browser css problem, the way I see it, is the double margin on floated elements in IE6 - that can really be a bitch sometimes heres what i can think of off hand. i didn't read through all the replys so if its already been stated sorry.
| Code: |
div1 { // your div on the top left
float:left;
width:75%;
}
div2 { //your div on the top right
float:right;
width:25%;
}
div3 { //for any extra content
clear:both;
}
|
the clear in div3 can be set to either left right or both so that it comes after your floats. i'm not sure how your site looks.
