I'm just starting to look at html/css and having some problems getting my head around how the layout engine works.
I'm from a c# background and anything with hardcoded widths/heights feels like something is wrong. One of the first things I discovered is that you can't make divs expand to fill their available height in a sensible way, so I've been using tables.
The UI I want is basically a grid, which is the main part of the page with a side panel. The idea is to navigate the grid with the arrow keys and then select options for a cell using the side panel - its a fairly straightforward master/detail.
I'm happy with using a table to seperate the two columns but the problem I'm running into is in the side panel:
I want to have a search box at the top. When you type into the search box it 'autocompletes' to show you a options relevant to what you just typed.
The first problem I had was that the search box wasn't at the top of the cell in the grid. So I was using:
position: absolute;
top: 0;
for the <input> with a position:relative set in the td.
I was then using another div inside the cell to layout the results. That works fine but the search box obscures the first item.
I then tried changing the search box to have display: block which solves the problem but means the search box isn't top aligned when there are no search results!
It seems like using the display and position attributes are mutually exclusive so how do I achieve this in a sensible way?
One option seems to be to just use tables for everything, is there anything wrong with that?
#mainLayout
{
width: 100%
}
#turnSelectionPanel
{
/*visibility: hidden;*/
width: 30%;
height: 100%;
background-color: saddlebrown;
/*this is to allow positioning within this element using 'absolute'*/
position: relative;
}
#turnSearchBox
{
min-height: 20px;
max-width: 200px;
min-width: 100px;
display: block;
/*or
position: absolute;
top: 0;
*/
}
<body>
<table id="mainLayout">
<tr>
<td>
<table id="roster"></table>
</td>
<td id="turnSelectionPanel">
<input type="text" id="turnSearchBox"/>
<div id="turnArea">
</div>
</td>
</tr>
</table>
</body>
I've ommitted some of the other css for brevity's sake + some of the stuff shown there is basically irrelevant - widths etc.
The table + sidepanel is populated from javascript
This is a basic structure that you can you use.
<body>
<!-- This is a wrapper that controls the total height and width of page elements -->
<div id="mainLayout">
<!-- You can position the elements however you would like. -->
<div id="leftColumn"> ...Code goes here... </div>
<div id="searchBar"> ...Code goes here... </div>
<div id="rightColumn"> ...Code goes here... </div>
</div>
</body>
I am particularly fond of using float:left; to arrange my elements. Something like:
#mainLayout {
width:100%
height:100%;
}
#leftColumn {
width:75%;
height: 100%;
float:left;
}
#searchBar{
width:25%;
height: 10%;
float:left;
}
#rightColumn {
width:25%;
height: 90%;
float:left;
}
This will create a layout that scales with the window, and gives you a left column and a right column with a search bar above it. Obviously if you know what size you want your elements than you can simply set them.
I'm not a fan (at all, really) of using floats, so this is my approach on your layout:
I'm not sure if you want a left column, but I've added one in for your choice anyway:
.left, .nav,.right, .content {
display: inline-block;
position: absolute;
position: absolute;
}
html,
body {
margin: 0;
padding: 0;
}
.nav {
width: 75%;
background: lightgray;
height: 100px;
top: 0;
left: 0;
}
.left {
width: 20%;
top: 100px;
left: 0;
background: darkgray;
height: calc(100% - 100px);
}
.right {
width: 25%;
top: 0;
right: 0;
background: gray;
height: 100%;
}
.content {
width: 55%;
height: calc(100% - 100px);
background: lightblue;
top: 100px;
left: 20%;
}
#search {
position: relative;
width: 90%;
margin: 2%;
}
<div class="nav">I'll go most of the way along the top</div>
<div class="left">I'll be a column on the left</div>
<div class="right">
<input id="search" type="text" placeholder="Search Me" />
<br/>
<div class="furtherContent">
I'll be a column on the right</div>
</div>
<div class="content">I'll be a content</div>
Related
ok so i've been working on this website. mostly just as kind of a proof of concept. i haven't coded a website in quite some time now so this is basically me trying to get back onto the horse as they say.
anyway, i've searched this forum for some time now and i did find quite a few questions very similar to mine. but somehow all the solutions and all the ideas they gave me did not seem to work for me. now maybe i have a typo somewhere making my browser go crazy and misinterpret the code i don't know. what i want to do is create something like a fluid layout with 4 "columns" all being 1/4 of the canvas and full height. in each of these four columns i want to place an image which i want to be center center. so that i can move the image up to the top of the column and have some text at the center on mouseover. thing is i can't seem to find a way to place the image in the center. i tried using and containers. i even tried just aligning the without a container, but it just won't go where i want it. as i mentioned maybe i have a typo somewhere or something.
any
so this is the html code i use for layout
<body>
<div id="col_home">first text first text</div>
<div id="col_so"> text text text</div>
<div id="col_tra">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px" />
</div>
image title
</div>
<div id="col_co">last text last text</div>
</body>
and this is the css i use for formatting
html {
width: 1024px;
height: 768px;
margin: auto;
border: 1px solid;
}
body, div {
margin: 0px;
width: 100%;
height: 100%;
}
#col_home {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
}
#col_so {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 1);
}
#col_tra {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 204,51);
}
#col_co {
position: relative;
float: left;
left: 0%;
top: 0%;
width: 25%;
height: 100%;
background-color: rgb(255, 153, 0);
}
#picture {
position: absolute;
left: 50%;
clear: left;
}
thanks to any- and everyone for help. as i said i'm mostly doing this for fun but still i would like to figure out a possible solution for my learning curve ;). i did run it with id-tags first but for now i don't think it makes a difference at least not in the results i get.
An easy way to achieve this is using flexbox. To center a child element in its parent, you can use justify-content:center; which aligns an item horizontally, and align-items:center - vertically. flex-flow:row makes your child elements display in a row, if you want them to display in a column, use flex-flow:column. You can see the result by running the snippet by clicking the button below.
html {
width: 1024px;
height: 768px;
margin:auto;
border: 1px solid;
}
body, div {
margin:0;
width: 100%;
height: 100%;
display:flex;
flex-flow:row;
}
#col_home {
width:25%;
}
#col_so {
width:25%;
background-color: rgb(255, 255, 1);
}
#col_tra {
width:25%;
flex-flow:column;
background-color: rgb(255, 204,51);
}
#col_co {
width:25%;
background-color: rgb(255, 153, 0);
}
#picture{
justify-content:center;
align-items:center;
}
<body>
<div id="col_home">first text first text</div>
<div id="col_so"> text text text</div>
<div id="col_tra">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px"/>
</div>
</div>
<div id="col_co">last text last text</div>
</body>
Using float for column layouts like this is a thing of the past - you really want to use the flexible box model (aka "flexbox"). In the example below you can see that setting up the columns takes considerably less CSS code and each column always tries to take up any available space by "flexing." Since there are 4 columns, they all always take up 25% of the space.
Then within any individual column, you can use traditional relative positioning with top/left and margin offsets to perfectly center the image:
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-flow: row;
}
.col {
flex: 1 1 auto;
position: relative;
}
#col2 {
background-color: rgb(255, 255, 1);
}
#col3 {
background-color: rgb(255, 204,51);
}
#col4 {
background-color: rgb(255, 153, 0);
}
#picture {
left: 50%;
margin-left: -50px;
margin-top: -50px;
position: relative;
top: 50%;
}
<div class="col" id="col1"></div>
<div class="col" id="col2"></div>
<div class="col" id="col3">
<div id="picture">
<img src="img/Ordner ZU.png" width="100px" height="100px" />
<br>image title
</div>
</div>
<div class="col" id="col4"></div>
Not sure exactly what you're trying to do on mouse hover, but this should get you pretty close. You could also turn each column into a flexing box and try to align the image with justify or align properties but that might get tricky with hover effects.
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.
I have two div containers which are structured as follows:
<div class="outer-div">
<img src="images/point.png" class="img-a1">
Lots of text goes here.
</div>
<div class="outer-div">
<img src="images/point.png" class="img-b1">
Some more text goes here
</div>
The styles associated with this are as follows:
.outer-div {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
}
.img-a1 {
float:left;
z-index:-1;
position:relative;
margin-left: 250px;
margin-bottom: 400px;
}
.img-b1 {
float:right;
z-index:-1;
position:relative;
margin-left: 250px;
margin-bottom: 400px;
}
The result of this is to produce something like the following, where ||| is the text from div-a and ... is the text from div-b:
.....|||||
.....|||||
.....|||||
.....|||||
However, since the second div is placed immediately above the first div, none of the text in the second div can be selected, although it can be seen since there is just empty space, and a 1x1 px image above it.
Is there a way to get the text from the lower div to be selectable, without making the upper div unselectable?
If you keep your structure, there's no way to select text from the first div, since the second one is positioned on top of it.
However I think you can change your CSS to have the same results and without overlapping the two divs. I propose some think like this :
HTML:
<div class="right-div">
<img src="images/point.png" class="img-a1">
Lots of text goes here.
</div>
<div class="left-div">
<img src="images/point.png" class="img-b1">
Some more text goes here
</div>
CSS :
.left-div {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
}
.right-div {
position: absolute;
top: 0px;
left: 250px;
width: 250px;
}
.img-a1 {
float:left;
z-index:-1;
position:relative;
background: red;
}
.img-b1 {
z-index:-1;
position:absolute;
margin-left: 500px;
background: blue;
}
The rendering is pretty much the same as your example, and you can select both of the texts without any problems.
It is possible that you'll have to adapt the margins depending on the size of your images.
I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.
No problem so far.
But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.
I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).
What is the best way to create such a page?
I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.
Live Demo (complete with boring colours)
The HTML is very simple:
<div id="header">header</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
On the other hand, the CSS is a bit more complicated:
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#header, #middle, #footer {
position: absolute;
width: 100%
}
#header {
background: #777;
height: 150px;
top: 0
}
#middle {
background: #f00;
top: 150px;
bottom: 150px
}
#footer {
background: #777;
height: 150px;
bottom: 0
}
#left, #right {
overflow-y: scroll
}
#left {
background: #aaa;
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%
}
#right {
background: #999;
position: absolute;
left: 50%;
top: 0;
float: right;
width: 50%;
height: 100%
}
I will explain how the CSS works if you ask me to.
Try using percentages on divs (and leave out the table). For example, you might set a header at height: 20%, and two middle scrolling divs at height: 70%; width: 50%; float:left;. This leaves the footer div at height: 10%. Changing the contents of the middle divs via ajax shouldn't change their height. But of course, this provides a variable, not fixed, header and footer.
note: these numbers are just for illustrative purposes. You'll need to adjust them, including padding/margins, which are not accounted for.