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>
Related
I want to add some space between the text and the underline. But when I try to add some border on the bottom it occupies the 100% width of my resolution.
So it looks like this:
Here's my css:
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
My page is multilingual so the border bottom should be the same width of the text.
Can you help me with this?
text-underline-offset
<h1 style="text-decoration:underline; text-underline-offset:.25em;">text</h1>
You could add display: inline-block; to the <h1> or you add a inline element (like a span) inside the h1 ...
h1 {
text-align: center;
}
h1 span {
font-size: 24pt;
color: #279839;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
<h1><span>hello</span></h1>
<h1><span>hello world</span></h1>
<h1><span>hello world and univers</span></h1>
Put a span tag inside the h1
<h1 class="the-h1"><span class="the-span">商品</span></h1>
the css
.the-h1 {
text-align: center;
}
.the-span {
display: inline-block;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
If you don't want to wrap that by some other tag then use transform to align h1 tag at center of page and change it's display to inline-block this applies to only one h1 tag,
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
display: inline-block; /*Add this*/
left: 50%; /*Add this*/
transform: translate(-50%, 0); /*Add this*/
}
<h1>Hello</h1>
Step1: You need to make H1 display:inline-block; so that the border remain according to the width of text instead of window width.
Step2: In Order to provide space you can use css pseudo element
h1 {
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
display:inline-block;
position:relative;
margin: 0 0 10px;
}
h1:after {
content:'';
position: absolute;
left:0;
right:0;
bottom:0;
height:1px;
background: #279839;
display: block;
}
Your h1 tag is a block element by default, so it makes sense that the border-bottom goes through the whole width. You would need to change the display property of your headline to achieve the wished result.
h1 {
display: inline-block; /* most solid one; best choice */
display: initial; /* most safe one can easily be overwritten */
display: inline-flex; /* could be useful if people using flex-grids */
}
h1 {
display:Block;
width: 25%
position:relative;
margin-right:auto;
margin-left:auto;
font-size: 24pt;
color: #279839;
position: relative;
text-decoration: none;
padding-bottom: 5px;
border-bottom: 1px solid #279839;
}
So excuse my being very new and inexperienced in this, the answer is probably obvious.
For some reason the text in the "main-content" div in my layout (which will be the body) looks like its adding padding or something on the left, but I don't have any in the css. The container is the correct width and placement on the page, but all of the text in it starts 200px or so in, like every line has an indent.
I'm not sure why? Anyone have any idea? It's #main-content that is acting up, but I've included all of the code (minus the writing inside each section) in case it could be affecting it. I know, I know, I'm clueless. I'd just like it to be 1200px wide like the bg in #masthead, text filling the whole area.
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: #333333;
padding: 0px;
margin: 0px;}
#container {
background-color: #333333;
width: 1200px;
margin: 10px auto 10px auto;}
#masthead {
background-position: center;
height: 500px;
width: 1200px;
background-image: url('banner.jpg');
background-color: #ffffff;
background-repeat: no-repeat;}
#left-nav {
text-align: left;
position: relative;
top: -400px;
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: 2px solid #000000;
color: #FFFFFF;
font-family: corbel, helvetica, arial;
font-size: 14px;
font-weight: normal;
height: auto;
line-height: 11px;
text-shadow: 0 0 3px #8D6D6F;
background-color: #333333;
left: 20px;
opacity: 0.8;
filter: Alpha(opacity=80); /* IE8 and earlier */;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;}
#main-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
width:1200px;}
#right-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
width:200px;}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0 px;
text-align: center;}
#top-nav ul {
text-align: center;
list-style-type: none;
margin: 0px;
padding: 0px;}
#top-nav ul li {
opacity: 1.0;
display: inline;}
#top-nav ul li a {
color: #000000;
font-family: Impact, Charcoal, sans-serif;
background-color: #CCCCCC;
padding: .2em 1em .2em 1em;
opacity: 1;
filter: Alpha(opacity=100); /* IE8 and earlier */;}
#top-nav ul li a:hover {
border-color: 99BF99;
color: #000000;
background-color: CCFFCC;
border-width: 1px;
border-style: solid;}
h1 {
font: 30px Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;}
And here's the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="mycss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="masthead"></div>
<div id="top-nav"></div>
<div id="left-nav"></div>
</div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Update: I added clear:both to main-content, which fixes the text positioning issue. However, now the whole main-content div shifts down a few inches. Any ideas on that?
Here's a jsFiddle:
http://jsfiddle.net/r7yCa/
I've replicated your issue and believe you need to add
clear: both;
to your #main-content within the css:
#main-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
clear: both;
width:1200px;}
I'm using a navigation bar for a project I'm working on. I've always had trouble with horizontal navigation bars, and I've looked everywhere for the right solution, without success. The navigation bar was shifted to the left, so I put in some padding in my css, and now it's centered, however the text is not centered in it, and the hover effect for the first link doesn't cover the whole 'box' the text is in.
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFFFFF;
text-align: center;
padding: 30px;
margin-bottom: 0px;
margin-top: 0px;
background-color: #63B8FF;
}
.headers2{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin-left: auto;
margin-right: auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav{
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0px 0px 0px 0px;
}
.nav li{
display: inline-block;
}
.nav a{
display: inline-block;
padding: 10px 110px 10px 0.80px;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: overline;
}
a:active{
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
HTML5 (Index Page)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<h1 class="headers">Welcome to KUBE Toy Library!</h1>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<h2 class="headers2">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
Note that I'm quite new compared to the others here on this forum, so please take it easy on me! :) Also this is a fictional company, etc. for an assignment I was given. Thanks!
Hi your page in my browser was displayed like below
I changed your css to make it browser resolution independent. As a UI developer I felt that overline was not looking good so I removed that. Use my code
/* Body CSS */
.body {
background-color: #61B329;
color: #FFFFFF;
}
/* Header CSS */
.headers {
color: #FFFFFF;
text-align: center;
padding: 30px;
margin: 0;
background-color: #63B8FF;
}
.headers2 {
color: #FFD89A;
text-align: center;
padding: 10px;
}
.container {
margin: 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link,
a:visited,
a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
background-color: #028482;
}
a:active {
background-color: #FF9C00;
color: #FFFFFF;
text-decoration: underline;
}
.Links A:hover {
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
Demo:
http://jsfiddle.net/NphBK/
This is a common problem. But to fix this you need to make the parent text-align: center and give the children display: inline-block;
If you want to have it completely equalizing you'll need to switch to display: table and display: table-cell.
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.
I am new to CSS, I found an layout online, but I have a little problem customizing it.
When the content of mainContent div is "higher" then the left menu, everything is working ok - but when the mainContent is smaller, it looks like this:
The div order is visible through Firefox WebDevelopper addon. The .css file is as follows:
body {
padding: 0px;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
#container {
padding-right: 20px;
padding-left: 20px;
}
#header {
}
#mainMenu {
border: 1px solid #808080;
font-size: 0.8em;
}
#pageBody {
position: relative;
}
#sidebar {
width: 250px;
padding: 5px 10px 10px 10px;
float: left;
border: 1px solid #808080;
font-size: 0.8em;
margin-top: 5px;
margin-right: 10px;
min-height: 500px;
}
.mainContent {
text-align: justify;
min-width: 400px;
min-height: 500px;
margin-left: 285px;
}
#footer {
font-size: 0.8em;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #CCCCCC;
text-align: center;
color: #CCCCCC;
background-color: #333333;
padding-top: 10px;
padding-bottom: 10px;
margin: 0;
/*clear: both;*/
}
#footer p {
margin-top: 0px;
margin-bottom: 5px;
}
#footer a {
color: #CC3300;
text-decoration: none;
}
#footer a:hover {
color: #FF9900;
}
Can I please ask for some guidance in repairing this layout? I would like to acheive something similar to:
The exact position is not important, I just want the footer to be placed below the pageBody div.
I would be grateful for any help.
I don't know what your html looks like, but it looks like you could try inserting a clearing div just before the footer... btw, why is the 'clear: both;' commented out in the footer css rule?
code to insert just before the footer div:
<div style="clear: both;"/>
Not positive whether it will help, but if I understand your problem correcty, this is my best guess!
Try changing pageBody to:
#pageBody {
float: left;
clear: both;
}