•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,428 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,672 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 1267 | Replies: 7 | Solved
 |
•
•
Join Date: Feb 2006
Posts: 8
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
Hi guys,
Please refer to my attachment, I am really facing problems trying to make this layout tableless.
1. The top of the right content box will overlap the Banner Picture
2. Te Left Content will have shading on top and shading at the bottom as background
3. The footer will automatically append to the bottom of the Left and Right Content box.
Currently, I am facing problem due to the fact that, i do absolute positioning on the main divs such as banner, header, right container, left container, so when i place a separate div as the footer after loading the left and right container, the footer appears at the top of the page instead of below the left and right container i think it's because i do absolute positioning.
If I dont do absolute positioning, how can I perform the effect of overlapping of right content box over the banner?
Lastly how should I design the left container to always have the shading background at the top and bottom of the contents, without hardcoding per page. I want the Left container to populate as long as possible when contents are entered into it with the middle parts as white background and as it is ending, insert the bottom shadow.
Please help me out on this, Thank you very much.
Please refer to my attachment, I am really facing problems trying to make this layout tableless.
1. The top of the right content box will overlap the Banner Picture
2. Te Left Content will have shading on top and shading at the bottom as background
3. The footer will automatically append to the bottom of the Left and Right Content box.
Currently, I am facing problem due to the fact that, i do absolute positioning on the main divs such as banner, header, right container, left container, so when i place a separate div as the footer after loading the left and right container, the footer appears at the top of the page instead of below the left and right container i think it's because i do absolute positioning.
If I dont do absolute positioning, how can I perform the effect of overlapping of right content box over the banner?
Lastly how should I design the left container to always have the shading background at the top and bottom of the contents, without hardcoding per page. I want the Left container to populate as long as possible when contents are entered into it with the middle parts as white background and as it is ending, insert the bottom shadow.
Please help me out on this, Thank you very much.
Last edited by suchiate : May 15th, 2008 at 4:56 am.
•
•
Join Date: May 2008
Posts: 14
Reputation:
Rep Power: 1
Solved Threads: 3
Newbie Poster
I never do spoon feeding, but since i'm in a good mood i'll just give you the idea... on your layout request..
i provided the comments so you'll easily glide through... just adjust the styles ok??
p.s.
take note of the width.. goodluck... ^__^
i provided the comments so you'll easily glide through... just adjust the styles ok??
p.s.
take note of the width.. goodluck... ^__^
*{padding:0
margin:0;
}
body{text-align:center;}
#wrap{
width:800px;
margin:auto;
}
#left{float:left;
width:300px;
}
#right{
width:500px;
}
<div id="wrapper">
<div id="head">
</div><!--end of head --->
<div id="imagehere">
</div><!--end of imagehere --->
<div id="content">
<div id="left">
</div><!--end of left --->
<div id="right">
</div><!--end of right --->
<div><!--end of content --->
<div id="footer">
</div><!--end of footer--->
</div><!--end of wrapper --->
•
•
Join Date: Feb 2006
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
thanks for your reply,
however, this is just the basic setup which i already have.
the problem i am really facing is the overlapping of the right box on top of the image and the left box having expandable content with top background and bottom background as the shadow..
however, this is just the basic setup which i already have.
the problem i am really facing is the overlapping of the right box on top of the image and the left box having expandable content with top background and bottom background as the shadow..
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 114
It's never going to work with absolute settings. Different browsers will render it differently. Different screen resolutions and window sizes also cause trouble with absolute settings. Use percentage of page settings instead.
You may also be seeing the IE/FF incompatibility. Placing both size styles (width, height) and surrounding styles (margin, border, padding) in the same tag or style causes all kinds of strange fit problems.
It is the nature of a div structure to fall apart if it won't fit. You will never create a div structure that holds its shape under all conditions. The reason it doesn't work is that there is no equivalent to the tr tag in div structures. Browsers float div tags wherever they will fit.
If you absolutely need the same structure to hold together for all window sizes and screen resolutions, use a table. It is not deprecated. There is a misconception about what is good web practice and what is not.
What is discouraged is using table tags to create borders, margins, and padding around website objects. At one time, this was the only way to put margins around pages.
The reason some people don't want tables used for page structuring is that it is confusing to people using a speaking reader for the blind. But if the table is used for just the two parallel columns, and not the rest of the page, it works well, and is not too confusing, since it is a table of sorts.
You may also be seeing the IE/FF incompatibility. Placing both size styles (width, height) and surrounding styles (margin, border, padding) in the same tag or style causes all kinds of strange fit problems.
It is the nature of a div structure to fall apart if it won't fit. You will never create a div structure that holds its shape under all conditions. The reason it doesn't work is that there is no equivalent to the tr tag in div structures. Browsers float div tags wherever they will fit.
If you absolutely need the same structure to hold together for all window sizes and screen resolutions, use a table. It is not deprecated. There is a misconception about what is good web practice and what is not.
What is discouraged is using table tags to create borders, margins, and padding around website objects. At one time, this was the only way to put margins around pages.
The reason some people don't want tables used for page structuring is that it is confusing to people using a speaking reader for the blind. But if the table is used for just the two parallel columns, and not the rest of the page, it works well, and is not too confusing, since it is a table of sorts.
Last edited by MidiMagic : May 16th, 2008 at 1:44 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Feb 2006
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
MidiMagic, thanks for reading my post again..
Just giving a last try to see if you could help me out..
please see attached on what i have done and also my code to see if you could help..
Just giving a last try to see if you could help me out..
please see attached on what i have done and also my code to see if you could help..
<style>
#wrapper
{
background-color: White;
position: relative;
}
#content
{
}
#top
{
background-image: url("Untitled-2.png");
background-repeat: no-repeat;
position: relative;
height:175px;
}
#bottom
{
background-image: url("Untitled-3.png");
background-repeat: no-repeat;
position: relative;
height: 203px;
}
#middle
{
background-image: url("Untitled-4.png");
background-repeat: repeat-y;
position: relative;
width: 263px;
}
</style>
<div id="wrapper">
<div id="top"></div>
<div id="middle">
I want to place text on the top and bottom shading layer as well.. and at the same time, expanding this layer's background.. how??
<br><br><br>
</div>
<div id="bottom"></div>
</div> Last edited by suchiate : May 16th, 2008 at 1:53 am.
•
•
Join Date: May 2008
Posts: 14
Reputation:
Rep Power: 1
Solved Threads: 3
Newbie Poster
i think this link will answer your problem...
http://www.practicalecommerce.com/ar...ners-with-CSS/
just watch the video..
http://www.practicalecommerce.com/ar...ners-with-CSS/
just watch the video..
•
•
Join Date: Jan 2007
Posts: 2,556
Reputation:
Rep Power: 7
Solved Threads: 114
Make sure the styles for the top, middle, and bottom have widths of 100 percent in them, and margins and paddings of 0. If you want margins or paddings on any of these, nest more divs inside them with the padding and margin styles wanted.
<div id="wrapper">
<div id="top">
Top content.
</div>
<div id="middle">
<img src="fid.jpg" />
</div>
<table>
<tr>
<td>
Left content.
</td>
<td>
Right content.
<td>
</tr>
</table>
<div id="bottom">
Bottom content.
</div>
</div> Last edited by MidiMagic : May 17th, 2008 at 3:47 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Feb 2006
Posts: 8
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
•
•
•
•
Originally Posted by jhaycutexp 
i think this link will answer your problem...
http://www.practicalecommerce.com/ar...ners-with-CSS/
just watch the video..
Thanks for the video, it gave me the idea to implement what i wanted.
Really appreciate it.
|
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- Layout Tables to CSS (HTML and CSS)
- Help me switch to tableless design (HTML and CSS)
- Why do people wish for tableless with CSS? (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: drop down horizontal menu using css
- Next Thread: Remove Scrollbar?
