We have an anchor tag floating right inside a header issue. It works fine on IE8 and Firefox.
Any idea how to stop it popping outside the header box?
Here is the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.wrapper { border: 1px solid black; }
.wrapper h3 a { float: right; }
</style>
</head>
<body>
<div class="wrapper">
<h3>Contact Details
Update
</h3>
</div>
</body>
</html>
Put the right floated element first.
<h3>UpdateContact Details</h3>
If you are floating it you need to tell the h3 to clear it. I assume this would work:
.wrapper h3 { overflow:hidden; zoom:1; }
LMK if not. And FYI, I wouldn't put the anchor inside of the h3 like that. I would probably make it a sibling of the h3, if necessary wrap a div around both and then apply the overflow/zoom.
Fixed it. Here are two extra rules that I added in
.wrapper h3 { overflow:hidden; zoom:1; }
.wrapper h3 a { margin: -1em 0 0 0; }
Related
So I am trying to make a simple border for a site, in css:
html{
border-top:3em solid #26282B;
}
I would like to have some white text on top of it, how can I do this? I tried making a class, but it always appears under the border.
You CAN NOT make any text in the border. Use div or something.
Here is the example:
<html>
<head>
<style>
body{margin:0;padding:0;}
.someclass {
width:100%;
height:3em;
background-color:#26282B;
color:white;
}
</style>
</head>
<body>
<div class='someclass'>
Sometext Here
</div>
</body>
</html>
You can put your text in a span or div set a class name and using left, top, right, bottom, fix the position like this:
e.g class="example"
.example {
position:absolute;
left: 5px;
top: 50px;
}
Elsewhere this probably help you:http://www.w3schools.com/tags/tag_legend.asp
You can't write something on top of a border - technically yes, but for all purposes here, no, you can't.
So if you want a text on top a short dark background you write something like that:
In yo HTML:
<div>My suppa text</div>
In yo CSS:
div {
background: #26282B;
color: #fff;
}
<div> here being the first element inside your <body> it still would have a margin before it, that's because of the browser default style.
You can get rid of it by doing that, in yo CSS:
html, body {
margin-top: 0;
padding-top: 0;
}
Now I would suggest you to read about CSS resets.
Yes, you can.
Add this to your style:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
How about this:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
border: 10px solid;
padding: 5px;
}
#title {
float: left;
padding: 0 5px;
margin: -20px 0 0 30px;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="title">Border title</div>
<p>Some content...</p>
</div>
</body>
</html>
Today I came across this code. It works as I would expect in Chrome, but it is adding a margin on a wrong element with Firefox:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Site Title</title>
<style type="text/css" media="screen">
body {
background-color: #aaa;
margin: 0;
}
#header {
background-color: #fff;
}
#logo {
float: left;
}
#menu {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
.main {
margin-top: 36px;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
<div class="container main">
Content
</div>
</body>
</html>
Firefox seems to add the margin in the .main rule to the content div, which was expected, and to the header div too.
If I add some text inside the header it would work as expected and the header won't have that margin:
<div id="header"> Some text here
<div class="container">
<div id="logo">Logo</div>
<div id="menu">Home</div>
<div class="clear"></div>
</div>
</div>
</div>
I can also add some text after the header block and it would also do the trick for Firefox.
I can't figure out why is Firefox adding that margin to the header element.
Very strange problem, I don't see why this happens.
It however seems to help when you add a padding of at least 1px to .container.
Also check this demo.
The problem has something to do with the container with automatic height and floating children...
Adding display:inline-block; to the #header will make it works in every browser (well except old IE), will include in the white box the right-floated div too (that now is not), and will continue to adjust the height automatically.
Fiddle: http://jsfiddle.net/AndreaLigios/VfAq7/1/
I have the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#scale div {
float: left;
width: 75px;
padding: 5px;
border: 0px #333 solid;
}
</style>
</head>
<body>
<div style="font-size: 10px;" id="scale">
<div id="box" align="center" style="background:#88ff88;" > </div>
<div id="a"> 1   </div>
<div id="box" align="center" style="background:#ff8888;"> </div>
<div id="b"> 2   </div>
<div id="box" align="center" style="background:#ff88ff;"> </div>
<div id="c"> 3   </div>
</div>
</body>
</html>
How can I get the above on three lines. That is, a color block and a number on a single line.
First, you have multiple elements with the same ID. It doesn't work like that. ID is unique, multiple elements can have the same class.
Second, I would recommend just having an empty span tag inside a div for your box. Divs display block by default (take up whole line) so you can have an inline-block span (takes up only required space but treated like block element) with set width and height and a number next to it.
Also, inline styles make the code look messy and difficult to read & work with. You should keep your CSS separate from your HTML.
<div id="scale">
<div id="a"><span></span>1</div>
<div id="b"><span></span>1</div>
<div id="c"><span></span>1</div>
</div>
#scale div span {
width: 100px;
height: 20px;
display: inline-block;
}
#a span{
background-color:#00F;
}
#b span{
background-color:#0F0;
}
#c span{
background-color:#F00;
}
DEMO
In your style tag, use display: inline-block on all of your box divs.
I have created a simple layout using the HTML div tag. I would like for there to be NO margin (meaning no whitespace) at the top of my page. I am able to achieve this in Safari, but for some reason the same HTML code isn't cutting it in Firefox. Here is a jsfiddle of my HTML code: http://jsfiddle.net/WhaGH/
You can't see it in jsfiddle, but if you copy and paste the code into an HTML document and then open it up using Firefox, there is a margin about 21px in height at the top of the page. This top margin does not appear if you open the same HTML file in Safari. I read somewhere else that different browsers use different amounts of default margin and padding with the "html" and "body" tags, hence my inclusion of some CSS in the "head" that sets margin and padding for those tags to 0. Again, this works for Safari but not Firefox (or rather, it works for the left margin but not for the top margin in Firefox). Does anyone know why?
by default Firefox use margin-top: 21.4333px for tag, and to div#header is added to the indentation.
Use padding-top to childs of block to prevent this.
h1 { margin-top: 0px; }
Fix this problem.
You've done the reset of the default values only for body and html, do it for the other elements as well. You might consider to use, in the future, a CSS reset, have a look at HTML5 Boilerplate
http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/
you did't clear your header (add one properties overflow:hidden;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
html,body {
margin:0;
padding:0;
}
</style>
</head>
<body style="width: 800px;">
<div id="header" style="width:800px; height:100px; background-color: blue; border-bottom: solid black 1px;overflow:hidden;">
<h1>This is the Header.</h1>
</div>
<div id="leftcolumn" style="width:199px; height: 500px; background-color: red; float:left; border-right: solid black 1px;">
<p>This is the left column.</p>
</div>
<div id="content" style="width:400px; height: 500px; background-color:gray; float:left;">
<p>This is where the content goes.</p>
</div>
<div id="rightcolumn" style="width:199px; height: 500px; background-color: green; float: left; border-left: solid black 1px;">
<p>This is the right column.</p>
</div>
</body>
</html>
<style type="text/css">
body { margin: 0; padding: 0; }
h1 { margin: 0; }
</style>
I'm trying to put a element to the left of a element, however I can't seem to make them the same height and align with each other. The span always seems to be positioned a little higher.
Anyone got any ideas?
Sparkles*
Edit: HTML section
<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>
CSS
span.box{
position:absolute;
width:100px;
margin-left:20px;
border:1px;
padding:2px;
height: 16px;
}
input.name {
width: 115px;
height: 14px;
}
If you want to vertically align items in the same line, you probably don't need to make them the same height - just give them the same value for the vertical-align property.
.myinput, .myspan {
vertical-align: middle;
}
What a lot of people don't understand with vertical-align is that in order for things to be vertically aligned to the middle, everything in that line has to have a vertical-align property of 'middle' - not just one thing (like the span).
Imagine an invisible horizontal line running though any inline content. Usually the baseline of text, and the bottom of images, are lined up with this line. However, if you change vertical-align to middle, then the middle of the element (text span, image etc) is aligned with this line. However that's not going to line up vertically with other items if they are still aligning their bottom or baseline to that line - they would need to align their middle to that line too.
here's an slightly retouched version of SuperDucks code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
.lbl {
background-color:lime;
padding:0;
line-height: 24px;
height: 24px;
display: inline-block;
}
.t {
height:17px;
padding:0;
height: 20px;
display: inline-block;
}
</style>
</head>
<body>
<span class="lbl">My label : </span>
<input class="t" type="text" name="t">
</body>
Try padding :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
.lbl {
background-color:lime;
padding:0;
}
.t {
height:17px;
padding:0;
}
</style>
</head>
<body>
<span class="lbl">My label : </span>
<input class="t" type="text" name="t">
</body>
Keep in mind 'span' is an inline element, rather than a block level element, so size definitions don't apply, unless you use 'display:block' CSS property. Inline elements get the size of the contents, so things like font size are what define the height of that span.
Also I'd use 'label' tag with the 'for' attribute, rather than a 'span'. This makes a better structure, and has the advantage of moving the focus to the input by clicking on the label.
The following is a block-level example, which allows pixel by pixel alignment for every browser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<style type="text/css">
.lbl {
background-color: lime;
border: 1px solid silver;
display: block;
float: left;
font-size: 12px;
height: 16px;
padding: 2px;
width: 100px;
}
.t {
border: 1px solid silver;
display: block;
float: left;
font-size: 12px;
height: 16px;
margin-left: 4px;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<label class="lbl">My label : </label>
<input class="t" type="text" name="t">
</body>