THANKS FOR ALL THE HELP GUYS, HAVE FIXED IT!! :D
Just wondering why my code wont work? Under the navigation bar my paragraph wont show? Also how would i put my navigation bar all on one line? Sorry if this is really dumb, im new to this!
New updated code that sill wont show the paragraph at the bottom.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title> Home </title>
</head>
<body>
<img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%">
<h1> Home </h1>
<nav>
<ul>
<li>Home</li>
<li>Curriculum vitae</li>
<li>Literature review</li>
<li>Video</li>
</ul>
</nav>
<p>My name is Jack Hay and this is the first proper website that i have designed. My aim is to show my CV, some coursework that i have done (Literature review), a short self made video and to learn how to use a stylesheet efficiently</p>
</body>
</html>
css
h1{
font-family:"calibri", Times, Serif;
colour: White;
font-size:50px ;
padding:0.1px;
margin:5
}
ul
{
list-style-type: none;
}
ul li
{
display: block;
width: 25%
float: left
}
Start by replacing the h2 tags with li tags. It's not valid html.
To put the nav in one line you would do something like this in your css:
ul
{
list-style-type: none;
}
ul li
{
display: inline-block;
}
... your head and body tags at the top were messed up.
<!doctype html>
<html>
<head>
<title> Curriculum vitae </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<img src="Andora ski trip.JPG" alt="View from flat in Andora" height="400" width="100%">
<h1> Curriculum vitae </h1>
<nav>
<ul>
<li>Home</li>
<li>Curriculum vitae</li>
<li>Literature review</li>
<li>Video</li>
</ul>
</nav>
<p>My name is Jack and this is the first proper website that i have designed. My aim is to show my CV, some coursework that i have done (Literature review), a short self made video and to learn how to use a stylesheet efficiently</p>
</body>
</html>
From the code you have posted there, the paragraph should be showing, it may be that your css is moving the paragraph off screen and/or setting the text to your background colour.
You should also move the <h1> and <img> tags out of the head and put them in the body. The head tags are for giving the browser information, not for containing content for the user.
To display you nav all in one line, you will need to change your nav tags to li (not h2) and then in your css:
ul
{
list-style-type: none;
}
ul li
{
display: block;
width: 25%
float: left
}
Related
Hey I have this problem when trying to make simple grids. I have an unordered list with four list elements in it. Using grid-template-columns and grid-template-rows I set four columns and one row but in the browser its showing two columns and two rows which makes no sense to me.
If I assign all the list items
the row 1/2
as shown in comment below in the CSS the problem is fixed
but this seems like an unnecessary line of code from what I know. If someone would help explain the mechanics of what is happening so I will stop running into this problem it would be great. Either what I am missing or why I need to specify the row. It's just nagging in the back of my head.
* {
display: block;
margin: 0;
padding: 0;
}
head {
display: none;
}
body {
color: white;
background: black;
}
ul {
background: white;
width: max-content;
display: grid;
grid-template-columns: repeat(4, max-content);
grid-template-rows: max-content;
}
li {
list-style: none;
margin: 3px;
/* grid-row: 1/2; */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul id="gallery">
<li><img src="images/fireworksTHBN.jpg" alt="Fireworks>"</li>
<li><img src="images/coffeeTHBN.jpg" alt="Fireworks>"</li>
<li><img src="images/roseTHBN.jpg" alt="Fireworks>"</li>
<li><img src="images/bigbenTHBN.jpg" alt="Fireworks>"</li>
</ul>
</body>
</html>
You have one very simple problem in your syntax
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/fireworksTHBN.jpg" alt="Fireworks>"
</a>
</li>
Your <img> tag is not properly closed
I'm pretty sure this is what you're looking for and then it will work as expected, otherwise it just takes the <a> as another element which explains the 4 items in the grid.
<li>
<a href="images/fireworks.jpg" title="A fireworks display">
<img src="images/fireworksTHBN.jpg" alt="Fireworks">
</a>
</li>
I'm trying to align the text horizontally in a ordered list using CSS. I want the list words paris prelude to be aligned next to each other horizontally instead of stacking up on each other. I want the words in the list paris prelude to not stack up like this:
1.Paris
Prelude
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>007 Nightfire | Missions</title>
</head>
<style type>
h1 {
font-size:45px;
text-align:center;
}
body {
background-color:#F0F8FF;
}
.list {
border-color:coral;
margin-left:-50%;
position:relative;
bottom:193px;
display:inline;
}
div {
border:2px double;
border-color:#2F4F4F;
padding:180px;
margin-left:32%;
margin-right:32%;
}
</style>
<h1><u>Missions</h1></u>
<body>
<hr>
<div class="div">
<ol class="list">
<ol>
<li>Paris Prelude</li>
</ol>
</div>
</body>
</html>
Try giving a width of more than 85px
Use white-space:nowrap; inside your style for .list
Additionally - as well as it is not having a negative impact (at least at the moment) - remove the second opening <ol> tag.
Open as much as you close.
Consider the following problem: You want to center a menu, which will change it's content( For example after pressing a button, the content of the first button is to set it from "Hello" to "Greetings, user!" Or something along those lines. The important thing is that the width of the elements will be a variable.
Suppose that you also want to center the contents of your element. An approach I found is basically this:
.centerMe1 {
margin-right: auto ;
margin-left: auto ;
max-width: 500px;
}
This works pretty nicely, except I can't use it in this case, since I don't know the width of the element. I tried to use float:left, because it sets the width of the parent to be equal to the width of it's children, but it didn't work. Basically the width was set correctly, but the element wasn't centered.
This is the second class:
.centerMe2 {
margin-right: auto ;
float: left;
margin-left: auto ;
}
And the entire source code(to make the testing easier)
<!DOCTYPE html>
<html>
<head>
<title>Center Error</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery.js"></script>
<style type="text/css">
.centerMe1 {
margin-right: auto ;
margin-left: auto ;
max-width:500px;
}
.centerMe2 {
margin-right: auto ;
float: left;
margin-left: auto ;
}
</style>
</head>
<body>
<div class="row-fluid">
<div class="span12">
<ul class="nav nav-pills centerMe1">
<li class="active">adsadw er sdfw </li>
<li>QQQQQQQQQQQQQ</li>
<li>some other random gibberish</li>
</ul>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
If you make the ul a block element, so it will take up the full width, you can set the li to display:inline-block. Now that the li item's are inline block they can be centered with text-align:center;
ul {
display:block;
text-align:center;
}
li {
display:inline-block;
}
fiddle:
http://jsfiddle.net/CZ9pX/1/
you just have to give
text-align:center;
to the outer container,dont use float. use display:block.
div{ text-align:center;display:block}
div span{font-size:12px;}
This will make span appear in the middle.
This is my link:
<div id="yabnetwork">
Bu site bir <a target="_blank" href="http://yusufalibozkir.com" title="Yusuf Ali Bozkir Network <br/>Tel:.......... <br/>info#yusufalibozkir.com">YAB Network</a> urunudur.
</div>
My CSS styles for this div:
#yabnetwork{
font-size:15px;
text-align:right;
}
#yabnetwork a{
color:red;
}
Why are my links not red? I can't change them.
The first part of the a-tag seems to miss a closing bracket and a quote-mark.:
Bu site bir <a target="_blank" href="http://yusufalibozkir.com" title="Yusuf Ali Bozkir Network" > <br/>Tel:.......... <br/>info#yusufalibozkir.com">YAB Network</a> urunudur.
Two recommendations are to start using a text-editor with color-markup and run your code in the html-validator:
http://validator.w3.org/
It is red! If tags are closed properly and attributes ended with " as they should.
<html>
<head>
<title>link example</title>
<style type="text/css">
#yabnetwork a{
color:red;
}
</style>
</head>
<body>
<div>
<div id="yabnetwork">
Bu site bir <a target="_blank" href="http://yusufalibozkir.com" title="Yusuf Ali Bozkir Network"> <br/>Tel:.......... <br/>info#yusufalibozkir.com">YAB Network</a> urunudur.
</div>
</div>
</body>
</html>
Maybe you override the CSS rule somewhere? If yes, you might try !important as well:
#yabnetwork a{
color:red !important;
}
Try it this way:
a:link{
color:#00CC66;
text-decoration: none
}
a:visited{
color:#ff0000;
text-decoration: none
}
a:hover{color:#f00000;
text-decoration: none
}
a:active{color:#f00000;
text-decoration: none
}
Links can have different states:
a:link --> default
a:visited --> if the user already visited this page
a:hover --> if the mouse cursor is over the link
a:active --> if the link represents the page currently displayed
check this:
#yabnetwork a{
color:red !important;
}
I have created a top bar and a bottom bar for my website's index. I have isolated both of them in two files, the header.php, which controls the top bar and the footer.php, which controls the bottom bar.
In the index there is no problem, but if I create a new page like about.php, and I include the two php files, the top and bottom bar are moved to the right by 10px (or something like that).
In this case the page is larger, because there is this tiny blank space to the left, before the beginning of the two bars.
Here are the two files:
Header.php
<style>
.blue { background-color: #039; width: 100%; height: 15%; position: absolute; top: 0px; }
html, body { width: 650px; background-color:#F5F5F5;}
</style>
<div class="blue">
<h1 style="text-align: center; color:#FFFFCC ;font-family:"Times New Roman",Times,serif;">My Website</h1>
</div>
Footer.php
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<style>
#figo {background-color: #039; position:absolute; bottom:0px; width:100%;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:right;
}
a{
display:block;
width:90px;
color:#FFFFCC;
}
</style>
INDEX.PHP
Here I post the index.php
-
<html>
<head> <title> About </title> </head>
<body>
<? include 'header.php'; ?>
<?include 'footer.php'; ?>
</body>
</html>
The <style></style> tags should only go into the <head></head> portion of a document. You want to avoid having any inline styles as well. Better than using <style></style>, you should put all the styles that are to be used by all of your pages into a single stylesheet.
I would implement a wrapper (container) and give that your page width and position relative, this will align your footer menu to the bottom of that block (assuming that's what you're trying to achieve). If not, drop the position from the container.
With all of these changes, the structure would look something like this. Keep in mind this is a very archaic design, but it should help get you started.
header.php:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title; ?></title>
...
<link rel="stylesheet" href="/css/stylesheet.css" type="text/css" />
...
</head>
<body>
<div id="container">
<div class="blue" id="header">
<h1>Header Content</h1>
</div>
index.php/about.php/whatever.php...
<?php
$title = 'My About Page';
include('header.php');
?>
<div>Your page contents</div>
<?php include('footer.php'); ?>
footer.php:
<div id="footer">
<ul id="figo">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div><!-- end "container" -->
</body>
</html>
/css/stylesheet.css:
body {
background-color: #F5F5F5;
margin: 0;
padding: 0;
}
#container {
position: relative;
width: 650px;
}
.blue {
background-color: #039;
height: 15%;
}
#figo {
background-color: #039;
position: absolute;
bottom: 0px;
margin: 0;
padding: 0;
width: 100%;
}
#figo ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#figo li {
float: right;
}
#figo a {
display: block;
width: 90px;
color: #FFFFCC;
}
Kill the position: absolute on your .blue top bar. You don't need it; since it's at the top of your HTML, it'll be at the top of the page. [The space is probably the result of the default padding on the body.] Try CSS like this:
html, body { background-color:#F5F5F5; margin: 0; padding: 0; }
.blue { background-color: #039; height: 15%; }
To be sure, though, we'd need to see index.php and footer.php.
Why are you setting a width on the html and body elements? That's a little funky. If you want a 600px-wide content area with a gray background, create a wrapper div and apply the background to that:
#wrap { background: #f5f5f5; width: 600px; }
<body>
<div id="wrap">
<?php require "header.php"; ?>
content here
<?php require "footer.php"; ?>
</div>
</body>
Also, style elements should be placed as children of the head element. Or, better yet, in an external stylesheet, so you separate presentation from content.
The reason your getting the padding on the left is because you have <html> on both your header.php as well as the page you are loading the header file on.
Additionally, it would be a better practice to put header and footer into a higher level folder within your server. Then reference that file with
Include("../../header.php");
The styles being within one or two style sheets is the best way to accomplish styling as well. You would need to refer to nodes in you document by parent class and class or IDs. That would allow you to get different styles on different pages but have one style sheet.
<div class='parent'>
<div class='child'>
//do stuff
</div>
</div>
Then style with
<style type='text/css'>
.parent .child{
cool:stuff;
}
</style>
And finally, make sure the style only shows up within the <head> of the page:-)