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>
Related
I am making a simple website and the writing I did in html in my div is showing up but the CSS is not effecting it.(ex. no colored box is showing up.)
this is the html
<div id=“hello”>hello</div>
this is the css
#hello {
background:#ccc;
width:200px;
height:200px;
}
this is the full code
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
}
body {
background:#Fff; margin:0 ;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#banner {
background-image: url(pics/babypic.png);
background-repeat: no-repeat;
background-size:100%;
height:445px;
padding:20px;
clear: both;
}
#left_col {
float:left;
width:819px;
padding:20px;
height:600px;
color:#000;
background:#F0F8FF;
font-size:20px;
}
h1 {
font-size:35px;
text-align:center;
font-weight:300;
margin-top:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#right_col {
float:right;
width:400px;
height:600px;
color:#000;
background:#F0F8FF;
padding:20px;
}
h2 {
font-size:35px;
text-align:right;
font-weight:400;
margin-right:75px;
}
h3 {
font-size:25px;
font-weight: 200;
margin-right:70px;
margin-left:50px;
line-height:40px;
margin-top:30px;
text-align:right;
}
#hello {
height: 200px;
width: 200px;
background-color:#ccc;
}
#footer {
height:450px;
background:#F0F8FF;
float:bottom;
clear:both;
font-weight:100;
font-size:25px;
}
h5 {
font-weight:100;
font-size:25px;
margin-left:250px;
margin-right:250px;
line-height:40px;
}
#footer ul1 {
margin-left:400px;
list-style:none;
width:40%;
display:block;
}
h4 {
text-align:center;
margin: 70px;
font-weight:;
}
#end {
height:200px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id="banner"></div>
<div id="left_col">
<h1>
What People Are Saying
</h1>
<p>
“Thank you so much for your kindness and support. We sincerely appreciate your assistance and professional courtesy” —C.S
</p>
<p>
“He is very understanding, explaining things very well and has patience with kids. I highly recommend him. —C.G
</p>
<p>
“Thank you so much for your guidance and wisdom.” —K.R
</p>
</div>
<div id="right_col">
<h2>
Call Us Today!
</h2>
<h3>
set up an appointment
<p2> 1-805-563-0167
</p2>
</h3>
<div id=“hello”>hello</div>
</div>
<!-- blurb area -->
<!-- footer -->
<div id="footer">
<h5>
Dr. Brewer has been practicing pediatrics in Santa Barbara since 2002.
The office is a solo practice–patients always see Dr. Brewer. <p>
The practice offers:</p>
</h5>
<ul1>
<li>•newborn hospital care</li>
<li>•well child care</li>
<li>•school, camp and sports physicals</li>
<li>•acute sick visits</li>
<li>•immunizations </li>
<li>•lab testing</li>
<li>•developmental or behavioral concerns</li>
</ul1>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
There's just a little error in your div: If you look closely at the quotes around "hello" and the other quotes in your HTML file, they're not the same kind of quotes!
In the Firefox debugging tools (image), you can see that this causes the browser to interpret the class of the div incorrectly.
<div id=“hello”>hello</div>
vs
<div id="hello">hello</div>
Here's what your HTML looks like when it's fixed! (Just make the quotes different)
final_image
(Disclaimer: I just signed up on the site so my reputation isn't high enough to create in-post images :P, sorry about that)
The double quotes you are using around the "hello" are different than everywhere else in the HTML.
If you re-type those double quotes it'll work.
Here is how the quotes look like to the browser.
1) Shows how "hello" shows up in a code editor but 2) and 3) show what the browser sees. Notice the extra pair of "? Tricky!
DEMO of the problem
#hello {
height: 200px;
width: 200px;
background-color: #ccc;
}
<h3>BAD HELLO</h3>
<div id=“hello”>hello</div>
<h3>GOOD HELLO</h3>
<div id="hello">hello</div>
try to give it width and height..
div {
height: 200px;
width: 200px;
background-color:blue;
}
Make sure to link the HTML file to the CSS file. You do that by adding a link tag to the top of the HTML file, like this:
<link type="text/css" rel="stylesheet" href="style.css" />
Where style.css is, you should write the path to your CSS file.
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.
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.
As shown in image below their is little gap between two red regions..
I have set all the margins and paddings to zero but it is still giving that 4px(i think) margin in between.. I want to know why that is appearing there...
two red regions are given floating to left and displayed as inline-block.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>learning...</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="_body">
<div id="_header">
<img src="images/header_index.jpg"/>
<br />
<h3> this is just a view of uttrakhand from a camera come here and explore the whole beauty...</h3>
</div>
<div id="_navigation">
<ul>
<li>Destinations</li>
<li>Culture</li>
<li>Adventure</li>
<li>Hotels</li>
<li>Wild Life</li>
<li>History</li>
<li>About</li>
</ul>
</div>
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
<p id="background-viewer">..</p>
</div>
<pre>this is something written inside pre<a></a></pre>
<script src="JavaScript.js"></script>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
#_left , #_content , #_navigation > ul {
display:inline-block;
}
#_body {
width:1200px;
background:-webkit-linear-gradient(top,#0000CC,#3999FF);
margin:0px auto;
padding:0px;
}
/*Here comes all the stylin gog header*/
#_header {
}
#_header > img {
width:1200px;
}
#_header > h3 {
border-bottom:3px solid black;
font-weight:normal;
text-align:center;
text-transform:capitalize;
padding:10px;
}
/*Here ends styling of header*/
/*here comes styling of navigatin bar*/
#_navigation {
margin:20px 20px 10px 20px;
}
/*here remains 960px for navigation bar*/
#_navigation > ul {
list-style-type:none;
}
#_navigation ul > li {
width:135px;
display: inline-block;
padding: 5px 15px 5px 0px;
font-family: Verdana;
font-size: 22px;
vertical-align: middle;
background:-webkit-linear-gradient(top,blue,aqua);
border-bottom-right-radius:5px;
border-top-left-radius:5px;
}
#_navigation ul > li:active {
background:-webkit-linear-gradient(bottom,blue,aqua);
}
#_navigation a {
text-decoration: none;
}
#_navigation a:visited {
color:black;
}
#_navigation a:active {
color:black;
}
#_navigation a:focus {
color:black;
}
/*here ends styling of _navigation*/
/*this part is for _left and _content*/
#_left {
width:400px;
padding:0px;
background-color:red;
min-height:100px;
}
#_content {
width:795px;
background-color:red;
min-height:100px;
}
/*here ends all the styling of mid region*/
Here is all of my code..
javascript file has nothing so i didn't put that here...
Your divs are incorporated in a inline formating context and a whitespace is generated by the new line in the html document
<div id="_left">
this is left region of the page..
</div>
<div id="_content">
this is content region of the page
</div>
You may avoid that by putting together the closing and ending tag of those divs as so
<div id="_left">
this is left region of the page..
</div><div id="_content">
this is content region of the page
</div>
A good idea is to use google chrome or firefox to inspect the elements you want to understand more. Just right click on your red block, inspect element. This then shows you the css applicable to the elements, including any inherited from other elements. You can live test alternatives by either editing the css code in the inspector or by editing the style sheet also presented by the inspector.
Ok, try
#_content {
float:left
}
here's fiddle: http://jsfiddle.net/cfgXX/
I am trying to make a big footer. I have tried my best to make the links displayed inline but I am unable to do so. Please help out. Thanks
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#footer{
width:auto;
height:600px;
background:url(footer.png);
}
#footer div{float:left; width:43.5%}
#footer div:nth-child(2n+1){clear:none}
#footer div:nth-child(3n+1){clear:left}
#footer div li a{float:none; width:auto; display:inline; font-size:1em; padding:0; line-height:1.5em; background-color:transparent}
#footer .contribute{border:none; background-color:transparent}
#footer div h4{transition:color 0.3s; -moz-transition:-color 0.3s; -ms-transition:color 0.3s; -o-transition:color 0.3s; -webkit-transition:color 0.3s}
#footer div:hover h4{color:#e53b2c}
#footer div:nth-child(2n){clear:left}
#footer div{width:100%; clear:both}
#footer .contribute{background-color:rgba(255,255,255,0.8); border-bottom:10px solid rgba(0,0,0,0.025); background-color: transparent;
border: medium none;}
#footer div li {display:block; width:94.5%; float:left; font-size:0.95em; }
#footer li{padding:0.125em 0}
#footer a{border-bottom:1px solid rgba(0,0,0,0.1)}
#footer a:hover{border-bottom:1px solid rgb(65,183,216)}
#footer a:active, #footer a:focus { background-color:#e53b2c; border: none; }
</style>
</head>
<body>
<div id="footer">
<div class="contribute">
<h4>Best of Design</h4>
<ul>
<li>Responsive Design</li>
</ul>
</div>
<div class="contribute" >
<h4>Best of Coding</h4>
<ul>
<li>JavaScript & jQuery</li>
</ul>
</div>
<div id="contribute">
<h4>Smashing Hub</h4>
<ul>
<li>Smashing Magazine</li>
</ul>
</div>
<div class="contribute">
<h4>Other Resources</h4>
<ul>
<li>Free Anniversary eBook</li>
</ul>
</div>
</div>
</body>
</html>
Here is a visual of what design I am trying to make,
The typical way you see people accomplish this problem is by using the float property. Note that I added overflow: hidden to #footer to clear the floats.
#footer { overflow: hidden; }
.contribute {
float: left;
width: 25%; }
http://jsfiddle.net/Wexcode/nxvdG/
If you're trying to stick with using inline, you will use similar code, only inline elements behave differently when stuck next to each other. Whitespace in your markup, ie </div> <div> will produce a gap between the two elements. To make it so the elements touch, you need to remove the white space in your markup, like </div><div>.
.contribute {
width: 25%;
display: inline-block; }
http://jsfiddle.net/Wexcode/TkxKm/
You can do this with float: left; instead of display: inline;.
The problem with your CSS is that you override the style for #footer div a lot:
#footer div{width:100%; clear:both}
This is one of these and its the main reason for breaking the layout.
Try to remove part of the style and refactor it to clean out a bit. You will thank us for this.
"If you can't understand your own code, its time to take a break and refactor."