i know this question has been asked before. i have tried it all but nothing seems to be working.
this is my HTML and CSS code..
body {
color: #666;
font: 12px/17px Arial,Helvetica,sans-serif;
background: -moz-linear-gradient(center top , #C9D3DF 0%, #FFF 100%) no-repeat scroll 0% 0% transparent !important;
}
#container{
width:1349px;
height:auto;
}
#wrapper{
width:940px;
height:auto;
margin: 0px auto 0px auto;
padding: 0px;
position: static;
box-shadow:2px 2px 5px 5px #888888;
-webkit-box-shadow: 2px 2px 5px 5px #888888;
-moz-box-shadow: 2px 2px 5px 5px #888888;
background-color: #FFFFFF;
border-radius: 8px;
}
#header {
margin: 0px auto 0px auto;
padding: 0px;
position: static;
width: 940px;
height: 169px;
}
#contentholder {
width:940px;
height:111px;
padding:0px;
margin:0px;
}
#logo {
margin:14px 0px 0px;
height:67px;
width:397px;
padding:0px;
float:left;
overflow:hidden;
}
#linkholder {
height:31px;
width:323px;
float:right;
overflow: hidden;
margin: 0px 0px 2px;
padding:5px;
}
#links {
float: right;
font-size:small;
height: 0px;
padding-right:7px;
padding-top:3px;
width: 176px;
}
#links li {
margin: 0px 0px 0px 9px;
float: left;
height: 26px;
display: inline;
padding-right:15px;
color:blue;
padding:3px;
border-radius:10px;
box-shadow: 1px 1px 2px 2px #888888;
text-align:center;
}
#menu {
width:940px;
height:45px;
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: #0000FF;
color: #FFFFFF;
border-radius: 8px;
}
#menu ul {
height: 31px;
padding: 15px 0px 0px 0px;
margin: 0px;
overflow:hidden;
}
#menu li {
display: inline;
padding: 20px;
text-align:center;
}
#image{
width: 940px;
height: 250px;
margin: 0px auto 0px auto;
padding: 0px;
position: static;
background-color: #0000FF;
}
#image img {
width:100%;
height:100%;
}
#mbody {
height:auto;
width:940px;
margin: 0px auto 0px auto;
padding: 0px;
position: static;
}
#mbody h1 {
text-align:center;
}
#text{
width:800px;
margin: 0px auto 0px auto;
text-align:justify;
padding: 0px 20px 0px 20px;
}
#footer {
width: 940px;
height:60px;
margin: 0px auto;
overflow: hidden;
}
#copyrt {
text-align:center;
color:gray;
padding-top:20px;
}
#mission {
width:46%;
text-align:justify;
float: left;
}
#mission h2 {
text-align:center;
}
#vision {
width:41%;
text-align:justify;
float: right;
}
#vision h2 {
text-align:center;
}
.gview {
height: 100px;
width:200px;
margin-left: auto; margin-right: auto;
box-shadow: 1px 2px 1px 2px #888888;
position:relative;
}
</head>
<body>
<form id="form1" runat="server">
<!-- header placement -->
<div id="container">
<div id="wrapper">
<header id="header">
<div id="contentholder">
<span id="logo">
<img src="Images/logo.png" /></span>
<div id="linkholder">
<ul id="links">
<li>Admin Login</li>
<li>Register</li>
</ul>
</div>
</div>
<!--Menu creation-->
<nav id="menu">
<ul>
<li>Home</li>
<li>Patient Care</li>
<li>Doctors</li>
<li>Appointments</li>
<li>Departments</li>
<li>Blood Bank</li>
<li>About Us</li>
</ul>
</nav>
</header>
<!-- Main image -->
<div id="image">
<img src="/Images/cardio.jpg" alt="Cardiology" />
</div>
<!--Main content-->
<div id="mbody">
<div id="text">
<h1>Department of Cardiology</h1>
<p>
Cardiovascular diseases are the main factor of death in the Western World, and they represent a challenge for diagnosis, treatment and research. Sigma Medicare is always prepared
to provide patients with the most accurate diagnosis and professional manner of treatment. Our doctors are dedicated to your health. In addition to quality care,
our department is also involved in teaching and numerous researches.
</p>
<div class="gview">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CID" DataSourceID="SqlDataSource1" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
<Columns>
<asp:BoundField DataField="CID" HeaderText="CID" InsertVisible="False" ReadOnly="True" SortExpression="CID" />
<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
<asp:BoundField DataField="Designation" HeaderText="Designation" SortExpression="Designation" />
<asp:BoundField DataField="Qualification" HeaderText="Qualification" SortExpression="Qualification" />
<asp:BoundField DataField="Shift" HeaderText="Shift" SortExpression="Shift" />
<asp:BoundField DataField="Appointment_Timings" HeaderText="Appointment_Timings" SortExpression="Appointment_Timings" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:masterConnectionString %>" SelectCommand="SELECT * FROM [Cardiology]"></asp:SqlDataSource>
</div>
</div>
</div>
<!--Footer Content-->
<footer id="footer">
<p id="copyrt">Copyright © 2015, by Sigma Medicare. All rights reserved.</p>
</footer>
</div>
</div>
</form>
</body>
Please note that container DIV is 800px. any kind of help will be greatly appreciated. I have tried everything that has been suggested before but nothing seems to be working.
Thanks.
Edit: #Lal: Entered whole code for the page and CSS..
You have no problem with the CSS, its correct. Actually the div is center aligned. I've edited the snippet in your question Itself. See it..
The problem is with the GridView. I think you have some CSS overriding the styles applied for the gview. So kindly check the styles applied for your GridView.
Related
I have a container class, row class and column class. I have a row, inside which there are two columns. Both are set to 50% width. But, the left side column's text isn't completely occupied in that column.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
padding-left: 50px;
padding-right: 50px;
}
.container {
position: relative;
border-radius: 10px;
box-shadow: 5px 5px 3px grey;
background-color: #FFFFFF;
padding: 0px 0 0px 0;
height:100%;
}
.navbar {
background-color: #000000;
width: 100%;
height: 70px;
padding: 4px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.navbar a {
color:white;
font-family: Lato, sans-serif;
text-align: center;
padding: 10px 10px;
text-decoration: none;
float:right;
margin-left:-35px;
font-size: 14px;
font-weight:bold;
}
.fas {
font-size:26px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 50%;
height:100%;
margin: auto;
margin-top:70px;
margin-bottom:6px;
padding-left:5px;
}
.txt {
font-family:Montserrat, sans-serif;
font-weight:bold;
text-align: left;
font-size:20px;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<i class="fas fa-user-plus"></i><br>Sign Up
<i class="fas fa-sign-in-alt"></i><br>Login
</div>
<div class="row">
<div class="col">
<div class="txt">
<p style="align:justify"><br><br>
Education is the process of facilitating learning<br>
Acquisition of knowledge<br>
Make Informed decision about your future<br>
Let's discover opportunities
</p>
</div>
</div>
<div class="col">
<img class="img-responsive" src="book.png" width="500" height="400">
</div>
</div>
</div>
</body>
</html>
Here is how the html page looks like.
The left side col has text only in a part of the column. I need the text to be extended on both the sides and fill the left col.
* {
box-sizing: border-box;
padding-left: 50px;
padding-right: 50px;
}
.container {
position: relative;
border-radius: 10px;
box-shadow: 5px 5px 3px grey;
background-color: #FFFFFF;
padding: 0px 0 0px 0;
height:100%;
}
.navbar {
background-color: #000000;
width: 100%;
height: 70px;
padding: 4px 10px 0px 0px;
border-radius:10px 10px 0px 0px;
}
.navbar a {
color:white;
font-family: Lato, sans-serif;
text-align: center;
padding: 10px 10px;
text-decoration: none;
float:right;
margin-left:-35px;
font-size: 14px;
font-weight:bold;
}
.fas {
font-size:26px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.col {
float: left;
width: 50%;
height:100%;
margin: auto;
margin-top:70px;
margin-bottom:6px;
padding-left:5px;
padding:0;
}
.txt {
font-family:Montserrat, sans-serif;
font-weight:bold;
text-align: left;
font-size:20px; padding:0;
}
.txt p{
padding:0;
}
<div class="container">
<div class="navbar">
<i class="fas fa-user-plus"></i><br>Sign Up
<i class="fas fa-sign-in-alt"></i><br>Login
</div>
<div class="row">
<div class="col">
<div class="txt">
<p style="align:justify"><br><br>
Education is the process of facilitating learning<br>
Acquisition of knowledge<br>
Make Informed decision about your future<br>
Let's discover opportunities
</p>
</div>
</div>
<div class="col">
<img class="img-responsive" src="book.png" width="500" height="400">
</div>
</div>
</div>
is this what u looking for?
I want to have a navigation bar with a logo inside it but as I add the logo the line doesn't look fine!
The problem is when I add the pic its like the picture and the text doesnt stay in the same line! not that the line breaks but the text slides down a little while it shouldn't.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
}
img#gnb_logo {
height: 30px;
margin: 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" />
</div>
</nav>
</body>
For starters we need to sort out your html.
Then look at your css your <a> if you're using padding etc you need to make it a block level element.
remove the height 50px from your nav that's not something you want to be giving height to. Instead use your padding of <a> to get the desired height it helps with responsive.
But because we want it to sit beside your image use inline-block
also do not use CSS to define an tag's height and width you should use the tags attributes so that rendering happens smoothly.
Also you need to use alt on images.
your image also needs the following css rule's:
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
So that it sits the way you want it beside your link.
Also if that is your site's logo it should not be inside <nav>
If it's an icon relative to the link then instead of using <img> use background-image
body {
background-color: #C8F1BA;
margin: 0px;
}
ul,
li {
list-style: none;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 14px;
padding-bottom: 14px;
margin: 0px;
display: inline-block;
}
img#gnb_logo {
vertical-align:middle;
margin:0 10px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
}
<header>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<ul id="gnb_bg">
<li>
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="../images/logo.gif" height="30" alt="GNB Logo" />
</li>
</ul>
</nav>
</header>
If you add vertical-align: middle to both the a.gnb and img#gnb_logo, that will probably fix your problem.
Pay attention to the top/bottom padding on your link so that it does overflow the 50px height that you assigned to the parent container.
body {
background-color: #C8F1BA;
margin: 0px;
}
div#gnb_bg {
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-right: 10px solid black;
}
a.gnb {
background-color: #99FF33;
text-decoration: none;
font-size: 26px;
border-right: 1px solid #448811;
padding-right: 2.5%;
padding-left: 2.5%;
padding-top: 10px;
padding-bottom: 10px;
margin: 0px;
vertical-align: middle;
}
img#gnb_logo {
height: 30px;
margin: 10px;
vertical-align: middle;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="http://placehold.it/100x50" />
</div>
</nav>
First your a.gnb class should have a display-block if you want to render padding on an inline tag like a "a" tag. And your line-height must be of 22px if you want to make it fit in a 50px height container (14px + 14px padding top and bottom + 22px line-height equal 50px)
Second, to make your image alignment just add vertical-align: middle to the img#gnb_logo rule:
body {
background-color: #C8F1BA;
margin: 0px;
padding: 0px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px;
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
line-height: 22px;
display: inline-block;
}
img#gnb_logo{
height:30px;
margin:10px;
vertical-align: middle;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
You need to remove the margin.
img#gnb_logo{
height:30px;
margin:0px;
}
Check out the live demo.
body {
background-color: #C8F1BA;
margin: 0px;
}
#gnb{
padding:10px;
}
div#gnb_bg{
margin:0px;
padding-top:0px;
padding-bottom:0px;
border-right:10px solid black;
}
a.gnb{
background-color: #99FF33;
text-decoration: none;
font-size:26px;
border-right:1px solid #448811;
padding-right:2.5%;
padding-left:2.5%;
padding-top:14px;
padding-bottom:14px;
margin:0px;
}
img#gnb_logo{
height:30px;
}
nav#gnb{
text-align:center;
background-color: #99FF33;
height: 50px;
}
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<a class="gnb" href="../feedbacks/feedbacks.html">feedbacks</a>
<img id="gnb_logo" src="http://placehold.it/100x50"/>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #C8F1BA;
margin: 0px;
}
a.gnb {
text-decoration: none;
font-size: 26px;
border-right: 1px solid black;
vertical-align: middle;
padding-right: 1%;
padding-left: .2%;
padding-top: 5px;
padding-bottom: 5px;
}
img#gnb_logo {
height: 30px;
vertical-align: middle;
margin:5px 0px;
}
nav#gnb {
text-align: center;
background-color: #99FF33;
height: 40px;
}
</style>
</head>
<body>
<nav id="gnb" role="navigation" aria-label="Global Navigation">
<div id="gnb_bg">
<img id="gnb_logo" src="http://placehold.it/100x50" />
<a class="gnb" href="../feedbacks/feedbacks.html">Website</a>
</div>
</nav>
</body>
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
('Boy... I saw on search that misalign topic about the <input> wrapped on an <a> tag... LOL)
Anyway...
I'm in a bit of a pickle here... I have a bunch of divs as an inline block lead by a lone <button>, and this lone button --- no matter how much design genius I summon from myself, I can't get to align properly.
Just look at the code at the end of the post.
Notes:
The button-holder class didn't used to exist; it was just the <button><span> combo. I added it thinking I can fix it by doing negative values on the margin (to no avail).
Can anyone advise?
FULL code:
<style type="text/css">
body { margin:0; padding:0;font-size: 9pt; }
#main { margin: 0; padding: 0; width:100%; text-align:center; }
#bar {display: table; margin: 0; padding: 0; width:100%; height:45px }
[class~=banner] { font-size: 14pt;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: table-cell;
height: 45px;
vertical-align: middle;}
.cellOne { background-color:#FFC316;
color: #35549A;
width: 8%;
text-align:center;}
.cellTwo { background-color: #35549A;
color: #FFF;
padding: 0px 0px 0px 2%;
width: 68%;
text-align: left;}
.cellThree { background-color: #35549A;
color: #FFC316;
width: 12%;
text-align: left;}
#three_element {margin: 0 auto; padding:0% 18.5% 0% 18.5%; text-align:center; }
.button-holder {
width: 250px;
height: calc(250px / 1.604);
margin: -1.45% 1.5% -1.65% 1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
display:table;
border: 0px;
box-sizing:border-box;
padding:0px;
margin:0px;
background-color:#E6E7E8;
text-align:center;}
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: calc(240px / 1.604);
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
[class~=objective-edit-tile] {
width: 250px;
height: calc(250px / 1.604);
margin: 1.5%;
display:inline-block;
box-sizing:border-box;
padding:5px;}
[class~=objective-edit-tile] div {
font-family:"Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;
box-sizing:border-box;
color:#FFFFFF;
margin:0px;
display:inline-block;
}
.tr-1-square-red div {background-color: #BE1E2D;}
.tr-1-square-yellow div {background-color: #E39F15;}
.tr-1-square-green div {background-color:#266733;}
.text-block-name {
border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
border:#FFFFFF 1px solid;
width: 100%;
height: 66.7%;
font-size: 180%;
padding-top:17%;
}
.text-block-days {
border-radius: 0px 0px 0px 25px;
-moz-border-radius: 0px 0px 0px 25px;
-webkit-border-radius: 0px 0px 0px 25px;
border-top: #FFF 1px solid;
font-weight:700;
width: 34%;
height: 33%;
padding-top:6.5%;}
.text-block-next-step {
border-radius: 0px 0px 25px 0px;
-moz-border-radius: 0px 0px 25px 0px;
-webkit-border-radius: 0px 0px 25px 0px;
border-top: #FFF 1px solid;
font-size:9px;
width: 64%;
height: 33%;
padding:8% 2px 0px 1px;}
</style>
</head>
<body>
<div id="main">
<div id="bar">
<div class="banner cellOne">Pipeline</div>
<div class="banner cellTwo"> <Title> </div>
<div class="banner cellThree">PracticePipeline.com</div>
</div>
<div role="content" id="three_element">
<div class="button-holder">
<button id="addbutton" name="buttton">
<span class = "add">+</span>
</button>
</div>
<div class = "tr-1-square-red objective-edit-tile" id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-yellow objective-edit-tile " id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>
</div>
<div class = "tr-1-square-green objective-edit-tile " id="tile-n">
<div class = "text-block-name" >Stark Indust.. </div>
<div class = "text-block-days" > 7 Days</div>
<div class = "text-block-next-step" >Invite Stark Industri.. </div>
</div>
</div>
</div>
</body>
I dont know if this is going to help much but it worked when i tried it.
The tag padding-bottom keep making a little bit higher if you want it to align better.
#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: 140px;
vertical-align: middle;
margin: 0px;
padding: 0px;
box-sizing: border-box;
padding-bottom: 7%
}
I actually solved my own problem:
The problem was just that I was over analyzing things. Basic lay-outing worked:
.button-holder {
margin:1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}
#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
width: 240px;
height: calc(250px / 1.604 - 10px);
border: 0px;
margin:0px;
padding: 0px;
background-color:#E6E7E8;
box-sizing:border-box;
text-align:center;
}
#addbutton .add {
font-size: 97px;
color: #384D94;
}
The slider at the top of my page does show up perfect in Chrome, but not in Firefox. How can I fix this problem?
I already uploaded a test of the page, in case you would like to have a look.
Test of page: http://www.s4ea.org/new/index.html
HTML:
<header class="header2">
<header class="second">
<div class="top_slider">
<div id="slider" class="aslider" data-duration="10" data-hide-controls>
<div class="aslide" data-duration="4" data-audio="assets/audio/Acoustic-Josh-10248_hifi.mp3" data-audio-loop>
<img src="https://lh6.googleusercontent.com/-kKIX7Bbp10U/UwlakWBTzII/AAAAAAAA1iU/FoYSNulL4Oo/s720/IMG_0003.JPG" />
</div>
<div class="aslide" data-duration="5" data-audio="assets/audio/Country_-Adrien_G-8614_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-yRjbRGF3V5Q/UwlauwWKw-I/AAAAAAAA1jE/8EiHF1C5bvc/s720/IMG_0009.JPG" />
</div>
<div class="aslide" data-duration="6" data-audio="assets/audio/Driving_-SpoonZ-9705_hifi.mp3">
<img src="https://lh4.googleusercontent.com/-I0BvWvxsYos/Uwla55SXfeI/AAAAAAAA1j8/nH4M26dUtdw/s720/IMG_0016.JPG" />
</div>
<div class="aslide" data-duration="7" data-audio="assets/audio/I_Wouldn-duh-8326_hifi.mp3">
<img src="https://lh3.googleusercontent.com/-1OPZWOsQxTQ/UwlbHV7w9tI/AAAAAAAA1k0/FHocKwEtNuQ/s720/IMG_0023.JPG" />
</div>
</div>
</div>
<div class="logo">
<img src="http://www.s4ea.org/images/logor.jpg" width="100%" height="auto">
</div>
<div class="right">
<img src="http://www.s4ea.org/images/register3.jpg" height="100%" width="auto" />
</div>
</header>
</header>
CSS:
.ul {
width:50%;
list-style:none;
display:inline;
background-color:#FFF;
}
.ul li {
display: inline;
background-color:#FFF;
}
.second .top_slider {
width:40%;
background-color: #FFF;
float:left;
}
.second .top_slider .aslide {
display: none;
}
.second .top_slider .aslide img {
max-width: 100%;
height:auto;
}
.second .top_slider #slider {
width: 100%;
height: 600px;
}
.second .top_slider .aslide .text {
width: 200px;
margin: 0 auto;
color: #f8f8f8;
text-shadow: 0 0 2px #000;
font-weight: bold;
font-size: 36px;
width: 100%;
text-align: center;
position: absolute;
bottom: 30px;
font-family: sans-serif;
}
.second .logo {
width: 26.7%;
background-color: #FFF;
float:left;
padding-left:3.3%;
}
.second .right {
width:26.7%;
background-color: #FFF;
float:left;
overflow:hidden;
font-size:1em;
height:100%;
padding:0% 0% 0% 3.3%;
}
.second .right img {
margin:0px 0px 0px 0px;
width:100%;
height:auto;
}
.second .right ul li{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul {
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
.second .right ul li img{
list-style:none;
line-height:0px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
height: 20%;
padding-top:5%;
width:auto;
}
A couple of issues
.second .top_slider .aslide img {
width: 100%;
height:auto;
}
.mainheader nav {
background-color: #FFFFFF;
float: left;
height: 10%;
width: 100%;
}
it seems the width of the images are not correct since you did not set a width and your nav just needed a float clear. I cleared it by making it a float but there are many other ways to do this