i have a problem where my footer element is not at the bottom of the page while i browse the page over mobile this my html
<!DOCTYPE html>
<html>
<head>
<title>Ziad Alian</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h4>Ziad Alian</h4>
<img class="imgz" src="zCmakv5P_400x400.jpg"/></img>
<ul>
<li>ABOUT ME</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
<hr>
<div>
<p id="hello">Hello World! </p>
<p id="aboutme">I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br/>
I studied Geomatics but I don't like it cause computer science is my passion.<br/>
I'm a self taught web developer, My goal is to be a fucll stack developer using
HTML5, CSS, JavaScript, React, Python and Django.<br/>
I love programming and everything that has to do with technology, the internet and writing code.
</p>
</div>
<hr>
<div id="contact">
<ul>
<li>GitHub </li>
<li>LinkedIn </li>
<li>Twitter </li>
<li>Instagram </li>
</ul>
</div>
<br>
<footer>© 2020 Ziad Alian</footer>
</body>
</html>
And this is my CSS
this where my footer element been added
footer {
background-color: black;
color: white;
padding: 0.5em;
}
Edit
i added this code
body {
background-color:whitesmoke;
min-height: 100%;
display: flex;
flex-direction: column;
}
h4 {
text-align: center;
font-size: 68px;
font-weight: 80;
color: teal;
}
.imgz {
width: 200px;
border-radius: 50%;
}
#hello {
text-align: center;
font-size: 30px;
color: teal;
}
#aboutme {
font-size: medium;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p {
text-align: justify;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color:white;
padding: 0.5em;
margin: 0;
margin-top: auto;
}
and it's now fixed like it's just go down and up with me while i scroll the page i just want it to stay at the bottom
mywebsite
You have not integrated some properties into the CSS-file.
You have not integrated the block of the element footer into the HTML-file.
New footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
}
Old footer properties
footer {
background-color: black;
color: white;
padding: 0.5em;
}
New footer
<footer> © 2020 Ziad Alian</footer>
These properties fix the object for the view of the user visiting the website, which means that the object is dynamic for the view of the user.
You could also try giving the main section a min-height: 100vh so to push the footer down. See if that helps.
Try using position: fixed to keep your footer pinned to the bottom of the viewport.
When using fixed positioning, you'll also want to be sure you set the left: 0 and width: 100% properties to make the footer the same width as the viewport.
footer {
background-color: black;
color: white;
padding: 0.5em;
position:fixed;
bottom:0;
left:0;
width:100%
}
<footer>© 2020 Ziad Alian</footer>
I have developed a website for you with the same structure as your old website, but with only minor changes.
The source code now has a better structure.
Comments have been added to avoid losing track of the source code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"><head>
<title>2020 Ziad Alian</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<!-- Header start -->
<h1>
<center>2020 Ziad Alian</center>
</h1>
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<center>
<img class="imgz" src="zCmakv5P_400x400.jpg"></img>
<p>
<a href="https://LinkToTheWebsite.com">
<li> ABOUT ME</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>PROJECTS</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>CONTACT</li></a></p>
</center>
<hr>
<p>
<center style="font-size: 30px"> HELLO WORLD</style></center>
</p>
<center>
<p><strong>I'm Ziad Alian a 26 years old Software Developer. Born in the 331 BC ancient city of Alexandria, Egypt.<br><br>
I studied Geomatics but I don't like it cause computer science is my passion.<br><br>
I'm a self taught web developer, My goal is to be a fucll stack developer using HTML5, CSS, JavaScript, React, Python and Django.<br><br>
I love programming and everything that has to do with technology, the internet and writing code.</strong>
</p>
</center>
<hr>
<center>
<p>
<a href="https://LinkToTheWebsite.com">
<li> GitHub</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>LinkedIn</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Twitter</li></a></p>
<p>
<a href="https://LinkToTheWebsite.com">
<li>Instagram</li></a></p>
</center>
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
<center>
<p><font color="#FFFFFF">© 2020 Ziad Alian</font></p>
</center>
<!-- Footer end -->
</div>
</div>
</body>
</html>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#000000;
}
.imgz {
border-radius: 50%;
}
#header p,
#header h1 {
margin:0;
padding:10px 0 0 10px;
}
#footer p {
margin:0;
padding:10px;
}
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 7 months ago.
I was styling my website and I choose Catamaran and Lato for headings and body respectively. However, the headers seem to inherit styles from the body which makes the font and the font size the same thing for my headings and paragraph. I was thinking that this is a problem of specificity but I cannot figure out what went wrong.
#import url("colors.css");
/*Global Styles
------------------------------------------------*/
html, body {
margin: 0;
padding: 0;
font-family: 'Catamaran', Sans-Serif;
font-size: 16px;
}
p{
color: var(--dark_text);
}
img{
margin: 0;
padding: 0;
}
h1 h2 h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
.content_wrap {
width: 800px;
margin: 0 auto;
padding: 60PX 0;
}
/*Navigation Bar
------------------------------------------------*/
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*Projects
------------------------------------------------*/
/*Profile
------------------------------------------------*/
#profile{
background: var(--dark_red);
color: var(--white_text);
text-align: center;
}
#profile p{
color: var(--white_text);
}
#profile .button{
text-decoration:none;
color: var(--dark_text);
background: var(--light_green);
padding: 6px;
border: 2px var(--light_green);
border-radius: 6px;
display: inline-block;
}
#profile .button:hover{
text-decoration:none;
background: rgb(241, 227, 228,80);
}
/*Projects
------------------------------------------------*/
#projects{
background-color: var(--light_green);
}
#projects .button{
text-decoration:none;
color: var(--white_text);
background: var(--dark_red);
padding: 6px;
border: 2px var(--dark_red);
border-radius: 6px;
display: inline-block;
}
#projects .button:hover{
text-decoration:none;
background: rgb(96, 123, 125, 80);
}
/*Work Experience
------------------------------------------------*/
#work_experiences{
background-color: var(--light_red);
}
#work_experiences p{
margin: auto;
}
/*Drawings and Paintigs
------------------------------------------------*/
#drawings_paintings{
margin: 0;
padding: 0;
}
/*Footer
------------------------------------------------*/
footer{
margin: 0;
padding: 0;
background-color: var(--dark_green) ;
color: var(--white_text);
}
footer a{
color:seashell;
text-decoration: none;
}
<!DOCTYPE html>
<HTML lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="description"
content="Clycine Yuanqing Hao's personal website and some
funny stuffs : )">
<link href="https://fonts.googleapis.com/css?family=Catamaran|Lato:400i"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Clycine's personal website</title>
<script src="main.js"></script>
</head>
<BODY>
<H1 aria-label="Hello World"> <!--to add CSS code to make this displayed in random positions inside of a rectagle-->
<div class="grid" aria-hidden="true">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</div> </H1>
<!--***************** TABLE OF CONTENTS *****************-->
<section id="nav">
<nav role="navigation">
<ul>
<li> About Me</li>
<li> Computer Science related</li>
<li> Drawings and Paintings</li>
<li> Funny Stuffs</li>
</ul>
</nav>
</section>
<!--***************** PROFILE ******************-->
<section id="profile">
<div class="content_wrap">
<h1>Clycine Yuanqing Hao </h1>
<picture>
<source media="(min-width:600px)"
srcset="pictures/cly/behindLilas815x929.JPG">
<source srcset="pictures/cly/behindLilas546x602.JPG">
<img src="pictures/cly/behindLilas815x929.JPG"
alt="Clycine next to a lilas tree"
width="163" height="186">
</picture>
<h2>CS student + Digital & Conventional Artist</h2>
<p>As a Computer Science student, I look forward to explore the world of innovation and
technology. I am interested in understanding how my knowledge and skills can apply
to real-life tech projects. </p>
<p>As an artist, I am passinoante to discover beauty and to express them in my own way,
with a cup of tea in my hand, of course.</p>
<a class="button" href="file/Yuanqing(Clycine)_Hao_Resume.pdf">Click here to see PDF of my resume</a>
</div>
</section>
<!--***************** PROJECT ******************-->
<section id="projects">
<div class="content_wrap">
<h3 class="title">Projects & Researches</h3>
<p>Biology research project (written report) - <i>L’hydroponie : une alternative à l’agriculture conventionnelle ?</i></p>
<p>Language: French</p>
<blockquote>"The main objectives of this research were to understand how different hydroponic systems
function and what equipment they require, to acknowledge this technique's limits and
advantages, to explore the role played by nutrients in plants' growth, and ultimately, to
determine if hydroponics can be an alternative to conventional agriculture."
(Boutiba & Hao, 2019)</blockquote>
<a class="button" href="file/rapport_final_biologie.pdf">PDF of the research</a>
</div>
</section>
<!--***************** WORK EXPERIENCES ******************-->
<section id="work_experiences">
<div class="content_wrap">
<h3 class="title">Work Experiences</h3>
<p>Private French Tutor</p>
<p>01/2022 to 12/2022</p>
<p>Individuals – Montréal, Québec</p>
<ul>
<li>Offered tutoring for intermediate French learners.</li>
<li>Helped students learn more about Québec culture through practical conversations.</li>
<li>Integrated French lessons into real-life scenarios and role-playing.</li>
</ul>
<p>Project Intern</p>
<p>06/05/2022</p>
<p>Soteria120 – Calgary, Alberta</p>
<ul>
<li>Obtained real-work experience by participating in
a user experience testing for website in Soteria120</li>
<li>Collaborated with a team of 3 students and program manager
that included data entry (input validations), design validations,
user-experience testing, and quality assurance report writing.</li>
</ul>
</div>
</section>
<footer>
<div class="content_wrap">
Back to the table of contents
McGill University
<p><pre>Phone number: (819)815-3589 Email: clycinehao#gmail.com </pre> </p>
</div>
</footer>
</BODY>
</HTML>
Thank you so much !
The following applies the contained CSS rules to the entire HTML Document (via the html tag):
html, body {
...
}
Where you attempted to apply styling rules to <h1>, <h2>, and <h3> elements, you instead applied the rules to all <h3> that are descendants of <h2> elements that are, in turn, descendants of <h1> elements.
h1 h2 h3 {
...
}
Instead, separate each tag with a comma (,) to apply the rules as desired, as shown below:
h1, h2, h3 {
...
}
Use
h1, h2, h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
instead of
h1 h2 h3{
...
}
(Separate the heading (<h1>, <h2>, <h3>) tags using commas (,).)
Whatever you apply to the parent is also applied to the child, unless you specifically change that attribute for the child
HTML Tree Generator of extension chrome is good tools for tree structure grasp
I am making some product cards with an "Add to cart" button. Everything else is aligned centred in the card, but the button is somehow to the far right even tho the code says otherwise. What I mean by this is the button is inside the card's div, so I don't know how if there is something wrong in my code or I'm missing a key style element. I should note my college project is purely website redesign, not development/implementation hence the webpage looks incomplete. I'm trying to get this little blunder outta the way before I add more product cards, filling the page. Also bear in mind I am still new to coding but I'm always learning and improving.
#font-face {
Src: url(customfont/Futuristic.ttf);
Font-family: Future;
}
#font-face {
Src: url(customfont/RobotInvaders.ttf);
Font-family: Robo;
}
h1 {
Font-family: Future;
Color: red;
Text-align: center;
}
h2 {
color: blue;
text-align: left;
Font-family: Robo;
}
.servicesnav nav {
Width: 100%;
Height: 70px;
Overflow: hidden;
Background: none;
}
.servicesnav li {
Display: inline;
Padding-right: 40px;
}
.servicesnav ul {
List-style-type: none;
}
.servicesnav li a:hover {
Background: blue;
}
.card {
max-width: 200px;
Height: 100%;
margin: auto;
text-align: center;
font-family: arial;
}
.card h3 {
Color: red;
}
.price {
color: white;
font-size: 22px;
}
.description {
Color: white;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
Text-align: center;
cursor: pointer;
width: 150px;
font-size: 18px;
}
.card button:hover {
Color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Geek Yourself Out" />
<title>Geek Yourself Out</title>
<link rel="stylesheet" type="text/css" href="GeekYourselfOut.css" />
<link rel="stylesheet" type="text/css" href="Services.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="logo.jpg" width="95"/>
</div>
<div class="coolname">
<img src="coolname.jpg" width="105"/>
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<h1>Choose one of these categories to start browsing! </h1>
<div class="servicesnav">
<nav>
<ul>
<li>Physical Products</li>
<li>Marketing Materials</li>
<li>Apparel</li>
<li>Photos</li>
</ul>
</nav>
</div>
<h2>Physical Products</h2>
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li><img src="facebook-box-fill.png" alt="Facebook"</li>
<li><img src="instagram-fill.png" alt="Instagram"</li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
</html>
Maybe its issue with any other parent div because when I tried your HTML and CSS on codepen add to cart button is centered.
You can see the codepen I used:- https://codepen.io/GauravSingh96/pen/JjMEeoQ
This is the html used:-
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
You will have to recheck all the codes from top.
Hey there i try your code but it shows add to cart button in the center. But still if you face issue try to reset the css by using following code in your style.css file:
* {
padding: 0;
margin: 0;
}
I also attach screenshot of your code with this where your code shows add to cart button in the center.
i have made a simple website using a free template. i am confused because the images on my version are not showing but the images on the demo version are working and both have exactly the same css files and html because i copy pasted. i will post them below. my confusion lies in the fact that i dont see any of the images reffered to in either the html or the css stylesheet. the styling is there for the images but no link to the file location. 2 questions.
this is what the site should look like:
http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
this is what my site looks like:
https://cherry-cupcake-30790.herokuapp.com/
as you can see background, background to the navbar and main images are missing but other styling and css are implemented.
why are the images not showing on my version?
why are the images showing on the demo version 0hen there seems to be no reference to the actual file location of the image (only styling of the image)?
thanks.
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" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>NightBeach | florida web design</title>
</head>
<body>
<div id="container">
<div id="mainpic">
<h1>Green<span class="off">Mountain</span></h1>
<h2>A template by Bryant Smith</h2>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">About</li>
<li class="menuitem">Products</li>
<li class="menuitem">Services</li>
<li class="menuitem">Design</li>
<li class="menuitem">Contact</li>
</ul>
</div>
<div id="content">
<h2>You may use this template in any manner you like. All I ask is that you leave the link back to my site at the bottom of the page. </h2>
<p> </p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<h3>Template Notes</h3>
<p>The main image can be changed by either replacing the current image with another one of the same size (900x402), or using a new one of what ever dimensions you'd like. If you choose the latter, you must open up style.css and change the dimensions of #mainpic, as well as the file name if that is different. If you would like to move the heading around in the above image, find "#mainpic h1" in style.css and modify it's "left" and "top" properties, this is also true for the h2 tag.</p>
<p> </p>
<h3>More information</h3>
<p>I decided to leave the content portion open for the templates users to do as they wish with a blank canvas. I don't like to restrict my users too much, and for this reason I leave the defining of any content related styles to you.</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="footer"><h3>florida web design</div>
</div>
</div>
</body>
</html>
css file:
/* A Free Design by Bryant Smith (bryantsmith.com) */
body {
margin: 0;
padding: 0;
text-align: left;
font: 12px Arial, Helvetica, sans-serif;
font-size: 13px;
color: #061C37;
background: #EEEFE4;
background-image:url(images/background.png);
background-repeat:repeat-x;
}
*
{
margin: 0 auto 0 auto;
text-align:left;}
#container
{
display: block;
height:auto;
position: relative;
width: 940px;
}
#mainpic h1
{
position:absolute;
text-align:right;
color:#F8FDEE;
font-size:30px;
color:#FFF;
left:60px;
top:20px;
}
#mainpic h2
{
position:absolute;
text-align:right;
color:#E1E7F7;
left:60px;
top:50px;
}
#mainpic
{
background-image:url(images/main.jpg);
background-repeat:no-repeat;
width:900px;
height:354px;
}
.off
{
color:#3A6028;
}
#menu
{
background-image:url(images/menu.png);
background-repeat:no-repeat;
width:940px;
height:69px;
float:left;
clear:both;
}
#content
{
width:880px;
height:auto;
background-color:#FFF;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
#footer
{
width:inherit;
height:auto;
}
#footer h3 a,#footer h3 a:visited
{
display:inline;
text-align:center;
font-size:12px;
text-decoration:none;
color:#7198E1;
}
#menu ul {
list-style: none;
padding: 0px;
margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 17px;
font-size: 15px;
}
#menu a:hover{
color:#BEE399;
}
#content p
{
}
html, body {
text-align: center;
}
p {text-align: left;}
[1]: http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/
for problem 1, because your website's css is empty, nothing in. The css link is https://cherry-cupcake-30790.herokuapp.com/assets/application-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css .
for problem 2, the image link refer is not in the html, but in the css file.
#mainpic {
background-image: url(images/main.jpg);
background-repeat: no-repeat;
width: 900px;
height: 354px;
}
the image link is http://www.quackit.com/html/templates/download/bryantsmith/greenmountain/images/main.jpg
There are similar questions in StackOverflow on this topic but none of them bring answer to my question:
#header{
border-bottom: 3px solid #87B825;
background: #84E637 url("backg400.gif") repeat-x top left; **<!-- This background is not showing up -->**
}
All of the files being in the same directory, there should not be any file path issue.
Here below the html and associated CSS sources adopted from Dan Cederholm in Chapter 9 of his book "Bulletproof Web Design", 2nd Edition.
Thank you in advance for your help.
1) HTML source
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>My Site</title>
<link href="mysite.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<h1> My Site</h1>
this is header
</div> <!--end #header -->
<p id="message">
<strong>This is my site</strong>
</p>
<div id="wrap">
<div id="content">
<div class="gutter">
... content goes here
</div> <!--end .gutter -->
</div> <!--end #content -->
<div id="sidebar">
<div class="gutter">
<p>... sidebar goes here </p>
</div> <!--end .gutter -->
</div> <!--end #sidebar -->
<div id="footer">
<p> Copyright © 2015 My Site. All rights reserved</p>
</div>
</div> <!--end #wrap -->
</body>
</html>
CSS source (mysite.css):
#charset "iso-8859-1";
body {
margin: 0;
padding: 0;
font-familly: Verdana, sans-serif;
font-size: small;
background: #fff;
}
<!-- Layout structure -->
#header{
border-bottom: 3px solid #87B825;
background: #84E637 url("backg400.gif") repeat-x top left; <!-- This one is not showing up -->
}
#header h1{
margin: 0;
padding: 25px;
font-family: Georgia, serif;
font-size: 150%;
color: #374C0E;
background: url("backg400.gif") no-repeat top left; <!-- This one is not showing up -->
}
#wrap{
background: url("backg400.gif") repeat-y 80% 0; <!-- This one is showing up -->
}
#content{
float: left;
width: 80%;
font-size: 95%;
line-height: 1.5em
color: #333;
}
#sidebar{
float: right;
width: 20%;
}
#footer{
clear: both;
background: #828377;
}
You are using HTML comments (<!-- comment content -->) on your stylesheet. Remove all these HTML comments from your stylesheet and use the following comment syntax instead:
/** comment content */
Note: There is a typo on the body rule: font-family instead of font-familly.
Additionally try checking your CSS syntax using W3C validation service: http://www.css-validator.org/#validate_by_input
Ok so I'm just playing around with web development and i'm making my personal site just to get experience. Currently I am having two issues.
I have my "About" section I can't seem to be able to move my picture in the center and making the radius 100%. It's really bugging me because it won't work. I already put the CSS border-radius: 100% and Margin: 0 auto; but nothings working. I then tried the Text-align: center; and it didn't work.
I have a solid border that extends from the "#section" ID. But I want it not to cover my footer. In the index page it includes the footer which I don't want, but on my other pages like About, and Contact it does not cover the footer like i initially intended it to do.
Also on my header I have an H1 and H3 element that goes back to my home page. My problem with it is that when I move the mouse away from the header to the left or right horizontally it still shows that there's a link even though the letters are not there. I want the link to end where the word ends.
Can somebody find out what am I doing wrong and how i can do to avoid it?
I will include my HTML index page, then About page and then my CSS.
Index page where i want to exclude the footer from solid border.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<div id="section">
<section >
<div id="statement">
<h2>We are so confident in our abilites to satisfy you that we'll give you your money back if you weren't satisfied!</h2>
<h4>Get Invoces: We provide the quickest way to get people to buy your shit! </h4>
<h4>Make them happy: We'll make sure your customers are all happy! </h4>
</div>
<div id="testimonies">
<h2> Client Testimonies </h2>
<hr style="width:90%; />
<p class="paragraph"> <img src="teona.jpg" class="clients"/>He was amazing with services! He did everything right!" </p>
<h6>Home Town Loser </h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="marvin.jpg" class="clients"/>"As a rapper I enjoyed his services. He made my website look hella dope and I loved it! Will return to him"</p>
<h6>MArvelous Marv</h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="jon.jpg" class="clients"/>"He was quick and succint! He helped me make my own dispensary website and now all my clients are so satisfied! Thanks Dalexis! !"</p>
<h6>Another Home Town Loser </h3>
<hr style="width:90%; />
</div>
</section>
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
This is my about page where i want to center my picture and make the radius 100%.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<img src="IMG/dalexis.jpg" alt="my photo" class="about-photo" >
<h3>About<h3>
<p> This is my Web Design website. If you are interested in my services you can either call me or email me. I've been desiging websites for five weeks and my costumers love their sites"</p>
<p> If you like to follow me on facebook you can find me at Dalexis.
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
CSS
body {
font-family: abel;
}
h1, h3 {
text-align:center;
}
a {
text-decoration: none;
color: #373737;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
html {
color: #373737;
background-image:url('bkg-blu.jpg');
}
/******************************
HEADER
***********************************/
}
#nav li { display:inline; border-style:groove; }
#nav {text-align:center; }
/******************************
nav
***********************************/
/******************************
SECTION
***********************************/
#statement {
text-align: center;
}
#testimonies {
text-align: center;
}
section h2 {
margin: 0 20px;
padding: 0px 60px;
}
#section {
border-style:solid;
border-width: 1px;
width: 90%;
height: 100%;
padding: 5px 5px;
margin:15px 5px 15px 100px;
}
section div p img {
font-style:italic;
color: blue;
}
.clients {
width: 40px;
height: 40px;
margin: 0 10px;
padding: 10px;
font-style: italic;
}
/******************************
footer
***********************************/
.socialicon {
width: 20px;
height: 20px;
margin: 0 5px;
}
footer img {
margin: 0;
color: fff;
clear: both;
}
.selected, a:hover {
color: grey;
}
/******************************
PAGE: ABOUT
/***************************/
.about-photo {
width: 250px;
height: 200px;
display: block;
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
The answer for question 1.
Change this
<img src="IMG/dalexis.jpg" alt="my photo">
To this
<div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div>
CSS
.about-photo {
width: 250px;
height: 200px;
margin: 0 auto;
}
.about-photo img {
width: 100%;
height: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}