So what I'm trying to do is
|-------------------------------------------------------------|
|-------|leftdiv-250px|centerdiv-1000px|rightdiv-250px|-------|
|-------------------------------------------------------------|
So here's the HTML
<div id="header">
<div id="header-top">
<div id="header-top-main">
</div>
</div>
<div id="header-main">
<div id="header-main-inner">
<div id="header-main-left">
</div>
<div id="header-main-center">
</div>
<div id="header-main-right">
</div>
</div>
</div>
</div>
And here's the CSS
#header {
height: 190px;
width: 100%;
background: #e5e5e5;
margin: auto;
}
#header-top {
height: 50px;
width: 100%;
background: #e9e9e9;
background-image: url(../img/header-top-bg.png);
-webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.75);
margin: auto;
z-index: 999;
position: relative;
}
#header-top-main {
height: 50px;
width: 1000px;
margin: auto;
}
#header-main {
margin: auto;
width: 100%;
}
#header-main-inner {
margin: auto;
width: auto;
}
#header-main-left {
width: 250px;
height: 140px;
background: url(../img/header-main-left-bg.png);
float: left;
}
#header-main-center {
width: 1000px;
height: 140px;
background: #f7f7f7;
display: inline;
}
#header-main-right {
width: 250px;
height: 140px;
background: url(../img/header-main-right-bg.png);
float: right;
}
So I'm not sure what the problem is, I've tried to float them all left in a wrapper that has an auto margin but hadn't seemed to work. Another issue that came up was it all displayed in 1 line, but it stacks up on the left of the page, continuing all the way to right, giving the page a scroll.
What I want is, for the 'header-main' area to be centered with the 3 divs. And if the 'header-main' area goes off page, I would want it to continue off page without a scroll. If a screenshot of what I'm trying to do is needed, then I can provide it.
here would be another example
--------------------|------[ header-top ]------|-------------------
space beyond screen |------[leftdiv][centerdiv][rightdiv]------| spce beyond screen
--------------------|------[ navigation ]------|-------------------
I would add floats to the elements, height to the elements, and a min-width to the parent.
#header-main-left,
#header-main-center,
#header-main-right {
float: left;
height: 140px;
}
#header-main-inner {
min-width: 1500px;
}
And then to stop the scrolling, I would say to add an overflow: hidden;:
#header-main {
overflow: hidden;
}
Fiddle
This will fix your problem with div positioning, here's a FIDDLE
#header-main-left,
#header-main-center,
#header-main-right {
float: left;
height: 140px;
}
#header-main-left {
width: 25%;
background: url(../img/header-main-left-bg.png);
}
#header-main-center {
width: 50%;
background: #f7f7f7;
}
#header-main-right {
width: 25%;
background: url(../img/header-main-right-bg.png);
}
Second part I don't understand well
"And if the 'header-main' area goes off page, I would want it to continue off page without a scroll."
Related
Here is how my header is represented
If I click on the cross
The image quality of the logo is really very low
I would just like to know if it is possible to increase the size of the logo and delete the title of the logo.
Is it possible to do this?
dashboard.component.html
<div class="sidebar" [class.sidebar-close]="!openSidebar">
<div class="logo-details">
<img src="https://zupimages.net/up/22/42/fxvl.png" />
</div>
...
styles.css
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: white;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.sidebar-close {
width: 60px;
}
.sidebar .logo-details {
width: 100%;
padding: 10px 10px 10px 10px;
}
.sidebar .logo-details img {
height: 50px;
width: 80%;
display: block;
margin: 0 auto;
}
...
I can send you an illustration via Stackblitz here
Thank you very much for your help.
Here's roughly what you need to do. The image must have a wrapper, the property of which is not to show cropped parts of the image. You can position the image itself inside the wrapper in any way convenient for you.
.wrapper {
overflow: hidden;
box-shadow: 0 0 40px black;
width: 180px;
height: 120px;
}
.wrapper img {
transform: scale(1.2) translateX(-65px);
}
<div class="wrapper">
<img src="https://zupimages.net/up/22/42/fxvl.png">
</div>
I have 3 divs, main, right and left. The main div contains the right and left div and I want to align the right and left div side by side. I have read few posts here but have not been able to get the desired results.
https://jsbin.com/lagikaxiwe/edit?html,css,output
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
}
div#right-content {
position: relative;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
position: absolute;
width: calc(100% - 35%);
height: 100%;
margin: 0px 0px 0px 666px;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
The simplest method nowadays to use display: flex on the container. Have a look at the settings in my snippet - I erased a lot of the other settings, which are not necessary...
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
div#main-content {
background-color: bisque;
height: 100%;
display: flex;
}
div#right-content {
width: 35%;
height: 100%;
background-color: red;
}
div#left-content {
width: 65%;
height: 100%;
background-color: #00aeef;
}
<div id="main-content">
<div id="right-content">
</div>
<div id="left-content">
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
div#main-content {
background-color: bisque;
height: 100%;
width: 100%;
}
div#right-content {
float: left;
width: 35%;
height: 100%;
background-color: #ffffff;
}
div#left-content {
width: calc(100% - 35%);
height: 100%;
background-color: #00aeef;
float: left;
}
I would personally use display:inline-block to align the left and right divs
side by side and add the necessary widths to add up to 100% of the parent width. Be sure to use font-size:0 on the parent to eliminate the white space between the left and right divs so they sit next to each other correctly.
Be sure to assign font-sizes to your left and right content so your content actually shows up!
This method is largely backwards compatible with all browsers.
div#main-content{
font-size:0;
}
div#left-content{
display:inline-block;
vertical-align:top;
width:65%;
}
div#right-content{
display:inline-block;
vertical-align:top;
width:35%;
}
So I have this straight forward page:
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">The content goes here</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
And I have this CSS to make the footer stick to the bottom of the page:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
}
.page-wrapper {
min-height: 100%;
margin-bottom: -340px;
&:after {
content: "";
display: block;
height: 340px;
}
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
And for illustation purposes, here is a codepen.
Now, this was all working fine, but my client has asked for a second footer, but this time it doesn't appear on all pages and it has to be within the .page wrapper.
Here is a codepen to illustrate this.
As you can see, the second footer has no way of attaching to the bottom of the page (above the main footer). I have tried lots of things like flexbox and absolute positioning, but I just can't get it to work.
Can anyone offer any solutions?
Once again, I need to point out that I can not change the location of the .view-footer.
If you want the following order:
Header
Content
view footer
footer
and you don't have a specific page length you need to have, you can just use regular divs (display: block) items to get everything one under another.
using blocks will allow you to make every element get the entire width of the screen, while every element appear below the previous one.
Here's a fixed version of your codepen.
If you want the footer to stick to the bottom of the content (lets say that the .page part of your site needs a certain fixed height), you can use absolute positioning only for the footer.
here's a codepen example for that :-)
I would use these settings on the footer:
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 340px;
And this to make sure nothing can be hidden under the footer (i.e. the full page content can be scrolled up from behind the footer):
.page { margin-bottom: 340px; }
This would include that second footer being scrolled up. If it also needs to be sticky above the first footer, give it also position fixed, plus bottom: 340px, and increase the bottom margin on the content accordingly.
So, If I get this right, You want a page that if the content is shorter than the viewport, then the footer sticks to the bottom. And in some pages, you have an additional footer, that has to stick above the original footer but it is not directly before it in the DOM, it is inside the element before it.
If your footers have a fixed height, then things are not so tough. In the first step, you have to set the .page-wrapper min-height to calc(100% - page-footer-height) which means:
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
That solves the sticky .page_footer problem.
Now, since the bottom of .page-wrapper will always be touching the top of .page-footer you can just place your .view-footer on it's bottom with position-absolute which, unfortunately, will hide the content of .page.
At this point, you have two options, either you add an additional element after the .view-footer as a placeholder to simulate the space, or you have to add a modifier class to the.page or some parent element to add a padding-bottom equal to .view-footer height. Since you have control of the server side code, I suppose that at least one of the options is possible.
Placeholder Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
.view-footer + .empty {
height: 120px;
}
<div class="page-wrapper">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
<div class="empty"></div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
Modifier class Version:
html,
body {
height: 100%;
}
.page-header {
color: white;
background-color: #1f1f1f;
height: 75px;
}
.page {
margin: 20px 0 0;
background-color: pink;
}
.extra-footer .page {
padding-bottom: 120px;
}
.view-footer {
background-color: #dcdcdc;
border-top: 1px solid #adadad;
margin: 20px 0 -20px 0;
padding: 50px 0;
position: absolute;
width: 100%;
bottom: 0;
}
.page-wrapper {
min-height: calc(100% - 340px);
position: relative;
}
.page-footer {
padding: 0;
margin: 20px 0 0;
border: 0;
border-radius: 0;
color: white;
text-align: center;
background-color: #1f1f1f;
text-align: left;
height: 340px;
}
<div class="page-wrapper extra-footer">
<div class="page-header">Some navigation stuff goes in here</div>
<section class="page">
The content goes here
<div class="view-footer">I have no control where this appears in the html</div>
</section>
</div>
<footer class="page-footer">Guess what this is for?</footer>
I'm trying to implement a responsive carousel by myself for a webpage I'm designing. I'm having some issues that may be thousends times easier to ilustrate with some screenshots, so here it goes:
So as you see, I have two arrows to slice the items and a horizontall scrollbar.
The arrows are floated to the left and right respectively, and the items are just inline-block divs inside a div.items container, which has a width of 90% (and overflow-x: scroll or course).
SO now, if I append another item to the DOM, I end with this:
Why did the fourth item go below? I'm not floating the items, and as I specified and horizontal scroll, I would expect it to be at the back and to be able to see it with the scrollbar.
What am I missing?
I'll paste relevant code:
HTML:
<div class="grid">
<div class="left-arrow"></div>
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
<div class="right-arrow"></div>
</div>
CSS:
div.grid {
margin-top: 20px;
padding: 10px 75px;
text-align: center;
z-index: 1000;
}
div.grid .left-arrow, div.grid .right-arrow {
position: relative;
top: 70px;
}
div.grid .left-arrow {
float: left;
width: 0;
height: 0;
margin: 0 30px 0 -50px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 35px solid #ddd;
}
div.grid .right-arrow {
float: right;
width: 0;
height: 0;
margin: 0 -50px 0 30px;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 35px solid #ddd;
}
div.items {
display: inline-block;
z-index: 100;
width: 90%;
overflow-x: scroll;
}
div.item {
margin: 10px;
display: inline-block;
position: relative;
left: 0;
}
EDIT: Oreilly has exactly what I'm looking forward to achieve:
http://shop.oreilly.com/category/browse-subjects/programming.do
The container is growing in height to accommodate the additional items. I believe that you should be able to get the effect you are looking for by setting a specific height on the container element.
Edit: After testing some more, it turns out setting the height won't actually have any impact on this. You need to set white-space: nowrap; to get it to actually work.
Here's the full CSS for the div.items (which is all I changed to get this to work in my tests):
div.items {
display: inline-block;
z-index: 100;
width: 90%;
overflow-x: scroll;
white-space: nowrap;
}
here is the sample html:
<div id = "mainWrapperDiv">
<div id = "mainDiv">
<div> testing </div>
</div>
</div>
<div id = "footerDiv">
</div>
its css:
*
{
padding: 0px;
margin: 0px;
}
body, html
{
height: 100%
}
div
{
border: none;
}
#mainWrapperDiv
{
min-height: 100%;
height: 100%;
margin-bottom: -200px;
}
#mainDiv
{
margin: 0px auto 0px auto;
width: 1000px;
min-height: 500px;
background: lightgreen;
}
#footerDiv
{
height: 200px;
width: 100%;
position: relative;
clear: both;
background: lightblue;
}
What sticky footer are you using? What does your code look like? You could try
http://www.cssstickyfooter.com/
Because the position is set to relative. and also the margin-bottom: -200px;
It's because of your margin-bottom in the #mainWrapperDiv. If you take that out it appears to work okay. Check it out http://jsfiddle.net/kA6XJ/