I have just designed a very quick website home page and as a first time coder I was wondering if someone would look at the design and my code and tell me where they would make improvements or changes or completely change it if necessary!
The design is for personal use only and contains black sections where my personal address is on the website design.
I am open to any suggestions and comments as this is my first time at coding and I would like to know what a more experience person would do better. I have been using Dreamweaver and viewing it on Google Chrome, there is a HTML code and a CSS code, ideally I would like it to be viewable on different browsers.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Rosy's Jewellery</title>
<link rel="stylesheet" type="text/css" href="CSS/Stylesheet.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<!--Background set in CSS-->
</div><!-- end of top-->
<div class="menu">
<h1>Rosy's Jewellery</h1>
<ul id="nav">
<li> Home </li>
<li> Jewellery </li>
<li> Locations </li>
<li> Contact Us </li>
<li> Reviews </li>
</ul>
</div>
<!-- end of menu -->
<div class="main">
<p> Welcome to Rosy's Jewellery </p>
<img src="Images/1.png">
<img src="Images/2.png">
<img src="Images/3.png">
<img src="Images/4.png">
<img src="Images/5.png">
<img src="Images/6.png"> </div>
<!--close main-->
<div class="footer">
<ul id="footer">
<li> <img src="Images/facebook.png" />
<img src="Images/twitter.png" /> </li>
<li> Twitter Address</li>
<li> Addres, Address, Address, Address </li>
<li> Telephone Number</li>
</ul>
</div>
<!--end of footer-->
</div>
</body>
</html>
CSS
.wrapper {
margin:0 auto;
background-color:#D1CED4;
}
.top {
background-color:#000000;
padding-bottom:2.5em;
}
.menu {
background-color:#FFFFFF;
border-bottom-width:2px;
border-bottom-color:#000000;
border-bottom-style: solid;
position: relative;
top:-15px;
text-align:center;
font-family:Andalus;
font-size:18px;
padding-left:1em;
padding-right:1em;
overflow:hidden;
}
.menu h1 {
float:left;
color:#999966;
font-family:andalus;
font-size:24;
}
.main {
width:65%;
margin:0 auto;
background-color:#FFFFFF;
text-align:center;
font-family:andalus;
font-size:24px;
padding-top:1px;
}
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
font-family:andalus;
margin-bottom:-1em;
}
#footer li {
display:inline-block;
padding-right:8em;
vertical-align:middle;
margin-top: -30px;
}
#nav {
padding-top:15px;
}
#nav a {
text-decoration:none;
}
#nav a:link {
color:black;
}
#nav a:visited {
color:black;
}
#nav a:hover {
color:black;
}
img {
margin:42px;
}
#nav ul {
display:inline-block;
}
#nav li {
display:inline-block;
margin-right:4.5em;
padding-right:2.5em;
}
Only 3 suggestions:
Use HTML5 tags since you have declared that as DTD.
Never style direct a tag like you have given margin to <img>. Try giving class to every element.
Use maximum classes instead id's in CSS.
It really depends on your requirements. For a personal website I don't think you don't need more than that. Codes are pretty simple and neat. Unless you want authentication and that sort of stuff to get into your site. Simple is beautiful.
Related
I am trying to center my navigation bar but every way I have tried so far results with either the navigation bar not centered or it is centered but the links aren't in one line. I would also like to keep the logo in line with the navigation bar but floating left. I tried adding a container class and a nav id but I don't think that did anything. Please Help!
Here is my html:
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="HCstyle.css">
<title>Hockey Corner</title>
</head>
<body>
<div>
<img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li>Our Sponsers</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
</body>
</html>
And here is my css:
img.logo{
float:left;
width:10%;
padding-left:5%;
}
ul{
list-style-type:none;
margin:0;
padding-left:20px;
padding-right:20px;
display:inline-block;
overflow:hidden;
float:right;
}
li{
display:inline-block;
}
li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover{
background-color:#34495E;
}
body{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
background-size:cover;
background-repeat:no-repeat;
}
.nav{
float:left;
text-align:left;
}
.container{
text-align:center
}
Using flex property will solve your problem. Learn more here.
Working code: https://codepen.io/Sahero/pen/rzmVjN
You should change your CSS Code .nav to #nav.
There are a lot of way to make located your logo.
I'd like to recommend display:flex.
You can find easy about flex.
I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:
li
{
float:left;
margin-right:15px;
margin-top:40px;
}
But when I click one of them the other link on the right moves towards the one I clicked.
I don't know the reason why this happening. but how to make them fixed?
The code::
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp">Symptoms</li>
<li class="links1" id="doc">Doctors</li>
<li class="links1" id="health">Health Care Reform</li>
</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
html
{
background-image:linear-gradient(to top, white, #F5F9FA);
height:100%;
}
.logo
{
padding-left:176px;
padding-top:4px;
float:left;
}
li
{
float:left;
margin-right:15px;
margin-top:40px;
font-family:Candara;
font-size:12px;
color:#5895D4;
}
#symp
{
list-style-image:url(walking.png);
margin-left:55px;
}
#doc
{
list-style-image:url(doc.png);
}
#health
{
list-style-image:url(umb.png);
}
li a
{
color:#5895D4;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}
li a:active
{
}
li a:visited
{
}
Currently, the CSS selects li, not li a.
If your HTML structure looks like this:
<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>
Try using the following CSS to target the links inside each li.
li a {
float: left;
margin-right: 15px;
margin-top: 40px;
}
The reason why your bug might be happening is because a::visitedis a separate element from li. See MDN's page on :visited.
Im really new to web design and i need to create a simple website for a class. For some reason no matter what i try my unordered list wont float right. please help! my unordered list will only stay on the left side of the page for some reason.
This is my html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title> PhiladelphiaEagles.com - Summary Page </title> <link href="style.css" rel="stylesheet">
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page <h2>
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
<footer>
</footer>
</body>
</html>
This is my css
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:right;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
float:right;
border: 1px solid blue ;
float: right;
}
li:link {color:green;}
li:visited {color:green;}
li:hover {color:red;}
li:active {color:yellow;}
Alright, so there are a couple things going on you may want to change :D
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
Notice you have
width:910px;
This will change the entire webpage to only take up 910 pixels of your browser window. You haven't aligned the body with the rest of the window so the whole thing stays left.
To fix this you can do a couple things, one solution is to change width:910px; to width:100%;
Another solution is to center your body, you can do this by adding the two following lines to the body{} css block
margin-left:auto;
margin-right:auto;
There are several other things going on in your page that need some looking into, such using the deprecated align="center" along with your css, but one step at a time. You're doing great, keep on chugging along!
Check this FIDDLE
Just give your ul a <ul class="right">
Then in CSS
.right {
float: right;
width: 100px;
}
It's floated to the right already!
it says it in your css twice!
ul {
float:right;
border: 1px solid blue ;
float: right;
}
first you need to change that to
ul {
float:right;
border: 1px solid blue ;
}
second maybe you want the li's floated right?
in this case it's a bit different:
ul li{
float:right;
}
but this will put your ul underneath the figure element!
In conclusion: Your ul is already floated to the right, reading from your css, but on a page it's hard to see because the figure element that contains an image will not let ul to be all the way on the right side of the page.
I think the problem is width and float,
i just rewrite the code....
html code like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> PhiladelphiaEagles.com - Summary Page </title>
</head>
<body>
Go To Home Page
<h1 align="center"> Jacob Kaneff</h1>
<h2> Website Evaluation: - Summary Page </h2>
<div class="leftside">
<figure>
<img src="eagles.png" alt="Homepage screen shot" width="650" height="650">
<figcaption align="center">Homepage Screen Shot</figcaption>
</figure>
<div id="wrapper">
The official Philadelphia Eagle's website is your one stop for all things Philadelphia Eagles. Whether you want the Latest updates or want to participate in online discussions, this page is for you. Sponsered by the NFL, this page is beautifully laid out and is easily navigated. The news is always well written, and up to date with breaking news coming in daily.
</div>
</div>
<div class="rightside">
<ul>
<li> Summary </li>
<li> Audience </li>
<li> Task </li>
<li> Navigation </li>
<li> Functionality </li>
</ul>
</div>
</body>
</html>
css like
<style type="text/css">
body{
background-color:gray;
color:#000000;
width:910px;
font-family:Georgia,Arial,Serif;
font-size: 12px;
}
figure {
float:left;
}
#wrapper{float:left; width: 150px; border: 1px solid brown; }
ul {
border: 1px solid blue ;
float: right;
}
.leftside { float:left; width:400px;}
.rightside{float:right; width:400px;}
</style>
Try this code...
I am making a personal bio site, and I want different color backgrounds for the header, body, and footer. I found this website, http://www.chimengxi.com/ and that is kinda what I am going for. In the end, I hope to get my header to be horizontal, instead of stacked. Some 3 toned color scheme would be awesome if its doable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h1>Terrence Horgan <br> Information Science Major </h1>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
CSS
body {
background-color:orange;
height:100%
}
ul.navbar {
background-color:orange;
text-align:right;
font-size:175%
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto
}
h1 {
position:relative;
bottom:85px
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative
}
Wrap your navbar in a div. Style the div background-color however you want.
Wrap the content below the navbar and above the footer in another div. Style accordingly.
Set background-color of footer to whatever you want.
Here is an example of changing the colors. I made them quite noticeable by coloring them green and yellow and adding a few simple CSS styles to make them fit accordingly (floats, text-aligns). Look at the code below, and please note I pasted your CSS at the top. All you need to do is paste the code between the tags into your CSS file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height:100%
}
ul.navbar {
background-color:green;
text-align:right;
font-size:175%;
padding-bottom: 10px;
text-align: center;
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block;
float: left;
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto;
font-size: 25px;
margin-top: 20px;
}
h1 {
float: left;
font-size: 24px;
text-align: left;
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative;
background-color: yellow;
width: 100%;
text-align: center;
}</style>
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<h1>Terrence Horgan <br> Information Science Major </h1>
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
OK! I just started HTML and CSS today and thought it would be a good approach to learn by building something rather than just reading some text.
[ http://jsfiddle.net/GUkrK/ ]
So I decided to build one sample navigation bar.
<html>
<head>
<title> navigation bar </title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul id="menu">
<li id="menu1">
<a href="http://www.google.com">
<span>GOOGLE</span>
</a>
</li>
<li id="menu2">
<a href="http://www.github.com">
<span>GITHUB</span>
</a>
</li>
<li id="menu3">
<a href="http://www.quora.com">
<span>QUORA</span>
</a>
</li>
<li id="menu4">
<a href="http://www.facebook.com">
<span>FACEBOOK</span>
</a>
</li>
</ul>
<hr/>
</body>
</html>
and the css
ul {
list-style:none;
color:red;
}
#menu {
float:left;
vertical-align:middle;
display:block;
width:600px;
height:108px;
}
#menu li {
display:inline;
font-size:20px;
padding:0px;
}
#menu a:link {
color:white;
font-weight:bold;
padding:20px;
background-color:#27A285;
}
#menu a:hover {
background-color:#E1C618;
color:brown;
}
hr {
height:5px;
background-color:red;
}
But now my problem is the positioning of that horizontal line. Do I have to place that by setting the pixels in absolute or relative positioning? Can't it be done automatically?
And how come the horizontal line does not cover the total width of the browser? and Can I adjust the width of that horizontal line?
EDIT: Thanks everyone. Here is the edited sample http://jsfiddle.net/sunu0000/zdDU5/
Remove float: left; from the CSS definition of #menu.
Sample
http://jsfiddle.net/Y8AAH/3/
CSS for #menu
#menu {
vertical-align:middle;
display:block;
width:600px;
height:108px; /* Looks better with like: 40px !! */
}
Depending on what your layout should look like this definition may be sufficient:
#menu {
display:block;
height:108px; /* Looks better with like: 40px !! */
}
Updated sample: http://jsfiddle.net/Y8AAH/4/
Updated sample with centered menu
#menu {
height:40px;
text-align: center;
}
http://jsfiddle.net/Y8AAH/5/
I sugger you read this before continuing. It appears you don't really know what you're doing, so learn before asking question =p