i am trying to center my horizontal <ul> inside a <div> (the yellow stripe in my example). the markup is below. i know that if <li> were not floated then i could do it by setting left and right margins on <ul> to "auto", but i do not seem to find a way to get rid of "float" because i need my <li> be block elements so that i could size them. please help!
thanks
konstantin
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li><div>y</div></li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Demo posted, on OP's behalf, at: jsbin.
is a block level element, and so takes up the entire width of container... also text-align is for aligning text. You could do something like:
.container ul{
width:400px;
margin:0px auto
}
Try this, works on firefox and chrome
<html>
<head>
<title></title>
<style type="text/css">
.container
{
background-color: yellow;
text-align: center;
}
.container ul
{
display: inline-table;
text-align: center;
}
.container li
{
border: solid 1px grey;
display: block;
float: left;
height: 100px;
line-height: 100px;
list-style-type: none;
margin: 5px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>x</li>
<li>
<div>
y</div>
</li>
</ul>
<div style="clear: both;">
</div>
</div>
</body>
</html>
Not sure how to answer your question because I can't even see the yellow stripe in FF 3.6.8
but have a look at this http://www.cssplay.co.uk/boxes/ - there are many options and it might help you out.
Related
I am pretty new to CSS display, currently I want to center align some text and icon(vertically), but it just not works:
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
I thought a line 100% line height can control the text and inline-block elements vertically align center, but if you pay a specify attention to those icon, they are a little above the center.
"Why inline-block can not be vertically aligned?"
The point of in-line is to have elements be propagated to the screen from left-to-right; so, horizontally.
If you want it vertically, don't use elements styled with in-line because the elements naturally propagate from top to bottom; so, vertically.
vertical-align:middle seems to be what you are after but you need to apply it to the pseudo-elements too.
.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width: auto;
height: 30px;
background-color: lightblue;
float: right;
line-height: 30px;
}
.menuitem,
.menuitem::before {
display: inline-block;
vertical-align: middle;
}
.source {
height: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>TEST COSMOS ICONS</title>
<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">
</head>
<body>
<div class="header">
<span class="holder">
<span class="menuitem source">Perf</span>
<span class="menuitem icon-gear"></span>
<span class="menuitem icon-download"></span>
</span>
</div>
</body>
</html>
Please help a Java guy with a simple CSS problem. Been trying for hours and can't find a proper solution to the problem: How to stretch the background color of a child element so that it has the same height as the parent element while using float? I bet it has something to do with display:flex, but I can't get it to work :-/
Here's the code: https://jsfiddle.net/bycor29w/
Goal: Right column background colour must be filled to the same height as the middle column no matter how much or little text it contains
Requirement: Must use float
StackOverflow demands: "Links to jsfiddle.net must be accompanied by code", so here you go:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
div {
border: 1px #000 solid;
}
.container {
height: 100%;
width:980px;
float:left;
display: flex;
}
.left {
width: 200px;
float: left;
}
.mid{
padding-top: 1px;
width: 560px;
float: left;
}
.right {
background: #d8d8d8 repeat-y bottom right;
padding: 0 20px;
height:100%;
align-self: center;
flex: 1;
width: 180px;
float: left;
}
</style>
<div class="container">
<div class="left">
asdf<br>
asdf<br>
asdf<br>
</div>
<div class="mid">
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
</div>
<div class="right">
asdf
</div>
</div>
</body>
</html>
Firstly, Flexbox will override floats...if you want to use floats...don't use flexbox.
What you seem to want can be achieved using CSS tables....you can still use floats if absolutely necessary.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div {
border: 1px #000 solid;
}
.container {
width: 580px;
display: table;
overflow: auto;
vertical-align: top;
}
.left {
width: 100px;
float: left;
display: table-cell;
vertical-align: top;
}
.mid {
padding-top: 1px;
width: 370px;
float: left;
display: table-cell;
vertical-align: top;
}
.right {
background: lightblue;
width: 100px;
display: table-cell;
vertical-align: top;
}
<body>
<div class="container">
<div class="left">
asdf
<br>asdf
<br>asdf
<br>
</div>
<div class="mid">
asdf
<br>asdf
<br>asdf
<br>asdf
<br>asdf
<br>asdf
<br>
</div>
<div class="right">
asdf
</div>
</div>
</body>
Here's my issue and I'll do my best to be clear here--
I have a simple website laid out in complete CSS using an external stylesheet.
I have a main container holding all of the elements for the website content; however, they all seem to be working except for the one that holds the actual page text and the businessbox. Right now, it's show the main containers background color (green) instead of what it should be (white). I'm positive it is something simple that I overlooked and will probably kick myself later, but thought I'd ask for a second pair of eyes.
Here is what I'm getting and what it should look like. If I'm having problems with this one container, hopefully programming the 3 vertical columns won't be an issue!
SCREENSHOT:
My stylesheet (style.css):
#charset "UTF-8";
/* CSS Document */
body {
background: #88b488;
margin: 3%;
font-family: Arial, Helvetica, sans-serif;
}
#container {
background: #006200;
width: 1020px;
margin: 0 auto;
}
#header {
background-image: url(img/BS_header.jpg);
background-repeat: no-repeat;
background-position:center;
width: 1020px;
height: 322px;
}
<!-- MENU ITEMS -->
#menu {
background: #25235b;
width: 100%;
z-index: 2;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0;
float: right;
margin-top: 15px;
margin-right: 5px;
}
#menu ul li{
padding: 5px;
position: relative;
float: left;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #006100;
}
#menu ul ul {
position: absolute;
margin-top: -1px;
right: 0px;
white-space: nowrap;
visibility: hidden;
}
#menu ul li:hover ul li{
visibility: visible;
color: #ffffff;
background-color: #afafaf;
padding: 0px;
}
<!-- CONTENT -->
#cbox{
width: 1020px;
background-color: #ffffff;
background-image:url(img/content_grad.jpg);
background-repeat: repeat-x;
}
#businessbox {
background-color: #006200;
width: 620px;
height: auto;
border-top: 3px solid #afafaf;
margin-top: 30px;
padding: 10px;
margin: 30px auto 0px;
}
.businesstitle {
text-align:center;
font-size: 20px;
color: #ffffff;
text-transform: uppercase;
font-style:italic;
}
.businesstext {
color: #ffffff;
font-size: 14px;
}
#footer {
font-size: 10px;
text-transform: uppercase;
color: #fff;
text-align: center;
padding: 10px;
background: #006100;
}
My 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Buy Local</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Hot Deals</li>
<li>Sign Up!</li>
<li>Resources
<ul>
<li>Events</li>
</ul>
</li>
</ul>
</div> <!--end of menu-->
</div> <!--end of header-->
<div id="cbox">
<div id="businessbox">
<div class="businesstitle">Our BUSINESS OF THE MONTH:</div><br />
<img src="#" width="150" height="90" style="float: left; padding-right: 10px;"/>
<div class="businesstext">You could be our next title sponsor and get your business in the spotlight with logo, name, and short blurb about your business.</div>
</div> <!--end of businessbox-->
</div> <!--end of cbox-->
<div id="footer">
2013 © Buy Local
</div><!--end of footer-->
</div><!--end of container-->
</body>
</html>
You've got HTML comments in your CSS. The browser is skipping rendering the line next to it so your #cbox and #menu styles are never applied. Remove the <!-- MENU ITEMS --> and <!-- CONTENT --> comments and this should work fine.
See this fiddle for that in action.
OP,
Why are you doing this: <img src="#" ... ?
Also, are any of your background-image urls resolving?
Like I said, it was the obvious--used the wrong commenting format and it caused the #cbox attribute to not function correctly.
Thanks for taking your time to help me with my silly problem!
Where you use image or background-image there use overflow: hidden; height: 1%; i think will solve your problem.
I want to achieve this:
I want to display boxes, one main box and below each box a smaller box as you can see in the picture. I define this with the following html structure:
<div class='content'>
<div class='box'>
<a>test</a>
<div class='money'><div id='maxnumber'>
<h3 id='max'>max</h3><h3 id='digit'>0000</h3>
</div></div>
<div id='numbereuro'><h3 id='digit2'></h3>
<h3 id='euro'></h3>
</div>
</div>
<div class='utility'>test</div>
</div>
Here is a working example that shows the result without the smaller box: http://jsfiddle.net/
.box names the bigger box and .utility the smaller box below bot wrapped in .content. I use the following css:http://jsfiddle.net/76fXa/
.content {
margin: 5px;
padding: 5px;
font-size: 11px;
float: left;
}
.utility{
position:relative;
height:50px; width:100px; background:red;
}
.box {
margin: 5px;
padding: 5px;
background: #BBE3A8;
font-size: 11px;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.box {
position: relative;
padding: 5px;
width: 180px; height:auto;
cursor:pointer;
}
and I get the following result: http://jsfiddle.net/76fXa/1/
any ideas?
How about this quick fiddle I just made for you.
http://www.jsfiddle.net/ozzy/F3K8k/
Both .box and .utility should be put in another floated div so that they both are constrained within. Just a simplified example
<div id="content">
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
<div class="section">
<div class="box">
Large content area
</div>
<div class="utility">
Small content area
</div>
</div>
</div>
(attempting to preserve your class names where practical)
You could then set the inner divs to display block so that they fill the constrained area and set a fixed width to section (I will use 50% for demo purposes)
.section
{float:left; width:50%;}
.box
{display:block;}
.utility
{display:block;}
Set the other style properties as needed, and remember the box model when adjusting padding and margins. Sometimes applying too much or too little of either can break off to a newline if something is set wrong.
From what you provided I can't see why position relative would be necessary. If it was intended as an attempt to make the layout you demonstrated then I'd suggest removing it, unless for some reason you are absolutely positioning something within that div relative to it.
EDIT: Didn't realize you had two content divs and a fiddle posted.
http://jsfiddle.net/76fXa/2/
#ArtWorkAD: Is this is how you want it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
.content {
float: left;
font-size: 11px;
margin: 5px;
padding: 5px;
}
.utility {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: red;
border-radius: 5px;
clear: left;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
.box {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #BBE3A8;
border-radius: 5px;
cursor:pointer;
float: left;
font-size: 11px;
height: auto;
margin: 5px;
padding: 5px;
width: 180px;
}
</style>
</head>
<body>
<div class="content">
<div class="box">
<a>test</a>
<div class="money">
<div id="maxnumber">
<h3 id="max">max</h3><h3 id="digit">0000</h3>
</div>
</div>
<div id="numbereuro"><h3 id="digit2"></h3>
<h3 id="euro"></h3>
</div>
</div>
<div class="utility">test</div>
</div>
</body>
</html>
http://jsfiddle.net/9Ugww/
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari