I'm currently having difficulty creating a responsive 'topbar' while fiddling around.
I've created it normally and works fine when using a standard laptop sized display, but when I try to resize the screen down to a mobile size, i'm having trouble figuring out how to keep my content drifting from the view.
I've currently used 2 divs for the example.
top-bar-holder is a container div and top-bar is used to keep content to a certain max-width.
I've also used a two tuple table which i've just used images in each for this example. The problem can be seen by trying to resize the viewport the images are disappearing to the left instead of staying on the screen.
I've attached a fiddle for better explanation.
Please ask if i've not been detailed enough in this question.
.top-bar-holder {
position:fixed;
width:100%;
height:70px;
background-color:#384452;
z-index:1;
}
.top-bar {
position:relative;
max-width:1100px;
width:100%;
border:1px solid orange;
height:70px;
left:50%;
margin-left:-550px;
}
.top-bar table tr th {
border:1px solid green;
height:65px;
max-width:50%;
}
<div class="top-bar-holder">
<div class="top-bar">
<table style="width:100%">
<tr>
<th> <img src="company-logo.png" width:"120" height="55" /> </th>
<th> <img src="company-logo.png" width:"120" height="55" /> </th>
</tr>
</table>
</div>
</div>
before I answer - you should avoid using tables for layout (if you have questions about this a quick google search will do good)
your positioning of .top-bar is causing the issue
.top-bar {
left:50%;
margin-left:-550px;
}
This is your current css - margin-left will always stay at 550px. If your display is less than that you end up with no content. Generally, the agreed on way to horizontally center things is by setting the horizontal margins to auto.
change the css above to this
.top-bar {
margin:0 auto;
}
This is the same as using
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
and will center your header content the way I think you intended; as well as fixing your screen issue
Related
I understand how everything is supposed to work but I have no idea why it is not working. I am trying to have my page to have two main fixed divs. The left one stays the same at all times and the right one overflow downward when there is more content.
This as of right now works perfectly. The problem is the body or my #bodywrapper divs or anything I make to have a min-width to store the #header and #bodyholder so that when the page shrinks to lower than 1280px horizontally it will require the whole page to overflow/produce a scrollbar so that you can see both the #header and #bodyholder divs. I have attached examples of what I am talking about.
since I do not have 10 rep points yet so here are the links to the images:
correct:
s1190.photobucket.com/user/obancooper/media/ex-correct_zpssnk69nck.png.html
wrong:
s1190.photobucket.com/user/obancooper/media/ex-wrong_zpsszf6kkoj.png.html
To help, the following is the best I can describe in HTML/CSS what the problem is:
html:
<div id="bodywrapper">
<div id="header">
</div>
<div id="bodyholder">
</div>
</div>
CSS:
#header { top:18px;
left:0px;
padding-right:0px;
height: 100%;
width: 18%;
position:fixed;
margin:0px;}
#bodyholder {width:82%;
min-width:1050px;
right:0px;
overflow:auto;
height:100%;
position:fixed;
}
#bodywrapper {
width:100%;
min-width:1280px;
overflow:scroll;}
My site is pumpingfe.com.
I need to get 3 row layout in HTML + CSS in my Angular.js app.
It should work like this:
My problem is when I resize my middle div get onto my top bar.
Here's some of my code:
.top-pos {
&.small {
padding-bottom: 130px;
}
&.big {
padding-bottom: 170px;
}
}
.bottom-pos {
bottom: 10px;
right: 0;
width: 100%;
position: absolute;
}
.middle {
#include align(vertical);
width: 100%;
}
HTML
<div class="top-pos small">
<div class="position-container">
<div class="top">
<h1 class="title">Some title</h1>
</div>
<div class="middle">
<input type="text" />
<input type="text" />
</div>
</div>
</div>
<div class="bottom-pos">
<button class="submit">Search</button>
</div>
Generally the top bar div should be always on top of the page, the bottom bar should be ALWAYS on bottom and the middle should be always on the middle between top and bottom bar. And the scrollbar should appear when all the elements are like on the second picture.
If older browser support is not an issue you could use css3 flex box to achieve something like this (not exact replica of the images):
#container{
display:flex;
flex-flow:column;
justify-content:space-around;
align-items:center;
width:50%;
height:100%;
}
#container div {
width:90%;
color:#fff;
background:black;
}
#top,#bottom{
height:50px;
}
#middle{
height:100px;
}
Demo
I have created a Fiddle which uses media queries to solve your problem. Hope that helps
CSS:
#media (min-width:400px) {
.top,.middle{
margin-bottom:20px
}
}
#media (max-width:399px) {
.top,.middle{
margin-bottom:2px;
}
h1{
margin:0;
}
}
For creating grid-like layouts that respond to window size changes, you should really consider Bootstrap. It allows you to very easily define layouts that are responsive to the window size. It also really nicely works together with Angular, since Angular defined directives that replace the Javascript part of Bootstrap. However, if you are only interested in the Grid layout part of Bootstrap, you do not need any Javascript at all, since it is all defined in CSS. See this link for more info on the Grid layout of Bootstrap:
http://getbootstrap.com/examples/grid/
I have been working at this on and off for two days, and I can't figure out how to make this work.
I have a table-based display of charts on the home page of my website. These charts are small and compact. I have it so that when you click on one of the charts, an expanded view pops up with a larger view of charts, also organized as a table. This view is a fixed centered div that covers 80%x80% of the screen, with a table inside. I want this table to fill the inner width of the div and be scrollable. The table has 3 columns, and I want each to be 33.3% wide to evenly space each one.
HTML:
<div id="expandedViewContainer">
<div id="expandedView">
<table id="expandedViewTable">
<tr class="expandedViewRow">
<td class="expandedViewCell">
<div class="expandedChart"></div>
</td>
<td class="expandedViewCell">
<div class="expandedChart"></div>
</td>
<td class="expandedViewCell">
<div class="expandedChart"></div>
</td>
</tr>
...
</table>
</div>
</div>
CSS:
#expandedViewContainer {
display:none; /*The view is initially hidden*/
width:100%;
height:100%;
background-color:rgba(0,0,0,0.25);
position:fixed;
top:0;
left:0;
z-index:999999;
}
#expandedView {
width:80%;
height:80%;
background-color:#ADC4DB;
padding:20px;
border-radius:10px;
overflow-y:auto;
margin:0 auto;
margin-top:25px;
}
#expandedViewTable {
/*I'm expecting this to mean 100% of the inner width of #expandedView,
but I can't be sure what's happening here*/
width:100%;
}
.expandedViewRow {
height:300px;
}
.expandedViewCell {
width:33.3px;
}
.expandedChart {
width:100%;
height:100%;
margin:0 30px;
}
For some reason, the table is extending way past the width of the #expandedView. Some of the charts are very wide. I'm not sure what I'm supposed to set as width:100% and what I'm supposed to set as width:33.3%.
FYI, I'm using HighCharts to generate the charts, with the .expandedChart's as the containers. I'm wondering if that has anything to do with the width that's being set.
Okay guys I have a question about positioning tables within DIV's using CSS.
I have code as follows:
css:
#content{
float:right;
padding-top:10px;
width:450px;
line-height: 18px;
font-size:13px;
text-align:left;
}
#content .reviewTable{
width:20px;
}
#news{
line-height: 18px;
width:150px;
}
#news h2 {
margin: 0;
padding: 0;
font-size: 16px;
}
#news p {
margin: 0;
padding-bottom: 20px;
padding-right:10px;
font-size:13px;
}
HTML:
<div id="content">
<div class="reviewTable">
<table>
<td></td>
</table>
</div>
</div>
My table sits far away from my news DIV there is some padding around the news DIV however I have removed that and it didn't make any difference to the positioning of the table. I have been looking at other Stack Overflow posts but can't seem to find what I am looking for. I have tried absolute and relative positioning in my CSS and also width and none of these work not the table where they have worked on other elements such as plain text.
I have also tried the table as <table class="reviewTable"></table>
My question is does the code need to be in a certain format in order to allow the positioning of tables in a DIV which already has CSS formatting applied to it?
Just looking for a hint in the right direction guys if you could help me out or anyone else has a similar problem as this it would be great.
Thanks
The reason your table is flowing outside is that you are floating it right. Then you have the width set to be too small for the review area so it makes it go outside. Change the width of the #content to 600px and you'll see what I mean.
For the way you have it setup you need to set the #content to 610px. Set the #page-container to overflow:hidden to prevent anything showing if its outside your container. And take off the width on .reviewTable
So I have a 3-column layout on my webpage, but I can't get the things in the middle column to be centered. The columns on the left and right are of fixed width, so I created a container for the middle column and set its borders to equal the size of the left and right columns. Then, I used the margin:auto property on the div tag inside the middle container that has everything that I want in the middle column. If possible, I want this to work on all browser window sizes. This is my CSS:
#top
{
width:100%;
background-color:#FF0000;
height:30px;
overflow: auto;
width: 100%
}
#right
{
float:right;
width:100px;
background-color:#CCC;
height:100%;
}
#middleCont
{
margin-left:150px;
margin-right:100px;
}
#middle
{
margin:auto;
text-align:left;
}
#left
{
float:left;
width:150px;
height:100%;
}
And since I can't post html without the browser rendering it for some reason, I uploaded the relevant code in a text file: http://www.mediafire.com/?a89kr1bb4uwb4cf
Thanks in advance for the help.
Yes, for one, under #middle, you said text-align: left rather than text-align: center. The instant I changed this, it worked fine.
I inserted different types of tags into the document, including p, div, blockquote, a list, a table, and an image. The only problem I noticed is that the table did not center. Looking at a number of articles, I found that you had already implemented the recommended way of centering a table in CSS. I think that maybe, the only solution to this problem is either to make a table using the center tag or create a new block of text in your CSS file.
You can do what you like, but the recommended way is this:
#center {
margin: auto;
}
Then make a new table with #center as its ID.
<table id="center">
...
</table>
If you choose to use the center tag, you implement it like this:
<center>
<table>
...
</table>
</center>
Hope I helped a little. Good luck.
I do it this way. Working even for internet explorer 6.
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;">
<tr>
<td width="50%" valign="top" style="width:50.0%;">
</td>
<td valign="top" style="width:900px;">
<div style="width:900px; border:1px solid white;"></div>
</td>
<td width="50%" valign="top" style="width:50.0%;">
</td>
</tr>
</table>
I suppose you can change the text-align:left to text-align:center for the selector #middle
If you want to use the method margin:0 auto for the #middle (and not margin:auto as you have it) then you have to set a fixed width, something like width:400px; or width:20%;.
If you want a fixed width center column then
#middle
/*this will keep the column width constant wile letting the space on either side expand*/
{
margin:auto;
text-align:left;
width: 600px; /* what ever width you want */
}
or specify fixed margins
#middle
/*this wil keep the space on either side constant wile letting the column expand*/
{
margin-left: 150px; /*to center column just keep the left and right margins equal*/
margin-right: 150px;
text-align:left;
}
I hope that answers your question.
P.S. It would have helped if you had posted the html too.
I am not sure if I follow exactly what you are trying to do - but what about if you use percentages rather than pixels for the width of all four divs?
#top
{
width:100%;
background-color:#FF0000;
height:30px;
overflow: auto;
width: 100%
}
#right
{
float:right;
width:25%;
background-color:#CCC;
height:100%;
}
#middleCont
{
margin-left:36%;
margin-right:26%;
}
#middle
{
margin:auto;
text-align:left;
}
#left
{
float:left;
width:35%;
height:100%;
background-color:#CCC;
}