Being a html layman, I am stuck with creating a table properly.
I have created a minimal html and css to show you my problem.
As can be seen here, there is a huge gape between Heading and content (possibly due to cellpadding tag in table; but if I remove them, the Content # coloumns are too close). So, how can adjust the space properly?
My 2nd problem is about positioning of the td. I would like to have this three column(Content 1,2 & 3) to be equally spaced to span the content region, with space between them. Not like quenched to left side as it is now.
How can I do that?
The minimal code is:
trial.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trial</title>
<link rel="stylesheet" href="trial.css" />
</head>
<body>
<div id="content">
<h2>Heading</h2>
<table cellpadding="05" cellspacing="10" border="0">
<tr style="vertical-align:top">
<td style="vertical-align:text-top">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</td>
<td>
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</td>
<td>
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</td>
</tr>
</table>
</div>
</body>
</html>
and trial.css:
body {
font : 100% "Times New Roman", Times, serif;
color : #0066cc;
background : #184470;
margin : 0;
}
#content {
background : #e4ecef;
padding : 0.0em 2.5em;
width : 62%;
float : right;
margin-right : 17%;
margin-left : 30%;
}
h2{
font-size : 200%;
color : #0066cc;
}
h3{
font-size : 125%;
color : #0066cc;
}
NB From net, possibly I want to do a div, and not table. But I am confused. Is this NOT the proper usage of table? Kindly advice.
I think you're probably better off using divs rather than a table. Updated your HTML slightly:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Trial</title>
<link rel="stylesheet" href="trial.css" />
</head>
<body>
<div id="content">
<h2>Heading</h2>
<div class="row">
<div class="column">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</div>
<div class="column">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</div>
<div class="column">
<h3>Content 1</h3>
<ol>
<li>inp 1</li>
</ol>
</div>
</div>
</div>
</body>
</html>
Then your CSS:
.row { clear:both }
.column { display:inline-block; width:33% }
Setting display:inline-block will make the divs display next to each other and I'm setting a width to be 1/3 of the total container. There's a good intro into this and other layout info here http://learnlayout.com/inline-block.html
Related
When trying to put my HTML into a grid format the elements do not change to the correct postion set and do not move at all and was wondering if there was any fix to this. I am using firefox and am using an server to edit the code and host the website. As well as this it comes up with a cautio that grid-template-area: is an unknown propiety if this makes any diffrence.
.diaryNav {
grid-area: diaryNav;
margin-left: 0px;
background-color: #3F3F3F;
padding: 30px;
margin-left: 35px;
margin-right: 880px;
}
.banner {
grid-area: banner;
}
.timeTable {
grid-area: timeTable;
margin-left: 0px;
}
.diaryEntry {
grid-area: diaryEntry;
}
.extraWork {
background-color: #66fcf1;
color: black;
margin-left: 0px;
grid-area: extraWork;
}
.refrences {
grid-area: refrences;
margin-left: 0px;
}
.pageNav {
gridArea: pageNav;
margin-left: 0px;
}
#wrapper {
display: grid;
grid-gap: 0;
grid-template-areas: "banner" "timeTable" "pageNav" "diaryNav" "diaryEntry" "extraWork" "refrences" "footer";
}
<!doctype html><!--HTML5 doctype declaration -->
<html lang="en">
<!--default language of the document content -->
<head>
<meta charset="utf-8">
<!--character encoding for the document (Unicode) -->
<title>Brandon's Learning Journal</title>
<!--web page title -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="normal">
<link href="css/stylesheet.css" rel="stylesheet /">
</head>
<body>
<!--Markup all web page content inside the 'body' tags -->
<div id="wrapper">
<a id="top"></a>
<!--The 'wrapper' contains all the page content-->
<header class=banner>
<!--The main heading for the page -->
<h1>Welcome to my Learning journal</h1>
<h2>
Feel free to look around and check out the other pages avaliable
</h2>
</header>
<aside class=pageNav>
<nav class="menu">
<!--The primary navigation for the page -->
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact me</li>
</ul>
</nav>
</aside>
<main>
<!--The main page content -->
<aside class=timeTable>
<h2>Weekly Posts</h2>
<table class=dates border="1">
<tr>
<th>Day/time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10am</td>
<td></td>
<td>CI435 lecture</td>
</tr>
<tr>
<td>10-11am</td>
<td>CI401 lecture</td>
<td>CI435 lab </td>
</tr>
</table>
</aside>
<aside class=diaryNav>
<p class=menu>Go to week one</p>
<p class=menu>Go to week two</p>
<p class=menu>Go to week three</p>
<p class=menu>Go to week four</p>
</aside>
<article class=diaryEntry>
<diary>
<ul>
<li>
<a id="w1"></a>
<h3>Week 1: ...</h3>
<p>Hello </p>
<figure>
<img src="images/ssww1.png" alt=" " />
<figcaption>Week 1 of the website<br />
<small>Screenshot Brandon Bridges</small>
</figcaption>
</figure>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w2"></a>
<h3>Week 2: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w3"></a>
<h3>Week 3: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
</ul>
</diary>
</article>
<aside class=extraWork>
<h2>My own work outside of lessons</h2>
<p>Some reference here to my own reading and research, explaining what I have done and what I have learned from it.</p>
</aside>
<aside class=refrences>
<h2>References</h2>
<ol>
<li>
<blockquote>helo???</blockquote>
</li>
<li>...</li>
</ol>
<p class=menu>Go to top</p>
</aside>
</main>
<!--Close main page content -->
<footer>
<!--Footer content -->
<small>© 2019, author.</small>
</footer>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<!--Close 'html' -->
After fixing what #s.kuznetsov has described you should mind adding a class or an id to you main tag and then apply this css to it instead of the wrapper or however you prefer
#main{
display: grid;
grid-gap: 0;
grid-template-areas: "timeTable diaryNav"
"diaryEntry extraWork"
"refrences refrences"
}
When using grid-area and grid-template-areas you are implicitly arranging your content in a table-like form, so you specify which area goes into which cell.
The first thing I can notice is that you have the doctype in lowercase, change it to , the next is the normalize, the rel says "normal" which is wrong because it is a css file and it should say "stylesheet". The next thing that is the problem is that it says in the stylesheet.css file in the rel it says "stylesheet /", remove the space and the /. With that it should work
The problem with your code is the missing double quotes when declaring the class in html elements. You pointed out as:
<aside class=diaryNav>
Correct like this:
<aside class="diaryNav">
And you have many items with this error!
Also, there is one error in the css, when specifying rule grid-area: pageNav to .pageNav. You indicated like this:
gridArea: pageNav;
Correct like this:
grid-area: pageNav;
And write doctype in uppercase. Like this:
<!DOCTYPE html>
.diaryNav {
grid-area: diaryNav;
margin-left: 0px;
background-color: #3F3F3F;
padding: 30px;
margin-left: 35px;
margin-right: 880px;
}
.banner {
grid-area: banner;
}
.timeTable {
grid-area: timeTable;
margin-left: 0px;
}
.diaryEntry {
grid-area: diaryEntry;
}
.extraWork {
background-color: #66fcf1;
color: black;
margin-left: 0px;
grid-area: extraWork;
}
.refrences {
grid-area: refrences;
margin-left: 0px;
}
.pageNav {
grid-area: pageNav;
margin-left: 0px;
}
#wrapper {
display: grid;
grid-gap: 0;
grid-template-areas: "banner" "timeTable" "pageNav" "diaryNav" "diaryEntry" "extraWork" "refrences" "footer";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Brandon's Learning Journal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="normal">
<link href="css/stylesheet.css" rel="stylesheet /">
</head>
<body>
<div id="wrapper">
<a id="top"></a>
<header class="banner">
<h1>Welcome to my Learning journal</h1>
<h2>
Feel free to look around and check out the other pages avaliable
</h2>
</header>
<aside class="pageNav">
<nav class="menu">
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact me</li>
</ul>
</nav>
</aside>
<main>
<aside class="timeTable">
<h2>Weekly Posts</h2>
<table class="dates" border="1">
<tr>
<th>Day/time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10am</td>
<td></td>
<td>CI435 lecture</td>
</tr>
<tr>
<td>10-11am</td>
<td>CI401 lecture</td>
<td>CI435 lab </td>
</tr>
</table>
</aside>
<aside class="diaryNav">
<p class="menu">Go to week one</p>
<p class="menu">Go to week two</p>
<p class="menu">Go to week three</p>
<p class="menu">Go to week four</p>
</aside>
<article class="diaryEntry">
<diary>
<ul>
<li>
<a id="w1"></a>
<h3>Week 1: ...</h3>
<p>Hello </p>
<figure>
<img src="images/ssww1.png" alt=" " />
<figcaption>Week 1 of the website<br />
<small>Screenshot Brandon Bridges</small>
</figcaption>
</figure>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w2"></a>
<h3>Week 2: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w3"></a>
<h3>Week 3: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
</ul>
</diary>
</article>
<aside class="extraWork">
<h2>My own work outside of lessons</h2>
<p>Some reference here to my own reading and research, explaining what I have done and what I have learned from it.</p>
</aside>
<aside class="refrences">
<h2>References</h2>
<ol>
<li>
<blockquote>helo???</blockquote>
</li>
<li>...</li>
</ol>
<p class="menu">Go to top</p>
</aside>
</main>
<footer>
<small>© 2019, author.</small>
</footer>
</div>
</body>
</html>
I have a picture that I would like to align relative to the right-hand side margin (i.e. 10 px). I have tried to define a fixed top/left value : it works perfectly well if I use my table in portrait mode, however, but if it is used in landscape mode, it gives an "ugly" result.
THis is my current HTML code :
<!DOCTYPE html>
<html>
<head>
<title>Domoos mobile </title>
<meta http-equiv="refresh" content="600">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/>
<!--Using jQuery and jQuery UI for display effects-->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-1.12.0/jquery-ui.min.js"></script>
<!--Using the hamburger menu display code-->
<script src="scripts/hamburger.js"></script>
<!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet-->
<link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/>
<link rel="stylesheet" type="text/css" href="css/mystyle_hamburger.css" />
<script type="text/javascript" src="scripts/date_time.js"></script>
<script>
// Global variables
var AutoScript = false;
var ValueCheck = -1;
var ControleurUpdate = "";
var ThermostatManualUpdate = false;
</script>
</head>
<body>
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav>
<ul>
<!--<li><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">menuitem 1</li> -->
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!--The content of the site-->
<div id="content">
<div id="logo" style="position:relative; width:50%; height:50%;">
<img src="assets/icons/logo_Domoos_lab.png" alt ="" style="width:75px;height:54px;">
</div>
<div id="tag_domoos_title">
<p>Domoos mobile</p>
</div>
<div id="tag_sunrise_sunset">
<p><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">↑ 06:25 ↓ 20:33</p>
</div>
<div id="date">
<script type="text/javascript">window.onload = getDate('date');</script>
</div>
<div id="time">
<script type="text/javascript">window.onload = getTime('time');</script>
</div>
<div id="current_weather_conditions">
<p>
<b>Conditions météorologiques actuelles (19.08.2016 19:15)</b>:
Vent 4 km/h SO Humidité 74% Pression 1010.9 hPa </p>
</div>
<div id="tag_weather_condition">
<p>Eclaircies <b>22°C</b></p>
</div>
<div id="meteo_icon" style="position:absolute;">
<img src="assets/meteo_icons/neige-forte-big.png" alt="" style="width:40px;height:40px;">
</div>
</p>
</div>
</div>
</body>
</html>
This is my current CSS :
#meteo_icon img{
position: relative;
top: -130px;
left: 270px;
}
Is there a "cleaner" means to achieve this ? Thanks a lot for reading me.
You need an absolute positioning with a right value, inside a relative positioned container.
#meteo_icon {
position: relative;
}
#meteo_icon img {
position: absolute;
right: 0;
}
I'm trying to view text under the navBAR, but it just appears straight next to the navBAR buttons. I've tried some margin properties in css, but nothing seemed to work.
Thanks in advance!!
<html>
<title>title</title>
<head>
<img src="img/logo.png">
<meta charset="uft-8">
<link rel="stylesheet" href="css/style.css">
<style>
.narBAR{margin:0 auto; width:1080px;}
.navBAR ul {padding:0px;}
.navBAR ul li {float:left;}
</style>
</head>
<body>
<body background="untitled.png">
<div class="navBAR">
<ul>
<li></li>
<ul>
<li></li>
<li></li>
</ul>
<li></li>
<li></li>
</ul>
</div>
<div class="search">
<form action="file:///C:/Users/Amroo/Desktop/new%201.html/search.php">
<input type="text" name="search" placeholder="Search......"/>
<input type="submit" value="Search"/>
</form>
</div>
<h1>text</h1>
<img src="blog/img/mars.jpeg">
<h3>text</h3>
</body>
Your CSS has a wrong class .narBAR:
.narBAR{margin:0 auto; width:1080px;}
Also there are errors in your code. You can't have <img> in your <head> so place this <img src="img/logo.png"> in your <body>.
And use css background instead of <body background="untitled.png">.
For example:
body{
background-image: url(untitled.png);
}
Although your code should work fine you can get described issue due to images so set overflow: hidden for .navBAR
Something like this https://jsfiddle.net/kdmvxrmx/
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;
}
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/