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>
making a web page and the main page is to wide and shows the scroll bars. have tried everything I can think of.
this is the url for the site www.sfbblag.com
here is the css`
/* start of Blaynes Code! */
html {
background: url(images/bg.png) no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body{
margin: 0px;
padding: 0px;
}
#Content {
width:100%;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
#menu {
width: 100%;
height: 35px;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color:#FFFFFF ;
background-color: #000000;
}
#menuside {
width: 100%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
border-radius: 8px;
float:right;
}
#menuside ul {
padding: 8px 0px;
margin: 0px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menuside li {
width:100%;
height:30px;
display: block;
text-align:left;
}
#menuside a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menuside a:hover {
color:#FFFFFF ;
}
#header {
width:100%;
height:180px;
position:absolute;
text-align:center;
background-color: rgba(3, 3, 3, 0.9); /* Color white with alpha 0.9*/
position:fixed;
top: 0px;
float:left;
}
#header1 {
width:20%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header2 {
width:46%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3 {
width:33%;
float: left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3a {
width:100%;
height:25%;
float:left;
color:#0000FF;
box-shadow: 10px 10px 5px #888888;
}
#header3b {
width:100%;
height:75%;
float:left;
box-shadow: 10px 10px 5px #888888;
}
#header4 {background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
width:100%;
float: left;
box-shadow: 10px 10px 5px #888888;
}
#clock { color:#ffffff;
font:Arial, Helvetica, sans-serif;
}
#navbar {
width:100%;
float:left;
height:10%;
color:#FFFFFF;
text-align:center;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
box-shadow: 10px 10px 5px #888888;
}
#contentholder {
box-shadow: 10px 10px 5px #888888;
width:50%;
height:60%;
position:fixed;
}
#contentleft {
display:inline;
width:20%;
float:left;
border:#0a61a6;
box-shadow: 10px 10px 5px #888888;
}
#contentleft1 {
height:40%;
}
#contentleft2 {
width:20%;
height:20%;
}
#contentleft3 {
height:20%;
width:100%;
}
#contentleft4 {
height:20%;
width:100%;
}
#containercenter {
box-shadow: 10px 10px 5px #888888;
height:100%;
display:inline;
width:50%;
float:left;
}
#containercenter1 {
color:#FFFFFF;
height:33%;
width:100%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
padding-left:5px;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
}
#containercenter2 {
height:33%;
width:100%;
background-color:#0a61a6;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
top: 400px;
}
#containercenter3 {
height:33%;
width:100%;
background-color:#0a61a6;
}
#contentright {
box-shadow: 10px 10px 5px #888888;
float:left;
height:100%;
width:30%;
display:inline;
}
#contentright1 {
float:left;
height:25%;
width:100%;
text-align:center;
}
#contentright2 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright3 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright4 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
margin-bottom: 20px;
}
#inputbox {
height: 33%;
}
#slider {
box-shadow: 10px 10px 5px #888888;
width:100%;
float:left;
}
#slider1 {
float:left;
width:33%;
display:inline;
}
#slider2 {
float:left;
width:33%;
display:inline;
}
#slider3 {
float:left;
width:33%;
display:inline;
}
#footer{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
#footermenu{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left; /* Clear floats */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#dfaa09;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
#navContainer {
box-shadow: 10px 10px 5px #888888;
margin:0;
padding:0;
text-align:left;
width:50%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: left;
text-shadow: 3px 2px 3px #333333;
}
#navContainer ul{
margin:0;
padding:0;
list-style:none;
}
#navContainer ul li {
position:relative;
}
#navContainer ul li span{
display:block;
background:url(images/blueVertNav/buttonLeft.png) top left no-repeat;
}
#navContainer ul li a{
text-decoration:none;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
display:block;
padding:8px;
background:url(images/blueVertNav/buttonRight.png) top right no-repeat;
}
#navContainer ul li span:hover {
background:url(images/blueVertNav/hoverLeft.png) top left no-repeat;
}
#navContainer ul li a:hover{
background:url(images/blueVertNav/hoverRight.png) top right no-repeat;
}
#navContainer ul ul{
position:absolute;
display:none;
}
#navContainer ul ul li a{
background:#bec8cb;
}
#navContainer ul li:hover ul{
width:80%;
position:relitive;
display:block; left:100%;
top:0;
}
/* end of Blaynes Code! */
form {
background: #fafafa;
padding: 20px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
/*New additions to css main sheet*/
#board{
width:60%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
outline-color: #000066;
color: #000000;
border: 4;
border-color: #000000;
box-shadow: 10px 10px 5px #888888;
}
#example4 {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
font-size: 9px;
font-weight: normal;
}
`
and here is 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>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Content-Script-Type" content="text/javascript">
<title>SFBBL AG TRUST</title>
<link rel="stylesheet" type="text/css" href="maintestafix.css"/>
<style type="text/css">
<!--
.style3 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!-- start of Header -->
<div id="header">
<div id="header1">
<div align="left">
<p><img src="Switzerland Flag.png" width="15%" /> </p>
<p class="style3"> </p>
</div>
</div>
<div id="header2">
<div align="center">
<img src="images/01-SFBBL.png" width="100%" />
</div>
</div>
<div id="header3">
<div id="header3a">
<div id="clock" align="right" >
<script type="text/javascript">
document.write ('<p>Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')
if (document.getElementById) onload = function () {
setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
}
</script>
</div>
</div>
<div id="header3b">
<div align="center">
<img src="Trust_LH.jpg" width="30%" border="0" />
</div>
</div>
</div>
<div id="header4" >
<!-- Start of Top Menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Bank Accounts</li>
<li>Credit Cards</li>
<li>Our Board</li>
<li>News</li>
<li>Products</li>
<li>Investments</li>
<li>Banking Options</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- End of Top Menu -->
</div>
</div>
<!-- End of Header -->
<div class="clear"></div>
<!-- Start of Main Content -->
<div id="content" >
<div id="contentleft">
<div id="contentleft1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<div id="menuside">
<ul>
<li>Log in</li>
<li>Resources</li>
<li>Branches</li>
<li>Calculator</li>
<li>Talk to us</li>
</ul>
</div>
</div>
<div id="contentleft2">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" height="120" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=DIA,NYSE,COMPQX,SPY&style=WLBlueStyle&w=160">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
<div id="contentleft3">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=EUR/USD,USD/JPY,GBP/USD,USD/CAD,AUD/USD&style=WLBlueStyle&w=200">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
</div>
<div class="clear"></div>
<div id="containercenter" >
<div id="containercenter1">
<div>
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
</div>
<div align="center">
<p align="left">The purpose of SFBBL Trust AG is to provide creative, working solutions to qualified governments, projects, companies and individuals through the detailed comprehension and proper leveraging of usable assets, acquisition of adjustable collateral, debt reduction hedge strategies and opportunity analysis of changing market conditions, while furthering local and global communities to better living conditions.
</p>
</div>
<div>
<p align="left">Accounts, Cards and Payments<br />
Asset Management and Investments<br />
Private Client and Institutional Client Solution
</p>
</div>
<div><img src="images/blueVertNav/spacer.png" width="100%"/>
</div>
<div align="left">
<p><img src="images/blueVertNav/currentevents.png" width="100%" />
</p>
<p> </p>
<p>SFBBL is proud to announce our merger with Trust Bank, presently in eleven locations and expanding in Dubai, London and Vienna. Trust Bank has been an established fully operational Bank conducting full banking business for the last 20 years. SFBBL provides, The Private Client Premier Division which is the core focus of the addition of SFBBL, providing a select clientele with a niche portfolio of private banking solutions. Our premier services allow clients to access and securitize liquid capital as well as assets, internationally with great ease. Our account holders have access to a large number of private banking services including our three primary areas of service.
</p>
</div>
<div id="example4"><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
<div><img src="images/blueVertNav/askusaquestion.png" width="100%" border="0" />
</div>
<div><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
</div>
</div>
<div id="contentright">
<div id="contentright1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<!-- Exchange Rates Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #040442;text-align:left;">
<div style="text-align:left;background-color:#0A61A6;width:100%;border-bottom:0px;height:16px; font-size:12px;font-weight:bold;padding:5px 0px;">
<div align="center"><span style="margin-left:2px;background-image:url(http://www.exchangeratewidget.com/flag.png); background-position: 0 -1232px; width:100%; height:15px; background-repeat:no-repeat;padding-left:5px;">
<a href="http://www.exchangeratewidget.com/" target="_blank" style="color:#FFFFFF; text-decoration:none;padding-left:22px;">
US Dollar Exchange Rates</a>
</span>
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR,GBP,JPY,CHF,CAD,AUD,CNY,ZAR,RUB,BRL,HKD,MXN,&a=1&d=0A61A6&n=FFFFFF&o=FCF4F4&v=5">
</script>
</div>
<!-- End of Exchange Rates Script -->
</div>
<div id="contentright2">
<!-- Currency Converter Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #0A61A6;"><div style="text-align:center;background-color:#0A61A6;width:100%;font-size:13px;font-weight:bold;height:18px;padding-top:2px;">
<div align="center">
Currency Converter
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR&a=1&d=0A61A6&n=FFFFFF&o=FAF2F2&v=1">
</script>
</div>
<!-- End of Currency Converter Script -->
<div id="contentright3">
<div align="center">
<img src="images/MrPrivateMortgage_DreamHome.jpg" width="95%" />
</div>
</div>
<div id="contentright4">
<div align="center"></div>
</div>
</div>
</div>
<!-- End of Main Content -->
</div>
<!-- Start of Pic Slider -->
<!-- End of Pic Slider -->
<div class="clear"></div>
<!-- Start of Stock ticker -->
<div id="footer">
<div align="center">
<!-- START Worden Top Gainers Ticker Widget -->
<script src="http://widgets.freestockcharts.com/js/jquery-1.3.1.min.js" type="text/javascript">
</script>
<script src="http://widgets.freestockcharts.com/script/WBIHorizontalTicker2.js?ver=12334" type="text/javascript">
</script> <link href="http://widgets.freestockcharts.com/WidgetServer/WBITickerblue.css" rel="stylesheet" type="text/css" />
<script>
var gainTicker = new WBIHorizontalTicker('gainers');
gainTicker.start();
</script>
<!-- End Scrolling Ticker Widget -->
</div>
</div>
<!-- End of Stock ticker -->
<div class="clear"></div>
<!-- Start of bottom menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Privacy</li>
<li>Security</li>
<li>Copyright</li>
</ul>
</div>
</div>
<!-- End of bottom menu -->
<div id="header4" >
<p align="left" class="style3">
SFBBL is not a brick and mortar depository institution.
Our services are reserved for Private Banking clientele and qualified institutional investors.
SFBBL DOES NOT PROVIDE TAX ADVICE OF ANY KIND.
IT IS THE CUSTOMER'S RESPONSIBILITY TO COMPLY WITH THEIR COUNTRY'S TAX.
SFBBL IS A REGISTERED SWISS TRUST COMPANY. SFBBL IS NOT A REGISTERED BANK
</p>
</div>
<script>
var timeOnSlide = 3,
timeBetweenSlides = 2,
animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'Webkit Moz O Khtml'.split(' '),
pfx = '',
slidy = document.getElementById("slidy");
if (slidy.style.animationName !== undefined) { animation = true; }
if ( animation === false ) {
for ( var i = 0; i < domPrefixes.length; i++ ) {
if ( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
} } }
if ( animation === false ) {
// animate using a JavaScript fallback, if you wish
} else {
var images = slidy.getElementsByTagName("img"),
firstImg = images[0],
imgWrap = firstImg.cloneNode(false);
slidy.appendChild(imgWrap);
var imgCount = images.length,
totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1),
slideRatio = (timeOnSlide / totalTime)*100,
moveRatio = (timeBetweenSlides / totalTime)*100,
basePercentage = 100/imgCount,
position = 0,
css = document.createElement("style");
css.type = "text/css";
css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }";
css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }";
css.innerHTML += "#"+keyframeprefix+"keyframes slidy {";
for (i=0;i<(imgCount-1); i++) {
position+= slideRatio;
css.innerHTML += position+"% { left: -"+(i * 100)+"%; }";
position += moveRatio;
css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }";
}
css.innerHTML += "}";
css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }";
document.body.appendChild(css);
}
</script>
</body>
</html>
thanks in advance
you can use body{overflow-x: hidden;} in your CSS. However, I'd recommend restructuring your page so that the page isn't ~1500px wide.
Cheers!
Try to use this:
#content{
overflow-x: hidden;
}
#slider {
float: left;
overflow-x: hidden;
width: 100%;
}
#footer {
background-color: rgba(3, 3, 3, 0.7);
float: left;
height: 5%;
width: 99.9%;
}
Cheers!
i keep getting unwanted top margin and cant remove it, i tried everything, this is affected one of my other projects as well, could find any solution. please help
heres 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>Joy The Designert</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
<body topmargin=0 marginheight=0>
<div id="Wrapper">
<div id="topBanner"><div class="container"><h2>top banner content</h2></div></div>
<div id="nav"><div class="container">Navigation Text<?include ("navigation.php");?></div></div>
<div id="featured"><div class="container"></div></div>
<div id="info"><div class="container">test</div></div>
<div id="support"><div class="container">test</div></div>
<div id="footer"><div class="container">testing footer<?include ("footer.php");?></div></div>
</div>
</body>
</html>
and heres my css content:
#charset "utf-8";
/* CSS Document */
html {
margin:!important 0px;
padding:0px;
}
body {
margin-top:!important 0px;
margin-left:0px;
margin-right:0px;
margin-botton:0px;
padding:0px;
border:none;
color: #292929;
font-family: Arial,Helvetica,sans-serif;
font-size: 81.25%;
}
#wrapper {
margin:0px;
Width:1000px;
height:auto;
}
.container {
width:900px;
margin:auto;
}
#topBanner{
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat-x;
height:44px;
width:100%;
}
#nav{
height:72px;
width:100%;
padding
color:#666666;
background-color: #F5F5F5;
border-bottom: 1px solid #FFFFFF;
box-shadow: 0 -5px 5px #5A595D;
color: #666666;
font-weight: bold;
height: 72px;
}
#featured {
min-height:420px;
width:100%;
background: url(none) no-repeat scroll center top #ECECEC;
border-bottom: 1px solid #FFFFFF;
}
#info{
background: url(images/gradient-bg.png);
background-repeat:repeat-x;
height: 256px;
width: 100%;
}
#support{
background-color: #F5F5F5;
border-top: 1px solid #FFFFFF;
box-shadow: 0 5px 5px #5A595D;
height:55px;
width:100%;
}
#footer{
width:100%;
height:150px;
background-image:url(images/scr_gray-bkgd.png);
background-repeat:repeat;
}
#topBanner h2{
margin:0px;
}
This should solve it ;)
very new to code and all this, i am trying to make a simple page with html and css for class. Basically the problem is there is a space between the picture div and the menu div, you can see if you check out my code, also if there is anything that i really don't need, it would be really helpful to point it out. Also i am making this in Chrome. Cheers :)
PS. I am only showing one page of the html so the links wont work.
Here the link to jsFiddle.
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>Cristiano Ronaldo</title>
<link rel="stylesheet" type="text/css" href="../realstyle.css" />
</head>
<body>
<div id="contentwrap">
<div id="languagebar">
<ul id="languagelist">
<li id="Ronaldo">CRISTIANO RONALDO</li>
<li>Português</li>
<li>English</li>
</ul>
</div> <!--languagebar-->
<div id="bigpic">
<a href="http://www.realmadrid.com/cs/Satellite/en/Home.htm">
<img id="Madrid" border="0" src="../GalleryI/Madrid.jpg" width="100" height="100px" />
</a>
<a href="http://www.manutd.com/Splash-Page.aspx">
<img id="United" border="0" src="../GalleryI/United.jpg" width="120" height="100px" />
</a>
</div> <!--bigpic-->
<div id="menubar">
<ul id="menubarlist">
<li>Home</li>
<li>Early Life</li>
<li>Clubs</li>
<li>Records/medals</li>
<li>Personal Life</li>
</ul>
</div> <!--menubar-->
<div id="content">
</div> <!--Content-->
</div> <!--contentwrap-->
</body>
</html>
CSS
body {
background-image: url("GalleryI/Background.jpg");
width:100%;
margin:0;
padding:0;
}
A:hover {text-decoration: none; color:#CD2626;}
a:link {color: White; text-decoration: none;}
a:visited {color: White; text-decoration: none;}
#contentwrap {
text-align:center;
white-space: nowrap;
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: red;
}
#languagebar {
width:800px;
height:30px;
background-image: url("GalleryI/languagebaricon.jpg");
background-repeat: no-repeat;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#languagelist li {
display:inline;
list-style:none;
position: relative;
line-height:25px;
padding: 2px 10px 0px 10px;
color:#CD2626;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
float: right;
}
#languagelist li a:hover{
color:#CD2626;
}
#bigpic {
width:800px;
height:100px;
background: #fff;
background-image: url("GalleryI/Jersey1.jpg");
background-repeat: no-repeat;
background-position: 190px -155px;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
margin:0 auto;
}
#menubar {
width:800px;
height:40px;
background-image: url("GalleryI/menuicon.jpg");
background-repeat: no-repeat;
padding:0;
white-space: nowrap;
list-style:none;
font-family: Impact, Arial, sans-serif;
text-transform:uppercase !important;
font-size: 16px;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
#Madrid {
float: left;
}
#United {
float: left;
}
#content {
width: 800px;
height: 726px;
background-color: #FFF;
color: white;
font-size: 18px;
text-align:center;
font-family: arial,sans-serif;
color: white;
margin:0 auto;
border-left: #FFF 1px solid;
border-right: #FFF 1px solid;
}
li#Ronaldo {
line-height:25px;
padding: 2px 25px 2px 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: white;
float: left;
font-weight: bold;
}
ul#menubarlist li {
display:inline;
position: relative;
letter-spacing:2px;
line-height:35px;
padding: 0px 25px 0px 25px;
color:#CD2626;
}
ul#menubarlist li a:hover{
color:#CD2626;
}
ul#list-nav li a {
text-decoration:none;
color:#ffffff;
}
Just remove this:
#languagebar{
border-left:1px solid #FFFFFF;
}
There is a white space because you have a border!
Edit:
If you mean the gap between the images, see http://jsfiddle.net/GZ8ZT/5/
Just add
#bigpic{font-size:0}
And if you want to add text inside bicpic, you will also need
#bicpic>*{font-size:16px} /* Or your default font-size value */
Remove this
border-left:1px solid #FFFFFF;
from *css #languagebar *
I am trying to add an image together with some text and want both of them in the same background.
Meaning that I have a container where I put both the image and the text. And want to be able to steer the text however i want to. This might seem easy but I can not make it work, and would like to find out if anyone else knows how to get this job done.
Here comes the html and css i have put together, feel free to change it.
div.imagecaption{float: left;
width: 302px;
margin: 0 1em 1em 1em;
display: inline;
padding:
background: #036;
color: #fff;
}
div.imagecaption img{float: left;
margin-left: 1em;
border: 1px solid #fff;}
<div class="imagecaption">
<img src>
</div>
<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>
I also want the textual part to have a background-color of its own.
Now i have really tried making this work, and this is my latest attempt.
So, does anyone know what i am doing wrong?
Try this, Its a part of code which I use in my work
<!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" />
<style type="text/css">
.mybutton a
{
display:block;
line-height:60%;
text-decoration:none;
border:0px solid;
font:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:12px;
float:left;
background-color:#f5f5f5;
cursor:pointer;
color:#000;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
}
.mybutton a img
{
width:45px;
height:45px;
margin:5px 0px 5px 0 ;
padding:0px 15px 0px 15px;
border:none;
}
.mybutton a span
{
position:relative;
bottom:3px;
margin:5px 0px 0px 0px;
padding-left:10px;
}
.mybutton a.myimg{
color:#000;
}
.mybutton a.myimg:hover
{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.mybutton a.myimg:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
</style>
</head>
<body>
<div class="mybutton">
<a href="#" class="myimg">
<img src="card.jpg" alt="" align="top"/><br/>
<span style="padding-left:10px;" >My Button</span>
</a>
</div>
</body>
</html>
i don't know what you want exactly, try this :
<style>
div.imagecaption{
float: left;
width: 302px;
margin: 0 1em 1em 1em;
display:block;
padding:2px;
background: #036;
color: #fff;
}
div.imagecaption img{
float: left;
border: 1px solid #fff;
}
div.imagecaption p {
float: right;
margin-right: 8px;
width: 180px;
word-wrap: break-word;
}
</style>
<div class="imagecaption">
<img src="images/logo_ws2011.png">
<p>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
TEXTTEXTTEXTTEXTTEXTTEXT</br>
</p>
</div>