Alright so I have a page that's title always changes based on what person is logged in (their name is the title of the page). However because of the fact that the name is always going to be different that means that it needs to be positioned via the center of the text so that it will expand out horizontally both ways. I'm uncertain as to how to approach this and I have tried a few things however due to the variable length of the title none of the suggestions have panned out. So to give you the basics of where I'm at code wise:
#profteamName{
position:absolute;
text-align:center;
top:220px;
left: 550px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em darkblue;
text-decoration:underline;
I wouldn't be against using relative positioning. Just so long as it will expand horizontally.
(prefer to use absolute positioning long story there but I will take what I can get)
Thank you for your guys time.
Rather than positioning the div from the left side of the page, stretch it across the entire window (or container div on the page) using width:100%;. It'll take up the entire width and align the text - regardless of the length - in the middle of the div.
CSS
.header {
position:absolute;
text-align:center;
top:50px;
width:100%; /* take the width of the window or container div */
/* rest of your code */
}
Here's a CodePen mockup you can play with.
Related
Problem
I have a header with the basic HTML structure
<div id="header">
<div id="logo"></div>
<div id="navigation"></div>
<div id="userInfo"></div>
<div class="headRight"></div>
<div id="callCenter" class="headRight"></div>
</div>
I cannot change the HTML. Currently it is laid out with floats, and navigation was aligned to the bottom of the header using padding-top. However, it only works when userInfo is 2 lines, and it can be 3 or 4.
What I need to do
Using only CSS, align navigation to the bottom for all nav heights while maintaining the original layout.
What I've tried
Half a dozen stack overflow solutions including the classics position:absolute and vertical-align:bottom on parent. (The former breaks the document flow, and the latter seems not to work because other elements get in the way.)
The fiddle
Cleaned fiddle best I could, but inspect will probably still be easiest.
https://jsfiddle.net/ohrhe4u5/1/
Notes:
The tabs should just touch the bottom of the header.
callCenter is misaligned in this example as well, but you can ignore. It's much lower priority.
New fiddle
I changed header, logo, and navigation to display:inline-block, allowed userInfo to float right, gave the nave extra height to make sure there's always room, and absolute positioned the headRight items.
That leaves me with this. A little janky due to the absolute positioning and forcing the nav height larger. Any better ideas?
https://jsfiddle.net/ohrhe4u5/2/
I generally dislike float for positioning where i can help it (this is a personal preference because i find it sometimes painfully unpredictable), as such, using a combination of position:absolute, min-height and margin i believe i have recreated what you're after.
Basically this solution works by position:absolute'ing the elements that we have some idea of consistent sizes of (the logo and the navigation), then have the header element take its height from the user data and links on the right. We add a min-height to the header element though so that should the user data be reduced to 2 lines, the height is still enough to accommodate the absolutely positioned elements (given they no longer affect the height of the header element by being absolute).
JSFIDDLE
CSS
/* new parts of the css */
#header {
min-height:112px; /* in case user data is made smaller */
padding:10px 10px 0 20px;
position:relative;
}
#logo {
width: 210px;
position:absolute;
top:50%;
width:210px;
height:62px;
left:20px;
margin-top:-32px;
z-index:1; /* bring logo above the user data */
}
#navigation {
position:absolute;
bottom:0;
left:210px;
font-size: 20px;
height: 40px;
z-index: 1; /* bring navigation above the user data*/
}
#userInfo table{
margin:0 0 0 auto;
}
.headRight{
text-align: right;
padding-bottom: 0.2em;
}
I'm using CSS box-shadow to mimic a background that "bleeds" to the edges of the browser window. It works great in Chrome, Firefox, Safari, and Internet Explorer 9 & 10. However, Internet Explorer 11 renders a transparent 1px "space" before the left (negative) box-shadow.
Take this HTML:
<div class="wrapper">
<div class="widget">Test</div>
</div>
And this CSS:
.wrapper {
background:red;
padding:20px 0;
}
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
}
In most browsers, the widget DIV has a white background and white left & right box shadows that fill the width of the browser window with no spaces, breaks or red from the wrapper bleeding through. In IE11 there is a 1px red line that runs vertically along the left side of the widget DIV.
Take a look at this fiddle for an example: http://jsfiddle.net/Bxsdd/. (You may need to manually adjust the width of the fiddle Results pane as slight differences in the width of the window show the issue more apparently - again, only in IE11.)
Things I've tried to remove the transparent space:
Changing the box-shadow from using em's to using px's
Adding or subtracting 1px from the other box-shadow attributes
Adding a border around the widget DIV
Adjusting the padding, display, position and other CSS elements for the widget
So many things I can't even remember right now
Any ideas how to remove the 1px transparent space in IE11?
Now that we know it's a bug, here's one acceptable workaround:
.widget {
width:600px;
height:400px;
margin:0 auto;
text-align:center;
background:white;
box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
position:relative;
z-index:2;
}
.widget:before, .widget:after {
position:absolute;
content: " ";
width:1em;
left:-1em;
top:0;
height:100%;
background:white;
z-index:1;
}
.widget:after {
left:auto;
right:-1em;
}
Basically, I'm adding absolutely positioned :before & :after pseudo elements that contain nothing more than the same background color as the widget DIV and that DIV's box-shadow. These pseudo elements are offset just to the outside-left and outside-right of the widget DIV and positioned behind it so that they provide the correct color for the box-shadow bleed through.
Obviously this adds complication if one is already using the :before & :after elements, but this works for my purposes. I suppose one could also try setting negative margins on the widget DIV.
Checkout the fiddle here: http://jsfiddle.net/TVNZ2/
THE PROBLEM:
This appears to be an graduated alpha transparency/aliasing issue to do with even/odd pixelation calculations.
As best I can tell, colour is spilling into that pixel line but the antialiasing calculation is stripping its alpha value in an attempt to try graduate the distinction of the box-shadow with its surrounds.
That is fine on the outside border of the box shadow, but not so great in the inside border - which is why we are all here!
WHAT (PRETTY MUCH) WORKED FOR ME (PURE CSS):
In my use case, this was fixed by adding several additional box-shadows (of different and lesser values) like so:
div {box-shadow: 10px 0px 0px 0px red,
4px 0px 0px 0px red,
3px 0px 0px 0px red,
1px 0px 0px 0px red;}
Though not elegant, this cumulatively increase the "spill" into the inner pixel line. About three additional box-shadows were required to achieve the desired value - suggesting the antialiasing spill is set at about 25%. Different device densities may change that?
Simply repeating the same box-shadow didn't work - so I am guessing IE treated them as an repetition error and ignored them.
THE "PRETTY MUCH" PART (FOR ME):
In my use case I was adding a purely horizontal box shadow to the right of a text span to create the impression of padding if the line broke and became more than one line. I wasn't adding a shadow to the top or bottom or around a div.
The "pretty much" part for me is that there is a little vertical spill "dot" of about 1px or 2 pixels at the top and bottom of pixel line at certain widths. Essentially, the same problem above in reverse.
Not ideal, but far more preferable than having a whole line transparent.
I hope this will work for you (the reader) in similar other scenarios, but I haven't tested this.
Good luck, and let's all thank good ol' IE for its "challenges"!! ;)
You can fill the space with outline:1px solid color; It worked for me.
.container{
display:block;
position: relative;
width:450px;
height:450px;
margin: 0 auto;
background-color: #654d7f;
}
.header-emphasis{
position: absolute;
bottom:5px;
max-width: 420px
}
span{
position: relative;
left:8px;
background-color: white;
padding:4px 4px 4px 0px;
color: #666666;
box-shadow: 6px 1px 0px 2px #ffffff, -8px 1px 0px 2px #ffffff;
outline: 1px solid white;
}
<div class="container">
<h3 class="header-emphasis">
<span class="highlight">
If there are no dogs in heaven then when i die i want to go where they went.
</span>
</h3>
</div>
I thought I would share my answer to this issue. I cannot be sure that I have had the same exact problem as everyone else, but what I have observed is this: The problem occurs in EI11 (and EI10 according to other which I have not tested) when an element with a set width of pixels is centered using margin: auto; (my case was a left/right issue). I noticed that on resize, the div would shift over to the right 1px on every other pixel width of the screen.
I used a transparent background to observe that instead of just a gap appearing on the left, the div did in fact shift 1px to the right.
Changing the width of the div 1px does work on the current screen width. However, change the screen width will bring back the problem on every other pixel.
To solve the issue, we need to identify the screen width as even or odd. In my case, on even I added a css rule to my culprit div. The new rule changes the left positioning by 0.5px.
Furthermore, the function needs to be executed on the screen resize.
Below is the script I used to fix the issue:
(function (window, document) {
function isEven() {
var windowWidth = window.innerWidth;
// Find out if size is even or odd
if (windowWidth % 2 === 0) {
document.querySelector("#container").classList.add("container_left_1px");
} else {
document.querySelector("#container").classList.remove("container_left_1px");
}
};
document.addEventListener("DOMContentLoaded", isEven);
window.addEventListener(('onorientationchange' in window) ? 'orientationchange':'resize', isEven);
})(this, this.document);
And the css rule
.container_left_1px {left: .5px;}
Executing the script only on EI10 and 11 would be optimum. Please forgive my scripting as this is the first js I have made. Please feel free to correct any issues. This solved my problem; I hope someone finds it helpful!
DaveE gave a nice solution. I played with this myself as well. I had an issue with the top and bottom blur of a box-shadow, instead of left and right. I eventually solved it by just adding a border on top and use important next to it.
.class
{
border-top:1px solid $colorBg !important;
border-bottom:1px solid $colorBg !important;
}
Perhaps not as well tought out as the previous solution, but it worked for me.
Found this solution(Small space between box shadow and div when alpha set) and it works for me: div width must be an odd number.
width: 800px; => not working, but width:799px; => works and white gap disappeared!
In my case, I had a white line between the div bottom and the shadow and I resolved the issue adding a height to the div with decimals:
height:30px; -> height:30.1px;
Okay, been struggling with this for a bit now and I have pretty much the appearance I want but am now struggling with positioning the items. Basically I want a stroked text with the stroke on the outside, meaning the webkit text stroke is useless.
So I figured I'll position two text elements on top of each other and do it that way. And that works great, except since I am using position:absolute the element essentially has no height.
The HTML looks like this:
<div class="hcontainer"
<h2>A Framework For Web Artisans</h2>
<span class="h2white">A Framework For Web Artisans</span>
</div>
The CSS like this:
h2{font-size:2em;
margin: 10px 0;
color:#234F70;
-webkit-text-stroke: 10px #531A16;
-webkit-text-fill-color:#FFF;
letter-spacing:-2px;
position:absolute;
top:10px;
left:0px;}
.h2white{font-family:dom_bold,arial black;
font-size:2em;
margin: 10px 0;
color:#FFF;
position:relative;
top:10px; left:0px;
letter-spacing:-2px;
position:absolute;}
.hcontainer{position:relative;clear:both;height:2em;}
So here's the issue. The hcontainer needs to have a set height because the element it contains is positioned absolutely therefore has no height and messes up the flow. The problem is making that height dynamic so I can space the elements properly.
I could make a separate container for each heading but that just seems a bit much. Can anyone think of a better way to do what I'm trying to do here? Or a way around the height issue?
http://jsfiddle.net/calder12/9M7YZ/
I don't really understand what it means that "The problem is making that height dynamic so I can space the elements properly." But if you want to not have to declare a height on .hcontainer, you can use a negative top margin on .h2white to place it on top of the red h2 instead of using absolute positioning. Like so:
http://jsfiddle.net/9M7YZ/10/
.h2white{
font-family:lemon;
font-weight:bold;
font-size:4em;
color:#FFF;
letter-spacing:-2px;
margin-top:-86px;
position:absolute;
}
The background of my css class footer does not go across the entire width of the browser depending on how wide I keep the browser. It is making the page look odd because the footer is ending before the main content ends. The site is up at avidest.com so you can see what I'm referring to. Here is the css:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
The css was originally:
.Footer { width: 100%; padding:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9;}
but that didn't work either.
How do I make the footer go all the way from the left to the right side of the browser?
Thank you.
Looking at your webpage with chrome inspector, this error seems to be related with floating all the columns and header.
When you float an element, that element gets 'out' of the document flow. What this means is that this element actual size wont' be taken into consideration when it's time to layout things.
I usually don't want to have this behaviour on floated elements, so one way to avoid this is to set overflow: auto in the parent container.
Also, your header layout looks really strange. I'll update this when I have a definitive solution.
First update:
I have added said overflow: auto to every parent with floated elements and now it works for me. Please add that rule to the following elements:
.Header
.Logo
.body
Please note that with these changes your page will look messy (specifically, there'll be many scrollbars around).
This is because you have been a little too much strict setting things' size. I would let things flow more naturally instead. For example:
Settings logo size shouldn't be neccessary.
Bullet points on Header have too few height. I would remove it too.
Another thing I would do is to split the background image in 3 (or 2 at least, header and content). That way, things are a little more decoupled and easier to change. Try to think of each 'logical' block (header, footer, sidebars, login form) as an independent module that shouldn't share things with the rest (images, classes, etc).
I'm sorry that all this can't be explained in a comment, but please don't hesitate to ask me anything.
Have you tried left and right pixels at 0 maybe?
.Footer { left:0px; right:0px; padding-bottom:10px 0; margin:0px 0 0 0; text-align:center; border-top:1px solid #b3b3b3; background:#d9d9d9; background-repeat: top-repeat-x;}
I think it may be the container it is within
I have a group of rectangular Divs, all of class 'Bar', these are all floated far right inside the container which also contains a similar set-up floated left inside it.
In Google Chrome this works fine and the bars are stacked on top of each other with spacing of a between them. However in IE the bars are shown below the floated left content and are not stacked on top of each other.
Please say if more info is needed I tried to include only most important so the post isnt too long.
Thanks in advance
.Bar {
border-color: #666;
background-color: #eee;
width:200px;
height:25px;
border-style:solid;
border-width:1px;
border-radius:6px;
padding: 2px;
margin:6px 0 0 0;
float:right;
line-height:25px;
font-size:12px;
}
Removing bdInnerBar class's float:right fixes situation on my side, even more the right bars get blue color.
Sorry, I can't get the reason for this, if possible please clean-up the html and css to have only relevant parts in them, if you want to get more general answer.