Photoshop Contest Forum Index - Computer Problems - Webdesign question - Reply to topic
Goto page 1, 2 Next
kinetic_be
Location: Belgium
|
 Thu Sep 18, 2008 3:27 pm Reply with quote
I know there are a few experts here when it comes to webdesign so I hope someone knows the answer to my question.
I'm having a template in where there are 5 layers.
1. Mainlayer in where the smaller layers fit
2. Header (for logo, etc)
3. Navigation (for menu's)
4. Main (this is where all the pages are going to be displayed in)
5. Footer (foot-text and some links)
Now my problem is, the pages shown in the layer 'Main' are often too large in the vertical way, which causes my text to overlay the layer 'footer'.
I could make use of scrollbars in my layer 'Main' to avoid that, but I don't want scrollbars. I want the user to be able to use the explorer-scrollbar and if he has to scroll down, he sees at the bottom of the page the text which is in the layer 'Footer'.
Any idea how I fix this?
|
splodge
Location: Yorkshire,
|
Thu Sep 18, 2008 4:01 pm Reply with quote
make it live/post it on the net that should fix it's self, if not, reset the hight of main layer to fit, or to 100%
|
kinetic_be
Location: Belgium
|
Thu Sep 18, 2008 4:06 pm Reply with quote
splodge wrote: make it live/post it on the net that should fix it's self, if not, reset the hight of main layer to fit, or to 100%
I tried that, but it didn't solve the problem.
The thing is, I have no problem with my 'main' layer. If the text is too large, it just overflows.
What I don't want, is that my 'footer' layer is still in the same position. It's supposed to move downwards as the area in the 'main' layer is getting bigger.
Hopefully you are able to visualise what I'm saying here.. i'm getting confused myself 
|
splodge
Location: Yorkshire,
|
Thu Sep 18, 2008 4:11 pm Reply with quote
reset the footer position from absolute to bottom???
|
kinetic_be
Location: Belgium
|
Thu Sep 18, 2008 4:39 pm Reply with quote
splodge wrote: reset the footer position from absolute to bottom???
How do you mean?
It only knows 'Absolute, Fixed, Relative or Static.
|
splodge
Location: Yorkshire,
|
Thu Sep 18, 2008 4:55 pm Reply with quote
ignor the layer size, i just drew one, leave the footer on absolute, set left margin to zero, set bottom to between zero and 25
|
kinetic_be
Location: Belgium
|
Thu Sep 18, 2008 5:18 pm Reply with quote
It's still not working Splodge.
Here's an image of what it currently looks like (cropped)
The red bar indicates the Footer Layer and the yellow part is the Main layer.
The red bar I would like to have at the bottom of the screen after having scrolled down.
Still any idea what might be it?
Really appreciate the input you've done so far.. it's a good learning-curve for me.
|
|
|
Thu Sep 18, 2008 5:41 pm Reply with quote
put your navigation and main in a container layer
below that container, you put your footer
|
kinetic_be
Location: Belgium
|
Thu Sep 18, 2008 6:12 pm Reply with quote
Grefix wrote: put your navigation and main in a container layer
below that container, you put your footer
Tried that too, but still.. no result.
I'm remaking everything now.. for like the 7th time this week.
Will skip the footer-layer, but use a table instead in where the vertical hight is 100% and split in 2 where the lowest part is 30 px high. That way, the bottom-text will always be at the bottom, no matter what.
I'll have a look at those video's Splodge.
Thanks.
|
TofuTheGreat
Location: Back where I belong.
|
Thu Sep 18, 2008 7:43 pm Reply with quote
Added borders so you could see what's happening.
Edit: works a bit better in IE than CSS compliant browsers. 
Code:
<html>
<head>
<title>Do you use them?</title>
<style>body {
font-size: 10pt;
text-align: center;
min-width: 600px;
font-family: arial, helvetica, verdana, sans serif;
}
#wrapper {
margin:0 auto;
text-align: left;
width:700px;
padding:5px;
border:1px solid #000000;
}
#header{
position:relative;
width:100%;
min-width:700px;
text-align:center;
border:1px solid #FF0000;
}
#navigation{
position: relative;
float:left;
width:15%;
height:100%;
border:1px solid #00ff00;
clear:both;
}
#content{
position:relative;
width:100%;
border: 1px solid #0000ff;
}
#footer{
position:relative;
width:100%;
text-align:center;
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> <h1>You Page Heada You!</h1></div>
<div id="navigation"> Throw yer nav menu here. <UL>s work good.</div>
<div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ut magna sit amet erat lacinia elementum. Morbi non erat
sit amet dui aliquam ullamcorper. Aliquam sed eros. Integer pede diam, faucibus eu, ultricies at, lobortis ullamcorper, nisl. Nam luctus condimentum
ligula. Nulla facilisi. Maecenas tincidunt ultrices elit. Vivamus tellus ligula, convallis quis, varius vel, aliquet eu, ante. Pellentesque in felis.
Nullam libero urna, ultricies nec, iaculis at, facilisis eu, ante. Donec in neque vel neque mattis gravida. Duis vitae nulla non felis lacinia cursus.
Cras dapibus euismod lorem.</p>
<p>Phasellus nec turpis. Nulla pellentesque nunc eget tellus. Pellentesque sit amet dui. Maecenas massa. Integer ac eros eget diam dapibus fringilla.
Curabitur leo enim, fringilla vitae, ultricies a, eleifend blandit, nisi. Phasellus ut nibh ut odio blandit condimentum. Suspendisse pretium tempor
dolor. Duis cursus purus. Etiam tortor.</p>
<p>Aenean ultricies massa id nisi. Nam eros. Vestibulum interdum arcu eget risus. Phasellus augue justo, aliquam non, mollis in, posuere ut, ipsum. Duis
in sem. Donec placerat fermentum nisi. Etiam sem lorem, venenatis in, pharetra semper, vehicula ut, nunc. Phasellus felis. Donec enim ante, tincidunt
sed, sodales a, feugiat nec, risus. Donec porta, nunc in cursus auctor, eros diam blandit libero, eu venenatis dui mauris eu felis. Integer metus pede,
laoreet id, rutrum et, suscipit quis, sapien. Nullam vitae mi. Sed lacinia, pede in aliquam suscipit, tortor metus volutpat diam, in rutrum pede urna in
est. Donec tincidunt faucibus nibh. Vestibulum ultrices ante vel mauris. Ut laoreet vulputate sem. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.</p>
<p>Integer ornare nisi in tortor. Suspendisse potenti. Nulla at enim. Proin eu nisl venenatis arcu dictum consectetuer. Integer consequat. Aenean
volutpat lorem. Cras ut nisl in mi sodales commodo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dignissim orci eu turpis. Aenean
eget nunc non nunc gravida tristique. Nulla eu magna.</p>
<p>Ut mi neque, pharetra ac, placerat in, eleifend sed, sem. Aliquam erat volutpat. Pellentesque massa enim, tincidunt eget, commodo at, porttitor in,
sem. Sed luctus pede in ante pretium molestie. Vivamus metus mauris, posuere id, consequat a, rutrum ut, sem. Praesent tincidunt auctor justo. Nullam
sollicitudin elementum elit. Sed neque. Pellentesque vel est id dui porta interdum. Phasellus gravida, leo vitae semper varius, orci pede viverra purus,
nec bibendum nisl sapien eget orci. Proin accumsan risus nec est. Proin tincidunt sapien at leo. Morbi diam. Nam id felis. Quisque diam. In dapibus ante.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div id="footer"> Have a Footeh!
</div>
</div>
</body>
</html>
_________________ Why I do believe it's pants-less o'clock! - Lar deSouza
”The mind is like a parachute, it doesn’t work if it isn’t open.” - Frank Zappa
Created using photoshop and absolutely no talent. - reyrey
|
kinetic_be
Location: Belgium
|
Fri Sep 19, 2008 5:48 am Reply with quote
TofuTheGreat wrote: Added borders so you could see what's happening.
Edit: works a bit better in IE than CSS compliant browsers.
Code:
<html>
<head>
<title>Do you use them?</title>
<style>body {
font-size: 10pt;
text-align: center;
min-width: 600px;
font-family: arial, helvetica, verdana, sans serif;
}
#wrapper {
margin:0 auto;
text-align: left;
width:700px;
padding:5px;
border:1px solid #000000;
}
#header{
position:relative;
width:100%;
min-width:700px;
text-align:center;
border:1px solid #FF0000;
}
#navigation{
position: relative;
float:left;
width:15%;
height:100%;
border:1px solid #00ff00;
clear:both;
}
#content{
position:relative;
width:100%;
border: 1px solid #0000ff;
}
#footer{
position:relative;
width:100%;
text-align:center;
border:1px solid #cccccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"> <h1>You Page Heada You!</h1></div>
<div id="navigation"> Throw yer nav menu here. <UL>s work good.</div>
<div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ut magna sit amet erat lacinia elementum. Morbi non erat
sit amet dui aliquam ullamcorper. Aliquam sed eros. Integer pede diam, faucibus eu, ultricies at, lobortis ullamcorper, nisl. Nam luctus condimentum
ligula. Nulla facilisi. Maecenas tincidunt ultrices elit. Vivamus tellus ligula, convallis quis, varius vel, aliquet eu, ante. Pellentesque in felis.
Nullam libero urna, ultricies nec, iaculis at, facilisis eu, ante. Donec in neque vel neque mattis gravida. Duis vitae nulla non felis lacinia cursus.
Cras dapibus euismod lorem.</p>
<p>Phasellus nec turpis. Nulla pellentesque nunc eget tellus. Pellentesque sit amet dui. Maecenas massa. Integer ac eros eget diam dapibus fringilla.
Curabitur leo enim, fringilla vitae, ultricies a, eleifend blandit, nisi. Phasellus ut nibh ut odio blandit condimentum. Suspendisse pretium tempor
dolor. Duis cursus purus. Etiam tortor.</p>
<p>Aenean ultricies massa id nisi. Nam eros. Vestibulum interdum arcu eget risus. Phasellus augue justo, aliquam non, mollis in, posuere ut, ipsum. Duis
in sem. Donec placerat fermentum nisi. Etiam sem lorem, venenatis in, pharetra semper, vehicula ut, nunc. Phasellus felis. Donec enim ante, tincidunt
sed, sodales a, feugiat nec, risus. Donec porta, nunc in cursus auctor, eros diam blandit libero, eu venenatis dui mauris eu felis. Integer metus pede,
laoreet id, rutrum et, suscipit quis, sapien. Nullam vitae mi. Sed lacinia, pede in aliquam suscipit, tortor metus volutpat diam, in rutrum pede urna in
est. Donec tincidunt faucibus nibh. Vestibulum ultrices ante vel mauris. Ut laoreet vulputate sem. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.</p>
<p>Integer ornare nisi in tortor. Suspendisse potenti. Nulla at enim. Proin eu nisl venenatis arcu dictum consectetuer. Integer consequat. Aenean
volutpat lorem. Cras ut nisl in mi sodales commodo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dignissim orci eu turpis. Aenean
eget nunc non nunc gravida tristique. Nulla eu magna.</p>
<p>Ut mi neque, pharetra ac, placerat in, eleifend sed, sem. Aliquam erat volutpat. Pellentesque massa enim, tincidunt eget, commodo at, porttitor in,
sem. Sed luctus pede in ante pretium molestie. Vivamus metus mauris, posuere id, consequat a, rutrum ut, sem. Praesent tincidunt auctor justo. Nullam
sollicitudin elementum elit. Sed neque. Pellentesque vel est id dui porta interdum. Phasellus gravida, leo vitae semper varius, orci pede viverra purus,
nec bibendum nisl sapien eget orci. Proin accumsan risus nec est. Proin tincidunt sapien at leo. Morbi diam. Nam id felis. Quisque diam. In dapibus ante.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div id="footer"> Have a Footeh!
</div>
</div>
</body>
</html>
Thanks Tofu, I will have a closer look at this tonight when I get back home and try it out.
|
kinetic_be
Location: Belgium
|
Fri Sep 19, 2008 5:47 pm Reply with quote
Ok, here's another question to keep the braincells fluing.
I uploaded a page with a Flash file in it. (swf)
When I go to this page, it's showing the image-holder only with a blank background.
The file is on the server and the link to it is correct.
When I go directly to the flash-file in my address-bar, it works fine, but it doesn't load in my page.
(i.e. www.webpage.com/files/flashfile.swf)
Any idea?
|
abraham
Location: Someday I'll be home for good.
|
Fri Sep 19, 2008 8:54 pm Reply with quote
Okay, since this is about web design, and I'm trying on it, I want to ask 1 question. What software is the best to use now, is it still the dreamweaver or only dreamweaver?
|
kinetic_be
Location: Belgium
|
Fri Sep 19, 2008 9:20 pm Reply with quote
abraham wrote: Okay, since this is about web design, and I'm trying on it, I want to ask 1 question. What software is the best to use now, is it still the dreamweaver or only dreamweaver?
Geeks will say: Text-editor
personally for me: Dreamweaver CS3
|
Goto page 1, 2 Next
Photoshop Contest Forum Index - Computer Problems - Webdesign question - Reply to topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
tables rock,
