Beginner page building question:
I've got a simple /div container defined via a CSS style called "content_bottom" like such:
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
When I start typing text in it I noticed that the text starts touching the very left edge of the box. I tried to add padding and even borders (via the CSS style) to the container, but there was no effect. However, adding top/bottom borders DID have an effect. Why is this? What should I do so that the text would not start touching the very left (and top) of the box? Thanks.
P.S. This is the full HTML for the page:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>site title goes here</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">this <br>
</div>
<div class="content_top">is site title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li>link 1</li>
<li>link 2</li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">this is the container's content<br>
</div>
</div>
</body>
</html>
Here is the full CSS:
body {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
font-family: Arial,Helvetica,sans-serif;
color: #cccccc;
font-size: 16pt;
}
.wrapper {
margin: auto;
min-width: 900pt;
font-family: Arial,Helvetica,sans-serif;
width: 900pt;
color: #cccccc;
}
.column_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid black;
min-width: 150pt;
color: #333333;
width: 150pt;
max-width: 150pt;
background-color: #f4f4f4;
float: left;
min-height: 45pt;
max-height: 45pt;
height: 45pt;
padding-top: 105pt;
font-size: 40pt;
text-align: right;
font-weight: bold;
}
.content_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid #f4f4f4;
height: 45pt;
min-height: 45pt;
max-height: 45pt;
padding-top: 105pt;
text-align: left;
font-size: 40pt;
font-weight: bold;
}
.column_bottom {
border-width: 5pt 0 0;
border-top: 5pt solid black;
color: #333333;
background-color: #f4f4f4;
width: 145pt;
min-width: 145pt;
max-width: 145pt;
text-align: right;
padding-top: 50pt;
padding-right: 5pt;
float: left;
}
.content_bottom {
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
font-weight: inherit;
color: #333333;
list-style-type: none;
text-decoration: none;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
Your html and css work so there must be a typo somewhere in your css file that causes it to be not used.
Everything is working as it should. Your problem is that the padding of the box is behind the left-floated nav-bar, your box is really 100% wide although part is hidden behind the bottom nav.
You can solve your problem by floating the .content_bottom container left as well.
You will need to make some additional changes for the borders, but you can do that in the top section so that you only have one horizontal border instead of 2 touching borders with the same colour.
See here for a working example.
padding: 5px;
or padding-top:5px; for just the top
10px Padding on all sides
padding:10px;
0px padding on top/bottom and 10px padding on right/left
padding:0px 10px;
for a combination of sides, you can do this
padding-right:10px;
padding-left:10px;
padding-top:10px;
padding-bottom:10px
You can also use the below shortcut to make top/bottom have different values while keeping right/left the same
padding: 20px 10px 30px;
Now you know everything their is to know about padding.
It sounds like you're experiencing collapsing borders. Try border-collapse:separate.
a mixture of border-collapse:separate and padding: 10px; should do the trick for ya. Post some code for a more detailed explanation.
Related
I am trying to make a vertical navbar. I have used an unordered list, with a border-left propoerty, so that on hover, I can change the opacity/color of the border. The problem right now, is that this border appears as a continuous line across the list items. I want to include some space between the list items so that the borders are separated and one can make out which border belongs to which list item.
HTML:
<div class="leftNavbar">
<span class="navLine"></span>
<ul>
<li>Introduction</li>
<li>Whats new?</li>
<li>Gallery</li>
</ul>
</div>
CSS:
.leftNavbar{
position: absolute;
top: 100px;
z-index: 500;
left: 50px;
vertical-align: middle;
}
.leftNavbar ul{
list-style: none;
}
.leftNavbar ul li{
font-family: 'Sintony', sans-serif;
height: 100px;
text-transform: uppercase;
color: white;
font-weight: bold;
text-shadow: 0px 0px 2px #000;
vertical-align: middle;
line-height:100px;
border-left:4px solid blue;
}
JSFIDDLE: http://jsfiddle.net/ATQ4Q/
You could add a margin to the list items. Something like margin-bottom:5px;:
.leftNavbar ul li {
font-family:'Sintony', sans-serif;
height: 100px;
text-transform: uppercase;
color: white;
font-weight: bold;
text-shadow: 0px 0px 2px #000;
vertical-align: middle;
line-height:100px;
border-left:4px solid blue;
margin-bottom:5px;
}
jsFiddle example
I'm looking at creating a list of jobs for a careers page side bar.
Each job should consist of the job title and an apply button.
Each listing is encased in a rounded grey box with some margin for spacing.
I've attempted to create it in this pen below, hopefully someone can take a look at my code and advise me on how to get the button floated to the right and the title and button to be centered within the box.
http://codepen.io/adamlcasey/pen/jIsFB
I'm fairly new to css and html, so I'm not at the point where I know what the best way to implement this is? In the pen above I've used two different options.
The first uses a div, h4 and elements
The second uses a div and unordered list.
NOTE:The final code needs to be placed inside of a template for my CMS (Hubspot). Hubspot have some rules about template design that I can't use. (So that their templates stay responsive) one of which is the element.
Here's my code:
<div class="box">
<h4>Business Development <br>
Manager</h4>
<a class="button" href="http://www.my-site.com/business-development- manager">Apply</a>
</div>
<div class="box">
<ul>
<li><h4>Customer Support <br>Agent</h4></li>
<li><a class="button" href="http://www.my-site.com/business-development-manager">Apply</a></li>
</ul>
</div>
CSS Code:
p, h4, a, li {
font-family: 'Open Sans',sans-serif!important;
}
.box {
background: #f2f2f2;
border-radius: 4px;
padding: 1em 1em;
margin: 2em 0!important;
text-align: left;
}
h4, li {
font-weight: 300;
color: #07355C;
display: inline-block;
vertical-align: middle;
}
.button {
font-size: 1em!important;
padding: 5px 20px!important;
text-decoration: none;
-webkit-box-shadow: #e28b00 0 1px 0;
-moz-box-shadow: #e28b00 0 1px 0;
box-shadow: #e28b00 0 1px 0;
background-color: #f6ae2b;
background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f6ae2b),color- stop(70%,#f39d13));
background-image: -webkit-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: -moz-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: -o-linear-gradient(#f6ae2b,#f39d13 70%);
background-image: linear-grad;
padding-left: 0;
padding-right: 0;
text-align: center;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 10px 20px;
font-size: 18px;
border: none;
color: white;
display: inline-block;
vertical-align: middle;
float: right;
margin-right:1em;
}
.box ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Here is another Idea. I do not provive code in my answer because it is too much. Mainly i just added some grid like wrappers
http://codepen.io/Nico_O/pen/ybjLE
I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: http://i.stack.imgur.com/8xXfV.png
I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.
Here is the CSS:
*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: inherit;
}
.nav{
width: auto;
padding: 2em 0 0 0.5em;
background-color:rgba(0,0,0,1);
}
.nav ul{
width: 24.5em;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav li{
font-weight: 100;
font-size: 3em;
color: #fff;
}
.nav b{
font-weight: 900;
}
.nav li:hover{
text-decoration: #000;
}
#nav_right{
font-size: 0.8em;
font-weight: 600;
text-align: right;
}
.triangle{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img{
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper{
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
<li>company<b>name</b></li>
</ul>
</div>
</nav>
</body>
</html>
You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.
This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.
CSS:
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
nav {
background: #000;
}
.nav {
width: 24.5em;
padding: 2em 0 0 0.5em;
background-color: rgba(0,0,0,1);
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav ul {
text-align: right;
list-style-type: none;
}
.nav a {
text-decoration: none;
color: inherit;
padding: 0;
}
.nav li {
color: #fff;
display: inline;
padding: 0 6px;
border-right: 1px solid #fff;
font-size: 0.8em;
font-weight: 600;
float: right;
}
.nav li:first-child {
padding-right: 0;
border: none;
}
.nav li:last-child {
padding-left: 0;
}
.nav #companyName {
font-size: 3em;
color: #fff;
}
.nav #companyName b {
font-weight: 900;
}
.nav li:hover {
text-decoration: underline;
}
.triangle {
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img {
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper {
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
<div id="companyName">
company<b>name</b>
</div>
</div>
</nav>
</body>
</html>
Does adding
nav li {
text-align: right;
}
Do what you are looking for?
Example
Edit
To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.
Your other menu will then align to the right of the element as you wish.
So basically:
nav ul {
display: inline-block;
}
nav li {
text-align: right;
}
Example
P.S.
By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.
put the a tag with company name on the outside of the div called nav.
HTML
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<a href="#" class="companyname"><li>company<b>name</b>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
nav {
margin: 0;
padding: 0;
overflow: hidden
}
.companyname {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.nav ul{
display: inline-block;
float: right
margin: 0;
padding: 0;
}
I want to achieve something like this by CSS:
I'm a novice with CSS.
My questions:
How can I add a green line to the bottom as below? Will I have to add a small div under the div containing the text and set its background to green? I do know there are many ways to do it but I just want to learn the best practice.
Is this font Arial?
You can either add the div at the bottom as you described, or you can use a border. In either case you'll have some adjustment of heights to do. No big deal.
http://jsfiddle.net/PQgH3/2
div {
width: 50%;
padding-top: 10px;
font-size: 24px;
text-align: center;
font-family: arial, sans-serif;
}
.followers {
background-color: #777;
float: right;
height: 75px;
color: #ccc;
}
.following {
background-color: #555;
float:left;
height: 70px;
color: #ccc;
border-bottom: 5px solid lime;
}
<div class="followers">Followers</div>
<div class="following">Following</div>
I don't have the eye to say whether that font is Arial. I can say that it's a similar sans-serif font if it isn't.
Use CSS sprite sheets. They will help you achieve this effect using images. Generally when you do the markup for the menu use UL and LI tags, then style appropriately for the functionality. Then set it to change the background sprite when the mouse is over then li using the :hover selector. I recommend creating the sprite sheet as an exact image of what you want all the default menu buttons to look like (spanning horizontally). Then do another version below it on the same image that has the look of the hover version. You can repeat this process for any other versions you need like active, disabled, etc. Just make sure you offset the Y value of the background position for each version. Such as this:
li { background-position: 0px 0px; }
li:hover { background-position: 0px -100px; }
li:active { background-position: 0px -200px; }
Check out this article for a bit more information regarding the markup as well as the design aspect:
http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Edit:
If you don't want to do sprite sheets I have a jsFiddle of pure css3 way of doing it here:
http://jsfiddle.net/uBhKF/
HTML Markup:
<ul>
<li>FOLLOWING</li>
<li>FOLLOWERS</li>
</ul>
CSS3:
ul {
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
}
li {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
float: left;
width: 50%;
height: 50px;
display: block;
margin: 0px;
background-color: #444;
border-left: 1px dotted #DDD;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 24px;
text-align: center;
line-height: 50px;
color: #888;
}
li:first-of-type {
border-left: none;
}
li:hover {
color: #55E000;
border-bottom: 5px solid #55E000;
background-color: #333;
}
But I couldn't get the font-family right. :(
use this
.header
{
margin-left: auto;
margin-right: auto;
height: 102px;
background-color: #F0F0F0;
width:500px
}
.header .header-first
{
float: left;
width: 216px;
border-bottom: 3px solid #3CA2DF;
}
.header .header-last
{
width: 216px;
float:right;
}
The Font is not Arial for sure, i believe its calibri, and try this code for you solution
<html>
<body>
<div style="border-bottom: 3px solid #00ff00;
background:#000;
height: 50px;
width:400px;
color:#00ff00;
text-align:center;">
FOLLOWERS
</div>
</body>
</html>
Also try this
<html>
<head>
<style>
td
{
width:400px;
background:#000;
color:#fff;
text-align:center;
height: 100px;
font-size:20px;
}
td:hover
{
text-decoration: underline;
border-bottom: 3px solid #00ff00;
color:#00ff00;
}
</style>
</head>
<body>
<table style="margin:0 auto;">
<tr>
<td>Following</td>
<td>Followers</td>
</tr>
</table>
</body>
</html>
Please check out this link quickly:
http://jsfiddle.net/8grSk/
As you can see the text as the bottom is aligned to the left side of the page
I want to add text to the right side of the page inline with the text already present.
How is this done?
I am finding it difficult to align all these divs!
Thanks guys!
James
You can easily rewrite everything to accommodate two regions (left and right) inside of your footer id like so:
HTML
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="footer" style="position:absolute;bottom:0;">
<div class="left">
About Us
Accessibility
Recruiters
Contact Us
</div>
<div class="right">
About Us
Accessibility
Recruiters
Contact Us
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
}
#footer {
background: #FFFFFF;
border: 1px solid;
color: #e6e6e6;
height: 30px;
width: 960px;
position:absolute;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
}
#footer a {
font: 13px helvetica;
color: #0040FF;
padding: 8px 12px 3px 3px;
}
#footer a:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
.right {
float:right;
}
.left {
float:left;
}
demo
http://jsfiddle.net/8grSk/8/
-- edit
changed the fiddle to accommodate for your hover state better.
You should refactor the HTML. Instead if using divs, use an unordered list <ul>, then you can list your four links and float the <ul> left within the footer.
Then use another <ul> but this time float it right and voila, lined up links as you want them (I hope.)
<div class="footer1">
<ul id="footer-left">
<li id="footer1text">About Us</li>
<li id="footer1text">Accessibility</li>
<li id="footer1text">Recruiters</li>
<li id="footer1text">Contact Us</li>
</ul>
<ul id="footer-right">
<li id="footer1text">New Text</li>
</ul>
</div>
CSS
.footer {
background: #FFFFFF;
border: 1px solid;
color: #e6e6e6;
height: 30px;
width: 100%;
position:absolute;
margin: 0px 0px 0px 0px;
padding:0;
display: table;
}
.footer1 {
background: #FFFFFF;
height: 30px;
width: 350px;
position:absolute;
margin: 0px 0px 0px 0px;
padding:0;
}
#footer1text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
}
#footer1text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
#footer-left li
{
float: left;
}
#footer-right li
{
float: right;
}
Working demo here :)