I want to display the button and label on the same line.But multiple buttons on different lines. How can I do that .Help will be appreciated.
Button and label should be side by side and next set of button and label on next line.
Where am I going wrong ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
Use display:table-cell will give you expected output.
<span>
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname" >edit</label>
</span>
<span >
<div class='round-button'><div class='round-button-circle'></div></div>
<label class="lblname">edit</label>
</span>
CSS:
.round-button
{
width:20px;
display: table-cell;
}
.lblname{
display: table-cell;
padding: 0 5px;
vertical-align: middle;
}
Working Fiddle
Note: Try to avoid giving inline css.
As there are some structural changes required in your html code so instead of tweaking little in your code you should consider restructuring it in proper manner. you can try following code.
.button {
background: #4679BD;
border-radius: 50%;
float: left;
width: 20px;
height: 20px;
margin-right: 10px;
}
.wrapper {
float: left;
width: 100%;
margin-bottom: 10px;
}
a {
float: left;
}
<div class="wrapper">
<a class="button"></a><span>Button 1</span>
</div>
<div class="wrapper">
<a class="button"></a><span>Button 2</span>
</div>
You can try floating:
.round-button {
width: 20px;
float: left;
clear: left;
}
just remove <br> in bitween both <span>
and add below to css
span {
display:inline-block;
}
Like i.e.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<style>
span {
display:inline-block;
}
.new_line {
width:780px;
margin:0 auto;
height:50px;
}
.new_line ul li {
list-style-type:none;
float:left;
padding:10px 22px ;
}
.new_line ul li img {
float:left;}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
.round-button
{
width:20px;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
border-radius: 50%;
overflow:hidden;
background: #4679BD;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
</style>
</head>
<body>
<br><span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
<span ><div class='round-button'><div class='round-button-circle'></div></div> <label style='display:inline;'>edit</label></span>
</body>
</html>
First you can't wrap a div(Block element) with a span(inline element) - Invalid HTML
And the problem is you aren't making button div round-button(Block element) inline or inline-block or float would also work.
As the label is inline element you don't need to display it to inline. Rather you need to change the button div to act as inline.
<div class="wrap">
<div class='round-button' style="display:inline-block">
<div class='round-button-circle'></div>
</div>
<label style='display:inline;'>edit</label>
</div> <!--/ END OF WRAP -->
I styled the round-button div with inline-block because it would display inline as well maintaining block element css properties.
Check this
hope helps
Snippet
.round-button
{
width:60px;
}
.round-button-circle {
background: #4679bd none repeat scroll 0 0;
border-radius: 50%;
box-shadow: 0 0 3px gray;
height: 20px;
overflow: hidden;
width: 20px;
}
.round-button-circle:hover {
background:#30588e;
}
.round-button a {
width:100%;
padding-top:50%;
padding-bottom:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:#e2eaf3;
font-family:Verdana;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
<span >
<div class='round-button'>
<label style="float: left; margin-right: 10px;">edit</label>
<div class='round-button-circle'></div>
</div>
</span>
Related
I have a div that has a image that will stretch with the browser. I have a div that's a logo when the wrapper div(image) is shrunk the div should stay centered but its off to one side . I used left:42%; to center. It its fine when big just when u shrink it goes off to one side..
Do I have any other options besides left:42%;? margin: 0 auto; did not work...
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
margin-left:10px;
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:42%;
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Use left: 50% with transform: translateX(-50%) to center an absolutely positioned element horizontally. Also remove the left margin so it's truly centered.
#font-face {
font-family: myFirstFont;
src: url(jewler/Allura-Regular.otf);
}
body {
b111ackground-color: #000000;
}
h1 {
color: maroon;
margin-left: 40px;
}
h2 {
color: maroon;
margin-left: 40px;
}
h3 {
color: maroon;
margin-left: 40px;
}
#wrapper{
width:80%;
height:80%;
margin: 0 auto;
;
}
* {
margin: 0;
padding: 0;
}
#logo{
margin: 0 auto;
border: px solid green;
color:#FFF;
position:absolute;
/* margin-left:10px; */
margin-top:10px;
display:table;
width:21%;
max-width:250px;
height:122px;
top:0%;
left:50%;
transform: translateX(-50%);
}
#info{
margin: 0 auto;
border: 1px solid green;
color:#FFF;
display:table;
width:250px;
height:250px;
border: 1px solid red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> | Coming Soon!</title>
</head>
<body>
<div id="wrapper">
<IMG SRC="jewler/BackGround.png" width="100%" height="100%"/>
<div id="logo">
<IMG SRC="jewler/logo.png" width="100%" height="100%"/>
</div>
<div id="info">
Coming Soon
Adress:
Phone:
E-mail:
</div>
</div>
</body>
</html>
Here is the special camera,two cameras in one image.
The target web page.
To insert a camera image in the input element.
Restrictive condition:
the two-cameras image cann't be slice into new image containing only one camera.
Here is my html file.
<html>
<head>
<style>
input{
width:538px;
height:50px;
background:url(camera.png) no-repeat scroll 510px 0;
}
</style>
</head>
<body>
<input type="text" maxlength="100" >
</body>
</html>
I can't display only one camera ,how to fix it?
It is one way.
HTML:
<div style="position:relative;display:inline-block;">
<input type="text" maxlength="100" >
<div class="camera-bg"></div>
</div>
CSS:
input{
width:538px;
height:50px;
padding-right:40px;
}
.camera-bg{
position:absolute;
top:20px;
right:0;
width:30px;
height:20px;
background:url(https://i.stack.imgur.com/5Vv2z.png) no-repeat ;
background-position:0 0;
}
Codepen:
http://codepen.io/swapnaranjitanayak/pen/PbjLqXenter link description here
You need a write a more in html. In your case it is a background-position not a background-color
.form-input {
position:relative;
width:auto;
display:inline-block;
}
.icon {
content:"";
width: 30px;
height:30px;
display:block;
background: url(camera.png) no-repeat center center;
background-color:red;
position:absolute;
right:10px;
top:50%;
margin-top:-15px;
z-index:2;
}
input{
width:538px;
height:50px;
padding-left:1em;
}
input:focus ~ .icon {
background-color:blue;
}
<div class="form-input">
<input type="text" maxlength="100" >
<span class="icon"></span>
</div>
Just wrap your input with a div and add this CSS code:
.camera {
position: relative;
display:inline-block;
}
.camera:after {
content: '';
position: absolute;
top: 20px;
right: 10px;
height: 18px;
width: 18px;
background-image: url(https://i.stack.imgur.com/5Vv2z.png)
}
<html>
<head>
<style>
input {
width: 238px;
height: 50px;
}
</style>
</head>
<body>
<div class="camera">
<input type="text" maxlength="100" />
</div>
</body>
</html>
Here is a simple HTML file with inline css:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
body {
margin-top: 20px;
margin-right: 500px;
margin-left: 500px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
font-family: Arial;
font-weight:bold;
}
</style>
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.
vertical-align:middle; works only when parent has display:table and children display:table-cell
Take a look:
body {
margin-top: 20px;
margin-right: 100px;
margin-left: 100px;
}
.events {
font-size: 200%;
vertical-align:middle;
text-align:left;
margin-left:20px;
display:table-cell;
}
.sections{
font-size: 100%;
vertical-align:middle;
text-align:right;
margin-right:20px;
display:table-cell;
}
#divA {
background-color: #BB1919;
color:white;
height:60px;
width:100%;
font-family: Arial;
font-weight:bold;
display:table;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="divA"><div class="events">EVENTS</div>
<div class="sections">Sections</div>
</div>
</body>
</html>
Here is how you do it :
#divA {
display:block;
background: #BB1919;
color:white;
height:100px;
padding:20px;
box-sizing:border-box;
}
.divA {
display:table;
width:100%;
height:100%;
}
.events,
.sections {
display:table-cell;
font-size: 20px;
vertical-align:middle;
}
.divB {
display:table;
width:100%;
height:100px;
background:#f5f5f5;
padding:20px;
box-sizing:border-box;
}
<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
</div>
<h2>If you dont</h2>
<div class="divB">
<div class="events">EVENTS</div>
<div class="sections">SECTIONS</div>
</div>
The css property vertical-align will align elements on the same line. As you can see in the example below, three divs are centered through the middle because of that property. Vertical-align will not center text inside an element, though.
One way to achieve that without tables is to set the line height property to the same height value of the container. In the example below, the container is 60px tall and so is the text line. This method works if the text is contained in one line only.
div {
display: inline-block;
border: 1px solid black;
vertical-align: middle;
}
.lg {
height: 60px;
}
.sm{
height:40px;
}
.centerTxt{
line-height: 60px;
}
<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>
I cannot modify the list which I mark by a comment in the code, and also cannot change background color of the id topicmenu which is supposed to be used to manipulate the list. Can anybody tell what is wrong with my code?
<!doctype html>
<html>
<head>
<title>BBC News - HIEP</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
margin:0;
font-family: Arial;
}
.fixwidth{
width: 1020px;
margin: 0 auto;
padding:0;
}
.break{
clear: both;
}
#container{
}
#topbar{
background-color:#7A0000;
width:100%;
height:40px;
color: white;
margin:0;
padding:0;
}
#logodiv{
margin:0;
float:left;
border-right: 1px solid #990000;
padding: 0 160px 0 0;
}
#logodiv img{
position: relative;
top:3px;
margin:0;
padding:0 10px 1px 0;
border-right: 1px solid #990000;
}
#topmenudiv ul{
margin:0;
padding:0;
}
#topmenudiv li{
float: left;
padding:10px 11px 13px 11px;
margin:0;
list-style: none;
border-right: 1px solid #990000;
font-weight:bold;
font-size:0.8em;
}
#searchdiv{
float: left;
padding:7px 11px 5px 11px;
}
#searchdiv input{
height: 18px;
width: 185px;
padding-left: 5px;
font-weight:bold;
color:#525252;
font-size:0.8em;
background-image:url("image/magnify.jpg");
background-repeat: no-repeat;
background-position: right center;
}
#headerbar{
margin:0;
padding:0;
background-color:#990000;
width:100%;
height:130px;
color: white;
}
#headerbar p{
margin:0;
}
#newsheader{
float:left;
font-size: 3em;
padding: 10px 0 0 0;
}
#us{
font-size:0.5em;
}
#rss{
margin: 35px 10px 0 0;
float:right;
font-size:0.9em;
font-weight:bold;
}
#rss img{
height:16px;
{
#topicmenu{ /* the class that is used to manipulate the list*/
}
#topicmenu ul{
background-color:#3E0C0D;
}
#topicmenu li{
list-style: none;
}
</style>
</head>
<body>
<div id ="container">
<div id = "topbar">
<div class ="fixwidth">
<div id="logodiv">
<a href="http://www.bbc.com/news/" target = _blank><img src="image/bbclogo.jpg" /></a>
</div>
<div id= "topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Earth</li>
<li>Future</li>
<li>Shop</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type = "text" placeholder ="Search"/>
</div>
</div>
</div>
<div class ="break"></div>
<div id="headerbar">
<div class ="fixwidth">
<p id ="newsheader" >NEWS <span id="us">US</span></p>
<div id = "rss">
RSS <img src = "image/rss.jpg" />
</div>
<div class ="break"></div>
<div id ="topicmenu"> <!-- the list I get trouble from-->
<ul>
<li>Home</li>
<li>World</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Hmm maybe because:
#rss img{
height:16px;
{
^ should be }
your question is a bit confusing, you cant change the background-color of the class "topicmenu" because there is no class "topicmenu" in your html. But there is an id topicmenu...
Also the main reason why you cant style it properly because you did not have any closing tag in your #rss img {... , you should have ther #rss img {....}
here's a working fiddle for your problem
<http://jsfiddle.net/owjwm8uw/>
Another thing, try making your code as clean as possible... avoid having space between your id/class and the equal sign, something like:
yourid ="blabla", it should be yourid="blabla"
cheers mate,
Advance Merry Christmas!
I have been recently designing some content which needs to be side by side and have the height automatically resize, but the height doesn't resize. The div doesn't expand to the size of the items inside of it. Is there a way to allow the div to expand to the size of the elements inside of it?
CSS
* {
padding: 0px;
margin: 0px;
}
body {
font-family: 'Metrophobic', sans-serif;
background-color: #c5c5c5;
background-image: url('../images/noise.png');
}
#container {
width:900px;
background-color: #dbdbdb;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
box-shadow: 0px 0px 5px black;
}
.center_align {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#header {
height:80px;
font-size: 60px;
padding: 10px;
text-align: center;
}
#menu {
width:900px;
height:50px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #cacaca;
}
.menu_link {
width:224px;
height:50px;
text-align: center;
font-size: 35px;
float: left;
opacity: 0.3;
background-color: #cacaca;
}
.menu_divider {
width: 1px;
height: 50px;
background-color: #dbdbdb;
float:left;
}
#content {
width: 900px;
height: auto;
padding: 10px;
font-size: 20px;
height: auto;
}
.line_container {
margin-top:5px;
margin-bottom:5px;
}
#footer {
width:900px;
height:22px;
padding-top:2px;
text-align: center;
font-size: 14px;
color:black;
}
a:link {
color:black;
text-decoration: none;
}
a:visited {
color:black;
text-decoration: none;
}
a:hover {
color:black;
text-decoration: none;
}
a:active {
color:black;
text-decoration: none;
}
a.link:link {
color:#21525e;
}
a.link:visited {
color:#21525e;
}
a.link:hover {
color:#307f91;
text-decoration: underline;
}
a.link:active {
color:#307f91;
text-decoration: underline;
}
HTML
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" href="../images/favicon.ico" />
<link href="http://fonts.googleapis.com/css?family=Metrophobic" rel="stylesheet" type="text/css" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.icon {
width:100px;
height:100px;
border: 3px solid white;
border-radius:25px;
margin-left:10px;
margin-right:10px;
background-position: center center;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="center_align">
<img src="../images/header_icon.png" alt="header_icon" width="80" height="80" style="margin-right:20px;float:left;" />
<div style="height:80px;float:left;">Title</div>
</div>
</div>
<div id="menu">
Home
<div class="menu_divider"></div>
Tutorials
<div class="menu_divider"></div>
About
<div class="menu_divider"></div>
Contact
</div>
<div id="content">
<div style="width:900px;">
<div class="icon" style="background-image:url('image.jpg');float:left;"></div><div style="float:left;margin-top:20px;">I'm a freelance Web, Iphone, and Game developer.</div>
</div>
</div>
<div id="footer">
© Cameron
</div>
</div>
</body>
</html>
Looks like the problem is that the #footer element isn't properly cleared. Add clear: both; to #footer. This pushes the cleared element below the floated elements, and should functionally result in the same visual fix.
The "container div" basically "forgets" that it is the container for them, so simply add an overflow:auto; to make it remember.
I also tend to add zoom:1 for IE.
The problem is that you are floating elements, and that causes problems with wrapping divs per default (pretty much...).
Here is a working solution, where overflow:hidden is added to the wrapping div: http://jsfiddle.net/s2dxw/2/
The float issue is pretty confusing, and has had a couple of solutions in the past. Here's a good read regarding floats in HTML: http://css-tricks.com/all-about-floats/
Alternatively, you can put some element with the rule clear: both; inside and at the end of the wrapping div.