This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.
My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below.
<style>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>
I'm expecting to see my HTML change because of my CSS, but I don't see that.
You can find my full HTML code: https://codeshare.io/ay3yrw
And full CSS here: https://codeshare.io/GABLnN
link tag is used directly inside the head tag
It must be like this:
<head>
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>
I check your code and I found three main reasons why your CSS doesn't work properly.
1. link tag
As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.
2. Not id but class
Your HTML and CSS have many errors. For example, you are styling in the CSS file:
.top left links {
...
}
Here .top is defined as a class but in your HTML code you defined it as an id, check this line:
<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>
<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>
Remember that an id should be unique therefore you should change id attributes with class attributes.
3. No white spaces
In your CSS file all your definitions are incorrect:
.top left links {
...
}
From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.
So the correct definition will be without white spaces:
.top.left.links {
...
}
Finally, I did some modification on the CSS file for the .search1 class. Check this code:
/* Google Duplicate CSS */
.top.left.links {
float: left;
color: #718090;
text-align: left;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.left.links a:hover {
text-decoration: none;
}
.top.right.links {
float: right;
color: #718090;
text-align: right;
padding: 30px;
margin: auto;
list-style-type: none;
}
.top.right.links a:hover {
text-decoration: none;
}
#ham_menu {
height: 24px;
width: 24px;
float: right;
}
.search1 {
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
-webkit-border-radius: 2px;
-webkit-user-select: none;
color: #5F6368;
height: 36px;
line-height: 27px;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
cursor: pointer;
font-family: arial, sans-serif;
font-size: 14px;
margin: 11px 4px;
min-width: 54px;
padding: 0 16px;
text-align: center;
}
.bottom.left.links,
.bottom.right.links {
list-style-type: none;
color: #718090;
padding: 30px;
margin: auto;
font-size: 13px;
}
.bottom.left.links {
float: left;
}
.bottom.right.links {
float: right
}
.footer {
position: fixed;
min-width: 980px;
z-index: 103px;
height: 64px;
background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
<!-- Containing Top Left Links on Nav Bar -->
<div class="top left links">
About
Store
</div>
<!--Containing Top Right Links on Nav Bar-->
<div class="top right links">
<li>Gmail</li>
<li>Images</li>
<li>Sign In</li>
</div>
</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">
<!--Actual Google Image, Search Form, and Buttons-->
<center>
<img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
<form class="search" input type="text"> </form>
<button class="search1" type="submit" value="Google Search" style="visibility">
Google Search
</button>
<button class="search1">
I'm Feeling Lucky
</button>
<p>We're supporting teachers inspiring the next generation.</p>
</center>
<!--Footer Links-->
<footer>
<div class="bottom left links">
Advertising
Business
</div>
<div class="bottom right links">
<li>Privacy</li>
<li>Terms</li>
</div>
</footer>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
Remove the style tag from the beginning and end of the link tag, like the following
<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
and in this condition make sure your HTML file and CSS file need to be in same folder.
Please, remove the <script> tag so that you can reference this CSS file.
Related
So basically the footer isn't appearing in my home page but it shows up in another page when im doing the same thing, what am i doing wrong?
<link rel ="stylesheet" href= "css/home.css" type ="text/css" >
<div class="topnav" id ="myNavBar">
Meal Package
Sign Up
Login
</div>
<!-- Full-width images with number and caption text -->
<div class="homebanner">
</div>
<!-- FOOTER -- >
<div class="footer">
<h1>Follow us for the latest deals</h1>
<br><p>instagram : https://www.instagram.com/aCompany/ <br>
https://twitter.com/aCompany
</p>
</div>
my css sheet . Also, when expanding the window the .homebanner image zooms in how do i make it so that it goes across the entire window without zooming in?
#charset "UTF-8";
.topnav {
background-color: rgb(11, 10, 61);
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f7f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover
{
background-color: #ddd;
color: black;
}
/* home banner */
.homebanner
{
width: 100%;
height:300px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(/images/home/Capture.PNG);
}
.footer {
width: 100%;
height:150px;
background-color: rgb(32, 32, 65);
color: white;
text-align: center;
}
When writing HTML comments, you cannot have space between -- and >.
You need to change your footer comment from:
<!-- FOOTER -- >
To:
<!-- FOOTER -->
Looks like your footer is commented out.
This is what it should look like.
<link rel ="stylesheet" href= "css/home.css" type ="text/css" >
<div class="topnav" id ="myNavBar">
Meal Package
Sign Up
Login
</div>
<!-- Full-width images with number and caption text -->
<div class="homebanner">
</div>
<!-- Footer -->
<div class="footer">
<h1>Follow us for the latest deals</h1>
<br><p>instagram : https://www.instagram.com/aCompany/ <br>
https://twitter.com/aCompany
</p>
</div>
I'm new to HTML and CSS, and my first website is about Python programs, that the user can write into the editbox and then save it as Python file ( .py ). Right now I only created a navigation bar, editbox and also a Python icon.
I have some problems with my code, my Python icon is under the navigation bar and I can't see it, also, my navigation bar is not all over the screen, in the left side of the screen, I can see some space, and my last problem is with my editbox, I can only write from the middle and not from the beginning.
How can I set my Icon to be on top of the navigation bar ?
How can I modify the size of my navigation bar and set it all over the screen ?
How can I write from the beginning and not from the center in my editbox ?
HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an awesome website">
<title>Make Python - Online Python Editor</title>
<style>
body {
background-color: lightslategray
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0px;
width: 100%;
}
li {
float: left;
}
.text {
display: block;
color: white;
text-align: center;
padding: 16px 18px;
background-color: teal;
text-decoration: none;
}
li a:hover {
background-color: black;
}
</style>
</head>
<body>
<a title="Main Page" href=""> <!-- Main Page Link -->
<img style="border: 0px; width: 50px; height: 50px;" src="python.png" alt="Python Image">
</a>
<ul>
<li><a class="text" href="">Home</a></li>
<li><a class="text" href="">About</a></li>
<li><a class="text" href="">Contact</a></li>
</ul>
<form>
<input type="text" style="width: 1500px; height: 750px;">
</form>
</body>
</html>
Use z-index: 1; to place the img tag on top of the ul tag.
Right now your navbar is stretched to all of your page width. To use all of your
page width. I guess you want your navbar links to spread within it.
Use display: flex; and justify-content: space-between for ul to
achieve this.
Use text-align: left; to write from the beginning.
here, i want to place Notification and profile link to right side and home assignment, my course, student, message to left side. I made one div and through CSS i put it in center position and width to some %. Now, I want to place left side link and some space and right side link. how it can be done in a single div.
enter image description here
You can have 3?
<div class="header">
<div id="left">
<--!Whatever code you wrote for the home, assignment, myCourse, student, and message buttons!-->
</div>
<div id="right">
<--!Whatever code you wrote for the notification and profiles button!-->
</div>
</div>
Does that count as one div? I can't think of another way to do it, but I really don't know that much either so others probably know.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav-right {
float: right;
}
</style>
</head>
<body>
<div class="topnav">
Home
MyCourse
Student
Assignment
Message
<div class="topnav-right">
Notification
Profile
</div>
</div>
</body>
</html>
I'm new in html and css so i have a question.
I am messing around with some stuff but after placing some images on my page i can't click on my links anymore.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Rijschool Houben</title>
</head>
<body>
<div id="header"></div>
<div id="header-pic"><img src="image/test.png"></div>
<p>
<div id="nav-bar">
<ul>
<li>|Home|</li>
<li>Info|</li>
<li>Prijzen|</li>
<li>Acties|</li>
<li>Machtiging|</li>
<li>Theorie|</li>
<li>Begeleid rijden|</li>
<li>Bromfiets|</li>
<li>Contact|</li>
</ul>
</div>
</p>
<p>
<div id="icon-main">
<i class="fa fa-mobile" style="font-size:28px;"></i><a>046-4524501</a><br />
<i class="fa fa-paste" style="font-size:18px;"></i><a>raymond#rijschoolhouben.nl</a><br />
<i class="fa fa-facebook-official" style="font-size:20px;"></i><a>Volg ons op Facebook!</a>
</div>
</p>
<p>
<div id="img-1">
<img src="image/1.jpg" alt="Scooter" width="330px" height="400px"/>
</div>
<div id="img-2">
<img src="image/2.jpg" alt="Geslaagde 1" width="337px" height="400px"/>
</div>
<div id="img-3">
<img src="image/3.jpg" alt="Geslaagde 2" width="337px" height="400px"/>
</div>
<div id="img-4">
<img src="image/4.jpg" alt="Geslaagde 3" width="337px" height="400px" />
</div>
<div id="img-5">
<img src="image/5.jpg" alt="Geslaagde 4" width="337px" height="400px" />
</div>
<div id="img-6">
<img src="image/6.jpg" alt="Geslaagde 5" width="337px" height="400px" />
</div>
</p>
</body>
</html>
CSS:
div#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: white;
}
div#header-pic{
position: fixed;
height: 50px;
left: 500px;
}
div#nav-bar{
position: fixed;
padding-top: 130px;
left: 0;
width: 100%;
white-space: nowrap;
}
div#nav-bar ul{
list-style: none;
text-align: center;
background-color: #323232;
padding: 10px 0;
}
div#nav-bar li{
display: inline;
}
div#nav-bar li a{
text-decoration: none;
color: white;
padding: 14px 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#icon-main{
position: fixed;
color: #323232;
padding: 10px;
}
div#icon-main i{
padding: 5px;
}
div#icon-main a{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
div#img-1 {
position: fixed;
left: 0;
padding-top: 184px;
width: 100%;
}
div#img-2 {
position: fixed;
padding-top: 184px;
padding-left: 255px;
}
div#img-3 {
position: fixed;
padding-top: 184px;
padding-left: 915px;
}
div#img-4 {
position: fixed;
padding-top: 184px;
padding-left: 585px;
}
div#img-5{
position: fixed;
padding-top: 184px;
padding-left: 1245px;
}
div#img-6 {
position: fixed;
padding-top: 184px;
padding-left: 1575px;
}
i know the code is bad but i hope someone can help me!
Here is a fiddle.
-Ryan
I looked at your external code. Please add your HTML and CSS to your question in Stack Overflow.
From the external HTML you have the following code:
<a>046-4524501</a>
Which does not work as a link.
You have this code
Home
That works as you would expect it to.
Change this line:
<a>046-4524501</a>
to
046-4524501
Where the href="Where you want the link to go".
It's all about the value for "href"
I did notice you are doing non-responsive html which means it is not mobile friendly or will look the same in smaller browser windows.
Your code is messy but your doing okay.
First off wrap everything you are putting in the header in the header div
The images are floating up to the top over your nav due to the position:fixed
Remove all the empty <p></p> between your div's
Use floats on your images and width of a percentage of 100% plus wrap them in a container/div
If you need me to I can see if I can redo all your html and CSS but think for you would learn better to try it out for yourself.
You could always go look at the HTML5 boilerplate out there and use them to guide you on how to construct good code.
I see that you are trying to create a row of images. Instead of using a system of DIVs why don't you use the more flexible (and more responsive) structure of a list?
Then you can use float: for lining them up in a row and basic CSS to give them sizes. The images will be specified as a background for these li elements (better practice).
Like this: http://codepen.io/Attrexx/pen/KVvwXP
You are placing divs containing the images using padding. That's why you can not use links in the menu. Div blocks cover your links.
Try using something like:
selector {
position: absolute; /* or `fixed` like in your css; see below*/
top: 100px; /* pixels from the top */
left: 100px; /* pixels from the left */
/* you can also use `bottom` and `right` */
}
For example:
div#img-3 { /* or just `#img-3`; see below */
position: absolute;
top: 184px;
left: 915px;
}
Check this w3 schools article for more information on positioning.
Not related to the question:
If you are using CSS's id selector (#), I suggest not to use element selector (e.g. div). So rather than div#img-3 try using just #img-3.
Try avoiding using id selectors at all. You can use class rules, and happily after some time they will result in saving you a lot of work.
If you are using HTML5 then try using semantic elements.
Avoid using fixed position when you don't need to (your page is an example of such page).
Paragraphs (p) shouldn't be used in the same way as div. It may result in bad habit for semantic sites.
Rather than using positioning (position), experiment with float or different display types (e.g. inline-block). Use it only when it is really needed.
Read about HTML Responsive Web.
At: http://www.fmancoding.com their is a section under "featured game of the week" that displays all the games, then the title and description of it. It looks exactly what I would like it to, except on a mobile device. On a mobile device the images are being tabbed in and touching each other.
Does anyone know why this is happening? I have breaks inbetween each div and I believe div's automatically are created on a new line, like a paragraph. Also, I added padding and margin to see if this would fix the problem, but it did not.
HTML:
<html>
<head>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="Javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Fman Coding</title>
</head>
<body>
<center id="headerBox">
<h1 id="header">Welcome To Fman Coding</h1>
<h2 id="header">Most Games Are Mobile Friendly, And Can Be Used Offline!</h2>
</center>
<div id="MG">
<div id="FG">
<p id="ft">This Week's Featured Game!</p>
<img src="Games/Murderer.jpeg" width="100%" height="30%" alt="Miji">
<!-- Game Name & Description -->
<p id="FGD">Miji! Input Your Number Of Players And It Will Automatically Generate Everyone's Job!</p>
</div>
<div id="gLibrary">
<!-- Games -->
<div id="gameFrame"><img id="float" src="Games/Murderer.jpeg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Miji</h4>
<span id="desc">This game auto selects your positions based on the number of people playing!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="Games/RPS.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Rock, Paper, Scissors</h4>
<span id="desc">You can play Rock, Paper, Scissors, Shoot against a computer!</span>
</div>
<!-- Next Game -->
<br/>
<!-- Next Game -->
<div id="gameFrame"><img id="float" src="MC/Click.jpg" width="15%" height="15%"><br/>
<h4 id="gameTitle">Minecraft Player Finder</h4>
<span id="desc">Create groups for certain games and find players to play, or help you build stuff!</span>
</div>
</div>
</div>
</body>
</html>
CSS:
#header{
text-align: center;
color: aqua;
}
#headerBox{
border: 1px black solid;
margin: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url('matrixCode.jpeg');
}
#gLibrary{
color: #989898;
margin: 15px;
display: inline;
}
#gLibrary p a{
text-decoration: none;
color: aqua;
display: inline;
}
#FG{
border: 3px gold solid;
}
#FGD{
color: red;
text-align: center;
}
#MG{
border: 1px purple solid;
background-color: #333;
}
#ft{
text-align: center;
font-size: 16px;
background-color: #333;
color: red;
}
#gameTitle{
color: aqua;
}
#float{
float: left;
}
#desc{
color: crimson;
}
#gameFrame{
margin-top: 1%;
margin-bottom: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
Just found out this solution in wordpress by Tobiasbg.
The cause for this basically is that your theme is hiding all HTML tags (using display: none;) in it’s CSS file.
You can either correct it in the theme's CSS file or give ,
br{
display:block !important;
}
if you want only specific div's br to be shown give the div's class name prior to br in thre above code.
#gLibrary should be displayed as block, not inline :
#gLibrary{
color: #989898;
margin: 15px;
display: block;
}