?
Solved

CSS - Beginner struggling with content inside a wrapper

Posted on 2011-10-24
17
Medium Priority
?
358 Views
Last Modified: 2012-05-12
hello experts...

I am slowly transitioning from MS access, VBA etc to doing a few websites.  Been trying to get my head around css and failing... it seems there aren;t any good free css div drawing packages...

I want a css div that is centered on the page, white background, black border 1 px.....

I want it to be 770px wide, and variable height.

Inside it i want a col1 (left) about 150 wide, for the Navigation list... and col2 (right) taking up the rest of the 770 (770-150 = 620...) so should it be 620?

Regardless of how much content there is in the col2... i want the navigation to float vertically so that its always visible, as the viewer scrolls down column 2.

IS this all possible with CSS....?

I have cobbled together so many failed versions using various tutorials..... i know i could do this with just a table or a frameset (old school!) but want to do it properly.

suggestions please.

What would really help is being able to draw the divs i want and see them on the page i think... i am too used to R.A.D. in access or .Net!
0
Comment
Question by:Simon Ball
  • 5
  • 4
  • 3
  • +2
17 Comments
 
LVL 8

Expert Comment

by:Jen0910
ID: 37020183
Looks like what you're talking about is a menu that is fixed at the top of the screen. "Float" is a CSS term that means something completely different ;-)

To do that with your nav column, you will need a javascript/jquery solution. You can make your navigation column fixed on a screen easily with CSS, but you will not be able to retain your horizontal position across multiple window widths (user-defined settings) as it stays fixed with no regard to your other content. If you share code, I can help you implement the jquery to accomplish (what i think) you are saying.

Just a separate thought here, 770px seems like a pretty small page width. Any reason you chose that specific number?
0
 
LVL 15

Author Comment

by:Simon Ball
ID: 37020198
thin, as i want it to look ok on mobile devices.....

in retrospect, content is unlikely to go that far in col2 that the menu will need to stay on screen....  i just need some css help t get a page layout working.

0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 37020200
First thing is that CSS depends on the HTML elements being applied correctly.  CSS is not independent of HTML, it work with it.  And there is no such thing as a "css div drawing package".  They all have to generate the HTML to apply the CSS to.

Floating elements usually have to be outside of any other elements but the body.  Putting them inside another <DIV> ties them to that <DIV>.  Also, some of these effects are done with javascript, not just CSS and HTML.

I started learning HTML and then CSS by looking at the source code for simple web sites to see what they were doing.  I use Photoshop and Gimp and other graphics packages to edit images but I use a code editor to put it all together.  I would use Dreamweaver but I can't afford it... I can do everything I need without it though it would make some things easier.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 8

Accepted Solution

by:
Jen0910 earned 1200 total points
ID: 37020394
So you dont want your navigation to be "always visible?" Guess I'm a little confused now, but I'll still try to help! Attached below is basic code for you (will not keep your nav always on screen).

As far as your window size, I understand wanting a nice transition into the mobile world, but if you use percentage measurements instead of pixel measurements you can have a website that looks fine on mobile devices that also transitions well and takes advantage of your desktop window sizes. There are also CSS media queries and various tricks we now use to ensure good mobile display.

Basic code here as you described:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:18px;
	font-style: normal;
	color:#000;
	text-align:center;
	font-weight: normal;
	font-variant: normal;
	background-color:#FFF;
	}

/* centers content in window */
#content-wrapper {width: 770px;
	text-align:left;
	margin: 0 auto;
	background-color:#fff;
	border:1px solid black;
	}


/* start col1 content */
#col1 {
	width:150px;
	position:relative;
	float:left;
}

/* start col2 content */
#footer-area {
	width:620px;
	position:relative;
	float:right;
}
</style>
</head>


<body>

<!--opening divs -->
<div id="content-wrapper">

	
    
    <!--col1 div -->
	<div id="col1">content col1
    </div><!--end main divs -->
    
    
    
    <!--col2 div -->
	<div id="col2">content col2
    </div><!--end footer divs -->
    


<div style="clear:both"></div>
</div><!--end opening divs -->
</body>
</html>

Open in new window


Percentage values based on the spacing you mentioned, if you decide to try them. this will stretch with your browser/media size:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{margin:0;padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height:18px;
	font-style: normal;
	color:#000;
	text-align:center;
	font-weight: normal;
	font-variant: normal;
	background-color:#FFF;
	}

/* centers content in window with some ,argins along the sides */
#content-wrapper {width: 90%;
	text-align:left;
	margin: 0 auto;
	background-color:#fff;
	border:1px solid black;
	}


/* start col1 content percentage based off of your 150/620 ratio */
#col1 {
	width:18%;
	height:auto;
	position:relative;
	float:left;
}

/* start col2 content */
#footer-area {
	width:82%;
	height:auto;
	position:relative;
	float:right;
}
</style>
</head>


<body>

<!--opening divs -->
<div id="content-wrapper">

	
    
    <!--col1 div -->
	<div id="col1">content col1
    </div><!--end main divs -->
    
    
    
    <!--col2 div -->
	<div id="col2">content col2
    </div><!--end footer divs -->
    


<div style="clear:both"></div>
</div><!--end opening divs -->
</body>
</html>

Open in new window

0
 
LVL 8

Assisted Solution

by:twohawks
twohawks earned 200 total points
ID: 37020540
Yes, this is possible.
I would recommend doing this with pure css. i.e., I think you are on the right track wanting to use divs.

I would urge you in the following flow of steps to accomplish the goal...
(I am going to provide what I think will be some invaluable pages for you to check out.)

1) Understanding some of the following  basics can help you not get stuck
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.w3schools.com/css/css_positioning.asp
http://www.yourhtmlsource.com/stylesheets/csslayout.html#centering
http://www.digital-web.com/extras/positioning_101/css_positioning_example.php

2) The next thing you will want to look into is multi-column layout
http://glish.com/css/
http://pmob.co.uk/pob/equal-columns.htm
http://pmob.co.uk/temp/3colfixedtest_4.htm
http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
http://www.ejeliot.com/blog/61

3) Then you are possibly going to want be looking at how to sticky stuff, like header/footer for instance, and then how to float a menu
http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/
http://ryanfait.com/sticky-footer/ (not grreat, but common and helpful to an extent)
http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm
http://positioniseverything.net/piefecta-rigid-left.html
http://stackoverflow.com/questions/5746243/difference-between-css-sticky-footer-implementations
http://css.maxdesign.com.au/floatutorial/
http://www.satzansatz.de/cssd/companions.html

sidebar/menu stuff
http://www.w3schools.com/css/css_navbar.asp
http://www.quackit.com/css/codes/css_floating_menu.cfm
http://www.cssplay.co.uk  (lots of css investigation by Stu Nichols)

On the floating menu / sidebar specifically, if you end up heading into jquery you may like this
http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

============
I will cut this there. Hopefully you will find these to be some helpful resources to begin cutting thru the kr-p.

It is not typical protocol to post links for an answer, however, I am working under the assumption that you would like to tap into some resources for learning more directly how to tackle the problem with a recommended approach, in my case, pure css.

I am not implying you haven't scoured the internet for solutions.
And I am not saying not to use a smattering of javascript, or not to go with a javascript tool like jquery if that's what you want.  
I am simply saying you can do this with css, and some of those links may contain enough info (possibly a better direct route) to get your leg up on this problem.

Hope this helps.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
ID: 37020611
this works perfectly in modern browsers.  you won't get the border unless you specify a height.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>your site</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<style type="text/css">
	#main {margin:auto;width:770px}
	#nav {position:fixed;width:150px;height:200px;top:0;left:0;padding:10px}
	#content {width:620px;clear:both;float:right;padding:10px}
	</style>
	<script type="text/javascript">
	function setFixed()
	{
	Nav=document.getElementById('nav');
	Main=document.getElementById('main');
	Nav.style.top=(Main.offsetTop - 1)+"px";
	Nav.style.left=(Main.offsetLeft - 1)+"px";
	}
	window.onload=setFixed;
	window.onresize=setFixed;
	</script>
	</head>
	<body>
	<div id="main">
	<div id="nav">
	Nav one <br />
	Nav 2 <br />
	Nav 3 <br />
	Nav4 <br />
	</div>
	<div id="content">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a lacus vel nisl varius tincidunt. Curabitur rhoncus posuere risus non rutrum. Sed at viverra metus. Sed vel urna turpis, eu tempus turpis. Nulla lectus metus, molestie ac tristique ac, suscipit dapibus ipsum. Morbi vel libero id mauris tincidunt ullamcorper. Duis sit amet dapibus lorem. Aliquam eget urna eget est fringilla blandit. Vestibulum aliquam hendrerit bibendum. Sed at libero id dui bibendum fringilla.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in nunc justo, ac aliquet velit. Sed sapien eros, molestie vel volutpat ac, volutpat iaculis orci. Aliquam tristique, est id sagittis dictum, erat quam porta odio, vel blandit nulla mi id nibh. Pellentesque pretium ipsum sed quam fermentum eget semper eros interdum. Ut ac nisl urna, vitae dapibus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec a dapibus mi. Integer accumsan lectus eget ligula adipiscing imperdiet a nec neque. Fusce nulla mi, congue sit amet lacinia at, rhoncus sit amet nisl. Nam viverra odio ultricies tellus aliquet non pretium massa egestas.

Sed vestibulum congue elit non fringilla. Proin nec est a nulla rutrum dapibus in nec tellus. Ut vel hendrerit neque. Vestibulum facilisis faucibus cursus. Duis vulputate facilisis nibh quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras lobortis semper tempor. Vestibulum mi nibh, gravida eget posuere ut, posuere at nunc. Vivamus ultricies magna nec justo sollicitudin tincidunt. Morbi lacinia vestibulum euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat scelerisque fringilla.

Proin venenatis interdum lacinia. Cras luctus lobortis est, a lacinia orci luctus sodales. Vestibulum tristique elementum consectetur. Vivamus sed sodales mi. Donec ut tellus nisl. Fusce dui augue, sollicitudin vitae bibendum eu, hendrerit eget erat. Nunc at ante est, ac dapibus libero. Sed sem massa, semper id semper a, volutpat vel nisl. Proin tincidunt gravida dolor eu posuere. Maecenas lorem elit, sollicitudin vel dapibus at, posuere sed mauris.

Nulla facilisi. Praesent dictum odio sed enim sodales suscipit. Morbi faucibus dolor nec neque euismod in tristique dui blandit. Ut nulla tellus, ultricies at malesuada in, pharetra condimentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec sem in lacus elementum lobortis. Integer nisl lacus, pulvinar ac faucibus et, tempor at ipsum. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a lacus vel nisl varius tincidunt. Curabitur rhoncus posuere risus non rutrum. Sed at viverra metus. Sed vel urna turpis, eu tempus turpis. Nulla lectus metus, molestie ac tristique ac, suscipit dapibus ipsum. Morbi vel libero id mauris tincidunt ullamcorper. Duis sit amet dapibus lorem. Aliquam eget urna eget est fringilla blandit. Vestibulum aliquam hendrerit bibendum. Sed at libero id dui bibendum fringilla.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec in nunc justo, ac aliquet velit. Sed sapien eros, molestie vel volutpat ac, volutpat iaculis orci. Aliquam tristique, est id sagittis dictum, erat quam porta odio, vel blandit nulla mi id nibh. Pellentesque pretium ipsum sed quam fermentum eget semper eros interdum. Ut ac nisl urna, vitae dapibus turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec a dapibus mi. Integer accumsan lectus eget ligula adipiscing imperdiet a nec neque. Fusce nulla mi, congue sit amet lacinia at, rhoncus sit amet nisl. Nam viverra odio ultricies tellus aliquet non pretium massa egestas.

Sed vestibulum congue elit non fringilla. Proin nec est a nulla rutrum dapibus in nec tellus. Ut vel hendrerit neque. Vestibulum facilisis faucibus cursus. Duis vulputate facilisis nibh quis venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras lobortis semper tempor. Vestibulum mi nibh, gravida eget posuere ut, posuere at nunc. Vivamus ultricies magna nec justo sollicitudin tincidunt. Morbi lacinia vestibulum euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat scelerisque fringilla.

Proin venenatis interdum lacinia. Cras luctus lobortis est, a lacinia orci luctus sodales. Vestibulum tristique elementum consectetur. Vivamus sed sodales mi. Donec ut tellus nisl. Fusce dui augue, sollicitudin vitae bibendum eu, hendrerit eget erat. Nunc at ante est, ac dapibus libero. Sed sem massa, semper id semper a, volutpat vel nisl. Proin tincidunt gravida dolor eu posuere. Maecenas lorem elit, sollicitudin vel dapibus at, posuere sed mauris.

Nulla facilisi. Praesent dictum odio sed enim sodales suscipit. Morbi faucibus dolor nec neque euismod in tristique dui blandit. Ut nulla tellus, ultricies at malesuada in, pharetra condimentum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec sem in lacus elementum lobortis. Integer nisl lacus, pulvinar ac faucibus et, tempor at ipsum. 
</div>
</div
	</body>
</html>

Open in new window

0
 
LVL 8

Expert Comment

by:twohawks
ID: 37020713
Something I left out (aside from lots of other great resources any of us could flood this post with)..
I prefer to work initially in Firefox while developing, and then begin checking in other browsers.  That's just my own preference.
After I sort out the essentials with some other non-IE browsers THEN I begin attacking the IE issues that inevitably are going to piss me off, uh, I mean pose unique challenges.

So I think its worth commenting, once you face having to begin applying adjustments for IE browsers, I would recommend steering away from 'hacks' as much as possible and instead focus on using IE conditional comments to tame IE to play nice once you have a functional base.
I code as low as 6, but it is not uncommon nowadays to just let it go.  Even IE7 is almost too much to bother with, but anyway...

Here are some what I think are essential resources for IE comments
http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
http://www.impressivewebs.com/conditional-comments/
http://alastairc.ac/2008/05/nested-conditional-comments/

What I like to do is use links to my conditional comments  in the head, and be sure to arrange calling them in an appropriate trickle-down fashion.
That can help in some cases to reduce nesting requirements.

The trickle down order is going to come down to how you get into using things like "if is less than" or "if is greater than" a certain version of IE.
I would not worry about this up front, I would simply start working the problem(s) and let that be my guide to how ordering "falls into place".

Hopefully these are some useful tips.  May be mute if someone here ends up doing all the code for you, but useful if you are digging thru the internet to learn ;^)
0
 
LVL 15

Author Comment

by:Simon Ball
ID: 37021460
so is there a free html editor in which i can draw a div, and set its dimensions by dragging, and then export the css and html?
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 400 total points
ID: 37021505
No, because a <div> is not a box in that sense.  In another current question, the asker is having a problem because his <div> collapses to 0 height when there is no content in it.  In addition, the behavior of any HTML element depends on the elements that surround it.  A program like Dreamweaver will 'let' you do a lot of those things but only in the context of a complete web page where it can set up the div according to the rules.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37021540
so is there a free html editor in which i can draw a div, and set its dimensions by dragging, and then export the css and html?


Nothing I would use or recommend.

There are plenty of development tools but I have yet to find any that allow me to improve on what I can do with a simple text editor and a standards compliant browser.  I use Programmer's Notepad and it supports about 50 or 60 languages and let's me develop quickly.  That's all I need.  If you use code generators before you know how to do the coding yourself, you will not be able to go beyond the limits of the tools; and they ALL have limitations and flaws.

0
 
LVL 8

Expert Comment

by:twohawks
ID: 37021771
Just as Cd, I don't know of anything I would recommend, but there certainly are code generators out there.  Without experience you would probably just get into deep doo-doo.

Did you check out any of the links I posted?
If you are looking for a template/beginning-framework for getting a leg up, perhaps Paul O'Brian's site (see pmob links in my post) would be a kick for you - really.  He's got great tut's and examples, and likely the framework you are looking for is right there - or mighty close to it.

That would be much better than any sort of generator.  Believe me (and Cd), you don't want go there.

Tell us, what are you using for coding right now? And are you happy with that?
Reason I ask, you may have better luck with something else (depending) as far as taking something, say as a template or framework you snag online for editing and tweaking into your dream.

Perhaps we can make some suggestions based on your input?
0
 
LVL 8

Expert Comment

by:twohawks
ID: 37022050
Check out this example
http://pmob.co.uk/pob/vertical-center1.htm
(from this tut http://pmob.co.uk/pob/hoz-vert-center.htm).


Use your browser's "development bar" to

1) add a lot more text to div.maintext
2) add overflow:scroll to #xinner

(...or download the page and edit it in a manner you are familiar with)

..is this getting into the neighborhood of what you are thinking about (sans anchored sidebar [column 1] just yet), except that the whole div's  height should be fluid (i.e., remain a certain distance from the bottom of the viewport no matter how you resize the page?

Just trying to get a better bead on what you are after.
0
 
LVL 15

Author Comment

by:Simon Ball
ID: 37028428
this is all superb stuff.

Sorry i cross posted, i had not refreshed my browser and seen the additional posts when i asked about a gui.

I have had a play with the first piece of code posted and it has given me mostly what i want although when the browser window is really slim the content of col2 goes under col1....and also col2 when longer wraps under col1.

see www.monicadances.com for what i have put into practice so far.

I will read those resources, and tomorrow i will split points between you all.

keep those eyes peeled because there will be a few more questions coming along on wednesday!

thanks

Sudo.
0
 
LVL 84

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 400 total points
ID: 37028505
If you keep that pic of the dancer, it should be resized to 375high to fit in the div.  It is 8 times larger than needed at the moment and is taking a long time to load.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37028676
when the browser window is really slim the content of col2 goes under col1....and also col2 when longer wraps under col1.

Of course..............the elements have widths declared as percentages so they re-size until the lack of space forces the browser to re-align them.

There are three options
use absolute values and when the screen is narrowed the right side gets cutoff and the brower adds a scrollbar at the bottom of the window
Use percentages... you see how that behaves
Go hybrid by using percentages but also using min-width to force the browser to go to the rigid format if the window gets too small.



0
 
LVL 15

Author Closing Comment

by:Simon Ball
ID: 37033530
thanks all of you for the excellent help.  would have handed out more points if i could.

I'll be back!
0
 
LVL 8

Expert Comment

by:twohawks
ID: 37035712
glad you are getting a leg up on it. thanks for the points;^)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question