A bit new to styling sheets. I have a div for my site's content. I've aligned my h1 to be in the middle of that div by using the margin-right property. When I use the margin-right property on the p tag within the same div, however, it also affects the h1 and moves that further left. I figure I shouldn't be using margin-right, but what is the best way to do this?
Please let me know if my question is unclear.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>
Putnam County Family Support Services - Resources
</title>
</head>
<body>
<div id="container">
<div id ="top">
<center><img src="images/logo1.jpg" alt="logo" /></center>
</div>
<div id="navigation">
<ul>
<li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';">
<img src="images/home_nav.jpg" name="MyImage4"></a> </li>
<li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';">
<img src="images/services_nav.jpg" name="MyImage3"></a> </li>
<li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';">
<img src="images/resources_nav.jpg" name="MyImage2"></a> </li>
<li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';">
<img src="images/staff_nav.jpg" name="MyImage1"></a> </li>
<li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';">
<img src="images/contact_nav.jpg" name="MyImage"></a> </li>
</ul>
</div>
<di id="content">
<h1>Contact</h1>
<p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>
<p>Phone number:</p>
</div>
<div id ="footer">
</div>
</div>
</body>
</html>
CSS:
body {
background: #f3f6f3;
text-align: center;
}
#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}
#top {
padding-bottom: 25px;
}
#navigation {
float:left;
position: absolute;
}
#navigation ul {
list-style: none;
padding-top: 20px;
}
#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}
#content {
float: right;
border: 1px;
}
#content h1 {
margin-right: 175px;
}
#content p {
margin-right: 170px;
}
#footer {
clear: both;
font-size: 12px;
}
Try using percentages rather than absolute values to place items, to center an inline block element (if the element width is set) you can use : margin-right : auto; margin-left: auto;
To center your H1, you should use the property :
#content h1 {
text-align: center;
}
#content p {
text-align: left;
}
this centers your text, have a look here
It would be quite handy if I could have a look at your HTML as well.
Related
I am trying to style a web page using css. For some reason my header does not spread over where the header should be, which means the width is not 100%. it looks like this now this is the screenshot
header {
width: 100%;
}
#logo_picture {
margin-left: 80px;
}
#logo img,
#logo nav {
float: left;
}
#logo nav {
line-height: 120px;
margin-left: 250px;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline;
}
nav a {
color: black;
font-size: 20px;
font-family: 'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration: none;
}
nav a,
nav a:visited {
color: black;
}
nav a.selected,
nav a:hover {
color: grey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Larry Rosenburg Official Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src="lincoln.jpg" width="30%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home
</li>
<li> Lincoln
</li>
<li> About
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<h1> Larry Rosenburg </h1>
<p>
I believe that as important as skills and experiences are in our professional careers, it is the relationships that we create which allow us to truly succeed. My company provides title insurance, settlement, escrow and exchange services on a level that
is second to none, but my focus is helping your succeed with your commercial and residential transactions. As a person who can deliver a full range of solutions, I am able to leverage the power of my company with my drive to be concerned with your
company.
</p>
<div id="profile-pic">
<img src="picture.jpg" width="35%" alt="">
</div>
</body>
<footer>
</footer>
</html>
After every float you must create a clear class. Try adding in the CSS:
.clearfix {
clear: both;
}
in the html after the </header> add <div class="clearfix">
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!
I am new to HTML/CSS and need some help with text aligning. THe text are link and I'd like to align two links to the left of the page and one link to the right. Can anyone help? Here is my code
BACK and HOME buttons are meant to be aligned left, and MISC is meant to be aligned right
THanks Heaps it's driving me creasy!
HTML **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/portfolio.css">
</head>
<body>
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
</body>
</html>
CSS **
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
Add the following css to your links. Demo
#left{
float:left;
}
#center{
position: absolute;
left: 48%;
}
#right{
float:right;
}
use style="float:left;" for BACK and HOME buttons and style="float:right;" for MISC.
Put style="display:inline;" for ul tag.
Here you go.
WORKING DEMO
The Code:
MISC
I hope this is what you are looking for.
<div class="menu">
<ul>
<a class="pull-left" href="index.html">BACK</a>
<a class="pull-left" href="index.html">HOME</a>
<a class="pull-right" href="index.html">MISC</a>
</ul>
</div>
As you can see I've added classes to your links. Now lets add some class declarations to your stylesheet file:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
HTML
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
css
.right{
float:right;
}
DEMO HERE
You need better structure in your HTML ... Namely, in the ul element ... You're adding list items that are not labeled as list items. The alignment issue can be fixed using the following code.
For the sake of time, I've removed the reference to an external stylesheet, and added the styles in the head tag. You can remove the styles from the head tag and readd them to the stylesheet to maintain HTML best practices.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<style type="text/css">
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
.menu ul {
}
.menu ul li { display: inline-block; }
.menu ul li.misc {
float: right;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>BACK</li>
<li>HOME</li>
<li class='misc'>MISC</li>
</ul>
</div>
</body>
Pure CSS solution can be :
a:nth-child(3n) {
float:right;
}
or
a:nth-last-child(1) {
float:right;
}
Plus, write valid HTML. If you have only anchor elements for list then you have to use nav tag and there is no need of using extra div.
<body>
<nav class="menu">
BACK
HOME
MISC
</nav>
</body>
Remove margin-left from .menu.
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.
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}