Hi guys, I'm having ALOT of problems making a website for Uni, its to demonstrate PHP but I haven't been able to even get to implementation as my design is giving me hell...
I can't seem to get my DIV layout to work in IE6/7 and FF.
I'm trying to get the following layout, can anyone help me?
Cheers
-- MY 2008 RIG --
CASE: Antec 300/ MOBO: ASUS P5Q Pro/ CPU: Q6600/ RAM: Corsair 4GB XMS2/
COOLING: Xigmatek Heatsink 120mm, 2x Xigmatek 120mm w/ Fan controller/
GFX: Sapphire HD4850/ PSU: Corsair HX520/ HD: WD 640GB w/ VibeFixer
DISPLAY1: 22" Neovo 3ms/ DISPLAY2: 32" HDTV/
-- MY 2011 RIG --
CASE: BitFenix Survivor/ MOBO: ASUS P8Z68V Pro/ CPU: i7 2600K @ 4.4Ghz/ RAM: Corsair 16GB Vengenge DDR3 1600MHz/
COOLING: Antek Kuhler H20 with Push-Pull Fans EXPANSION: Black Magic Intensity HDMI 1080p Capture Card
GFX: Sapphire HD6950 *unlocked to 6970*/ PSU: XFX 650w Modular/ HD: 60GB OCZ Agility 3 Sandforce SSD w/ 1TB Sata 3 Storage & 640GB Sata2 Backup
DISPLAY1: 23" 3D 1080p 120Hz LG / DISPLAY2: 22" 1080p LG/
Check out my Youtube Page for Funny Video series I make (17,000 Subscribers)
Which sections do you actually want content on? Are the side bars just for spacing?
All of it will eventually have content onI'll be working on it tongiht trying to fix
-- MY 2008 RIG --
CASE: Antec 300/ MOBO: ASUS P5Q Pro/ CPU: Q6600/ RAM: Corsair 4GB XMS2/
COOLING: Xigmatek Heatsink 120mm, 2x Xigmatek 120mm w/ Fan controller/
GFX: Sapphire HD4850/ PSU: Corsair HX520/ HD: WD 640GB w/ VibeFixer
DISPLAY1: 22" Neovo 3ms/ DISPLAY2: 32" HDTV/
-- MY 2011 RIG --
CASE: BitFenix Survivor/ MOBO: ASUS P8Z68V Pro/ CPU: i7 2600K @ 4.4Ghz/ RAM: Corsair 16GB Vengenge DDR3 1600MHz/
COOLING: Antek Kuhler H20 with Push-Pull Fans EXPANSION: Black Magic Intensity HDMI 1080p Capture Card
GFX: Sapphire HD6950 *unlocked to 6970*/ PSU: XFX 650w Modular/ HD: 60GB OCZ Agility 3 Sandforce SSD w/ 1TB Sata 3 Storage & 640GB Sata2 Backup
DISPLAY1: 23" 3D 1080p 120Hz LG / DISPLAY2: 22" 1080p LG/
Check out my Youtube Page for Funny Video series I make (17,000 Subscribers)
Showing us what you have now would be a start.
Originally Posted by Agent
Okies, code and printscreens?
-- MY 2008 RIG --
CASE: Antec 300/ MOBO: ASUS P5Q Pro/ CPU: Q6600/ RAM: Corsair 4GB XMS2/
COOLING: Xigmatek Heatsink 120mm, 2x Xigmatek 120mm w/ Fan controller/
GFX: Sapphire HD4850/ PSU: Corsair HX520/ HD: WD 640GB w/ VibeFixer
DISPLAY1: 22" Neovo 3ms/ DISPLAY2: 32" HDTV/
-- MY 2011 RIG --
CASE: BitFenix Survivor/ MOBO: ASUS P8Z68V Pro/ CPU: i7 2600K @ 4.4Ghz/ RAM: Corsair 16GB Vengenge DDR3 1600MHz/
COOLING: Antek Kuhler H20 with Push-Pull Fans EXPANSION: Black Magic Intensity HDMI 1080p Capture Card
GFX: Sapphire HD6950 *unlocked to 6970*/ PSU: XFX 650w Modular/ HD: 60GB OCZ Agility 3 Sandforce SSD w/ 1TB Sata 3 Storage & 640GB Sata2 Backup
DISPLAY1: 23" 3D 1080p 120Hz LG / DISPLAY2: 22" 1080p LG/
Check out my Youtube Page for Funny Video series I make (17,000 Subscribers)
I'm assuming this is going to be a fluid width design. First thing i'd do is create a container for all the div's to go inside of. Then create 3 more div's two floating left, one floating right so they are side by side.
Inside the Center block you'd then create a div for the login box and banner, one floating to the left, one floating to the right, and then below that the div of the menu.
Heres what I meen
<div> //this is your container
<div> //your left sidebar
</div>
<div> //your center block for containing mainpage, menu and login etc
<div>Login Box</div> //float to the left
<div>Banner</div> //float to the right
<div>Menu</div> //Below the Login Box and Banner
<div>Main Page</div> //your main page
</div>
<div> //your right sidebar
</div>
</div>
Though I can't be any more indepth than that, until you give us some source code, or a design or something.
This is what I would do using my "super" A-lvl knowledge - tables. The EASY way;
<head>
<title>RICHIEUK</title>
</head>
<body>
<table width="1000" height="934" border="0">
<tr>
<td width="200" rowspan="3">Sidebar</td>
<td width="300" height="285">Login Box </td>
<td width="300">Banner</td>
<td width="200" rowspan="3">Sidebar</td>
</tr>
<tr>
<td height="200" colspan="2">Menue</td>
</tr>
<tr>
<td width="600" height="600" colspan="2">Content</td>
</tr>
</table>
</body>
</html>
(sorry if it is not up to your standard)
Even though thats the easiest way and probably the best for someone who only supplies an image and no real source (dw i'm only jokingThis is what I would do using my "super" A-lvl knowledge - tables. The EASY way;
<head>
<title>RICHIEUK</title>
</head>
<body>
<table width="1000" height="934" border="0">
<tr>
<td width="200" rowspan="3">Sidebar</td>
<td width="300" height="285">Login Box </td>
<td width="300">Banner</td>
<td width="200" rowspan="3">Sidebar</td>
</tr>
<tr>
<td height="200" colspan="2">Menue</td>
</tr>
<tr>
<td width="600" height="600" colspan="2">Content</td>
</tr>
</table>
</body>
</html>
(sorry if it is not up to your standard)), I think he wants to do it in Div's because its the more "modern" / "web2.0" approach.
Though if your having trouble with css and divs, i really recommend taking the easy option with tables, you'll save yourself lots of time
If the assignment is a demonstration of PHP, I'm not sure spending an undue amount of time on design/styling is in your best interests.
To err is human. To really foul things up ... you need a computer.
Are you going for fixed or floating? Is this of any use?
<html>
<head>
<title>DIV Practice</title>
<style type="text/css">
<!--
#leftbar {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 500px;
}
#login {
background: #f00;
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 100px;
}
#banner {
background: #ff0;
position: absolute;
top: 0px;
left: 150px;
width: 100px;
height: 100px;
}
#rightbar {
background: #0f0;
position: absolute;
top: 0px;
left: 250px;
width: 50px;
height: 500px;
}
#menu {
background: #5f0;
position: absolute;
top: 100px;
left: 50px;
width: 200px;
height: 50px;
}
#main {
background: #5f5;
position: absolute;
top: 150px;
left: 50px;
width: 200px;
height: 350px;
}
-->
</style>
</head>
<body>
<div id="leftbar">Left</div>
<div id="login">Login</div>
<div id="banner">Banner</div>
<div id="menu">Menu</div>
<div id="rightbar">Right</div>
<div id="main">Main</div>
</body>
</html>
Another version with floating DIV, which will let you set percentages.
<html>
<head>
<title>DIV Practice</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#leftbar {
background: #0f0;
float: left;
width: 15%;
height: 500px;
}
#login {
background: #f00;
float: left;
width: 35%;
height: 100px;
}
#banner {
background: #ff0;
float: left;
width: 35%;
height: 100px;
}
#rightbar {
background: #0f0;
float: right;
width: 15%;
height: 500px;
}
#menu {
background: #5f0;
float:left;
width: 70%;
height: 50px;
}
#main {
background: #ff5;
float: left;
width: 70%;
height: 350px;
}
-->
</style>
</head>
<body>
<div id="leftbar">left</div>
<div id="login">login</div>
<div id="banner">banner</div>
<div id="rightbar">right</div>
<div id="menu">menu</div>
<div id="main">Main</div>
</body>
</html>
haha sorry guys i forgot to tell you, the night i went to copy my code, i ended up fixing it.
-- MY 2008 RIG --
CASE: Antec 300/ MOBO: ASUS P5Q Pro/ CPU: Q6600/ RAM: Corsair 4GB XMS2/
COOLING: Xigmatek Heatsink 120mm, 2x Xigmatek 120mm w/ Fan controller/
GFX: Sapphire HD4850/ PSU: Corsair HX520/ HD: WD 640GB w/ VibeFixer
DISPLAY1: 22" Neovo 3ms/ DISPLAY2: 32" HDTV/
-- MY 2011 RIG --
CASE: BitFenix Survivor/ MOBO: ASUS P8Z68V Pro/ CPU: i7 2600K @ 4.4Ghz/ RAM: Corsair 16GB Vengenge DDR3 1600MHz/
COOLING: Antek Kuhler H20 with Push-Pull Fans EXPANSION: Black Magic Intensity HDMI 1080p Capture Card
GFX: Sapphire HD6950 *unlocked to 6970*/ PSU: XFX 650w Modular/ HD: 60GB OCZ Agility 3 Sandforce SSD w/ 1TB Sata 3 Storage & 640GB Sata2 Backup
DISPLAY1: 23" 3D 1080p 120Hz LG / DISPLAY2: 22" 1080p LG/
Check out my Youtube Page for Funny Video series I make (17,000 Subscribers)
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks
Reply With Quote
