I made a website with div's, classes and everything a website needs. But when I resize the window all the inner text moves over the NavArea and Buttons overlap. Like even on StackOverflow the top of the page has the search text box and when I resize the window it just moves overtop. What's the solution to this? Here is the code--
CSS: http://pastebin.com/2rqinFJw
HTML: http://pastebin.com/u7eXUkwC
Please test the code before you post an answer please, I have tried everything and need an indepth answer that I can understand. I have spent way too long but do not plan to give up!
Ok!
So firstly, a main problem with your programming (as I see it) is that you're using absolute positioning way too often - like honestly, they should nearly never be used for creating a website layout.
Also, this part of your code:
<div id="b1">
<ul>
<li>Home</li>
</ul>
</div>
<div id="b2">
<ul>
<li>Downloads</li>
</ul>
</div>
No offense, this isn't the correct layout for a navigation bar. Your <a> tags should go inside your <li> tags, not outside! Also, you split your navigation up into two - this is completely unnecessary, while also using position: absolute; on a navigation bar - no need at all.
Here's what it should (or could) be:
<div id="b1">
<ul>
<li>
Home
</li>
<li>
Downloads
</li>
</ul>
</div>
Note how I've placed the two in the same <ul> tag, and also put the <a> tags inside of the <li> tags. I've also rearranged your CSS to do the same thing.
Not sure what your <div class="imageArea"></div> does, but I just threw it in there - it appears you got no CSS code for it anyways.
What I did to the main layout, was I moved it into a <div class="container">, which I used the following CSS on:
width: 1000px;
margin: 0 auto;
This will create a container of sorts that fits in the middle of your screen. You can adjust this width if you want - I just find that 1000px suits my needs rather well.
Also, I've floated both elements to the left of this - this allows the two <div> tags - your navigation section and your textBody, to go next to each other. I made them with a width of 20% and 80%.
Since I need some spacing in the middle, I added padding-right: 10px; to your navigation. Since this makes a total width of 100% + 10px (which would push the textBody down), I added box-sizing: border;box; in order for the padding to be counted into the width (so that it makes a total width still 100%).
Here's the final HTML and CSS:
http://pastebin.com/ZC2TFir2 (HTML)
http://pastebin.com/wEwzRP66 (CSS)
I don't think many will give you an answer as detailed as this (I know I normally wouldn't) - but in all honesty, I believe this webpage could be designed a lot better (plus I'm bored and work hasn't started yet).
Positioning everything absolutely is not a good practice. Absolute positioning will allow elements to move on top of one another. Absolute positioned elements don't care about the layout of other elements.
If you want a nav bar to float to the left of the text, use the float property, like so:
#nav {
float: left;
}
See this Fiddle: http://jsfiddle.net/bex5b0by/
You could just put in
#nav {
position: relative ;}
And after position:relative put in margin-left: -200px or whatever you want it to be. (You can use margin-left/right/top/whatever you need OR left/top/right/etc. : -number px / number px;
That means you place your div in relation to the other divs. But for this to happen you have to have the divs in one another. (< BIG div>
Related
I have trouble to add properties like position, margins etc to <div> element which is part of another <div> that have style that I want to keep.
Here is the link to screenshot of web page
I have problems with this gray transparent area, it is formatted to have re-sizable height, depend on elements in it and when I add positioning of another div ("customProperties") in CSS, original CSS is not applying (on screenshot you can see element above and belove the bottom line of gray area).
Here is the code:
<div id="wrap">
(...)
<div id="customProperties">
<ul>el1</ul>
<ul>el2</ul>
</div>
</div>
I'm sorry if there is similar question, but I just can't find solution...
You've applied position:absolute for #customProperties which takes the element out of normal flow. Hence it's parents size won't grow automatically.
side note:
<ul>el1</ul>
<ul>el2</ul>
is not semantically correct, it should be
<ul>
<li>el1</li>
</ul>
<ul>
<li>el2</li>
</ul>
So my problem is this - I have a div with fixed size of 970px. Inside it I want to create a horizontal menu where the first element will be a link to the home page with the logo of the company and the others will be standard links to different parts of the page.
What I want is to make the link with the logo wider than the other links and let the other links occupy the space left equally. Due to the fact that in near future the width of the container div may be changed even though I know the number of links I would like to use percentages to determine their width so the width of one link will be = (width of the div - width of the logo link)/5 (the number of link I'll have.
I tried with something like this
<div id="main-container">
<div id="logo-container">
</div>
<div id="standard-menu-container">
</div>
</div>
But I couldn't make it work (In fact all this is wrapped in one other div that I haven't shown here). So googling about this I get to the understanding that maybe using some sort of table may solve my problem. To be honest I have never used table this way but I followed an example and I got this result : JSFiddle Example where the red rectangle is meant to be my Logo link and the problem is that everything else is stacking under. In this particular example the logo link is excluded from the <ul> but I played around with that case too and simply trying to set one width in pixels and other - in percentage seems to be not what I need to do.
I would appreciate any help, just bare in mind that I tried a lot of styling with divs and display: inline-block and it breaks other parts of my structure so I would prefer a solution where the normal flow is not disturbed (like using a table for example)
You're on the right lines with the display: table-cell. I've made a few changes where you had extra code that wasn't needed, and set the <ul> to display: table, rather than the container. Adding table-layout: fixed will make items in the list (the cells) occupy an equal width.
Then, float the logo left, don't specify a width for #main-menu-navigation because then it will fill remaining space, and give it margin-left: 150px to cater for width of logo.
So that won't make much sense when read. Take a look here:
http://jsfiddle.net/LREbC/1/
Try resizing, the cells will adapt to the width.
Note: When using table-cell you don't need to define a width, the behaviour is the same as actual table cells.
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>
I have maybe a little bit strange task, but I belive there is no better solution. I need to have <ul> in some container which width is changeable and with inlined <li> elements of fixed width. I should (and already found solution) put spaces between <li> elems of same width. Width of spaces is changes dynamicaly and depends of parental container width. Again, this <li> items have fixed width.
I also should place some links above this described elements. For some reasons links must be in other <ul> element. They also wrapped in inlined <li> elems. And I want them to be positioned right above described <li> items. This can be done by setting fixed width of <li> items as above. Now, the problem is that text in every link is actualy have different width and will break into two lines, but I must place it into one line.
So I want to trick browser: text will be overflowing <li> items.
.liElem {
width: 100px;
height: 20px;
overflow: visible;
}
But, as you may guess, text is breaking into two lines and overflowing actually the bottom of list items, not the right side.
The effect I wanted can be done by inserting insted of spaces in text like this: <li>Add to Favourites</li> .
So, my question is this: how in css-way make usual text NOT to break into several lines ?
.nobr { white-space:nowrap; }
I'm coding my first liquid layout and I have to say it's a lot more time-intensive than a fixed width layout. However, I see the advantages and so I'd like to make it work!
Here's my situation:
I have a header with some text in that makes the header of variable height depending on the browser text size.
I have a fixed-width nav on the left. The nav is floated left and has a negative margin the same number of pixels as the width which effectively makes it slot into a zero-width space. Neat!
I have my main content section which is floated right. It has a left margin the width of the nav so the content avoids hiding underneath the links of the nav.
The nav comes second in the source so the users of assistive tech get to the content first.
This works great but only if the content of the main content section has lines of text that wrap around the full width of the page. If the content in only short lines or a list the content section's width is the same as the content within it. As the content section is floated right it means the content looks wrong in these situations. Obviously the page width is variable and so for larger monitors this problem is more common.
I'm looking for a way of showing the content section filling the page at all times so that the content will sit on the left and fill out to the right even when the lines are short. I've tried absolute positioning but that messes up the footer which stays in the right place by clearing the floated nav and content section.
Any suggestions would be really useful!
Edit:
As requested I've provided some demo pages.
Here is a page which has wide content and looks OK: http://www.qkschool.org.uk/static/redesign/widepage.html
And here is a page with thin content which is all right-aligned because of the float: http://www.qkschool.org.uk/static/redesign/thinpage.html
Many thanks!
This has always been a favorite source of mine for liquid layouts:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
(Make sure to click around for all the different variations)
I'm not saying you should abandon learning yourself, but I think it's worth a look at some of the tricks used in those layouts. All of them work great in IE6 and IE7 as well, and use good content-first source order. They can be easily turned into fixed-width if needed. I honestly have never found another layout that I like as much as the ones posted on this website.
One variation I use with these layouts is wrapping every column with an extra inner div, and setting the margin or padding on this div and nothing else, this will make the width and positioning calculations a lot simpler (you'll see if you check it out). I also wrap the entire thing in a div for easier max-width and centering.
Good luck and let me know if you need any advice with this technique, I've been using it for years and it has served me well.
Here is summary of my own layout technique which is in use on many sites, it can take any number of columns, but this sample just copes with your left one :
JSFiddle example
the sample shows the footer will always remain below longest column
the sidebar can be any width just change the margin of the content to suit, you can even float two sidebars to the left - then just increase the margin on the #content to clear them.
Alternatively (or as well) the sidebar (or 2) can be floated right, then you just margin the #content div on right instead of the left to "clear" them
This is source ordered, content before sidebars.. it can incorporate any number of headers subheadings and footers (or under content) without affecting the main "columns" area, and you can float your sidebars (if more than one), in any order too.. thus changing their order, width, number even after the fact, via CSS alone
I think my layout technique may have even been incorporated into some Drupal themes and is in use, it's certainly been used on some larger sites too, but I lost track.. it's never let me down anyway :)
here's the template code..
CSS:
html, body {padding: 0; margin: 0;}
#footer,#header {background: #444; color: #fff; clear: both;}
#container { /* always the same don't add anything here */
overflow: hidden;
width: 100%;
}
#contentwrap {/* always the same do not add anything else here */
float: left;
width: 100%;
margin-right: -100%;
}
#content {
margin-left: 270px; /* same as width plus padding of the sidebar(s) and in the same direction(s) */
padding: 20px;
border-left: 1px solid #444;
}
#sidebar {
float: left;
width: 230px;
padding: 20px;
background: #dad;
border-right: 1px solid #444;
}
HTML:
<div id="header">header</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<h1>Content remaining width</h1>
<p>add more content here</p>
<h2>Header Level 2</h2>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="sidebar">
<p>short sidebar</p>
<p>add more content here until this gets longer than main and the footer will still stay below</p>
</div>
</div>
<div id="footer">footer</div>
This really is very flexible as sidebars can be fixed width or fluid too, and it will work with ems , %, px.. you name it
yes I'm attached to this code ;)
Edited to add
If older IE's (6 did) do give trouble with floats/hovers inside the content area, the #content div may need haslayout set, if so just add zoom: 1; to it in fact in my layouts I still do out of habit!
If you think in terms of physics, even liquids have boundaries. When it expands too much it becomes gas. When it contracts too much it becomes solid. In web design, boundaries are important as well. I suggest researching into Elastic design (translates loosely to design that is flexible within specific parameters).
Here are some links to get you started:
A List Apart: Elastic Design
CSS Layouts: The Fixed. The Fluid. The Elastic
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
It´s hard to tell without seeing the design, but 100% heights and widths can be faked styling the parent element (for example using a background on the body or a wrapper div).
If your last point is not crucial (I guess it is because you mentioned it...) you can also switch the order of your floats and remove the float from the content.
You could try using the Fluid 960 grid system - get it working, and then remove/rename classes to make it a bit more semantic.