I'm using VS2010,C# to develop my ASP.NET web app, I'm using a .js file to display some small tool tips in my program, there is a CSS file also that should be used in my ASPX files so that this tooltip is displayed correctly, but when I use this CSS all my page (including tables) are displayed at left side of page while I've aligned them to be at the center of page, I'm not an expert in CSS files, how can I fix this problem, here is my CSS file:
* {margin:0; padding:0}
body {font:12px/1.5 Tahoma, Arial, Helvetica, sans-serif; background:#FFF}
#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer}
#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; background:url(images/tt_top.gif) top right no-repeat; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#666; color:#FFF}
#ttbot {display:block; height:5px; margin-left:5px; background:url(images/tt_bottom.gif) top right no-repeat; overflow:hidden}
#tt is set to position: absolute. This is probably the cause of your problems since you are not telling it what position you want so I suspect it is defaulting to top left.
What CSS are you using to align things to the center? And what is your HTML structure? I am assuming that #tt is ta main container on your page...
To actually find out which part of your CSS is wrong though then the easiest way of doing it is to just remove each line/property from your CSS file and retest until the positioning stops dying.
Also if that CSS is there purely for your tooltip then you probably shouldn't be using a * selector. Something more specific like .Tooltip * would minimise any interference from anyting outside.
And in general if styles are meant to only apply to one given piece of content I would use a class (or id) on that content as a prefix to every selector to guarantee that you cannot possibly change anything outside of that.
Going on your code and comments, all I can see that would be effecting the layout of your page is that you are resetting all the margins and padding on your elements using the style
* { margin: 0; padding: 0 }
Also since you are not properly centring your elements (using a wrapping <div> with a fixed width and margin: 0 auto;, then it seems as though it is just your margins and padding that are now off.
Related
Creating a very simple webpage for DIV testing. I have a DIV that creates a header at the top of my page, which is fixed so it does not scroll off the page. Within this DIV, I have an H1 header that I want to be centered vertically, left justified but away from the left edge of the page by a certain amount (20 pixels).
Here is my code:
CSS:
body {
font-family:"Calibri";
margin:0px;
}
div.header {
top:0px;
left:0px;
width:100%;
height:50px;
position:fixed;
background-color:#7fc7f4;
border-bottom:thick double black;
z-index:2;
}
h1 {
color:black;
margin-left:20px;
font-variant:small-caps;
}
HTML
<!Doctype html>
<html>
<body>
<div class="header">
<h1>Website Heading</h1>
</div>
</body>
</html>
When it renders on my C:\ drive, the H1 text is at the bottom of my DIV block. I copy the files to a network drive, and open it from there. When it renders from the network drive using the same browser on my computer (IE9), it is centered all on its own.
For my C:\ drive, I tried adding the following to my H1 in the CSS:
h1 {
color:black;
line-height:50px;
vertical-align:middle;
margin-left:20px;
font-variant:small-caps;
}
This has absolutely no effect when rendered on my C:\ drive. Rendered on the network, it is still centered as I want it, just as it was before I added these lines which appear to be ignored. I obviously want this to be consistent in both the C:\ drive and network locations, so I know that my pages are working properly when both building/testing and deploying for all to consume. It also has to be consistent across Chrome and Firefox as well.
Thoughts anyone?
One thing I'm not sure about is where to add these lines of code. Do I add them to the H1 tag as I have done, or do I add them to the DIV tag? Does it matter? I have tried both, and it doesn't seem to make a difference.
You'll have to forgive me, as I am relatively new to CSS, and am trying to get a better understanding. I have searched through the answers on similar topics on here, and all the suggestions that people have given don't seem to work. So I am hoping that I am just missing something simple.
Ensure you 0 out the other H1 margin values:
h1 {
color:black;
margin:0 0 0 20px;
font-variant:small-caps;
}
You should be implementing a normalize CSS file to baseline your HTML elements if you aren't already.
For example, I use http://html5boilerplate.com/
What you're looking for is 'line-height' on the H1 element, the following makes the line-height of the h1 element the same height as the containing div, giving it the effect of vertically aligning in the middle.
You'll also need to remove the margins that are on the h1 element by default, by using margin:0;
h1 { line-height:50px; margin:0; }
See here: http://jsfiddle.net/2RtkT/1/
Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/
<a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton">
LCARS Locomotive O.S.
</a>
My problem is the text label in the graphic. I'm using this button design all over my site, with only the text and its size varying. When I originally designed the system (on page: http://www.fccorp.us/development/index.php and then again on http://www.fccorp.us/development/index.fccorp.php), I used the margins & padding CSS controls to get the text centered vertically within the button. But that depended on a static font height. Now I want to use a taller font and can't get the thing to auto center height wise. I tried
.leftbuttons {
width:335px;
height:40px;
padding:**auto**
20px **auto**
45px; font-size:1em;
border-style:solid;
border-width:0px;
font-family:Arial;
font-weight:900;
margin-left:10px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;
text-align:center;
display:inline-block;
background-image: url(http://img580.imageshack.us/img580/1461/lcarssitebutton.png);
}
But all that ended up doing was chopping the image up.
I'm using the .antibutton to try to override a few details from the other classes in order to get what I'm trying to get. If I can solve the text vertical-align problem (or some nice coder here can figure out what the heck I screwed up), I also want to get the button's bottom aligned even with the text line.
Any thoughts?
Why don't you just add a line-height: to your unique cases?
for example, i added line-height: 40px; to a.buttonlinks and it centers vertically just fine.
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
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;
}