Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1371 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

4 Problems (Absolute positions, Divs and general CSS problems)

Thread title: 4 Problems (Absolute positions, Divs and general CSS problems)
Closed Thread    
    Thread tools Search this thread Display Modes  
02-18-2006, 05:41 PM
#1
AlexK is offline AlexK
AlexK's Avatar
Status: Request a custom title
Join date: Aug 2005
Location: Copenhagen
Expertise:
Software:
 
Posts: 1,691
iTrader: 0 / 0%
 

AlexK is on a distinguished road

Send a message via MSN to AlexK

  Old  4 Problems (Absolute positions, Divs and general CSS problems)

Well hello there,
Thanks for viewing my thread.

The website: LINK

Problem 1:
The "features" ( Positioned to the right of the logo ) goes 50 pixels too high up in Opera, due to the absolute position they have. But if they don't have it, they goes 50 pixels too low in IE and FF. Though then it looks fine in Opera.

Problem 2:
The navigation buttons simply aren't positioned correctly. They should be in the, both vertical and horizontal centrum, of the "grey with borders on top" area.

Problem 3:
My "intro" box (the one beneath all the images, with the yellow background) acts very strange. It goes over all the images, and ofcourse the background image of it follows. Here is an image of how it should be like: IMAGE

Problem 4:
It's about the "Recent articles", "recent forum discussions" and "Latest Resources" box. Well, it's just like it isn't there, but still is.
Again you can see the image for how it should be.

If you can just help a little bit with just one of these problems it would be perfect. Thank incredibly much.

02-19-2006, 06:36 AM
#2
<Isurfr> is offline <Isurfr>
Status: Member
Join date: Aug 2005
Location: w3c
Expertise:
Software:
 
Posts: 193
iTrader: 0 / 0%
 

<Isurfr> is on a distinguished road

  Old

Here goes some work on the wireframe layout.

I didn't know if the Subnavigation was a positioning
error so I placed it above the content. To change it
just change the subnavigation and content to:


#subnavigation {
position:absolute;
width: 850px;
height:300px;
margin-top:680px;
background-color:#FFFFFF;
}
#content {
position:absolute;
width: 850px;
height:680px;
background-color:#808080;
}
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<
head>

    <
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <
title>InspirationKing Web Design Inspiration and CSS Design Showcase</title>
    <
meta name="author"      content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
    <
meta name="title"       content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
    <
meta name="description" content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
    <
meta name="keywords"      content="InspirationKing - Web Design Inspiration and CSS Design Showcase"/>
    <
meta name="identifier"  content="http://www.inspirationking.com"/>
    <
meta name="robots"      content="index, follow"/>
    <
meta name="generator"      content="NOTEPAD2"/>
    
<
link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>    

<
style type="text/css"/>
<!--
body {
margin:0;
padding:0;
background-color:#444444;
}
#container {
width850px;
height:1200px;
margin:0px auto;
}
#container2 {
position:absolute;
width850px;
height:1200px;
background-color:#FFFFFF;
}
#header {
position:absolute;
width850px;
height:100px;
background-color:#CCCCCC;
}
#navigation {
position:absolute;
width850px;
height:50px;
margin-top:100px;
background-color:#666666;
}
#body {
position:absolute;
width850px;
height:980px;
margin-top:150px;
background-color:#E1E1E1;
}
#subnavigation {
position:absolute;
width850px;
height:300px;
background-color:#FFFFFF;
}
#subnavigation2 {
position:absolute;
width280px;
height:300px;
margin:0;
padding:0;
background-color:#FFFFFF;
}
#subnavigation3 {
position:absolute;
width283px;
height:300px;
margin-left:285px;
padding:0;
background-color:#959595;
}
#subnavigation4 {
position:absolute;
width283px;
height:300px;
margin-left:567px;
padding:0;
background-color:#262626;
}
#content {
position:absolute;
width850px;
height:680px;
margin-top:300px;
background-color:#808080;
}
#footer {
position:absolute;
width:850px;
height:90px;
margin-top:1110px;
background-color:#000000;
}
-->
</
style>

</
head>
<
body>
<
div id="container">
<
div id="container2">
    
    <!-- 
Header -->
    <
div id="header"></div>
    <!-- 
Header -->
    
    <!-- 
Navigation -->
    <
div id="navigation"></div>
    <!-- 
Navigation -->
    
    <!-- 
Body -->
    <
div id="body">
    
        <!-- 
Subnavigation -->
        <
div id="subnavigation">        
            
            <
div id="subnavigation2"></div>
            <
div id="subnavigation3"></div>
            <
div id="subnavigation4"></div>
    
        </
div>
        <!-- 
Subnavigation -->
        
        <!-- 
Content -->
        <
div id="content"></div>
        <!-- 
Content -->
    
    </
div>
    <!-- 
Body -->
        
    <!-- 
Footer -->
    <
div id="footer"></div>
    <!-- 
Footer -->

</
div>
</
div>
</
body>
</
html
On the style.css from my experience its easier to just keep the
sections in order without seperating all the css content.

.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed