I want to create a box shape and I am having trouble.
I want the box to have a background color, and then different color inside the box.
The box will then have a list of items using ul and li, and each list item will have a background of white, and the list item's background color is too stretch the entire distance of the inner box.
Also, the list items should have a 1 px spacing between each one, so that the background color of the inside box color is visible.
Here is a rough sketch of what I am trying to do:
You can do this pretty cleanly with this css:
.box {
width: 100px;
border: solid #884400;
border-width: 8px 3px 8px 3px;
background-color: #ccaa77;
}
.box ul {
margin: 0px;
padding: 0px;
padding-top: 50px; /* presuming the non-list header space at the top of
your box is desirable */
}
.box ul li {
margin: 0px 2px 2px 2px; /* reduce to 1px if you find the separation
sufficiently visible */
background-color: #ffffff;
list-style-type: none;
padding-left: 2px;
}
and this html:
<div class="box">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
</ul>
</div>
DEMO
So if you have source:
<div class="panel">
<div>Some other stuff</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
You can use CSS:
div.panel { background-color: #A74; border: solid 0.5em #520; width: 10em;
border-width: 0.75em 0.25em 0.75em 0.25em; }
div.panel div { padding: 2px; height: 4em; }
div.panel ul li { display: block; background-color: white;
margin: 2px; padding: 1px 4px 1px 4px; }
div.panel ul { margin: 0; padding-left: 0; }
To get the CSS to work properly (particularly on Internet Explorer), make sure you have an appropriate DOCTYPE definition in your document. See w3c recommended doctypes for a list.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Examples of margins, padding, and borders</TITLE>
<STYLE type="text/css">
UL {
background: yellow;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* No borders set */
}
LI {
color: white; /* text color is white */
background: blue; /* Content, padding will be blue */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Note 0px padding right */
list-style: none /* no glyphs before a list item */
/* No borders set */
}
LI.withborder {
border-style: dashed;
border-width: medium; /* sets border width on all sides */
border-color: lime;
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>First element of list
<LI class="withborder">Second element of list is
a bit longer to illustrate wrapping.
</UL>
</BODY>
</HTML>
Maybe those two will help:
Listutorial
CssPlay Menus
Html:
<div id="content">
<a><div class="title">Title</div>Text</a>
<ul>
<li>Text</li>
<li>More Text...</li>
</ul>
</div>
CSS:
#content{
text-align:left;
width:200px;
background:#e0c784;
border-top:solid 10px #7f4200;
border-bottom:solid 10px #7f4200;
border-right:solid 5px #7f4200;
border-left:solid 5px #7f4200;
}
#content a{
margin-left:20px;
}
#content ul{
list-style-type:none;
margin-bottom:0px;
}
#content ul li{
padding-left:20px;
margin:0px 0px 1px -40px;
text-align:left;
width:180px;
list-style-type:none;
background-color:white;
}
#content .title{
text-align:center;
font-weight:bolder;
text-align:center;
font-size:20px;
border-bottom:solid 2px #ffcc99;
background:#996633;
color:#ffffff;
margin-bottom:20px;
}
Hope this helps.... I also added a title to it, if you dont like it just delete it...
Related
I got issue with my border right in my <li>
as you see the yellow right border is a bit trimmed at the bottom,I tried find a solution for this but I could not, this happen when the user zoom in the browser.
any ideas what can be?
this is my jsfiddle:
https://jsfiddle.net/veft8jw9/
You could use box shadows instead of borders like so:
.sidebar-nav li {
box-shadow: inset 0 -1px 0 0 blue;
padding: 15px;
}
.sidebar-nav li:hover {
box-shadow: inset 0 -1px 0 0 blue, inset -3px 0 0 0 red;
cursor: pointer;
}
it's the default rendering of border. when the borders are applied on same element, this is how they connect with adjacent border
You can use :after on li tags and display it on hover as shown in fiddle below.
div {
width: 200px;
height: 200px;
border: 50px solid;
border-color: red blue green yellow;
}
/* your solution */
.sidebar-nav li {
position: relative;
border-bottom: 1px solid blue;
padding: 15px;
}
.sidebar-nav li:hover:after {
content: '';
display: block;
border-right: 5px solid yellow;
position: absolute;
width: 5px;
height: 100%;
right: 0;
top: 0;
}
<div></div>
<h1>your solution</h1>
<ul class="sidebar-nav">
<li>link 1</li>
<li class="active" au-target-id="34">
link 2</li>
<li class="" au-target-id="34">
</ul>
CSS borders all have chamfers at their ends to fit with the connecting border.
I would suggest applying a wrapper around the bordered div with a yellow background. Then apply right padding to the bordered div to get the yellow area.
you can provide border with pseudo css, please use below css for same html.
.sidebar-nav li {
border-bottom: 1px solid blue;
padding: 15px;
position:relative;
}
.sidebar-nav li:hover {
cursor: pointer;
}
.sidebar-nav li:hover:after {
content:"";
position:absolute;
width:5px;
top:0px;
bottom:0px;
right:0px;
background:#f00;
}
I have two questions
How would i go about centering the buttons inside the grid?
how do i get The colors to overflow to fill the extent of the page
<title>Virtual Harrogate!</title>
<header class="container_12 a-new-homepage">
<nav>
<div>
<ul>
<div class="grid_12">
<li class="grid_2 alpha">
Login
</li>
<li class="grid_2">
Right Now
</li>
<li class="grid_2">
Features
</li>
<li class="grid_2">
Event
</li>
<li class="grid_2">
About us
</li>
<li class="grid_2 omega">
Contact Us
</li>
</div>
</ul>
</div>
</nav>
</header>
and heres my layout.css, I havent altered the 960.css or text.css in any way
/* This is where the Format of every page and its tags are defined -- will be superceeding my styles.css */
.a-new-homepage{
background: #2a2a2a; /* charcoal grey */
overflow-x:visible;
overflow-y:visible;
bottom-border: 20px;
}
/* Header = define the h elements and the page header
-------------------------------------------------------------------------------------------------------------*/
h1 {
text-align: center;
text-transform: uppercase;
text-decoration: underline;
background-color: #78679A /* purple */
}
h2 {
}
h3 {
}
h4 {
}
h5 {
}
h6 {
}
nav ul { /* removes all formatting from the list elements which we will go on to define */
margin: 0;
padding: 0;
}
nav li{
list-style-type: none;
float: right;
font-size: 12px;
padding: 0 0 0 0;
text-transform: uppercase;
}
nav li .a-button { /* sets the width and height of the class a-button locally (first number = top n bottom, second = left n right) */
padding: 5px 15px;
}
/* buttons
--------------------------------------------------------------------------------------------------------------*/
.a-button {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFE8B), to(#99C757));
background:-moz-linear-gradient(100% 100% 90deg, #99C757, #CCFE8B);
background-color:#ededed;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #6f9a4d;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:10px 15px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
text-align: center;
text-transform: uppercase;
}
.a-button:hover {
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCFE8B), to(#99C757));
background:-moz-linear-gradient(100% 100% 90deg, #99C757, #CCFE8B);
background-color:#ededed;
}
.a-button:active {
position:relative;
top:1px;
/* Tabs = The the inpage tabs
--------------------------------------------------------------------------------------------------------------*/
li.a-tab {
list-style-type: none;
float: center;
display: inline-block;
border-top:solid;
border-right: solid;
border-left: solid;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-size: 16px;
margin:0 10px; 0 10px;
}
I don't know what you mean by getting the colors to overflow to fill the extent of the page? Which colors are you talking about? And where are they overflowing to on the page?
Anyway, to center your buttons you can take off the float:right property off your < li> tags. Then you can change those same < li>'s to be display:inline or display:inline-block. Then if you put a text-align:center on your tag it will put the buttons in the middle top of your page.
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}
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 :)
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.