I need to make something like this.
How do i manage the floats of the text, image and the number. Cant seem to get the text right.
i used span for all three and set background for the image of the span.
is there any better way to do this? and how do i get it as this.
Thank you!
http://jsfiddle.net/yapamjfy/
.counter-inner ul li{
float: left;
background: red;
}
.counter-image {
display: block;
width: 58px;
height: 70px;
border-right: 2px solid #fc6867;
background: red;
}
.counter-text{
float: left;
}
you can try this one:
.counter-inner {
width: 763px;
margin: 0 auto;
}
.counter-inner ul {
list-style: none;
}
.counter-inner ul li {
float: left;
background: red;
}
.counter-image {
display: block;
width: 58px;
height: 70px;
border-right: 2px solid #fc6867;
background: red;
}
.counter-image.first {
background: url('../images/counter-1.png') center center no-repeat;
float: left;
}
.counter-number {
font-family: 'Roboto', sans-serif;
float: left;
padding-top: 15px;
padding-left: 17px;
}
.counter-text {
float: left;
margin-top:40px;
margin-left:-15px;
}
ul li
{
padding-right:10px;
}
DEMO HERE
Related
I make a list that looks like the picture below. My problem is that not the whole link is clickable, only the text. I can't make a display: block on the anchor and give the link the full width because I already gave the anchor display: table-cell.
Here you can can see my problem and try out your code:
http://jsfiddle.net/kma_999/v0xkk587/
Thanks in advance!
HTML:
<div class="pane-content">
<ul>
<li>Kostenkontrolle (Mobile)</li>
<li>Sunrise Rechnung</li>
<li>Umzug</li>
<li>iPhone</li>
<li>Telefonieren im Ausland (Roaming)</li>
</ul>
</div>
CSS:
ul {
border: 1px solid lightgray;
padding-left: 0px;
}
ul li {
border-bottom: 1px solid lightgray;
list-style: none outside none;
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
ul li:last-child{
border-bottom: 0px solid black;
}
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
color: black;
width: 100%;
}
ul li a:hover{
color: black;
text-decoration: none;
}
ul li a:after {
content: "\25b6";
font-size: 10px;
position: absolute;
right: 33px;
}
ul {
display: table;
border: 1px solid lightgray;
padding-left: 0px;
width: 100%;
}
ul li {
display: table-row;
list-style: none outside none;
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
ul li:last-child a {
border-bottom-width: 0;
}
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
border-bottom: 1px solid lightgray;
color: black;
width: 100%;
}
You can see example
try this
ul li a {
display: inline-table;
height: 75px;
vertical-align:middle;
padding-left: 20px;
color: black;
width: 100%;
line-height:75px;
}
You can try below code:
ul li a {
display: block;
height: 50px;
padding: 25px 0px 0px 20px;
color: black;
width: 100%;
}
Try this:
ul li a {
color: black;
display: inline-block; // changed
height: 75px;
line-height: 75px; // added
padding-left: 20px;
vertical-align: middle;
width: 100%;
}
Try this
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
color: black;
width: 500px;
}
I replace the width of a tag 100% to that of parent (li). Then it seems to work.
You can try this
ul li a {
height: 75px;
line-height: 75px;
padding-left: 20px;
color: black;
width: 100%;
display:block;
}
Instead giving it to vertical align middle you can also use line-height for make it middle.
I am trying to center my navigation. The CSS text-align: center; is not working. It doesn't seem to affect the nav in anyway, shape, or form.
here's my html:
<nav id="user_nav"><ul>
<li>Friends</li>
<li>Followers</li>
<li>Photos</li>
<li>Interests</li>
</ul></nav>
here's my CSS:
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline;
text-align: center;
}
#user_nav ul li a {
padding: 15px 25px 0 0;
font-size: 18px;
float: left;
}
Please note: I am trying to make the links centered horizontally as well as vertically.
If there is a better way to do it than how I am doing it now, I am open to suggestions.
Please help me.
Fiddle
CSS
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
margin: 0 auto;
width: 100%;
text-align: center;
}
#user_nav ul li {
list-style: none;
display: inline-block;
}
#user_nav ul li a {
vertical-align: middle;
padding: 15px 25px 0 0;
font-size: 18px;
display: block;
}
HTML
<nav id="user_nav"><ul>
<li>Friends</li>
<li>Followers</li>
<li>Photos</li>
<li>Interests</li>
</ul></nav>
You may be interested in this: Live demo (click).
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
width: 100%;
display: table;
}
#user_nav ul li {
list-style: none;
display: table-cell;
font-size: 18px;
}
If you use inline-block you'll need to space the elements out manually by setting the width: Live demo (click).
#user_nav {
height: 60px;
border-bottom: 1px solid black;
width: 100%;
}
#user_nav ul {
width: 100%;
}
#user_nav ul li {
list-style: none;
display: inline-block;
width: 24%;
font-size: 18px;
}
Assume following html page:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="leftcolumn"/>
<div id="content/>
<div id="footer"/>
</div>
</body>
</html>
What I'm trying to achieve is that the leftcolumn div and the content div always have the same height. Sometimes the leftcolumn div is higher than the content div because there is little content and vice versa: when there is a lot of content, the content div is higher than the leftcolumn div.
The situation as it is now produces some lay-out shenanigans because the body background, leftcolumn background and content background are all in a different colour.
This is my CSS as-is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
height: auto;
}
#content {
float: left;
color: #006350;
background: #DEE3DC;
height: 100%;
display: inline;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#leftcolumn {
color: white;
background: #006350;
height: 100%;
width: 170px;
float: left;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
I've tried using a combination of CSS styles like height: 100%, height:inherit, height:auto,... on the different divs (wrapper, leftcolumn and content) but I can't seem to get the result I want. Bottom line: what CSS styles should I use if I want the leftcolumn and content div have the same height, regardless of which one is higher at that time. (And without using javascript please).
JsFiddle example where the leftcolumn is larger: http://jsfiddle.net/CQPnF/4/
Example where the content is larger: http://jsfiddle.net/BQkme/
You can get your desired results with the use of display:table-cell rather float in your left and right panels :-
I have removed float from your #content & #leftcolummn and gave them display:table-cell; and its working fine as per your requirement.
UPDATED CSS
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #FFFEE9;
}
#wrapper {
margin: 0 auto;
width: 900px;
overflow:hidden;
}
#content {
color: #006350;
background: #DEE3DC;
display:table-cell;
width: 730px;
}
#contents {
margin: 35px;
}
#contents h1, h2 {
padding-bottom: 15px;
}
#contents p {
padding-top: 5px;
padding-bottom: 5px;
}
#header {
color: black;
width: 900px;
float: left;
height: 160px;
background: #FFFEE9;
margin-top: 10px;
}
#navigation p {
padding: 3px;
}
#footer {
width: 900px;
height: 40px;
clear: both;
color: white;
background: #83422D;
font-size: 80%;
}
#footer a {
color: white;
text-decoration: none;
}
#footer p {
padding: 4px;
}
#navigation {
float: left;
width: 900px;
height: 25px;
color: white;
background: #83422D;
}
#navigation a {
text-decoration: none;
color: white;
}
#navigation a:hover {
text-decoration: underline;
}
#container {
border:1px solid red;
overflow:hidden;
}
#leftcolumn {
color: white;
background: #006350;
width: 170px;
display:table-cell;
}
#leftcolumn a {
text-decoration: none;
color: white;
}
#leftcolumn a:hover {
text-decoration: underline;
}
#leftcolumn li {
padding-bottom: 10px;
}
#leftcolumn ul {
margin-left: 20px;
margin-top: 20px;
list-style: none;
}
.centered {
text-align: center;
margin: auto;
display: block;
}
#gallery {
height: 300px;
width: 650px;
}
#gallery img {
margin-right: 50px;
margin-top: 50px;
}
#gallerytext {
width: 400px;
font-size: 75%;
color: black;
position: relative;
margin-left: 155px;
margin-top: -100px;
text-align: justify;
}
see the demo :- http://jsfiddle.net/BQkme/10/
This solution is a teensy bit hacky because you need some supporting markup, but it does work and I have used it before.
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
The main issue I have with it is that you have to nest your content divs to a depth equaling the number of columns. In your case, it's not a huge problem because you'd only be nesting your content inside 2 container divs.
Your markup might end up looking something like the following:
<html>
<head></head>
<body>
<div id="wrapper">
<div id="header"/>
<div id="navigation"/>
<div id="container_content">
<div id="container_leftcolumn">
<div id="leftcolumn"/>
<div id="content/>
</div>
</div>
<div id="footer"/>
</div>
</body>
</html>
You need to use absolute positioning.
Here is a working Live Demo.
Hope this helps.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.
Screenshot of the problem:
The yellow block is the logo and the blue box is the nav links (I have blanked them out). I would like to align the links at the bottom so they are stuck to the top of the body content (white box). How would I do this?
Here is the relevant CSS and HTML.
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background-image:url(logo.png);
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
<div id="header">
<div id="logo"></div>
<div id="nav">
<ul>
<li>*****</li>
[...]
</ul>
</div>
</div>
Thanks in advance.
Try this. Seems to work in Firefox/Mac
#header {
height: 42px;
}
#logo {
width: 253px;
height: 42px;
background: #00ffff;
float: left;
}
#nav {
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
#nav ul {
list-style-type: none;
margin: 0;
padding-top: 18px;
margin-bottom: 4px;
text-align: right;
font-size: 1.25em;
}
#nav ul li {
display: inline;
background-color: #3edff2;
padding: 5px;
}
Bottom left? If so - start by setting clear: both; on your #nav block.
Other than that, I don't really understand your question - can you make a jpg of how you'd like it to look?
You can use absolute positioning like this:
#header {
position: relative;
height: 42px;
}
#nav {
position: absolute;
bottom: 0px;
width: 100%;
border-bottom: 2px solid #3edff2;
height: 42px;
}
in this method, you make "nav" with absolute positioning related to "header" division.