How can I fix this css? - css

I am trying to create a website but these images I have are not working, they should be under the title, for example, the alcohol photo should be under the alcohol title and nervous system photo should be under the nervous system title.
Here is a screenshot of how it looks like at the moment:
Here is my code at the moment:
HTML: http://hastebin.com/utafabumof.xml
CSS: http://hastebin.com/arefipaguy.css
Thank you for helping if you can. it'd mean a lot.


The images should be inside the same div, for example alcohol image should be in
<div class="science">
<div class="alco">Image for Alco goes Here</div>
<div class="nersys">Image for Nersys goes Here</div>
</div>


Try this.
html file:
<!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>Science - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/science.css"/>
</head>
<body>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="about">English</li>
<li class="news">Hosptality & Catering</li>
<li class="contact">Leisure & Tourism</li>
<li class="contact">BTEC Computing</li>
<li class="contact">BTEC Business</li>
<li class="contact">CV</li>
</ul>
</div>
</header>
<div class="science">
<center><h2>Science:</h2></center>
</div>
<div class="center-block">
<div class="alco">
<h4>Alcohol:</h4>
<div class="alcoimage"><img src="images/Science/alcohol.jpg" width="400" height="357" alt=""/></div>
</div>
<div class="nersys">
<h4>Nervous System:</h4>
<div class="alcoimage"><img src="images/Science/NervousSystem.jpg" width="291" height="291" class="nerimage" /></div>
</div>
</div>
<div id="wrapper">
<div id="footer">
<p><center>Contact Me:</center></p>
<p><center>11lanjac#abbeyfield.wilts.sch.uk</center></p>
</div>
</div>
</body>
</html>
And Css file:
....
.science {
padding-top: 30px;
}
.center-block{
text-align: center;
}
.center-block .alco {
display: inline-block;
vertical-align: top;
text-align: center;
padding-right:150px;
}
.center-block .nersys{
display: inline-block;
text-align: center;
padding-left:150px;
}
.alcoimage {
padding-top: 60px;
}
#footer {
background:#40ea3c;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
color: white;
}

Related

bootstrap container-fluid shrinks when contents in a row-cell is not filled enough

The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??

I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.

Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot

floating divisions of equal size are different size when aligned on top of each other

i am trying to make two divisions in html equal in width. they should remain the same width, when they fit into one row, but also when they are aligned below each other.
The example is here: sample
When the two boxes fit into one row, it looks good:
a busy cat http://xn--audiobibelne-olb.wowogiengen.de/div_in_one_row.png
but if they float, it seems like my second div is smaller than the first
two muppets http://xn--audiobibelne-olb.wowogiengen.de/div_in_one_column.png
this is the complete code of the page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {margin:auto;}
.container-inner {position:relative;left:-50%;float:right}
.container-inner ul {position:relative;left:50%}
.container-inner li {display:inline;line-height:normal; }
.container-inner li div {display: table-row;}
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
Das Neue Testament
<img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div style="">
<p>Evangelien & Apostel</p>
<p>Briefe</p>
<p>Offenbarung</p>
</div>
</div>
</li>
<li style="display: inline">
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
Das Alte Testament
<img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div style="">
<p>Ge­schichts­büc­her</p>
<p>Poetische Bücher</p>
<p>Prophetische Bücher</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Edit at 2016-06-03 16:03 GMT+2:
The only problem with my code sample is, that the orange box seems to be a little bit smaller than the green one when they are stacked like in the second picture.
I cant find a way to make both boxes equal in size, say 15em width and 8em height.

I removed this line
.container-inner li div {display: table-row;}
and updated this one:
.container-inner li {display:inline-block;line-height:normal;float:left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {margin:auto;}
.container-inner {position:relative;left:-50%;float:right}
.container-inner ul {position:relative;left:50%}
.container-inner li {display:inline-block;line-height:normal;float:left; }
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
Das Neue Testament
<img alt="0_AudioBibel_NT_zip.zip" src="assets/zip.png"/>
</div>
<div style="">
<p>Evangelien & Apostel</p>
<p>Briefe</p>
<p>Offenbarung</p>
</div>
</div>
</li>
<li style="display: inline">
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
Das Alte Testament
<img alt="0_AudioBibel_AT_zip.zip" src="assets/zip.png"/>
</div>
<div style="">
<p>Ge­schichts­büc­her</p>
<p>Poetische Bücher</p>
<p>Prophetische Bücher</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

my stylesheet looks now like that:
.container
{
margin:auto;
}
.container-inner
{
position:relative;
left:-50%;
float:right
}
.container-inner ul
{
position:relative;
left:50%
}
.container-inner li
{
display:inline-block;
line-height:normal;
float:left;
margin-right: 1em;
}
.container-inner a,.container-inner a:visited
{
color:#525252;text-decoration:none
}
.container-inner a:hover
{
text-decoration:underline
}
.container-inner li:last-child
{
border-right:none;
}

hello use display inline block for centering 2 divs with the same width i make it 50% of parent div anyway u can set any size u want and set vertical align to top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.container {margin:auto;}
.container-inner ul {font-size: 0; padding: 0; text-align:center; }
.container-inner li {
display:inline-block;
font-size: 13px;
line-height:normal;
text-align: left;
width: 50%;
vertical-align: top;
}
.container-inner a,.container-inner a:visited {color:#525252;text-decoration:none}
.container-inner a:hover {text-decoration:underline}
.container-inner li:last-child {border-right:none}
.FarbeNT {background: rgba(255,128,0,0.5)}
.FarbeAT {background: rgba(0,255,0,0.5)}
</style>
</head>
<body>
<div class="container">
<div class="container-inner">
<ul>
<li>
<div class="FarbeAT">
<div style="background-color: rgba(0,0,0, 0.15);">
Das Neue Testament
<img alt="0_AudioBibel_NT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div style="">
<p>Evangelien & Apostel</p>
<p>Briefe</p>
<p>Offenbarung</p>
</div>
</div>
</li>
<li>
<div class="FarbeNT">
<div style="background-color: rgba(0,0,0, 0.15)">
Das Alte Testament
<img alt="0_AudioBibel_AT_zip.zip" src="audiobibelneu/assets/zip.png"/>
</div>
<div>
<p>Ge­schichts­büc­her</p>
<p>Poetische Bücher</p>
<p>Prophetische Bücher</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

Using Full-Height Columns in Zurb Foundation

I have an app that I am trying to build that uses three-columns. Currently, I have the following code:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li>Google Plus</li>
<li>LinkedIn</li>
<li>Email Us</li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li>Overview</li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
My problem is, my columns are not taking up the full-height of the screen. I thought that was the purpose of the data-equalizer attribute. Unfortunately, it looks like I was wrong. What am I doing wrong?

I've been using vh units to get this to work:
div.full-height {
min-height:100vh;
}
For our particular project it meets our requirements, which you can check for your project at Can I Use

According to the foundation docs you're supposed to use data-equalizer on the parent and then data-equalizer-watch on all the children. http://foundation.zurb.com/docs/components/equalizer.html
<div class="row" data-equalizer>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
<div class="large-6 columns panel" data-equalizer-watch>
...
</div>
</div>
And then don't forget to add $(document).foundation();
Edit
I misunderstood what you wanted initially. Basically you need to add several css rules of height: 100%; so that both the parents and children can expand to 100% of the screen height.
Here is an updated JSfiddle: http://jsfiddle.net/NateW/e4uqw4yq/

margin is not set for a section tag

i am trying to set the margin-top for a section tag of my page. but when i set margin top for a particular section tag then the header tag also comes down with that. Please tell me the correct way to set the margin-top for a section tag here is my css. Id container is id of a section tag on which i am trying to set margin
body{
background-color:#F7F7F7;
}
#logo
{
background-image:url('../Images/LogoEB.jpg');
background-repeat:no-repeat;
width:128px;
height:150px;
}
#menu
{
float:left;
width:92%
}
nav ul
{
float:right;
list-style:none;
padding:0;
margin-right:10%;
}
nav li
{
float:left;
margin:0 1em;
color:#605C5D;
font-size:20px;
}
#login
{
float:right;
margin-right:4%;
width:auto;
margin-top:-4%;
}
#container
{
position: relative;
margin-top:50px;
background-color:#7F00FF;
}
my html
<!DOCTYPE HTML>
<html>
<title>Online Education</title>
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width,intial-scale=1.0"/>
<link rel="stylesheet" href="Css/reset.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen"/>
<script src="Js/modernizr.js"></script>
<script src="Js/respond.min.js"></script>
</head>
<body>
<div>
<header>
<div id="menu">
<h1>
<div id="logo">
</div>
<nav>
<ul>
<li>
HOW IT WORKS
</li>
<li>
COURSES
</li>
<li>
SCHOOLS
</li>
<li>
REGISTER
</li>
</ul>
</nav>
</h1>
</div>
<div id="login">
<input type="button" value="login" id="loginbtn"/>
</div>
</header>
</div>
<div id="container">
<section >
<div >
</div>
</section>
</div>
</body>
<html>

add this css for your container...remove other css of your container just paste it
background-color: #7F00FF;
float: left;
margin-top: 50px;
position: relative;

two scrollable columns with bootstrap

I try to make a layout with two scrollable columns (with bootstrap 2.2). Now it seems to be working if i remove the "!doctype html" tag so i assume something with my layout is not according to the specification. Can somebody tell me what i did wrong or how i could easier find my error?
<!doctype html> <!-- scrolling only works without the doctype -->
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" media="screen" href="bootstrap.min.css">
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br >menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu </br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br> menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>menu< /br>menu</br>menu</br>menu</br>menu</br>menu</br>menu</br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br> Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br >Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</ br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content< /br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content</br>Content </br>Content</br>Content</br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

correct the many, many </br> </br > etc tags
<html xmlns="http://www.w3.org/1999/html"> should be <html xmlns="http://www.w3.org/1999/xhtml">
add a <title>
remove the stray </div> at the bottom
Now you have a html5 doc that validates. To get the scrollables to work, you must give either body or .scrollable a height. You cannot have a scrollable defined as 100% of 100%.
if you set
.scrollable {
height: 500px;
overflow: auto;
}
it works, OR - set the height dynamically in javascript :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
note : the code just simulates the 100%->100%, top of the scrollables is still behind the navbar, and you must implement some code to take care of window resizing.
cleaned markup :
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 500px;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
<!-- or :
<script type="text/javascript">
$(document).ready(function() {
var h=$(window).height();
$('.scrollable').height(h+'px');
});
</script>
-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="#">Title</a>
<ul id="myTab" class="nav nav-tabs">
<li>Serials</li>
<li>Parameter</li>
<li class="active">Log</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container max-height no-overflow">
<div class="row max-height">
<div class="tabbable tabs-left">
<div class="tab-pane active" id="log">
<div class="span2 scrollable">
<div class="pad40-top">
First menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu <br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br> menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>menu<br>main
</div>
</div>
<div class="span10 scrollable">
<div class="pad40-top">
First Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br> Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content <br>Content<br>Content<br>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Resources