I'm a newbie when it comes to CSS. My overall goal is to convert a small web application that I have which displays data in table to using CSS.
A description of what the application displays is that in a left hand window there is a list of employee names, on the right is a cell for each day that the employee has worked which spans a user selectable period.
In the code below, I can't get the cell elements to overflow so that the user can scroll to the right, instead the cells are overflowing down.
Is there a way I can get the overflow to work horizontally rather than vertically so I can scroll left and right to see all the cells rather than what it is doing now which is creating a scroll bar vertically?
Much appreciated if anyone can help - it's got me frustrated!
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Header</div>
<div id="centreposition">
<div id="centrecontent">
<?php
for ($counter = 0; $counter < 100; $counter++)
{
?>
<div id="cell">AB</div>
<?php
}
?>
</div>
</div>
<div id="footer">Footer.</div>
<div id="left">Left <div>
</body>
</html>
CSS:
body {
margin: 0px;
}
#header {
height: 100px;
background-color: #9FF300;
}
#centreposition {
width: 600px;
padding-right: 10px;
padding-left: 10%;
}
#centrecontent {
z-index: 100;
min-width: 1px;
height: 40px;
border: 1px solid #999999;
padding: 4px;
background-color: #FFFF00;
overflow-x: scroll;
}
#footer {
padding-left: 175px;
background-color: #20F3F7;
}
#left {
width: 10%;
position: absolute;
top: 100px;
left: 0px;
padding: 10px 0px 10px 6px;
}
#right {
width: 130px;
position: absolute;
top: 100px;
right: 0px;
height: 200px;
}
#cell {
float: left;
width: 24px;
height: 16px;
margin: 1px;
background-color: #aaccdd;
font-size: 10px;
border-style: solid;
border-left-width: 1px;
border-color: #555555;
}
Two suggestions:
You're essentially asking for a table-based layout, so you may as
well use an HTML table.
Each of your cells has a fixed width, and your PHP code should know
how many of them to create, so you can set the width of the
container element (#centrecontent here) wide enough to contain them
all.
Also, element IDs are supposed to be unique within the HTML doc, so creating 100 elements all with #cell as their ID is incorrect - you should use a CSS class name instead.
You could put all of the cells in another div and set that div to a specific width.
jsfiddle
Related
I can't seem to get my div to align side by side inside a div, can someone see where the problem is? I am trying to position the divContainer element with a height up to the buttonPanel element and the 2 testDiv elements positioned side by side. I also tried setting the testDiv element with float: left but that didn't work either.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<style type="text/css">
* {
font-family: tahoma;
font-size: 8pt;
}
#buttonPanel {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: right;
background-color: buttonface;
}
#buttonPanel hr {
margin: 0;
}
#buttonPanel button {
margin: 10px;
width: 75px;
}
#divContainer {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 45px;
border: 2px solid #FFFF00;
}
.testDiv {
display: inline-block;
width: 50%;
height: 100%;
border: 2px solid blue;
}
</style>
</head>
<body>
<div id="divContainer">
<div id="test1" class="testDiv">test1</div>
<div id="test2" class="testDiv">test2</div>
</div>
<div id="buttonPanel">
<hr/>
<button id="btnOK">OK</button>
<button id="btnCancel">Cancel</button>
</div>
</body>
</html>
Let me give you an example:
you have two div left-div say ldiv and right-div say rdiv.These divs are inside main-div say mdiv
ie
<div class = "mdiv">
<div class="ldiv">
</div>
<div class="rdiv">
</div>
</div>
then you css shoul be like this:
#mdiv{}
#ldiv {float:left;}
#rdiv{ float:left;}
Make the following changes to your code: http://jsfiddle.net/ak9Gs/. box-sizing instructs the browser to take padding and borders into account when sizing an element.
CSS:
.testDiv {
width: 50%;
height: 100%;
border: 2px solid blue;
box-sizing: border-box;
}
.testDiv:first-of-type {
float: left;
}
.testDiv:first-of-type {
float: right;
}
You are giving width as 50% and border with 2px that's why your div'a were not placed sise by side. If you remove border you can get your div's as you need.
DEMO
CSS:
.testDiv {
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#ccc;
}
.testDiv:first-child{
display: block;
float:left;
width: 50%;
height: 100%;
background-color:#f0f0f0;
}
I gave color difference instead of border for both test div's.
change the testDiv class to have display of inline then they will be side by side
.testDiv {
display: inline;
width: 50%;
height: 100%;
border: 2px solid blue;
}
Hope this helps.
I am using http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-32-fluid-fluid-fixed/ as the starting point. I want one of the column to always remain visible at the top. I put {position: fixed; top: 0} in the right column css, but that did not achieve what I wanted. It just made the right column content disappear.
How to achieve what I want (using css only, preferably no javascript, atleast no jquery).
Below is total code. Just 2 line modification from original one.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.2- (Fluid-Fluid-Fixed)</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 0 200px 0 25%; /*Margins for content column. Should be "0 right-column-width 0 left-column-width*/
}
#leftcolumn{
float: left;
width: 25%; /*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}
#rightcolumn{
top: 0; /* THIS IS ADDED LINE by me...... */
position: fixed; /* THIS IS ADDED LINE by me...... */
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set margin to -(RightColumnWidth)*/
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.2- (Fluid-Fluid-Fixed)</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(450)</script></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>25%</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>200px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
<div id="footer">Dynamic Drive CSS Library</div>
</div>
</body>
</html>
Your CSS puts the 3rd column off the left side of the screen that is why it is not visible.
Change your CSS from
#rightcolumn {
top: 0;
position: fixed;
float: left;
width: 200px;
margin-left: -200px;
background: #FDE95E;
}
to
#rightcolumn {
top: 0;
position: fixed;
width: 200px;
right: 0;
background: #FDE95E;
}
Okay I'm using XHTML1.1 due to the fact that HTML5...doesn't behave as I expect, if anyone can provide a decent tutorial I'd be happy to look at it, so far anything I write in HTML5 doesn't render in any other browser but Chrome >_>; .
Now back to my problem.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
#Content{
position: relative;
background-color: #8CF;
padding: 1%;
border-color: black;
border-style: solid;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
height: 100%;
}
#Announcer {
position: relative;
background-color: #6AF;
padding: 1%;
border-color: #6AFFFF;
border-width: 1px;
border-style: inset;
}
#Column_Holder {
position: relative;
background-color: #6CF;
padding: 1%;
height: 100%;
}
.Column {
float: left;
padding: 1%;
overflow: auto;
height: 100%;
}
#Col1 {
width: 60%;
border-color: black;
border-style: solid;
border-right-width: 1px;
border-width: 1px;
}
#Article_Image {
background-color: #3DE;
position: relative;
float: right;
width: 20%;
text-align: right;
}
#Col2 {
width: 30%;
padding-left: 3%;
}
</style>
</head>
<body>
<div id="Content">
<div id="Announcer">
<h2>Announcer Place Holder</h2>
</div>
<div id="Column_Holder">
<div class="Column" id="Col1">
<div id="Article_Image">Image PlaceHolder</div>
<h1>Lots a text</h1>
<p>Creating Websites since 1989. I have created lots and lots of websites. This one is with XHTML1.1 and CSS3</p>
</div>
<div class="Column" id="Col2">
<h2>Another story</h2>
<p>Something else happened teh other day =3</p>
</div>
</div>
</div>
</body>
</html>
I've tried using floats...it's not appropriate as a solution in this instance. I've tried 100% height, Xhtml seems to completely ignore that instruction. Unless I declare a pixel height it's ignored strangely (yeah I'm struggling with this difference from HTML). Anyone want to provide a hint? Just a keyword >_<;
Thanks for reading
first of all, seriously? XHTML and without the XHTML doctype?
percentage is a relative unit of measurement. this means that whatever you place percentage dimensions, it depends on the parent. now, width doesn't have the need for the parent to have width declared for relativeness but height does. since #Content is a child of body, you need body to have a height (like say 100%). body is a child of the <html> tag, and for body's 100% to work, you need to have 100% for html.
plug this in your CSS above everything else to see what i mean:
html,body{height:100%;}
I believe this is a beginner's CSS question. I am utilizing the method described in http://www.xs4all.nl/~peterned/examples/csslayout1.html to fix a header to the top and a footer to the bottom.
What I'd like to achieve now is two columns inside the content div. A left one of 200px and a right one that takes up the rest of the width.
Unfortunately, I can't get the left and right divs to display correctly: they just don't grow vertically, and if I make the right div "width: 100%" it positions itself underneath the left one.
What is the trick to make the left and right div take up all the space within the content div?
The layout1.css is the original one. I just added two entries: #left and #right
layout1.css:
/**
* 100% height layout with header and footer
* ----------------------------------------------
* Feel free to copy/use/change/improve
*/
html,body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
background: gray;
font-family: arial, sans-serif;
font-size: small;
color: #666;
}
h1 {
font: 1.5em georgia, serif;
margin: 0.5em 0;
}
h2 {
font: 1.25em georgia, serif;
margin: 0 0 0.5em;
}
h1,h2,a {
color: orange;
}
p {
line-height: 1.5;
margin: 0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 750px;
background: #f0f0f0;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
}
div#header p {
font-style: italic;
font-size: 1.1em;
margin: 0;
}
div#content {
padding: 1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align: justify;
padding: 0 1em;
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
border-top: 6px double gray;
}
div#footer p {
padding: 1em;
margin: 0;
}
// added the following:
div#left {
border: 1px solid red;
width: 200px;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
div#right {
border: 1px solid blue;
float: left;
min-height: 100%;
height: 100%;
padding-left: 10px;
margin-right: 10px;
}
layout.html:
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layout - 100% height</title>
<link rel="stylesheet" type="text/css" href="layout1.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>header</h1>
</div>
<div id="content">
<div id="left">
left column
</div>
<div id="right">
right column
</div>
</div>
<div id="footer">
<p>
footer
</p>
</div>
</div>
</body>
Just in case somebody else stumbles onto this question like me. This is what I ended up doing.
<div class="left">
text
</div>
<div class="right">
text
</div>
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
And for simpler cases (e.g., when you don't need border on the right element), you don't even have to specify left width twice: http://jsfiddle.net/j8T9v/1/
Another example, without setting up width at all. Left element takes as much space as it needs, right - the rest: http://jsfiddle.net/j8T9v/2/
The way I usually do it is by using the float and padding properties.
HTML:
<div id="leftCol">
content
</div>
<div id = "rightCol">
content
</div>
CSS:
#leftCol {
width: 200px;
}
#rightCol {
width: 100%;
float: right;
padding-left: 200px;
}
Should work.
So you are using float, and padding to put the div's side by side.
You might need:
position: absolute;
top: 0px;
right: 0px;
in your #rightCol CSS style (Not tested btw... from memory)
I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...
Take a look at the code below:
First, the HTML:
"<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">#import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
Logout
</span>
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
</body>
</html>"
Now, the CSS:
/* Layout2.css */
#all {
border: none;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.headlinks a {
text-align:right;
color:#ffffff;
}
#head {
border: none;
position: absolute;
left: 0%;
width: 100%;
height: 10%;
background-color:#336699;
}
#head h1 {
margin-top: 1%;
text-align:right;
}
#menu {
border: none;
position: absolute;
left: 1%;
top: 12%;
width: 20%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color:#b1b2a3;
}
#content{
border: none;
position: absolute;
left: 25%;
top: 12%;
width: 72%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color: #eeeeee;
}
Thanks!
Change <span class="headlinks> to a <div>, and add text-align: right to its CSS style.
You want:
#head { text-align: right; }
The head div is a block element with 100% width. Headlinks is an inline element containing one link. text-align is used on a block element its contents, not on inline elements to indicate how to place them inside their parent.
An alternative approach is to make headlinks a block level element:
span.headlinks { display: block; text-align: right; }
Which to use depends on what you want to achieve.
Try putting the 'text-align:right' on the 'head' div rather than the 'headlinks' span. This style applies to block level elements like div, not inline elements like span.