I'm trying to build a page where I have two sidebars both in opposite direction. I'm using a metronic admin theme purchased from evanto, I want it to be fixed even page is being scrolled and the page content to be below that sidebar. I've placed these two menu inside a div with class page-container in which I'm having another div for the page content named page-content-wrapper.
here is the link to my problem
I tried using the following css in editor.css:
body {
color: #333333;
font-family: "Open Sans", sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size: 13px;
direction: ltr;
}
body {
background: #e9ecf3;
}
.page-header-fixed {
margin: 0px;
padding: 20px 20px 0 20px;
position: relative;
z-index: 2;
}
.page-container {
margin-top: 75px;
padding: 0px;
z-index: 2;
}
.page-content-wrapper {
z-index: 3;
}
I tried using absolute position but it becomes more messy as both the sidebars collapse. I tried putting z-index too but its not helping.
Content is also coming down the sidebar.
Please help.
if you want to fix the position of the element with respect to the window even when scrolling then use position: fixed; on that specific element.
Related
Now the code below is displaying perfectly on different mobile platforms and different mobile browsers. For some reason when I load it onto my desktop browser the image overlaps the links.
On mobile the image is perfectly centered above the links and desktop version image is overlapping the links. Any help?
The main issue is the placement of the image.
CSS:
html {
font-size: 20px;
box-sizing: border-box;
}
body {
background-color: #1abc9c;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.btn {
border: 5px solid #2c3e50;
color: #2c3e50;
display: block;
font-family: 'trebuchet ms';
font-size: 2rem;
letter-spacing: 0.1rem;
padding: 1rem;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
.btn::before {
content: "";
background-color: #E26A6A;
box-shadow: 10px 10px 0 #F1C40F,
20px 20px 0 #3498DB;
position: absolute;
left: 0.25rem;
top: 0.5rem;
height: 102%;
width: 102%;
z-index: -1;
transition: all 0.4s ease;
}
.btn:hover::before {
box-shadow: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.tools
{
position:absolute;
top: 25px;
left: 0px;
z-index: 2;
}
html:
<body>
<img src="tools.png" class="tools">
<div class="wrapper">
< MICROSOFT_LOGGER >
<br>
<br>
< OFFICE_TOOL_LOGGER >
<br>
<br>
< WEB_MON_COMPUTER >
<br>
<br>
< WEB_MON_ANDROID >
</div>
</body>
https://codepen.io/brandon-humphrey/pen/wvMGJzN
Desktop view: https://ibb.co/6YVZC13
Mobile view: https://ibb.co/7QFcdn3
That is because you're using position: absolute to position your image. What this does to your element is that it removes it from the normal document flow, and no space is created for it in the page layout anymore.
I recommend you read more about positioning in CSS so that you could figure out what you need and do it!
Small hint: What you might want is using Flexbox mainly to position everything properly, you can have a better result just by setting the flex-direction in body to column (Although I recommend putting your flexbox as styles for divs not the whole body). Also, remove the CSS class you wrote for tools, and the height you specified for the body.
The fact that you get the effect you want on mobile is a fluke. The wrapper for buttons is vertically centered, so there's space enough for the image to sit on top and not cover your buttons. Once the vertical space is reduced because the screen is landscape your absolutely positioned image covers the buttons.
If you want the effect to be consistent, I suggest you remove all your styling for the tool class and add flex-direction:column; to your body styles. You may still have to fiddle with it for your full effect, but this will get you the basics.
I have a problem that I just can't wrap my head around, it might be because that I'm tired. I'm using Ryan's Fait sticky footer which I'm sure the most of you are familiar with. I use it regularly and never had any problems with it until now. The design that I'm working has a footer with several inner child elements.
One of the elements .newsletter is using padding or margins to make a wide gap so that a background image can be placed on the body. This is causing a overflow even when entering the correct height. Deleting the padding corrects the problem. I know that using overflow: hidden is an option but I'd rather find out the cause.
Screenshot with margins or padding set within the news letter element:
Screen without margins or padding set in the news letters:
Not working CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
Working CSS:
Simply changing the following values from those mentioned above to the following resolves the issue but I want the padding, or margin gap between the newsletter.
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
What if you put background-color : black to your .mainfooter instead of putting the background-color to the different element inside your footer?
It would seem that I'm extremely tried and stupid! I thank everyone for taking the time to take a look but it seems its as simple as a user error.
The problem was because I was counting from the very first bit of colour, in this case background: #000 on the .newsletterfix and not taking into consideration of the invisible padding above it. Stupid, me.
Example:
Quick question here. I'm using a database and inserting an 'Image Name' on top of the image, as can be seen here:
Currently the padding of the Image Name is a number, however I want the padding to go until the border of the image. I tried doing 'Padding: right 250;', however clearly that won't work as the right padding starts at the end of the Image Name, which can be of varying length.
This made me start thinking that it needs to be Dynamic, and I am most certainly new to this. I've looked at various things online however can't seem to find similar things, which probably means I'm searching for the wrong thing. Anyway, any help woud be great.
Cheers,
Jake
**Current CSS (obviously lots more exists, but this is requried bit)- **
h3.imageName {
position: absolute; top: 278px; left: 10;
width: 100%;
z-index: 20;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
background: rgba(0, 0, 0, 0.7);
padding: 8;
}
**Current HTML - **
<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>
You could just give the whole text area a width if the image container width does not change. Also consider using bottom: 0; rather than top:# in this instance too.
You're using a span which is a display:inline; element which means it's width is not auto or 100%. You've added a background colour to the span meaning the background doesn't stretch to the edges of the parent element. Put your background on the parent being your h3 element. You've already used width:100%; and if you want it in the bottom left corner you should try this:
h3{position:absolute;left:0;right:0;bottom:0;background:#000000;background:rgba(0,0,0,0.7);}
Also I see you're adding a padding and position of 10px. So you could use a margin like so
margin:0px 10px;
This will keep the h3 element 10px alway from either side of the parent element.
to keep it 10px away from the bottom. Add bottom:10px; or even margin-bottom:10px; to be consistent.
Also we don't really need any styles on the span itself as it's a child element of the h3. So just put your styles from the span the the h3 so all together
h3{position:absolute;left:0;right:0;bottom:0px;margin:10px;marign-top:0px;background:#000000;background:rgba(0,0,0,0.7);color:#FFFFFF;font-family:Helvetica,Sans-Serif;padding:8px;}
Also! Don't forget to add a position relative to h3's parent element!
`position:relative;`
It's not entirely clear how this is structured but an absolutely positioned element is positioned according to the edges of the closest non-static positioned ancestor.
Unfortunately, this includes borders and padding.
One option would be to wrap them image in another element and apply the border to that:
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
}
.inner {
position: relative;
border: 10px solid pink;
}
img {
display: block;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<div class="inner">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
</div>
As an alternative to the border...a box-shadow might be an option as this does not affect the size of the element.
* {
box-sizing: border-box;
margin: 0;
}
body {
text-align: center;
}
.wrap {
margin: 1em;
display: inline-block;
position: relative;
}
img {
display: block;
box-shadow: 0 0 0 10px pink;
}
.imageName {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
text-align: left;
padding: 8px;
}
h3.imageName span {
color: white;
font: bold 18px Helvetica, Sans-Serif;
}
<div class="wrap">
<img src="http://lorempixel.com/400/200/sports/" alt="" />
<h3 class="imageName"><span>Image Title</span></h3>
</div>
Hi I've got a website up.
I'm a no0b but I learn fast and I learn as I go.
However in one of the pages...the footer has gone up too close to the header. I want the area between the header and the footer fixed. I've tried changing the height of the main content in css but it doesn't seem to work. The front main page is ok. It's the about me page I'm having difficulty with. I just want the space between the header and footer fixed regardless of what's between them.
I use:
#site_content {
width: 950px;
overflow: hidden;
margin: 10px auto 0 auto;
padding: 10px;
}
thanks for your help.
Hey just replace your footer code by the below code
CSS
footer {
width: 100%; /* make width 100% changes done*/
font: normal 100% arial, sans-serif;
padding: 50px 20px 5px 0;
text-align: right;
background: transparent;
position: fixed; /*changes done*/
bottom: 0; /*changes done*/
top: auto; /*changes done*/
text-align: center; /*changes done*/
}
Add this to your #footer selector in your CSS:
#footer {
position:absolute;
bottom:0;
}
You can get an idea about how to do it by inspecting this template from twitter bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
BTW: Twitter Bootstap may result interesting to you (based on the screenshot you show).
We have a Wordpress site at http://cmagics.eu/digitalmagazinepublishing which uses the responsive2 theme. We are trying to get a sticky header which seems to work just fine, however we are also trying to get a sticky footer which simply sticks to the bottom of the page and works like the one at http://ryanfait.com/sticky-footer/
Because of the slightly cryptic nature of the responsive2 theme how can I;
1. keep the footer stuck at the bottom of the page using the correct sticky method not position:fixed
2. Stop the main content scrolling unnecessarily when there is plenty of room on the page?
html source:
view-source:http://cmagics.eu/digitalmagazinepublishing/
css
#footer {
position: relative;
clear:both;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align:center;
margin-top: -324px; **just a hack to make the footer appear at the bottom incorrectly**
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
}
#site-container {
width: 900px;
margin: 130px auto 0 auto;
overflow:auto;
padding-bottom:162px;
}
.hfeed {
min-height:100%;
height:100%;
height: auto;
}
Here's a solution that I think is very clean. Use absolute positioning for all of your main content elements (header, article, footer). Use #media queries to create breaks at different resolutions if you need to have the header or footer height change for different screen widths (responsive design), and tell your main content area to hide overflow. You can use floated, relative layouts within the main content areas this way, as well.
Here is footer css :-
#footer {
position: fixed;
font-size: 11px;
line-height: 1.5em;
background: rgb(54, 53, 53);
color: #fff;
border-top: 2px solid #444;
text-align: center;
margin-top: -324px;
margin-bottom: -25px;
height: 162px;
font-family: Roboto Regular;
bottom: 0;
width: 100%;
}