Hi
I'm new to this maillist, but other lists I have been part of for C++ and
SDL discussions have been very helpfull. So now when I have taken the step
away from tables when doing websites and into the realm of CSS I thought
this would be a good place to vent my thoughts and questions.
I had a layout similar to this
----------------------------------------------------------
| | |
| LOGO | |
| | ADDVERT. |
| | |
----------------------------------------------------------
| | RECENT | RECENT | |
| Article | FILES | THREADS | Article |
| Image | | | Image |
| | | | |
----------------------------------------------------------
----------------------------------------------------------
| | |
| LEFT SIDE | NAVMENU |
| COLUMN |---------------------------------------------
| WITH USER-| | |Adds |
| PANEL ETC.| | Content | |
| | MAIN CONTENT AREA | sensitive | |
| | | menu | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
----------------------------------------------------------
(Hope this shows up ok)
First I did it using tables and all that. But during a redesign I felt it
was time to move to CSS.
The thing is that I don't know if I follow the "norm". I might have gone
overboard.
The entire layout is CSS. Not a single table anywhere. I wander if tables
for main layout and divs inside the cells is more preferred? This makes for
A LOT of "float: left"'s and it have given me a few headaces along the way.
In the beginning I didn't understand if you were supposed to put the "float:
left" in the DIV you wanted to attach to the div on the left or on the DIV
you wanted other content to attach to.
The depth of nested DIV's become quite large. However, I work with php and
have done it so that index.php includes a few files in this mannor. (styles
also included).
==================================================
<style type="text/css">
.clear {
clear: both;
height: 0;
line-height: 0;
font-size: px; /*for IE*/
}
body
{
margin-left: 3px;
width: <?=total_width?>;
}
.news
{
margin-bottom: 10px;
display: block;
clar: both;
width: 560px;
}
.top
{
width: <?=total_width?>;
clear: both;
display: block;
}
.leftcolumn
{
float: left;
margin-right: 6px;
height: 100%;
width: 134px;
background: #2c2a2a;
}
.navmenu
{
float: left;
clear: right;
display: block;
}
.content
{
width: 540px;
overflow:hidden;
float: left;
}
.contentmenu
{
width: 170px;
float: left;
}
</style>
<div class="top">
<?php include(root_path . 'top.php');?>
</div>
<div class="leftcolumn">
<?php include(root_path . 'leftmenu.php');?>
</div>
<div class="navmenu">
<?php include(root_path . 'menu.php');?>
</div>
<div class="content">
<?php
include(root_path . 'main_include.php')
?>
</div>
==================================================
In each of these php files there are more DIV's to manage the layout of
individual parts. Like the top, left column and so on.
A few problems I have had is that "clear: right" doesn't seem to work as it
should. Content still attach itself to the right of other divs. Also, div's
got broken off when the browser window was sized down. How do I prevent
that?
Also, here is one thing that I have had REAL problems with.
I wanted to make a box containing newstext.
I had images for the four corners (rounded corners), the left side, the
right side and the bottom since it had shadows and other stuff. It first
acted VERY strange and I didn't get the sides to stretch downwards with the
text. To solve this I had to use Javascript (Is there no way to get this to
work in CSS?). Also, it acted differently in IE and MOZ (The amount the
javascript had to move change the height differed). This is what I ended up
with.
========================?=======================
<div id="nbcontainer<?=$news_id?>" class="news">
<!-- Left Side -->
<div id="nbleft<?=$news_id?>" style="float: left; width: 56px;">
<div><img src="<?=getImage('newsbox_topleft.gif')?>"></div>
<div style="height: 100%; background:
url(<?=getImage('newsbox_left.gif')?>)"></div>
<div><img src="<?=getImage('newsbox_bottomleft.gif')?>"></div>
</div>
<!-- Middle -->
<div id="nbmiddle<?=$news_id?>" style="float: left; width: 462px">
<div style="background: #FFFFFF ; padding: 5px"><a
href="<?=$news_link?>">
<?=$news_header?>
</a>
<?=$news_time?>
CET (
<?=$num_of_comments?>
) Comments
<?=$news_flash?><br /><hr />
By <a href="<?=(root_path . 'index.php?p=view_profile&id=' .
$news_owner)?>">
<?=$w_names[$news_owner]?>
</a> | <a href="<?=$news_link?>" class="news_link"><b>Read
more</b></a><b> - Comments:</b>(
<?=$num_of_comments?>
)
</div>
<div style="height: 9px; background:
url(<?=getImage('newsbox_bottom.gif')?>)"></div>
</div>
<!-- Right Side -->
<div id="nbright<?=$news_id?>" style="width: 12px; float: left; clear:
right;">
<div><img src="<?=getImage('newsbox_topright.gif')?>"></div>
<div style="height: 100%; background:
url(<?=getImage('newsbox_right.gif')?>)"></div>
<div style="position: relative; top: -8px"><img
src="<?=getImage('newsbox_bottomright.gif')?>"></div>
</div>
<div class="clear"></div>
</div>
<script>
// Align the three div columns to the same height
document.getElementById("nbleft<?=$news_id?>").style.height =
document.getElementById("nbmiddle<?=$news_id?>").offsetHeight - 19;
document.getElementById("nbright<?=$news_id?>").style.height =
document.getElementById("nbmiddle<?=$news_id?>").offsetHeight - 19;
document.getElementById("nbcontainer<?=$news_id?>").style.height
= document.getElementById("nbmiddle<?=$news_id?>").offsetHeight;
</script>
=============================================================
Since I'm so new to CSS I could take any pointers you might have. On how to
best use it and what to think about.
I know this is a long post with a lot of different questions and feelings,
but I have had a lot of thoughts born while using CSS :P
Take care and thanx for your time.
/ Daniel
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
