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;
}
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;
}
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.
I have been researching and working so hard to fix such a strange problem. I have a div that is supposed to hold some text. This div should be able to resize with that text, so that if there are two lines of text the div gets taller, etc. All that seems to work fine, but for some reason there's some sort of padding added to the top of the text and to the bottom of the text. I can't find what is causing that padding, and I really want to make the div fit the text more compactly. Here is an image of what i'm talking about:
http://i.imgur.com/ZblaLJX.png
The light blue box should be shorter in height so it fits the text more closely. Here is my CSS code for this div:
.captionCSS {
max-width:70%;
margin-top:10px;
margin-bottom:20px;
padding-left:5px;
padding-right:5px;
padding-top:0px;
padding-bottom:0;
background-color:#aef7f8;
overflow:hidden;
color:black;
}
I have messed around with all of the margins and paddings, setting them to zero and then setting them back again and nothing seems to work. The line height is inherited from another div and is 18px, while the font size is 12px, and i tried decreasing the line height but it didn't have any effect on the top and bottom padding/gap.
Also, when the text takes up two lines, it get a bit worse in that there is an extra bit of padding on the side, which i want to get rid of:
http://i.imgur.com/Ecdxdtq.png
So yeah, that's my issue. Ideally I would like a 5px gap from the edge of the div to the top of the text, so if there is anyway to do that please let me know! Thanks so much for your help!
You might try the following.
If your code looks similar to this:
<p>Some text with <span class="captionCSS">highlighted text</span>.</p>
apply the following CSS rules:
p {
background-color: gray;
padding: 5px;
}
.captionCSS {
max-width:70%;
padding: 0 5px;
background-color:#aef7f8;
display: inline-block;
line-height: 1.00;
}
If you set display: inline-block to the caption wrapper, then the line height value will have some effect.
line-height: 1.00 forces the line height to be the same size as the font-size for the element. If you set the value to be less than 1, you will get a tighter fit but you may also clip ascenders and descenders of certain characters depending on the font.
See demo at: http://jsfiddle.net/audetwebdesign/2cyaF/
Without the HTML I can't be sure, but my first guess is that the text has a parent block level element that already has styling rules. (ex: <hX> or <p>)
You can clear those styles through css by doing something like this:
h1,h2,h3,p{
padding:0;
margin:0;
}
Here are some example cases using your style: http://jsfiddle.net/JTrWL/
I have a div inside a div. The outer div's job is to position the box, while the inner div's job is to position the text. These divs are within a larger div, but I don't think that's the problem. When I try to put padding on the outer div, or in other words move the box, the padding is applied to the inner div and the box is thus getting bigger in that direction. The top-left hand corner is always stuck to the other div it is inside. How do I make it so that the padding is applied to the outside of the box instead of the inside?
Here is the formatting:
<div style="width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;">
<div style="font-size:x-large;
padding-left:40px;
padding-top:0px;
font-family:'Arial';
color:black;">
Profile
</div>
</div>
Not too sure, but by moving the outer box are you sure you haven't mistaken padding with margin? Padding is applied to the inside of the div.
I just changed
padding-left:10px;
padding-top:10px;
to
margin-left:10px;
margin-top:10px;
and increased it to make it more obvious. Also moved the inline css to make it clearer.
http://jsfiddle.net/H334r/3/
1 - For readability, it's generally good practice to not mash a bunch of languages together, even though web dev requires it every now and then.
So separate the css into and throw it in the or use a css stylesheet.
2 - You'll want to have the outer div relative to the page. So in css, position: relative. And the inner div, you want to use an absolute position. So position: absolute.
I took the liberty to clean up code and threw it here in jsFiddle. http://jsfiddle.net/w7Ltp/1/
But if you want the throw it into a html page.
<style>
#outerbox{
width:100px;
height:50px;
padding-left:10px;
padding-top:10px;
border: 3px solid #D8BFD8;
align:center;
position: relative;
}
#innertext{
position: absolute;
font-size:x-large;
padding-left:10px;
padding-top:0px;
font-family:'Arial';
color:black;
}
</style>
<div id="outerbox">
<div id="innertext">
Profile
</div>
</div>
Padding is applied inside an element.
from W3Schools, The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
So if you are applying the padding to your outside div (div with 100px width), the elements inside it are the ones that get affected.
You might want to look at using margin instead. Or it would be better if you set the padding to the parent of the outer div; With that, all elements inside the parent of the outer div will be uniformly spaced.
I see that you have "align: center" for your outer div. Try using "margin: auto".
Currently, I am modifying a css document to make a website compatible in IE 6 and including it using a conditional statement. Everything is slowly starting to look as it should EXCEPT....I can't seem to modify the height of the background image in the css below. I can make it bigger by increasing the height, but decreasing the height does not make it smaller. The original image is quite thin, so I don't see why this is a problem.
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
background-image:url(images/gradient.jpg);
background-repeat:repeat-y;
padding: 0px 0px 0px 0px;
width:680px;
height:42px;
color:white;
font-family:Helvetica, Georgia, "Times New Roman", Times, serif;
position:relative;
top:0px;
}
You can see in the attached image that the red gradient background image underneath the cork header image is too big and the text inside is too large also. However, no matter what I change in the css, it doesn't seem to alter anything.
Image of webpage
The div tag is:
<div id="title">
<h1>
Historia </h1>
</div>
Any thoughts as to why I can't seem to change this?
I would try first by using firebug lite for IE, that way at least you aren't guessing whats going wrong and you can identify the padding/height/etc;
My thought is that the height is simply being stretched by the h1 element (perhaps something else sneaking in too), thats my best guess as I don't have IE6 to test, but since your height is defined for the #title it must be whats inside of it that stretches it. Try setting overflow: hidden; for the #title see if that helps, or at least shows your 42px height.
http://bodegacooperativacigales.com/historianew.html
Try firebuglite, and view the element, it will show you what to get rid of in IE.
EDIT
to define your h1 simply do this:
#title{
text-align:left;
margin-left:170px;
margin-top:0px;
...
}
#title h1 {
height: 20px;
margin: 0; // remove margin
padding: 0; // remove padding to check if this is the issue
}
in your IE6 CSS sheet. Don't set a background image into the h1. The above piece is separate from your #title css definition.
I think you might be having issues regarding the height due to the child element creating overflow. Try adding the following rule to prevent the parent element from displaying any overflow:
#title {
overflow: hidden;
}