.css columns for website navigation - html

I have something like the below for an electronic cigarette site I am designing:
<div id="top">
//code
</div>
<div id="nav">
//code
</div>
<div id="container">
//code
</div>
<div id="bottom">
//code
</div>
I want to structure it in a way that areas are defined by <div> tags and not by the contents themselves. Strictly speaking, things in a specific <div> element should be organized like the below:
I've tried things like float and it just looks tremendously ugly and text doesn't wrap properly. My first guess would have been to use css column properties but it splits the page into 2 parts with the bottom and top <div> elements being arranged above one or the other but never both.
I apologize if this is such a trivial task, but while I'm a pretty good logic programmer, css is not my strongest suit and it's something I generally devise through trial-and-error rather than rote memory or function.
The general spacing (ie. widths of <div> elements) is something I can accomplish, but just positioning things is something I'm at a loss about.
Here is the HTML:
http://pastebin.com/xbSypPcn
Here is the CSS:
http://pastebin.com/mZnBHPP0
Here is an image of what it looks like:
http://imageshack.us/a/img706/5117/uzbn.png
Here is an image of what I'd like it to look like: (excuse poor MSPaint work)
http://imageshack.us/a/img571/9219/uxm1.png
Excuse the very ugly site. I'd like to get the .css down before I furnish it to make it more aesthetically pleasing.

You should use something like this to accomplish your style task:
#top {
display: block;
height: 200px;
}
#left {
display: block;
width: 300px;
height: 500px;
float: left;
}
#right {
display: block;
width: 700px;
height: 500px;
float: right;
}
#bottom {
display: block;
height: 200px;
}
Combining the display: block with the right float and height and width settings should do the trick. I haven't tested this but the concept should help you get going in the right direction.
Additionally, you can nest div tags to get the desired text effect if the float is throwing this off.
For instance:
You may want HTML that looks like:
<div id="right">
<div id="right_content">
Your text here
</div>
</div>
edit/addition:
Thanks for adding your code HTML and CSS with the images is great! Since you are using a "liquid layout" % vs. px values... but you are still using px for your padding. I wonder if you took the padding values all out of the #contianer and #nav css styles it might fix it for you. It appears that you are very close now. You just need to trim the nav and container a bit so they look the way you are expecting them to look.
If you are using FF as a browser there is a great tool called Firebug that you can use to "inspect" your document. It will show you the html and corresponding HTML for whatever you point to. This tool has "saved my life" on many occasions.

Related

resizing multiple divs in absolute positioning

I have a small problem, I have 4 divs that have a fixed width and height of 50px and positioned absolute. The sample layout is 2 x 2.
They are manually positioned with 10px gap in between them. The problem is if I need to resize the boxes, I will have to resize them individually and recalculate the space in between since they are absolute positioning and will get worse the more divs I have. I was told that Sass may help me solve this issue. So I am trying to use Sass to help but I am not sure how to go about doing this.
An example:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css"/>
<title></title>
</head>
<body>
<div class="section">
<div class="box" id="box-position-1"></div>
<div class="box" id="box-position-2"></div>
<div class="box" id="box-position-3"></div>
<div class="box" id="box-position-4"></div>
</div>
</body>
</html>
CSS:
.section {
position: relative;
}
.box {
width: 50px;
height: 50px;
position: absolute;
border: 1px solid #000;
}
#box-position-3,
#box-position-4 {
top: 60px;
}
#box-position-2,
#box-position-4 {
left: 60px;
}
Instead of using absolute positioning, you can try something like float or display: inline-block (or even a table) which will make your div items flow together without having to manually adjust their distance from each other, or use individual ID's for each item.
There are multiple solutions you can try. I recommend the Table solution, but this can differ depending on your needs.
Using Float:
Check this JSFiddle
This is the easiest to set up! Just add float: left; to your .box class. This will allow the DIV elements to automatically position themselves one after another. Add margin: (number)px; in order to space these boxes a specific distance from each other.
Using inline-blocks:
Check out this JSFiddle
Same as above! Just add display: inline-block instead of the float. This will treat the divs like text, so be careful if you plan to insert these boxes in a block that contains text.
Using Tables:
This is most certianly the best way to go.
Here's a JS fiddle.
Tables are very well documented, so instead of explaining this code (which is completely different than the original) I'll provide you with some resources.
http://www.temple.edu/cs/web/tables.html
http://www.w3schools.com/html/html_tables.asp
(I know people hate w3schools but this article seems fine)
Edit: Cinnamon makes the point that Tables are potentially frustrating depending on their usage. Take a look at this Stackoverflow question before you decide which method to use.
Good luck.
Another note:
In your comment, you describe that you're creating a floor plan. I'd suggest using an SVG image to illustrate this, rather than HTML.

Div getting pushed to the right when using float:left on it

I'm currently creating a website and I came across a strange thing: I have a content div that's 950 width and centered on the page. Inside that I have a header div, a menu div and some other content div. I would like the menu div and that other content div to be right next to each other so I thought about using float:left on both divs. However, when I use this float:left on the menu div, it's getting pushed to the right and I can't figure out why. I think some other element is pushing it to the right.
I'm using a custom Drupal theme, a subtheme of Zen to create the page by the way.
Here's the HTML I'm using to create the page (without the header):
<div id="root">
<div class="content">
<div class="left-menu">
<ul>
<li><p>Camera</p></li>
<li><p>Audio</p></li>
<li><p>Licht</p></li>
<li><p>Lenzen</p></li>
<li><p>Grip</p></li>
<li><p>Accessoires</p></li>
<li><p>Recorders</p></li>
<li><p>Transport</p></li>
<li><p>Edit suits</p></li>
<li><p>Crew</p></li>
</ul>
</div>
<div class="products-overview">
This is some other content that I want to the right of the menu.
</div>
</div>
And here are some CSS properties I've set on left-menu and products-overview:
.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}
.products-overview {
background-color: #BBB;
float: left;
}
Could anyone please explain me why the left-menu is being pushed to the right?
Hmm, I believe this is a result of the normalize.css stylesheet you're using.
The problem stems actually from the .header element, which has a table within it. The normalizing stylesheet has a margin-bottom:1.5em applied to the table, which translates into a margin on the .header element (since it has no padding/border), which in turn sends the .left-menu to the right (since the margin causes there to be no space for it to fit on the left).
Adding to your current .header table definition can fix this, with a simple:
.header table{
margin-bottom: 0;
}
I hope this is what you were looking for! If not, let me know and I'll be happy to help further. Good luck!
I tried to replicate your problem. I did and found a solution that should work. Just set the products-overview class to float:none. See this fiddle. http://jsfiddle.net/shaansingh/yj4Uc/
In Mozilla Firefox it looks ok to me. From your code, I can only see that you need a width for the content div. and watch the dimensions, especially left/right padding and borders.

Keeping width/hight ratio and using div normally?

Im still having a bit trouble understanding my divs. Im trying to make a website that changes its sizes according to browser/screen size.
Ive gotten this far:
my html:
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="footer">Footer</div>
</div>
my css:
#wrapper{width: 60%;}
#header{width: 100%; padding-top: 11.00%;}
#left{float: left; width: 27.5%; padding-top: 44%;}
#right{float: left; width: 72.5%; padding-top: 44.00%;}
#footer{clear: both; width: 100%; padding-top: 11.40%;}
Now my divs are exactly the right size, the problem is that the conect is always at the bottom of the div but i need it to be like a normal div so i can do anything i want with it.
Whats the easiest way to use it like a normal div?
Thank you for any help! :)
Edit:
Here is what it looks like: http://jsfiddle.net/rswML/
... and as i said the problem is that the text is always at the bottom of the div. I understand its because of padding-top but i need it to keep the hight ratio to width andd still use the div normally.
What you are trying here is a responsive design concept. I advice you to try out bootstrap framework for this. Rather than doing everything by your own, you can get everything done by simply adding a class to your divs.
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience—easy reading and
navigation with a minimum of resizing, panning, and scrolling—across a
wide range of devices
I think the issue may be with your padding values. Perhaps adjusting them will allow you to have the control you want or maybe a margin-top would be better. Also, not sure if you were hoping to line up the tops of the elements #left and #right but those padding settings may render at different values. The padding-top property with a percentage references the containing block's width. Hope that helps. Cheers.
The solution was that i had to make header divs position: relative and then make another div inside of it that was position: absolute and width/height: 100%.

CSS & HTML book for print

Okay, so hypothetically, let's say I wanted to write a book using HTML and CSS only. How would I go about defining a page header and footer (and have page numbers in the footer)? And how would I make it so that page breaks and margins show up in the browser (like a preview mode)?
I know it sounds like I'm asking for someone to just write the code for me, but I really just need direction to resources for something like this. I'm just completely stuck on how I would even begin to do something like this.
To explain what I want to show in the browser; I want to be able to see small versions of each page like you would in a PDF viewer, basically the text overflow would create a page-break:
I have looked into #media print, but that doesn't have any hooks for creating headers and footers.
and I can't get this to work (from w3.org):
title { position: running(header) }
#page { #top-center {
content: element(header) }
}
I have looked at the code from Boom!, and It's nice for printing, but it doesn't display in browser the same.
So... does anyone now where I could/should look for a good starting point for this?
This was my solution:
<div id='document'>
<div class='page'>
<div class='header'></div>
<div class='footer'></div>
<div class='content'></div>
</div>
</div>
Everything went in <div id='document'>. For each .page, the .header, .footer, and .content had the right height and width for a page.
After that, I used JavaScript to cut out everything that was overflowing outside the div.content. I then cloned div.page, updated the page number inside of the new page's header <div>, and filled the new page's content <div>.
This was repeated until I had like 100 pages and nothing was sticking out of the last page's content <div>.
I am assuming that you are using pure HTML and there is no code behind.
Because if there is any code behind then its a different story.
Define a main div having class="page". Inside that define 3 divs for header, content and
footer.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
}
.header {
display: block;
height: 50px;
}
.content {
display: block:
height: 700px;
}
.footer {
display: block;
height: 50px;
}
Add additional style as per your requirement.
create another style sheet with media type ="print"
There add the following style for page.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
/* this will print the page in new paper*/
page-break-after: always;
}
and the HTML for one page will look like this
<div class="page">
<div class="header">HEADER CONTENT</div>
<div class="content"> MAIN PAGE'S CONTENT</div>
<div class="footer"></div>
</div>
Repeat the above code an per the number of page you need.
You can also use table layout for this purpose.
And if you use code behind, then the content can be generated dynamically.
Hope this helps.
Well, it could be done by pure HTML and CSS but definitely not the way to go as it would become very frustrating to repeat blocks of code, almost the same, every time you wanted to start a new page. For the PDF like left panel you could use Iframes, more info here
basically, you would make a .htm page for every page of your book, strictly linked together by links, and when you would be finished, you could take a screenshot of every page you made, save the thumbnails, and make another html page that would be the panel, which would be eventually included (as the tutorial in my link shows) in all the other pages for the book.
UPDATE
Regarding page breaks, you could make div-s with the same class, and styled as pages, as shown here

Simple html/css layout? (two column)

I'm having a very hard time trying to come up with html/css for a layout to suite the following:
Where the left area is a static menu. The right area is dynamic content, generated using a call to ASP.Net's RenderBody method. You may not believe it, but I have been trying to figure this out for hours. I keep getting either the right section ending up underneath the left section taking 100% of the width or not displaying at all, with Chrome's object inspector saying its 0 pixels wide.
I feel like a complete idiot as this seems as if it should be easy as pie. Could I please get some help?
There's several ways to go about this. Here's one not particularly fancy but straight-up way to go about it:
<body>
<div id="menu">MENU</div>
<div id="content"> content <br /> content <br /> content </div>
</body>
CSS:
div { border: 2px solid black; } /* demo purposes */
#menu {
float: left;
width: 150px;
}
#content {
margin-left: 154px; /* menu width + (2 x menu.border-width) */
}
See this jsfiddle for a working sample.
This solution has the added benefit that your content region will take up exactly 100% of the remaining width of its parent:
<div class="parent">
<div class="content">blah...</div>
<div class="left-menu">blah...</div>
</div>
CSS:
.parent { padding-left:200px;width:100%; }
.content { position:relative;float:left;width:100%; }
.left-menu { position:relative;float:left;width:200px;right:200px;margin-left:-100%; }
Excellent tutorial on fluid layouts: http://www.alistapart.com/articles/holygrail
Works in IE7 and newer, Safari/Chrome/Opera/Firefox...
The best way to do this is by using the already considered safe to use box-sizing property.
Take a look at the tinkerbin -> http://tinkerbin.com/AcJjYk0r
It works as you want it to. Fixed width for the menu, percentage based width for the content area.
Then...
...if you want the background-colors to expand to the highest of the heights between the two boxes (remember, one times the menu can be higher than the content box, and vice-versa), then the only way to go about it (no javascript) is to use a background image and place it below the two boxes. With css3 gradients (safe to use too) it's pretty easy. Take a look:
http://tinkerbin.com/3ETH28Oq