For some reason this class outputs ok in IE but in Firefox the words and the lines ( | ) are not centered:
.horz_list li {
display: inline;
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
This is the page for the output:
<div id="top_nav">
<ul class="horz_list">
<li>Nuevas</li>
<li>Comentarios</li>
<li class="last">Enviar</li>
</ul> <!-- ul.horz_list -->
</div> <!-- top_nav -->
If anyone know why is this, thanks.
Try changing the li's properties
.horz_list li{
display: block; /* block level */
float: left; /* float them inline to the left */
overflow: hidden; /* this will force the div to stretch to it's contained element */
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
... or if you want what Ben described, the whole block centred, use
.horz_list {
margin: 0 auto;
}
Ensure it's containing block has a width, even if it's 100%.
If you're trying to get your list items to be horizontally centered, this is accomplished differently in IE vs. other browsers. Try setting margin-left:auto;margin-right;auto on your <ul>:
.horz_list {
margin-left: auto;
margin-right: auto;
}
Probably the reason for the extra spacing in Firefox is that if you set the LI as display:inline, the newline in your HTML code creates an extra space (just like if you type "lorem(newline)ipsum" the words may appear side to side in the page with a space between them).
Try, for example, to stick the <LI> tags together like this <li>....</li><li>.... and I think this will remove the unwanted spaces.
If you don't like to put it all into a single line, alex's suggestion works, but you may have to add a <div style="clear:both"></div> after the closing UL, because of floated elements.
Related
I want two buttons to be displayed right next to each other, with no border in between. The buttons are:
<button class="tButton">1</button>
<button class="tButton">2</button>
My naive approach for the css is:
.tButton {
width: 50px;
height: 50px;
margin:0px;
padding: 0px;
background-color: gray;
border: none;
}
But this leaves some space between the buttons (JSFiddle). In Firefox, the example renders as:
This problem goes away when I use float: left; on the buttons. But I am trying to understand the following about CSS:
Why is there any margin to begin with, even though I explicitly set margin: 0;?
Because by default buttons are inline-block elements, and as any inline/inline-block elements they respect white spaces including new lines.
For this reason putting buttons on the same line gets rid of gaps:
.tButton {
width: 50px;
height: 50px;
margin:0px;
padding: 0px;
background-color: gray;
border: none;
}
<button class="tButton">1</button><button class="tButton">2</button>
as well as making them float: left since in this case buttons become floated block-level elements.
This happens with inline and inline-block elements. space is added in newline. You should change your markup, from:
<button class="tButton">1</button>
<button class="tButton">2</button>
To
<button class="tButton">1</button><button class="tButton">2</button>
single line fiddle
as a variant, you can write:
<button class="tButton">1</button
><button class="tButton">2</button>
The body is still a “BIG DIV” which needs to be set with margin zero and give a display:flex; so the items on its container will stack one together to the other inline. I checked your code in https://jsfiddle.net/83a2Lou0/ and it needs to be saved first before you see the effect of the changes.
I forked your same code in code pen and there the changes are saved automatically. Just add this to your CSS:
body{
margin: 0;
display: flex;
}
.tButton {
/* The same properties and values you have here. */
And that‘s it. Check here the same coding:
https://codepen.io/limakid/pen/KKQRdXK
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I have a container with two basic elements. A header and the body. In the header div I want a 50px by 50px image and a user name next to it, but I can't seem to get the username to display inline. What am I doing wrong? http://jsfiddle.net/FqW9d/14/
Add a float: left to both elements. Like:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
Add a float left to the image and the div containing the name, I have updated your jsFiddle here http://jsfiddle.net/FqW9d/15/
can you use inline-block instead inline for the div with username or float bot img and `div.
Demo with inline-block: http://jsfiddle.net/FqW9d/16/
Demo with float: http://jsfiddle.net/FqW9d/17/
Inline display can be a bit of a pain. The cross browser way to do it is like this..
/* Older version of FF */
display: -moz-inline-stack;
/* newer versions of FF and Webkit */
display: inline-block;
/* trigger the correct behaviour in IE */
zoom:1;
/* IE */
*display: inline;
You need to declare the style sin that order.
As everyone else is saying make the image and persons name float: left;
http://jsfiddle.net/FqW9d/20/
By the way, i really like the set up you did here. So i messed with your source some:
http://jsfiddle.net/FqW9d/22/
You've got the following structure (I've added an image url so we can see that element):
<div id="story-teller-head-contain">
<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="client-name">
<h1> Matt Morris </h1>
</div>
</div>
The div elements and h1 are all block-level elements by default. However, all you need to do is float: left the img and #client-name elements, and they will flow left to their width (which you declare), without forcing the next element to flow beneath.
#story-teller-head-contain img {
float: left;
height: 50px;
width: 50px;
}
#client-name {
float: left;
height: 50px;
width: 200px;
}
#story-teller-head-contain h1 {
margin: 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'helvetica neue', arial, sans-serif;
font-size: 12px;
color: #3B5998;
}
http://jsfiddle.net/FqW9d/21/
So you're not really looking for display: inline, which will attempt to display the element's as "inline text" is displayed (such as this paragraph text); what you want is for the img and #client-name elements to not "force clear after". Your display: inline is what is allowing the h1, which is a block-level element, to disrupt your display, since it is overriding the display: inline of the parent element.
In fact, if you inspect with Firebug or Chrome Console, you'll see the above computes as float: left and display: block, even though display: block has not been explicitly declared.
See:
http://www.w3.org/TR/CSS2/visuren.html#floats
http://www.alistapart.com/articles/css-floats-101/
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
You don't have to specify widths like in float method. It will automatically accommodate text with varying length.
I have updated your code - http://jsfiddle.net/FqW9d/27/
But I think your structure & css could be much more simpler. Since I don't know about the purpose, left it untouched.
I'm building a navigation using the simple <ul><li></li><ul> system and floating them to the left side so they appear inline. The follow code works in all browsers except IE 6.
The HTML
<div id="sandbox_container">
<div id="sandbox_modalbox">
<div>
<ul id="sandbox_modalbox_nav">
<li id="Intro" class="modal_active">Item 1</li>
<li id="Queries">Item 2</li>
</ul>
</div>
<!-- more content here -->
</div>
</div>
The CSS
#sandbox_container {
min-height: 385px;
width: 940px;
padding-bottom: 20px
}
#sandbox_modalbox {
width: 940px;
padding-top: 5px;
margin-bottom: -10px;
}
ul#sandbox_modalbox_nav {
width: 936px;
height: 52px;
margin: 0px 2px 0px 2px;
padding-top: 0px;
display: block;
}
ul#sandbox_modalbox_nav li {
height:52px;
float: left;
list-style: none;
padding: 0px;
display: block;
}
ul#sandbox_modalbox_nav li a {
padding: 12px 30px 0px 30px;
height: 52px;
display: block;
}
I also put it up on JSBin.
I understand the problem is that I must define a width for the <li> for IE to float it properly, however I would prefer these remain variable width. Is there anyway to float them properly without restricting the width?
If I am understanding the problem correctly then in browsers other than IE6 the list items appear next to each other, but in IE6 they appear on top of each other.
If this is the case, it may be because the a elements are not floated even though their containing elements are. I would just use a conditional comment and add the following for IE6 only:
ul#sandbox_modalbox_nav li a { float:left; }
Also, Neall is right on track with the whitespace issue, even if it doesn't fix your current display problem it may cause some unwanted space to appear between items later.
Not that I can think of, I can't imagine how to declare a width that can change, except by defining it in ems. If you have a content that you know is likely to be less than ten characters, then width: 11em; padding: 0.5em 1em; is likely to offer enough space for the content while still defining a width.
IE 6 has some bugs with whitespace between <li> elements. Try putting all your list items on the same line with no space between them.
Edit: On further inspection, I don't think the whitespace is your problem. Your example has a lot of extraneous styles - it's hard to tell what the problem is.
I usually solve this by setting the floated list items to width: 0 for IE6. This for one reason or other causes them to have the correct dynamic width.
You can either do this in a conditional comment:
<!--[if lte IE 6]>
<style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style>
<![endif]-->
Or simply take advantage of IE's lack of support for CSS selectors, by setting the width to 0, and then back to the default "auto" for modern browsers:
ul#sandbox_modalbox_nav li { width: 0; }
ul#sandbox_modalbox_nav > li { width: auto; }
I'm having trouble with the layout of a simple HTML page. Please help.
Here's the layout I'm going for...
Layout http://img516.imageshack.us/img516/9637/layoutfk5.gif
orange = body
blue/red = frame div
green = header image
black/white = menu div
It looks correct in Internet Explorer, but in Firefox, Safari, and Chrome there's a 4-pixel gap between my image (header) and my div (menu).
Internet Explorer, Firefox, Safari, and Chrome...
Browsers http://img516.imageshack.us/img516/3292/browserszi8.gif
This is my HTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
...
<body>
<div id="frame">
<img id="header" src="images/header.jpg" width="700" height="245" alt="" /><div id="menu">
<strong>One</strong> |
Two |
Three |
Four |
Five |
Six |
Seven |
Eight |
Nine
</div>
<div id="content">
...
</div>
...
</body>
</html>
Notice there's no whitespace between the IMG and the menu DIV.
This is my CSS...
...
div#frame {
background: #FF0000;
margin-right: auto;
margin-left: auto;
width: 700px;
border: 5px #30AADE solid;
}
div#frame img#header {
margin: 0;
padding: 0;
border: 0;
}
div#frame div#menu {
margin: 0 auto 0 auto;
padding: 5px 0 5px 0;
border-top: solid 2px #FFFFFF;
text-align: center;
font-size: small;
color: #88BE34;
background-color: #000000;
}
div#frame div#menu strong {
font-size: medium;
color: #FFFFFF;
}
div#frame div#menu a {
color: #88BE34;
}
Why are Firefox, Safari, and Chrome showing that 4-pixel gap?
It has to do with the default rules for IMG tags.
I recommend always using this in your stylesheet as a default rule:
img{
display:block;
}
My guess is it's the line height of the image-elements line, since IMG is a an inline element. You could probably fix it by giving img#header display: block;.
Anyways, what you should really do is remove the entire image and use a H1-element plus one of the many image replacement-techniques out there.
Edit:
When that is said, your menu should also be marked up as an unordered list (UL).
In "standard" browsers (and in fact IE6 with the proper DOCTYPE!), your image is INLINE mode by default, so it gets spacing as if it was a letter sitting on the baseline of text.
freelookenstein gave the solution to remove the extra spaces due to text alignment of INLINE mode.
It is the solution, but I would be careful about using a display:block by default as most likely that will mess up your typical web page content down the line.
You could either add the display:block property to a class or inline style on your image alone.
Or something like this:
img { display:block; }
p img, ul img, td img /* etc*/ { display:inline; }
Personally I would recommend to limit display:block only to those images you know are used for the site layout, or those that are specifically inset in boxes. In which case often you have already a class on the parent element like:
<div class="imagebox">
<img .... />
</div>
.imagebox img { display:block; }
You should wrap your menu links in an unordered list and then style the items with CSS. There are some reason for doing this:
Structuring your navigation links as a list results in more semantic markup. It better represents the content you are presenting. If you were to view the site with no CSS styles at all (you can do this with the Web Developer Toolbar for Firefox), you would still get a meaningful representation of your site layout. This is especially meaningful if you intend the site to be viewable by mobile browsers.
This may also (slightly) help search engines prioritize the content and boost your ranking.
You can define a style for your list items with a border on one side and some margins to get the "pipe delimited" effect. This will be reusable and makes it easier to change the menus to some other style in the future.
See A List Apart - CSS Design: Taming Lists
There is an example there showing complete CSS for achieving this effect.