I'm creating a website for my school programming class and my css won't show up past my homepage, my pattern of creating css doesn't change, and so far 5 people in my class have checked and none know the reason
Homepage
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "mainpart">
<div class="statement">
<p>
WHATS UP BROTENDOS
</p>
</div>
<div class= "god">
<center> <img src= "god.png" alt="ranch dude"> </center>
</div>
<div class= "statement2">
<p>
RANCH IS THE #1 MOST RARE RESOURCE EVER!!!! THAT MEANS OUR GOVERNMENT IS LIMITING IT FOR DUDES LIKE THIS!!!!!
</p>
<p>
THIS NEEDS TO BE ADDRESSED AT THE NINTENDO CONVENTION!!!!!
</p>
</div>
<div class= birdup>
<center><img src= "birdup.jpg" alt= "bir ddup"></center>
</div>
</body>
CSS
body {
width: 100%;
margin : auto;
}
.container {
width: 960px:
margin: 0 auto:
}
.header {
background: #94DD6E;
height: 100px;
width: 100%;
top: 0;
position: fixed;
}
.logo {
float: left;
font-family: "Helvetica";
font-size: 15px;
margin-left:15px;
padding-top:10px;
}
a {
text-decoration: none;
color: #fff
}
li {
list-style: none;
float: left;
margin-left: 15px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
margin-right: 15px;
}
.nav {
float: right;
padding-top: 10px;
}
.content {
background: #e7e8e1;
}
.statement {
padding-top: 100px;
text-align: center;
font-family: "Helvetica";
font-size: 25px;
}
.statement2 {
text-align: center;
.god {
text-align: center;
}
.pimplepete {
margin-top: 50%;
text-align: center;
color: orange;
}
.mainpart {
background-color: #F5F6E9;
}
.video {
padding-top: 25px;
}
.donation {
text-align: center;
font-family: "Papyrus";
font-size: 50px;
}
Page that the CSS isn't working on
<!doctype html>
<head>
<link rel= "stylesheet" href="css1.css">
<meta charset = "utf-8">
<meta name= "keywords" content= "photo">
<title> "trash" </title>
</head>
<body bgcolor="#F5F6E9">
<div class="header">
<div class="container">
<div class="logo">
<h1><a href="index.html">LEGALIZE RANCH</h1>
</div>
<div class= "nav">
<ul>
<li>RANCH!</li>
<li>WHY?????</li>
<li>BROTENDO NATION</li>
</ul>
</div>
</div>
</div>
<div class= "video">
<center>
<iframe width="640" height="360" src="https://www.youtube.com/embed/0V7FGCtnoJo" frameborder="0" allowfullscreen></iframe>
</center>
</div>
<div class= "donation">
<p>
OUR MOVEMENT IS GROWING!!! SPORT SOME <i>RANCHY</i> MERCH
</p>
<p>
LEGAL RANCH MERCH
</p>
</div>
</body>
Don't worry I know that the formatting isn't good.
Your CSS is linked relatively.
<link rel= "stylesheet" href="css1.css">
If your other pages are perhaps in different folders - folders that don't also have a css1.css alongside the html files inside them, it won't understand the reference to css1.css.
Try adding a leading slash /css1.css if you're accessing the site via a URL, rather than the filesystem, and the css is in the web root.
If you're loading the pages via the filesystem, adjust the reference to the css based on the file calling it. You might traverse up a level by referring to it as ../css1.css, instead.
To illustrate further, given a filesystem like:
public_html/
- index.html
- css1.css
- about/
- index.html
public_html/index.html knows about css1.css because they live in the same directory.
However, in public_html/about/index.html, if the <link> tag references css1.css, the browser will look for a file called public_html/about/css1.css, which I imagine doesn't exist.
Related
My thing is not working i can't figure out any errors too.As far as i know i tried to separate those mountains and cloud on different level which seems not to be working rather they're sitting beside on their parent element
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="images/icon2.ico">
<title>Farhan Sadiq</title>
</head>
<body class="body">
<div class="top-container">
<img class: "top-cloud" src="images/cloud.png" alt="cloud-img">
<h1>Farhan Sadiq</h1>
<p><span class="underline">WebDevloper</span> and <span class="underline">GameDevloper</span></p>
<img class: "bottom-cloud" src="images/cloud.png" alt="cloud-img">
<img src="images/mountain.png" alt="mountain-img">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
.body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.top-container {
background-color: #CEE5D0;
}
.middle-container {
background-color: pink;
width: 200px;
height: 200px;
}
.bottom-container {
background-color: yellow;
width: 200px;
height: 200px;
}
.underline {
text-decoration: underline;
}
.bottom-cloud {
position: absolute;
}
you have a typo in the section, the property class uses = instead of : , then what does the output you expect mean, how do you separate it?
There is a typo class in the tag. You have to change the class in this img tag class: "top-cloud" so it looks like this class="top-cloud".
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 am new here and generally i recently started to learn webdev and i am trying to make little "portfolio" website to train practice skills. I have one problem what i can't solve, and i am siting with eyes on screen about few hourse what makes me so confused
First issue is whitespace on right side of the page.
2.Next issue is a lot of whitespace what remaining after relative positioning.
How can with these get rid of these things?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<!--header-->
<header>
</header>
<div class = "container">
<div class="text">
<h1 id = "h1">“The life of a designer...” </h1>
<h2 id = "h2">Is a life of fight. Fight against the ugliness.
Just like a doctor fights against disease. For us,
the visual disease is what we have around, and what we
try to do is cure it somehow with design.</h2>
<h3>– Massimo Vignelli. </h3></div></div>
<div class="txt">
<p id ="one">Hi, i am webdeveloper<id></id></p>
<p id ="two">If you want work with me</p>
<p id ="three">leave a message.</p>
</div>
<div class = "icons">
<img src = "icons/cheap.png" alt = "cheap" id="cheap"/>
<img src = "icons/Trust.png" alt = "trust" id="trust"/>
<img src = "icons/timeliness.png" alt = "timeliness" id="timeliness"/>
<img src ="icons/developing.png" alt ="developing" id="developing"/>
</div>
<div class = "Social">
<img src ="icons/facebook.png" alt ="fb" />
<img src ="icons/instagram.png" alt ="insta" />
<img src ="icons/linkedin.png" alt = "linkedin"/>
</div>
<!--Overview-->
<section>
<article>
Aaaa
</article>
</section>
<!-- Social media icons-->
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: myFirstFont;
src: url(/fonts/Graviola_Regular.otf);
}
#font-face {
font-family: czcionka;
src: url(/fonts/czcionka.ttf);
}
body {
margin:0px;
padding:0px;
}
header{
background-image:url(bg1.jpg);
background-repeat:no-repeat;
height:800px;
opacity: 0.8;
background-size:100% 100%;
}
.txt {
position:relative;
right:-50px;
top:-1120px;
border-left:3px solid white;
font-family:czcionka;
}
.txt #one {
position:relative;
color:white;
font-size: 50px;
position:relative;
bottom:-60px
}
.txt #two {
position:relative;
color: white;
font-size: 50px;
}
.txt #three {
position:relative;
color: white;
font-size: 50px;
top:-60px
}
.container .text {
color:white;
text-align: center;
position:relative;
top: -450px;
margin: 50px;
font-family: myFirstFont;
}
.container .text #h1 {
font-size:60px;
border-bottom: 3px solid;
font-family:myFirstFont;
}
.container .text #h2 {
font-size: 25px;
font-style:italic;
}
.container .text #another {
position: relative;
top:-500px;
font-family:myFirstFont;
font-size:40px;
}
.Social {
position: relative;
top:-1460px;
right:-50px;
margin:500px;
}
.icons #cheap {
position: relative;
top:-1139px;
right:-1225px
}
.icons #timeliness {
position:relative;
top:-1140px;
right: -1110px
}
.icons #developing {
position:relative;
top:-1140px;
right:-750px;
}
Here's link to img how this looks. When i scroll down page rest of my site elements are very far down.
Like this looks the white space what i talking about
For whatever reason, my the HTML and CSS for my page will not link. CSS is in the same directory. I have ran the page through a validator and no issues have come up, so there is no reason this shouldn't work? I'm not stupid, never had this problem before either, so I'm quite confused. It just has no effect.
https://jsfiddle.net/4ocpjL1v/
maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
You have to use # for IDs (or . for classes) before the name.
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>UnleashedMC | Join Us!</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="howtojoin.css" />
</head>
<body>
<!-- Main content area -->
<div id="container">
<div id="logo">
<img src="images/logomedium.png" alt="">
</div>
<div id="maintext">
<p>Join us at ulmc.net</p>
<p>Don't know how to join? Read below!</p>
</div>
</div>
</body>
</html>
#maintext {
font-family: 'Oswald';
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Oswald';
text-align: center;
}
#logo {
text-align: center;
}
this will work for sure....u have put font after css, it should be before css.
See Live https://jsfiddle.net/subodh_saraswat/4ocpjL1v/1/
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%;
}