The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.
Related
Hi I'm making a website but I'm having two problems
My HTML file doesn't see my CSS file. My Html file is Website/html/index.html and my CSS file is Website/css/index.css
Even though i do text-align: center;(CSS file line:22) my list doesn't become straight line
My Html code
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk_nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
My Css code
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Thanks for any help!
Also, I'm open to any advice on making this code more smooth.
First of all, try adding two dots to your CSS path. href="../css/index.css"
Then for the alignment, add display: flex; to the kk-nav shown below.
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;}
html{
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
display: flex;
}
.kk-nav li a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
In CSS you are using class .kk-nav but you have defined the class="kk_nav"
please replace the hyphen(-) sign with underscore sign(_) then your CSS with work.
The corrected code is here
.kk_nav{ /* using underscore */
overflow: hidden;
background-color: #191970;
}
.kk_nav a{ /* using underscore */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
and if you want to make nav text in the center use li in CSS not a
like
.kk_nav li{ /* using li not a */
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
Your HTML file doesn't see your CSS file because you haven't given him the good path to the CSS file. Both your files are inside Website folder, but in two different separate folders. So you need to tell HTML to return to its root/parent folder (Website) and from there to enter css folder where he'll find CSS file. You do that with ".."
<link rel="stylesheet" href="../css/index.css">
You made an error. In HTML you named your class "kk_nav" with an underscore and in CSS you called that class with a hyphen insted of underscore. Change it and it should work. And if it doesn't, then call li instead of a in CSS:
.kk_nav li {}
I'm seeing your CSS file just fine when I load it on my machine. Alternatively, in your case, if your current path isn't working for you can set the path like this for example <link rel="stylesheet" href="./css/index.css">. I will mention this is the same method as your current path except you're just adding '.' in front of your current file path. This will tell your HTML file to look for the file you need in the 'CSS' folder in the same directory level as your HTML file (assuming you have your HTML file in the root of your working directory).
In your CSS file you have kk-nav as your class name but in your current HTML file, you set the class as kk_nav. The only other note I really have is I see that you're defining your font size in the 'HTML' tag of your CSS, by default that is set to 16px, if I recall correctly. If you want a bigger font for your code I would suggest the using body element as the best practice. for example: body {font-size: 20px;}
I hope this helps.
This is the updated HTML code I used on my machine
#import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 60%;
}
.kk-header{
width: 100%;
background-color:#191970;
}
.kk-nav{
overflow: hidden;
background-color: #191970;
}
.kk-nav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KK Kiralama</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="kk-nav">
<li>Ana Sayfa</li>
<li>Hakkımızda</li>
<li>Araçlarımız</li>
<li>İletişim</li>
<li style="float:right">Giriş</li>
</nav>
</div>
</header>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<header class="kk-header">
<div class="kk-container">
<nav class="nav">
Ana Sayfa
abc
Araçlar
İletişim
Giriş
</nav>
</div>
</header>
</body>
</html>
I know this is an amateur question but I am absolutely lost. I am only just starting out my website and I am looking to add a small space between the two logos on the right. I have been trying for about 2 hours and can't find anything. This is the HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="ie-edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./Style.css">
<title>Joshua's Portfolio</title>
</head>
<body>
<header>
<div class="logo-container">
<img src="./Images/photoroom.png" alt="Image not found" width="60px" height="40px">
</div>
<nav>
<ul class ="navbar-links">
<li><a class="navbar-link" href="$">HOME</a></li>
<li><a class="navbar-link" href="$">PROJECTS</a></li>
<li><a class="navbar-link" href="$">ABOUT</a></li>
</ul>
</nav>
<div class="socials">
<img src="./Images/linkedin-original.svg" alt="Image not found" width="30px" height="55px">
<img src="./Images/github-original.svg" alt="Image not found" width="30px" height="55px">
</div>
</header>
</body>
</html>
This is the CSS -
* {
margin: 0px;
padding: 0px;
box-sizing: border-box
}
body {
font-family: 'Raleway', sans-serif;
background-color: #c8b69a;
}
header {
display: flex;
width: 90%;
margin: auto;
background-color: #814E10;
align-items: center;
}
.logo-container, .navbar-links, .socials {
display: flex;
}
.logo-container {
flex: 1;
}
nav {
flex: 2;
}
.navbar-links {
justify-content: space-around;
list-style: none;
}
.navbar-link {
text-decoration: none;
}
.socials {
flex: 1;
justify-content: flex-end;
margin-right: 13px;
}
If anyone has any suggestions it would be much appreciated, thanks!
All you need to do to define which element you want to add margin to:
.socials img:first-child {
margin-right: 13px;
}
By this, you can say that in class .socials the first element of img will have margin-right equal to 13px.
Ok I feel you one this, having gone through learning CSS its a pain, you dont want to target the social class because that is the parent of the img's. ( imagine there's a box wrapping the 2 imgs )
What you want to target is ... (.socials img {} )
this will target the individual img tags and from there you want to add a margin-left of 13px.
You dont want to do margin-right because that will push the both imgs 13px to the left of the navbar, making it uneven
.socials img {
margin-left:13px
}
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/600x400/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I used these HTML codes to try to make a website, but I want the section of the feedback be under the image.
I want the result be
instead of
Can anyone tell me how to do it?
I currently used some <br>s and a character to simulate the result that I want
What youre looking for is a so called clearfix:
What is a clearfix?
Whats happening?
By using float:left youre actually changing the text float - beginning at the point where you set float.
To restore the regular blockish behaviour you need to clear the float again.
body {
font-family: Avenir;
}
img {
width: 70%;
height: 75%;
float: left;
margin-right: 10px;
cursor: pointer;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
a {
color: grey;
}
a:hover {
color: black;
}
.title {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>☕️Arrexi's Cafe☕️</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>☕️Arrexi's Cafe☕️</h1>
<div id="body">
<div class="clearfix">
<h1 class="title">About Us
<hr>
</h1>
<img src="https://dummyimage.com/300x200/000/fff" alt="Arrexi's Cafe!">
<article id="description">Hello! Welcome to the website of <b>Arrexi's Cafe</b>!<br><br>We are a friendly community which is with many fun bots and an active chat. You can surely chill in our server! Join us now!</article>
</div>
<h1 class="title">Feedback</h1>
<hr>
<h3>Have joined our server, and want to give some feedback?</h3>
Enter your suggestion in the following box then press "Submit"!
<br>
<textarea id="feedback"></textarea>
<button onclick="submit()">Submit</button>
</div>
<script src="script.js"></script>
</body>
</html>
I wrapped your whole upper part into a div with the clearfix class.
Inside that div you change the float behaviour by using float:left on the image.
By adding the clearfix to the div, there will be a after Element which sets clear:both which basically restores regular behaviour so everything after that doesnt float anymore.
Fore more information and some live examples see https://www.w3schools.com/css/css_float.asp, https://www.w3schools.com/css/css_float_clear.asp and https://www.w3schools.com/css/css_float_examples.asp.
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
I have a question or two about floating headers.
Currently, I'm working with two CSS files, bootstrap.min.css and main.css, the latter being a custom file, containing the following
* {
margin: 0;
padding: 0;
}
#heading {
padding: 0;
margin: 0;
border: 0;
background-color: #acc7dc;
height: 10%;
width: 100%;
z-index: 10;
position: fixed;
font-family: 'Merriweather', serif;
text-align: center;
}
which to the best of my understanding should start the heading block at the very top of the screen. However, sometimes when testing the HTML, there is a whitespace between the top of the screen and the header.
The HTML is structured like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="../static/main.css" >
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<title>Trial</title>
</head>
<body>
<div id="heading">
<header>
<h1>Trial</h1>
</header>
</div>
</body>
</html>
I don't modify this behaviour anywhere else. Any ideas what the problem might be?
Since you are using Bootstrap you could utilize the .navbar-fixed-top class, that should correct for the gap . If you want to apply your own custom styes to the header, you would just need to apply both the class and the id styling:
<div class='navbar-fixed-top' id="heading">
<header>
<h1>Trial</h1>
</header>
</div>