This is my code
table#projectTable > tbody , table#productTable > tbody{
height: 300px;
overflow: auto;
}
The scroll bar is working if you click the upper part but not the lower part.
Very strange.
I used firefox inspect element and I think its something to do with the TR element overlapping because the scrollbar is working fine just above the (imaginary extended line from ) second row (Edit product info)
as i say at comments
.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}
will solve your problem.
maby you already know but if you dont may i kindly suggest you that give a chance to tableless design when you design a layout.
for example - also this sample could be better -
preview
HTML
<div id="container">
<div id="left">
Edit branchInfo
Edit branchInfo
Edit projectList
</div>
<div id="right">
<div id="table1"> ...1... </div>
<!--#table1-->
<div id="table2"> ...2... </div>
<!--#table2-->
<div id="table3"> ...3... </div>
<!--#table3-->
</div>
<!--#right-->
<div class="clear"></div>
</div>
<!--#container-->
CSS
.clear {
clear: left;
}
#container {
border: 1px solid #666;
padding: 5px 5px 0 5px;
}
#left, #right {
float: left;
}
#left a {
display: block;
width: 100px;
height: 200px;
font: 12px/200px arial;
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#left a:hover {
background: #efefef;
}
#left a:active {
background: #c0c0c0;
}
#right {
border: 1px solid #999;
margin-left: 5px;
padding: 10px;
height: 654px;
width: 900px;
}
Related
I took a solution from here earlier to solve some div alignment problems, just when I thought all was sorted - adding an image into any of my containers causes text to be misaligned elsewhere, see image and code below.
The image in the code is just a blue rectangle, any image will do.
Does anyone know how I can resolve this?
<style>
.row {
display: table;
width: 98%;
min-width: 440px;
border: solid 5px black;
border-top: none;
margin-top: -4px;
}
.left {
width: 150px;
border-right: solid 5px black;
display:table-cell;
background-color: black;
}
.middle {
width:auto;
display:table-cell;
font-size: 9.5pt;
padding-bottom: 20px;
}
.right {
width: 150px;
border-left: solid 5px black;
display:table-cell;
background-color: black;
padding-left: 5px;
overflow: auto;
}
</style>
<div class="row">
<div class="left">
<img alt="" src="/Images/Blue.png" border="0"></img>
</div>
<div class="middle">
Text which should be at the top
</div>
<div class="right">
</div>
</div>
I cant see any output in my left and right divs.I can only see the header and footer but not the rest.I am a beginner so please try to answer in simple terms.
Kindly try to point out the error/bug instead of altering the code.
#header {
height: 50px;
width: 1600px;
border: 2px solid red;
border-radius: 5px;
background-color: Aquamarine;
position: fixed;
z-index: 1;
}
.left {
height: 500px;
width: 700px;
border: 2px solid green;
border-radius: 5px;
background-color: Lavenderblush;
float: left;
}
.right {
height: 500px;
width: 700px;
border: 2px solid blue;
border-radius: 5px;
background-color: lightblue;
float: right;
}
#footer {
height: 50px;
width: 1600px;
border: 2px solid black;
border-radius: 5px;
background-color: Yellow;
clear: both;
}
h1 {
text-align: center;
margin: auto;
color: Blue;
font-family: Verdana;
}
h4 {
text-align: center;
margin: auto;
color: Blue;
font-family: Verdana;
}
<div id="header">
<h1>My Resume</h1>
</div>
<div class="left">
<p>Hello how are u</p>
</div>
<div class="right">
<p>some random data here</p>
</div>
<div id="footer">
<h4>This is the footer</h4>
</div>
The header is position: fixed so it is taken out of normal flow (i.e. it doesn't influence the start position of content outside it) and covers the top of the content that immediately follows it.
I haven't loaded this code but likely, your fixed header with a height of 50 is hiding the text you're expecting to see. You could add a margin-top: 50px to .left and .right so they clear the fixed header.
So I am pasting the code here:
<!doctype html>
<head>
<title>Skeleton website</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
background-color: gray;
}
.pagewidth
{
width: 1250px;
/*background-color: gray;*/
}
#header
{
text-align: center;
background-color: white;
}
.clinks
{
display: inline;
background-color: white;
}
#maincontent
{
background-color: black;
}
#partition_1
{
width: 310px;
min-height: 100px;
background-color: red;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_2
{
width: 310px;
min-height: 100px;
background-color: blue;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_3
{
width: 310px;
min-height: 100px;
background-color: green;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_4
{
width: 310px;
min-height: 100px;
background-color: violet;
float: left;
border-left: solid 1.25px black;
border-right: solid 1.25px black;
}
#partition_1_h
{
width: 310px;
height: 20px;
background-color: orange;
}
#partition_2_h
{
width: 310px;
height: 20px;
background-color: pink;
}
#partition_3_h
{
width: 310px;
height: 20px;
background-color: white;
}
#partition_4_h
{
width: 310px;
height: 20px;
background-color: yellow;
}
</style>
</head>
<body>
<div class = "pagewidth" id = "header">
<div id = "logo">Logo goes here</div>
<div id="controllinks">
<div class = "clinks" id="Clink1">Link 1</div>
<div class = "clinks" id="Clink1">Link 2</div>
<div class = "clinks" id="Clink1">Link 3</div>
</div>
</div>
<!-- <div id = "headerlinks"></div> -->
<div class = "pagewidth" id = "maincontent">
<div id = "partition_1">
<div id = "partition_1_h"></div>
</div>
<div id = "partition_2">
<div id = "partition_2_h"></div>
</div>
<div id = "partition_3">
<div id = "partition_3_h"></div>
</div>
<div id = "partition_4">
<div id = "partition_4_h"></div>
</div>
</div>
<div class = "pagewidth" id = "footer"></div>
<script type="text/javascript" src = "jquery.min.js">
</script>
</body>
A pretty standard skeleton for a website, I think!
So here's my question:
Why isn't the background-color: white in the #header styling portion getting applied?
If you notice way up where at the start of the styling section, I have applied 0 margins and padding for all elements unless otherwise specified. After that I made sure to add different background-color attributes to all the different elements on the webpage.
They work just well and perfectly override the * css styling.
However, as far as the header id is concerned, it is having trouble overriding the gray applied to the entire webpage with the white that is specified.
Does anyone know why this might be happened? I am thoroughly confused and honestly a little frustrated. This has got to be a minute detail I am missing out on, but I need a second pair of eyes and a hand to smack my head and point me in the right direction.
Thanks a ton! Appreciate it a lot!
Cheers.
It is because you have applied background-color: gray to all the elements. This means the #logo and #controllinks elements have a background colour of gray. As these elements sit inside the header you will not see the background colour of the header.
Instead you should give the body a background colour of gray instead of all elements.
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
}
See the codepen here
Your #logo div don't have any specific css and so it is getting *{background-color:grey;} and it covers the #header. If you reduce the size of #logo you can see your #header div with white background
So instead of *{background-color:grey;} give body{background-color:grey;}
You can use the following modified CSS for #header ::
#header
{
text-align: center;
background-color: white;
float: left;
width: 100%;
display: block;
}
And Use:
*
{
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
The next image is currently what I have.
And this is what should be:
As you can see, the dots on the third column are not aligned. It should meet the next requirement:
As you can imagine, I might use two divs because of the two borders.
This next code is what I have tried all day long, I cannot achieve to position the dots in the middle with the background-color stretched (considering the two border colors). What am I wrong? Should I remove everything and change it by a flexbox? I'll appreciate your help.
Html code:
You have 4 items in your cart
<article class="cart-item">
<div class="left">
<img src="images/item1.jpg"></img>
</div>
<div class="center">
<h4 class="title">Dexter Men's Max Bowling Shoes (Right Handed Only)</h4>
<span class="description">Shipping 3-day with UPS</span>
<span class="description">Color: Gray</span>
<span class="description">Size: 28.5</span>
<span class="price">$60.00</span>
</div>
<div class="right">
<div class="grouped-dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</article>
Css code
.cart-item
{
border-bottom: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
display: table;
height: 100%;
overflow: hidden;
}
.cart-item>div
{
display: table-cell;
}
.left,.center
{
padding-bottom: 10px;
padding-top: 10px;
}
.left
{
padding-left: 15px;
padding-right: 15px;
width: 33.33%;
}
.left img
{
max-width: 100%;
}
.center
{
padding-right: 15px;
text-align: left;
vertical-align: top;
width: auto;
}
.right
{
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
vertical-align: middle;
width: 15px;
}
.right .grouped-dots
{
background-color: #F5F5F5;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
display: block;
height: 100%;
}
.cart-item .grouped-dots span::after
{
color: #CCCCCC;
content: '.';
font-family: 'Open Sans',sans-serif;
font-size: 40px;
line-height: 0;
}
This approach is using table and table-cells as display values. If you think I'm in the wrong path, please let me know.
It's because of this style:
.right .grouped-dots {
height: 100%;
}
Since its as tall as its parent, there's no room for it to move vertically to the "middle."
Remove that style, and move its background color to .right:
.right {
background-color: #F5F5F5;
}
Fiddle
I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO