I have a couple un-ordered lists on my page. Both lists use list-style: disc inside;. Each list's list-items have a couple div's inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.
Here is a screenshot kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.
Here is a striped down version of my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="billing_form">
<div id="purchase_items">
<h2>Your purchase</h2>
<h4>Items:</h4>
<div class="items">
<ul>
<li>
<div class="item">First Product - one year license</div>
<div class="price">$99.00 USD</div>
</li>
<li>
<div class="item">Second product & 3 year Product Plan</div>
<div class="price">$125.00 USD</div>
</li>
</ul>
</div>
<div class="subtotal">SUBTOTAL: $224.00 USD</div>
<h4>Discounts:</h4>
<div class="discount">
<ul>
<li>
<div class="item">A really long discount item name - with extra info on three lines!</div>
<div class="price">- $20.00 USD</div>
</li>
</ul>
</div>
<div class="total">TOTAL: $204.00 USD</div>
</div>
</div>
</body>
</html>
And here is the CSS, as small as I thought was relevant:
html
{
font-family: sans-serif;
}
#billing_form
{
width: 350px;
margin: 0 auto;
font-size: 14px;
background-color: #EEEEEE;
}
#billing_form .items
{
position:relative;
}
#billing_form .discount
{
position:relative;
color:#3665B0;
}
#billing_form ul
{
margin: 0;
padding: 0;
list-style: disc inside;
}
#billing_form .items .item,
#billing_form .discount .item
{
display: inline-block;
width: 190px;
}
#billing_form .price
{
float: right;
padding-left: 20px;
}
#billing_form .items,
#billing_form .discount,
#billing_form .subtotal,
#billing_form .total
{
width: 100%;
}
#billing_form .subtotal,
#billing_form .total
{
text-align: right;
margin-top: 5px;
border-top: 1px solid;
font-weight: bold;
}
#billing_form #purchase_items
{
margin: 10px 10px 10px;
}
I found a similar SO question. Unfortunately, the accepted (and only) answer to it states to try position: relative; and vertical-align: top; but it didn't work for me. I tried it with both #billing_form ul and #billing_form ul li and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 & 4 and Google Chrome.
Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?
It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).
http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:
#billing_form .discount .item
{
display: inline-block;
width: 190px;
vertical-align: text-top;
}
Any other differences to what you have pasted above should be cosmetic.
Related
I have a navigation bar with hyperlinks to other pages. I decided to use different divisions for each hyperlink because I couldn't get them to spread out. When I execute this on my browser, two of the hyperlinks(both the right ones) are slightly below the other ones. I don't know if that is because of my mac or if it's an error in the code. Could someone please tell me how I can make sure all hyperlinks are evenly lied up in 2 lines?
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.connectp1 {
text-align: left;
}
.connectp2 {
text-align: center;
}
.connectp3 {
text-align: right;
}
.connectp4 {
text-align: left;
}
.connectp5 {
text-align: center;
}
.connectp6 {
text-align: right;
}
<div class="navbar">
<div>
<div class="connectp1">
First Peoples
</div>
<div class="connectp2">
Natives And Newcomers
</div>
<div class="connectp3">
Provincial Centre
</div>
</div>
<div>
<div class="connectp4">
Industrializing City
</div>
<div class="connectp5">
Wars And Crises
</div>
<div class="connectp6">
The Modern Metropolis
</div>
</div>
</div>
You don't need extra layers to spread out. Inline elements like <a> are better for this kind of menus, so just keep it simple. The code bellow will split in two lines only if required.
.navbar {
padding: 15px;
background-color: #F64C72;
text-align: center;
font-size: 17px;
}
.menu {
display: inline-block;
margin: 10px auto;
white-space: nowrap;
}
nav a {
display: inline-block;
padding: 5px;
white-space: normal;
vertical-align: top;
}
<nav class="navbar">
<div class="menu">
First Peoples
Natives And Newcomers
Provincial Centre
</div>
<div class="menu">
Industrializing City
Wars And Crises
The Modern Metropolis
</div>
</nav>
However I recommend you considering some improvements in your design to help the menu look more tidy.
This looks like a perfect opportunity to use flexbox setting justify-content. We can just work with a div to hold all the nav and then a div for each row then the links directly.
flexbox handles the distribution of the a elements in our instance, while setting justify-content: space-between determines how the a elements are spaced.
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.navbar > div {
display:flex;
justify-content: space-between;
}
<div class="navbar">
<div>
First Peoples
Natives And Newcomers
Provincial Centre
</div>
<div>
Industrializing City
Wars And Crises
The Modern Metropolis
</div>
</div>
With IE 10 you will need to prefix with -ms- and it won't work at all with older versions of IE if you need to support IE 9 and earlier. See: https://css-tricks.com/almanac/properties/j/justify-content/
You would be much better off using unordered lists (ul) with list items (<li>), and then displaying the lists as table rows/table cells as in the snippet below, and vertically aligning to top. Btw, your current css includes duplication, there is no need to created 2 different classes to text-align to the right (e.g)
Feel free to adjust the snippet ( I reduced the huge font size! - so that the adjustments could be seen in the snippet)
* {
margin: 0px;
padding: 0px;
}
nav {
margin: auto;
top: 20px;
padding: 20px;
font-size: 13pt;
background-color: #F64C72;
text-align: center;
}
nav ul {
margin: 0px;
list-style-type: none;
vertical-align: top;
display: table-row;
}
ul li {
display:table-cell;
}
ul li a {
text-decoration: none;
}
<nav>
<ul>
<li>First Peoples </li>
<li>Natives And Newcomers</li>
<li>
Provincial Centre
</li>
</ul>
<ul>
<li class="">Industrializing City
</li>
<li class="">
Wars And Crises
</li>
<li class="">
The Modern Metropolis
</li>
</ul>
</nav>
Use HTML5 semantic elements when possible. In your case, the nav element is the proper tool for the job. MDN shows:
nav {
border-bottom: 1px solid black;
}
.crumbs ol {
list-style-type: none;
padding-left: 0;
}
.crumb {
display: inline-block;
}
<nav class="crumbs">
<ol>
<li class="crumb">Acme</li>
<li class="crumb">Foo</li>
<li class="crumb">Bar</li>
</ol>
</nav>
<h1>Jump Bike 3000</h1>
<p>This BMX bike is a solid step into the pro world. It looks as legit as it rides and is built to polish your skills.</p>
<div> elements are block-level elements, so take up 100% of the width of a 'row' by default. While you can correct this by simply changing their display to inline-block, I would recommend replacing them with <span> tags instead (which are inline-block by default):
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.connectp1 {
text-align: left;
}
.connectp2 {
text-align: center;
}
.connectp3 {
text-align: right;
}
.connectp4 {
text-align: left;
}
.connectp5 {
text-align: center;
}
.connectp6 {
text-align: right;
}
<div class="navbar">
<div>
<span class="connectp1">
First Peoples
</span>
<span class="connectp2">
Natives And Newcomers
</span>
<span class="connectp3">
Provincial Centre
</span>
</div>
<div>
<span class="connectp4">
Industrializing City
</span>
<span class="connectp5">
Wars And Crises
</span>
<span class="connectp6">
The Modern Metropolis
</span>
</div>
</div>
Note that you're also likely looking for float: left and float: right
rather than text-align: left and text-align: right, in order to separate out your elements. There's no float: center, though this isn't needed. You can also combine your selectors in this regard to save space, as can be seen in the following:
.navbar {
padding: 15px;
font-size: 28pt;
background-color: #F64C72;
position: relative;
top: 20px;
text-align: center;
margin: auto;
font-size: 17pt;
}
.connectp1, .connectp4 {
float: left;
}
.connectp3, .connectp6 {
float: right;
}
<div class="navbar">
<div>
<span class="connectp1">
First Peoples
</span>
<span class="connectp2">
Natives And Newcomers
</span>
<span class="connectp3">
Provincial Centre
</span>
</div>
<div>
<span class="connectp4">
Industrializing City
</span>
<span class="connectp5">
Wars And Crises
</span>
<span class="connectp6">
The Modern Metropolis
</span>
</div>
</div>
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
Ok so obviously I'm doing something wrong. Basically I'm trying to create a vertical navigation bar at the top of my page, to the right of a picture.
It should look like this:
Home Resume Contact Me
Somehow it keeps ending up like this:
Home Resume
Contact Me
Can you guys take a look and help me out? This is my first website. Thanks!
Here's my code:
HTML
html {
background-color: #ffffff;
}
img {
width: 20%;
float: left;
}
#menu {
width: 550px;
height: 35px;
font-size: 55px;
font-family: Courier, Serif;
text-align: center;
float: right;
margin-right: 300px;
margin-top: 50px;
}
#menu ul {
height: auto;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color: #000000;
}
#menu a:hover {
color: #224466;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Tyler Tilton</title>
</head>
<body>
<div id="menu">
<ul>
<li>Home
</li>
<li>Bio
</li>
<li>Contact Me
</li>
</ul>
</div>
<img src="C:\Users\Tyler\Desktop\Personal Website\Images\Profile Pic.png" />
</body>
</html>
Your code is a bit messy. The issue lies mostly in your #menu class. Your width is too small, you're text is too big, you have unnecessary margins and floats added. Remove all of that or adjust it and your list will align horizontally:
#menu {
/*width: 550px;*/ //too small for text size
height: 35px;
/*font-size: 55px;*/ //to big for width size
font-family: Courier, Serif;
text-align: center;
/*float: right;*/ //not necessary, at least in your demo, pushing text off screen
/*margin-right: 300px;*/ //not necessary, at least in your demo
}
FIDDLE
I think it is the font-size in #menu. Try reducing the font-size to 40px in #menu. It should bring them in one line.
Hope it helps!
So, I'm working on quickly building a website theme (Wordpress) with the aid of Twitter bootstrap, and I'm running into a problem.
I've got a header thrown together, and I've got this weird gap going on inside the "pull-right" section, not sure why:
I'm not sure what the deal is, I want them sitting on the line right at the same height of the text on the left.
Anyway, I've got the following relevant sections of code:
(HTML for header section):
<!-- Header -->
<div class="row header-container">
<div class="col-md-8 col-md-offset-2">
<div class="pull-left">
<h3>CharlesBaker.net</h3>
</div>
<div class="pull-right">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
(CSS for the same section):
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
}
.header-container h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', serif;
}
.header-container ul {
margin: 0;
padding: 0;
}
.header-container ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-container a {
padding: 3px;
color: black;
}
.header-container a:hover {
text-decoration: none;
background-color: #880000;
color: white;
}
Not sure what the issue is, unless it's related to the fact that I'm using a tag instead of just styling a <span> or something, but since I removed the padding/margin using CSS, I wouldn't think that would be the problem.
Any help would be great. The idea is that when I hover over the links on the right, that they're enclosed in a scarlet colored box that "extends" from the 5px bottom border.
Thanks in advance!
Are you looking for this?
You need to set your .header-container as display: inline-block to align all elements inside. Therefore, you need to float your pull div elements (float and left).
Just one last change, set the width size of your header: I set 100%, but you can set whatever you like :)
CSS:
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
width: 100%;
display: inline-block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
There is a particular line-height property for h3 tag with bootstrap.
h1, h2, h3 {
line-height: 40px;//line 760
}
So you will have to add style to negotiate this additional height.
Also another set for your ul as :
ul, ol {
margin: 0 0 10px 25px; //line 812
}
Solution :
Over-ride the ul margin as follows :
.pull-right ul{
margin: 0;
}
Over-ride the line-height for the h3 as follows :
.pull-left h3{
line-height:20px;
}
First one is pretty straight forward and gives you correct alignment straighaway. Second solution will need you to work some more with tweaking the negative-margins for .pull-right.
Debugging URL : http://jsbin.com/oToRixUp/1/edit?html,css,output
Hope this helps.
Hopefully this is something simple I am missing, I have an OL encompassing a set of LI links.
In Chrome and firefox this works perfectly, in IE8 they appear as a numbered list moving vertically down the page.
HTML:
<div class="header">
<img src="images/header.png" alt="Logo">
<ol>
<li>Home</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
</ol>
</div>
CSS;
.header {
width:888px;
height:119px;
margin: 0 auto;
margin-top: 20px;
padding:0;
text-align: left;
}
.header ol {
margin-top: -32px;
width: 888px;
padding:0;
margin-left: 10px;
}
.header li {
font-weight: bold;
display: inline;
padding-right: 20px;
padding-left: 20px;
border-right: solid 1px;
border-right-color: #FFFFFF;
}
Is there something basic I am missing here? Doing some searching doesn't seem to provide me with a solution. There are some suggestions of using display: inline; on the LI but this doesn't appear to make any difference.
The behaviour I am looking for is horizontal ordering of the links as displayed in Chrome and Firefox.
IE8 and lower versions of IE have trouble implementing display:inline on many block-level elements.
You could try to float the lis...
so remove the display:inline and replace with something like float:left