homepage Welcome to WebmasterWorld Guest from 54.237.54.83
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Little DIV problem.
TomVDJ




msg:4387527
 8:38 am on Nov 16, 2011 (gmt 0)

Hello, I made a layout with divs:
<snip>

I want to accomplish that the outer div resizes to the size of the content div. If you scroll down now, you'll notice that the wrapper div stops at 100% of the viewer port, but I want it to include the complete content div. I used absolute positioning for the top image to go under the content div and the menu.

A second question: I don't want to create each page with the menu inside. I'd like to use a "iframe-like" method, so I have the content in seperate files, and the index page as frame to hold the layout of the site and the menu. What would be the most user-friendly way to do this?

[edited by: incrediBILL at 5:00 am (utc) on Nov 17, 2011]
[edit reason] no links please [/edit]

 

birdbrain




msg:4387667
 5:14 pm on Nov 16, 2011 (gmt 0)

Hi there TomVDJ,

your page has quite a few coding errors...

...so recoding it seemed appropriate. :)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.ktprojects.be/newtest/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
background-color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:11pt;
}
#wrapper {
width:750px;
min-height:100%;
margin:auto;
background-image:url('bg.gif');
overflow:hidden;
}
#header {
height:300px;
background-image:url('header.gif');
}
#menu {
float:left;
width:170px;
padding:0;
margin:-160px 0 0;
list-style-type:none;
}
#menu a,#menu a:visited {
display: block;
width:147px;
padding:5px 0 0 8px;
border-bottom:2px solid #fff;
font-weight:bold;
color:#fff;
text-decoration:none;
}
#menu a:hover, #menu a:focus{
border-color:#005014;
}
#content {
float:left;
width:510px;
padding:20px;
margin:-160px 15px 15px;
background-color:#9cb8c9;
color:#000;
border-radius:14px;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="header"></div>

<ul id="menu">
<li><a href="home.htm">Home</a><li>
<li><a href="wiezijnwe.htm">Wie zijn we?</a><li>
<li><a href="projecten.htm">Projecten</a><li>
<li><a href="activiteiten.htm">Activiteiten</a><li>
<li><a href="media.htm">In de media</a><li>
<li><a href="info.htm">Info</a><li>
<li><a href="links.htm">Links</a><li>
<li><a href="contact.htm">Contact</a><li>
</ul><!-- end #menu -->

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit
suscipit malesuada. Cras tortor ligula, vehicula nec porta a, condimentum
sit amet nulla. Integer semper mollis elit, eu vestibulum erat accumsan et.
Proin vestibulum est eget dui sagittis id porttitor tellus rutrum. Nam
cursus orci eu felis lacinia porta laoreet erat faucibus. Aenean turpis
urna, tempor et venenatis semper, varius nec odio. Etiam vel magna massa.
</p><p>
Vestibulum elementum vehicula purus, vel auctor arcu adipiscing quis. Duis
vestibulum tellus vitae nisl volutpat egestas sit amet non dui. Nullam
aliquet tempus elementum. Curabitur porttitor tortor nec elit mollis eget
dapibus nulla euismod. Donec eleifend, arcu quis blandit auctor, lorem velit
ullamcorper est, id varius magna magna at justo. Sed sodales velit ac diam
rhoncus et commodo nulla pulvinar. Cras eu nibh vitae velit sagittis
scelerisque. In et dolor sagittis massa imperdiet euismod. Aenean euismod,
mauris vel iaculis lacinia, dui diam vehicula felis, nec venenatis velit
libero in ligula. Vestibulum sed arcu massa, vel auctor nulla. Quisque
consectetur viverra venenatis. Donec vehicula purus ut lectus tempor
bibendum. Aliquam a est auctor eros laoreet dictum a sit amet nisl. Aliquam
erat volutpat. Praesent venenatis nisi in mi aliquam suscipit. Mauris dictum
enim et enim faucibus volutpat.
</p><p>
Nulla vel dolor nec diam tincidunt laoreet. Phasellus viverra, massa ac
sollicitudin egestas, metus leo scelerisque augue, vel molestie mi arcu nec
leo. Vivamus at ligula sed augue faucibus pellentesque. Aliquam rhoncus ligula
vel velit ultricies lacinia non id neque. In suscipit imperdiet mi, a tempus
nunc facilisis ut. Curabitur quis nibh in turpis cursus suscipit. Mauris tempor
rutrum enim eu rhoncus. Integer luctus nisl ut ipsum sagittis posuere. Praesent
accumsan consequat porta. Suspendisse magna quam, sodales ac cursus quis,
placerat ac nisi. Fusce egestas imperdiet nunc ac sagittis. Curabitur pharetra
purus tempus odio bibendum vitae iaculis est posuere. Donec vitae consequat sem.
Fusce non volutpat turpis.
</p><p>
Vivamus ac ante et quam posuere elementum. Nulla facilisi. Curabitur lacinia,
mi non aliquam blandit, augue dolor fringilla purus, sit amet ultrices augue mi
a lacus. Vestibulum sagittis commodo venenatis. Vestibulum nec ligula eu justo
eleifend aliquet sollicitudin ut elit. Donec quis consequat odio. Quisque tortor
lacus, elementum et laoreet id, tincidunt fringilla orci. Morbi blandit lacus a
ipsum ornare commodo. Praesent luctus posuere elit eu commodo. Mauris non gravida
arcu. Integer iaculis tempus ornare. Maecenas sagittis tempus augue, ac
ullamcorper augue suscipit ultricies. Mauris et nunc ante. Pellentesque quis
magna eu justo sagittis molestie vel eu odio.
</p>
</div><!-- end #content -->

</div><!-- end #container -->

</body>
</html>

Personally, I would suggest that you did not use the iframe element for this project.

birdbrain

penders




msg:4387719
 7:40 pm on Nov 16, 2011 (gmt 0)

Regarding your second question... if you are not using PHP (ie. PHP includes) then maybe Server Side Includes [webmasterworld.com] are more appropriate. As birdbrain suggests, I would avoid iframe elements for this.

TomVDJ




msg:4387740
 8:13 pm on Nov 16, 2011 (gmt 0)

birdbrain, thanks a lot for the help! This is indeed what I was looking for. I'm not font of the iframe element either. I'll take a look at the server side includes penders is pointing to. Anyway, thanks for the help to both of you.

birdbrain




msg:4387747
 8:32 pm on Nov 16, 2011 (gmt 0)

No problem, you're very welcome. ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved