98.214.131.200/index.php
<html>
<head>
<title>Peoria Triathlon Club</title>
<meta charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Forum</li>
<li>Join</li>
<li>Members</li>
<li>Events</li>
<li>Training</li>
<li>Facebook</li>
<ab>Peoria Triathlon Club</ab>
</ul>
<ul id=main>
<p>Main</p>
</ul>
</body>
</html>
98.214.131.200/style.css
body {
background:#000 url(bg.jpg) center top no-repeat;
background-size: cover;
color: #c1c1c1;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#main{
display:inline-block;
float:left;
}
How do I make things in the main div appear below the background picture and still have the navigation bar at the top?
Current code can been seen at http:// 98.214.131.200
Change your "main" container to a div instead of a ul (unless you have a compelling reason to make it a ul...you can always have a ul inside your main div).
Add a margin-top property to your #main css to bump it down from the nav bar an appropriate amount.
So in index.php:
<div id="main">
<p>Main</p>
</div>
And in style.css:
#main {
margin-top: 240px; /* Adjust as needed */
}
You can dump the display: inline-block from your main css, and you may not need the float:left either depending on your subsequent intentions.
You may also need to drop the background-size: cover from your body's css, or the image may grow to cover you main div as well.
I can't see exactly what you're trying to achieve, but you can add a "padding-top" to your body equal to the height of your background image.
body { padding-top: 50px; } //assuming your bg.jpg is 50px height
And check if you really need that float on your #main.
try this
body {
background-color: #000000;
background-image: url("bg.jpg");
background-position: center top;
background-repeat: no-repeat;
color: #C1C1C1;
font-family: Arial,Verdana,Helvetica,sans-serif;
margin: 0;
}
#main {
margin-top: 370px;
}
Related
making a website for the first time and I found that when I zoom out, my layout size get messed up. can anyone help explain to me why? and how to fix it Thanks!
This is what its like at 100% zoom: http://puu.sh/peI6R/c7f45747a0.png
When I zoom out: http://puu.sh/peI80/f5fb16d6d0.png
Also, how can I make my footer have a vertical list on the left side? I tried using float: left but it just scrambled the words.
After trying to make this website, I realized that my CSS properties knowledge is HORRIBLE. I've only done the HTML/CSS/JS on Codecademy and maybe that's not enough, so any tips would be appreciated!
body {
margin: 5px 225px 225px;
background-color: #FFA500;
font-family: Comic Sans MS;
}
.banner {
background-image: url(http://miriadna.com/desctopwalls/images/max/Orange-space.jpg);
height: 250px;
background-size: cover;
background-position: center center;
margin: 0;
}
.heading {
text-align: center;
background-color: #3232FF;
border-bottom: 5px solid black;
}
.Content {
width: 900px;
height: 700px;
margin: auto;
background-color: white;
}
.Profile {
margin-left: 100px;
}
.mypic {
margin-left: 50px;
}
.footer {
width: 900px;
height: 120px;
color: black;
margin: auto;
background-color: #aaa;
}
.footer ul {
list-style: none;
}
.footer li {
display: block;
}
nav {
display: block;
background: #aaa;
}
ul {
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 5px 100px;
}
a {
color: black;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: white;
}
<html>
<head>
<title>Simon's First Website!</title>
<meta charset="UTF-8">
<meta name="description" content="Simon's Portfolio">
<meta name="keywords" content="Simon Fu First Portfolio">
<meta name="author" content="Simon Fu">
<link rel="stylesheet" type="text/css" href="First.css">
</head>
<body>
<div class="banner"></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
</ul>
</nav>
<div class="Content">
<div class="heading">
<img src="http://vignette1.wikia.nocookie.net/yogscast/images/c/c0/Simon_Banner_png.png/revision/20140308175434">
</div>
<div class="base">
<h1 class="Profile">Profile</h1>
<figure class="mypic">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" height="250" width="250">
<figcaption>My beautiful face</figcaption>
</figure>
</div>
</div>
<div>
<div class="footer">
<div align="center"><strong>Contact Me</strong></div>
<ul class="left">
<li>Email: dontmessiiii#gmail.com</li>
<li>Melee: JK</li>
<li>League of Legends: jk</li>
</ul>
</div>
</body>
</html>
What's happening?
Follow me
This is your layout, basically.
body
banner
nav
content
footer
As you don't use CSS to style our sections yet, all of them have width: auto. In simple words, and only to understand this problem, in the case we can say our sections have the width of your browser's window.
You styled your body element with margin: 5px 225px 225px, so in other words, bacause of the margin shorthand property:
top margin is 5px
right and left margins are 225px
bottom margin is 225px
So now our elements' width is the result of 100% (in this case, browser window's width) - 225px * 2 (because of left and right body's margins).
Then, you set content and footer's width to 900px
.content {
width: 900px;
}
footer {
width: 900px;
}
So, if you back to our layout we see that
body
banner has width: auto => browser window's width - 225 * 2
nav has width: auto => browser window's width - 225 * 2
content has width: 900px
footer has width: 900px
The width of content and footer are static, while the width of banner and nav depends of your browser window's width.
How to solve it
Defining the width of banner and navas you did with content and footer. You can do a div, called for example container to set the width off all element, so if you want to change it in the future you only have to modify one line.
.container {
width: 600px;
margin: 0 auto;
}
Height of .banner and nav must be defined like .Content and footer (900px). margin:0 auto is added to make it always center;
.banner, nav { width: 900px; margin:0 auto; }
Hi guys i made a simple webpage with a couple of divs and a background image. Basically i wanted the background image to disappear if the width of the device is smaller.
But when i minimize to width of browser to less than 500px the media query only works for firefox and not for chrome.
Additionaly here http://pastebin.com/TZ1UwVmK is a link to the code. You can substitute the background image for https://s3.amazonaws.com/codecademy-content/projects/broadway/bg.png .
enter code here
<code><pre>
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css' />
<link href='testnew1.css' rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- used to give phones a background in place of image that doesn't show up for unknown reason -->
<style>
.container-in-headerdiv { max-width: 940px;
.container-in-headerdiv { max-width: 940px;
margin: 0 auto;
padding: 0 10px;}
.header {background-color: #333333;}
.nav{list-style-type:none;
margin:0;
padding: 20px 0;}
.jumbotron { background: url('images/projectbroadway-pic.png') no-repeat center center;
background-color: #333333; /* gives lavender color if image doesn't load */
background-size: cover;
height:800px;} /* not centered, or positioned except its properties as a div under normal flow */
#media (max-width: 500px) { /* relies on viewport to give width, gives lavender color if image doesnt load */
.jumbotron{
background-image:none;
background: #E6E6FA;
background-size: cover;
height:800px;}
}
}
.container-in-jumbotron{max-width: 940px;
margin: 0 auto;
padding: 0 10px;}
.main { position: relative; /* this class not working at all atm */
top: 180px;
text-align: center;}
.btn-main{ background-color: #333333;
color:#ffffff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="header">
<div class="container-in-headerdiv">
<ul class="nav">
<li>About</li>
<li>Work</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container-in-jumbotron">
<div class="main">
<h1>We are Broadway</h1>
<a class="btn-main" href="#">Get started</a>
</div>
</div>
</div>
</body>
</html>
</pre></code>
You have use background when updating the background of jumbotron not background-color:
.jumbotron{
background: #E6E6FA;
background-size: cover;
height:800px;
}
This is because you use 'background-color' in your media query instead of 'background'
Try
<code><pre>
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css' />
<link href='testnew1.css' rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- used to give phones a background in place of image that doesn't show up for unknown reason -->
<style>
.container-in-headerdiv { max-width: 940px;
margin: 0 auto;
padding: 0 10px;}
.header {
background-color: #333333;
}
.nav{
list-style-type:none;
margin:0;
padding: 20px 0;}
.jumbotron { background: url('https://s3.amazonaws.com/codecademy- content/projects/broadway/bg.png') no-repeat center center;
background-color: #333333; /* gives lavender color if image doesn't load */
background-size: cover;
height:800px;} /* not centered, or positioned except its properties as a div under normal flow */
#media (max-width: 500px) { /* relies on viewport to give width, gives lavender color if image doesnt load */
.jumbotron {
background: none;
background-color: #E6E6FA;
background-size: cover;
height:800px;
}
}
.container-in-jumbotron {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}
.main {
position: relative; /* this class not working at all atm */
top: 180px;
text-align: center;
}
.btn-main {
background-color: #333333;
color:#ffffff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="header">
<div class="container-in-headerdiv">
<ul class="nav">
<li>About</li>
<li>Work</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container-in-jumbotron">
<div class="main">
<h1>We are Broadway</h1>
<a class="btn-main" href="#">Get started</a>
</div>
</div>
</div>
</body>
</html>
</pre></code>
works in chrome for me
update Here is the pastebin pastebin.com/YgJv5MMA Here is the screenshot i.imgur.com/buTLjzp.png
It now works on safari, opera, smartphone, edge, and explorer. I have Google Chrome 47.0.2526.80 (Official Build) m (32-bit).
I have also found answers that say there is a bug with resizing windows in chrome browser and media queries here Google Chrome, float, and media queries and here Weird float rendering in Chrome when using media queries
Oh well , I'm moving on.
EDIT
FOUND PROBLEM. Was linking the html and css files through dropbox. I took the two files and put them on my local desktop and now the media query works when the page is minimized to less than 500px width. So i guess i wont be using dropbox. Thanks for looking into this for me.
HERE was the html and css pastebin.com/YgJv5MMA
I am coding a practice site using Microsoft Expression Web 4 but I am having a lot of difficulty getting past the landing page. I have all code copied below the questions. The first problem is that I have a hover effect on the links in the nav menu that overlaps the nav bar and I want the text centered within the nav bar vertically. I have tried several how-tos on css-tricks.com and the browser display doesn't seem to respond to the edits I make I tried from there. navbar issue and overflowing image I can manually adjust it so that if fits by figuring out pixels by trial and error but this seems clunky and non-responsive. Is there a better way?
The second question is the image I have for the header section is not fitting the screen properly. It overflows on the right side. It didn't do this before, but now it is and I haven't changed any of the code in the #header img {} section, so I am not sure what happened. I'm pretty much a beginner at this so thanks for any help.
HTML
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<div id="header">
<div class="nav">
<div id="menu">
Home
Travel
Safari
Live
Search
</div>
</div>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</div>
</head>
CSS
#header {
position:relative;
width: 100vw;
height: 600px;
overflow:hidden;
right: .5em;
bottom: 1em;
}
#header .nav {
display:inline-block;
height:40px;
width:100%;
background-color:#a41d0e;
overflow:visible;
z-index: 10;
}
.nav #menu a{
display: inline;
float:left;
position: relative;
vertical-align:middle;
padding: 1em 1em 1em 1em;
text-decoration: none;
color: white;
}
.nav #menu a:hover {
background-color:#7f170b;
}
Use CSS properties display: flex and align-items: center to center vetically items in a row.
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
height: 40px;
padding: 1em;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
<html>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<img alt="drakensburg" src="images/drakensburg.jpg" />
<h1>Visit Africa</h1>
</header>
<body>
<html>
Nothing except the link tag should be between <head></head> in the exmple you gave! I assume that's a mistake.
#header {
width: 100vw;
height: 600px;
overflow:hidden;
}
technically you don't need any styles for your header. See css for img below. If you want to your header to be 600px, and have your image fill it, you should set your image as a background image in css
background-image: url('path/to/img.jpg');
Alternatively, you could :
/*style your image like so. It won't ever be wider than its immediate parent container*/
img{
max-width: 100%;
height auto;
}
Here is the rest of your css, commented.
#header .nav {
/* no need for any display property here as it is block by default and takes up 100% of the width you probably don't need it to be inline-block either if it'll take up 100% of the width */
height:40px;
background-color:#a41d0e;
/*z-index is only useful for positioned elements (relative, absolute or fixed) so either give position: something to your navbar or ditch the z-index !*/
}
As far as the links go you don't need to give them a top and bottom padding, just give them a line-height that is equal to the height of the container, that is 40px. That way the links will be vertically centered, with the same height as their container, and you will still be able to give them the width of your choice with left and right padding.
.nav #menu a{
/*don't need display: inline as it is negated by the float anyway.
position relative alone like this doesn't serve any purpose. vertical-align middle only works for display: inline-block or table/(s)*/
float:left;
line-height: 40px;
padding: 0 1em 0 1em;
text-decoration: none;
color: white;
}
Very useful link where you'll find a whole lot of very useful explanations on all things CSS : http://tympanus.net/codrops/css_reference/
Hope any of this helps!
you can use this code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
body {
margin: 0;
}
nav {
display: flex;
background-color: #a41d0e;
}
nav a {
display: flex;
align-items: center;
padding: 15px 35px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #7f170b;
}
.outer {
width: 100%;
overflow: hidden;
}
.inner {
display: inline-block;
position: relative;
right: 0;
left: 0;
width: 100%;
}
img {
position: relative;
left: 0;
right: 0;
width: 100%;
}
h1 {
text-align: center;
position: absolute;
left: 0;
top:0;
right: 0
}
</style>
</head>
<body>
<header>
<nav id="menu">
Home
Travel
Safari
Live
Search
</nav>
<div class="outer">
<div class="inner">
<img src="https://3.bp.blogspot.com/-zvTnqSbUAk8/Tm49IrDAVCI/AAAAAAAACv8/05Ood5LcjkE/s1600/Ferrari-458-Italia-Nighthawk-6.jpg" alt="" />
<h1>Visit Africa</h1>
</div>
</div>
</header>
</body>
</html>
I am by no means an expert in HTML or CSS. I am fairly new, and have little experience. I have come across and issue and I am not sure how to fix it. As you can see from the JSFiddle (linked below) there is a white gab between the image and the navigation bar. The image is a background-image created in CSS. I would like to remove the gap so that the image is flush with the navigation bar.
I have tried changed the values for the margin and padding of the #headerimage div as well as the #nav div. I know if I make the margin-top a negative value, it can fix the problem, but that is a very clunky solution because I would constantly have to change that value if I increase font size or anything like that. I have also search stackoverflow for similar problems, but none of them fixed my problem.
I also realize that I probably could have done many things differently in terms of how I coded some things, again I am new. The following code is the HTML code, the next block is the CSS code. Sorry if I did not explain something well, if you require more information, I will try my best to elaborate further on the issue. Thank you guys so much for taking the time to look at my issue. All the best. If you notice anything else, whether it a possible error, or just not a good solution for something, I would love to here about it.
<html>
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>Sean Anderson</title>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>About</li>
<li>Achievements</li>
<li>Academics</li>
<li>Contact</li>
</ul>
</div>
<div id="headerimage">
<h1>SEAN ANDERSON</h1>
</div>
<div id="whoami">
<h2>WHO AM I?</h2>
<ul>
<li>I am a student at SFS High School</li>
<li>I am an aspiring programmer</li>
<li>Comics, books, programming, casual gaming</li>
<li>4.0 GPA</li>
<li>Star Wars is my life</li>
</ul>
<img src="testbackground.jpg">
</div>
<div id="skills">
<h2>SKILLS</h2>
<ul>
<li>Familiar with Java, HTML, and CSS</li>
<li>Skilled with Microsoft Office Suite 2013</li>
<li>Skilled in math, science, and English</li>
<li>Awesome</li>
</ul>
</div>
<div id="footer">
<p>Copyright © 2015 Sean Anderson</p>
</div>
</div>
</body>
</html>
body {
font-family: Helvetica, sans-serif;
width: 100%;
background-color: white;
margin-left: 0px;
margin-top: 0px;
}
#container {
width: 100%;
background-color: white;
margin-top: 0px;
}
#nav {
background-color: black;
margin-bottom: 0px;
}
#nav ul {
list-style-type: none;
padding: 30px 0px 30px 0px;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
min-width: 1920px;
}
#nav li {
display: inline;
text-align: center;
}
#nav a {
text-decoration: none;
text-align: center;
color: white;
font-size: 30px;
padding: 30px 50px 30px 50px;
}
#nav a:hover {
background-color: white;
color: black;
}
#headerimage {
background-image: url("testbackground.jpg");
background-repeat: repeat;
height: 1000px;
width: 100%;
margin-top: 0px auto;
display: block;
clear: both;
}
#headerimage h1 {
text-align: center;
vertical-align: middle;
padding-top: 150px;
}
Here is the JSFiddle: http://jsfiddle.net/Seanathon98/3nw5wj1d/
(The image takes up the whole width on my monitor, not sure why is doesn't appear that way, as I did use width: 100%.
Set the margin and padding of the H1 element to 0.
h1 {
margin: 0;
padding: 0;
}
You can center the h1 element by setting its position to be absolute and use padding & margin to position it correctly;
#headerimage h1 {
position: absolute;
margin: -20px 0 0 0;
padding: 50% 0 0 0;
}
Alright, so I've tried a lot of different things here but I just can't seem to get my menu bar to stretch all the way across the page. There's a small gap on the left side. Am I just missing something here?
Also so far this is the only way I've been able to get my footer somewhat centered at the bottom of the page. Every time I set the left and right margins to auto it puts the footer in line with the menu bar. Is there a better way to do this as well?
Thank You.
<!DOCTYPE html>
<html>
<head>
<title>Connor Lepert: Homepage</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<link rel="icon" href="logo.png">
<style>
#font-face {
font-family: Vanadine;
src: url(vanadine.ttf);
}
body {
background-image: url(bckgrnd.jpg);
background-size: 100%;
background-repeat: no-repeat;
font-family: sans-serif;
color: white;
}
a {
color: white;
font-family: Vanadine;
text-decoration: none;
}
a:hover {
color: yellow;
}
p {
color: white;
font-family: Vanadine;
}
footer {
position: fixed;
display: block;
margin-left: 45%;
margin-right: 45%;
text-align: center;
margin-top: 320px;
}
#siteid {
margin-left: auto;
margin-top: auto
}
#menubar {
background-color: #ABADB0;
width: 100%;
height: 20px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: auto;
text-align: center;
word-spacing: 20px;
position: fixed;
}
#header {
display: block;
margin-left:auto;
margin-right: auto;
text-align: center;
margin-top: 330px;
}
</style>
</head>
<body>
<div id="siteid"><img src="logowhite.png" width="50px" alt="Personal logo"/></div>
<div id="header"><img src="header.png" width="400" alt="Lepert"/></div>
<div id="menubar">
Home
About
<a href=mailto:clepert13#gmail.com>Contact</a>
Portfolio
ScrapYard
</div>
<footer>©<a href=> 2015 by Connor Lepert </a> <br> <p></p> </footer>
</body>
</html>
You must just add a margin:0 to your body
I create a wrapper class and wrap the code that needs to be centered within it. Here's an example:
.wrapper {
margin: 0 auto;
width: 960px;
}
<html>
<div class="navbar">
<div class="wrapper">
<p>Content goes here</p>
</div><!--wrapper-->
</div><!--navbar-->
</html>
You just need to make sure that you place the wrapper class before the content, but after the background that needs to repeat. That is shown in my example. Otherwise, you'll have everything centered like it needs to be, but your background will cut off because it's being contained in a 960px area.
Like Artefact already said, adding margin:0 to your body will remove the gap beneath your menubar.
Just a little explaining:
This gap is caused by your browser, in fact every browser has some presets for some elements (i.e. the size of a h1 and how links are displayed) and those presets differ from browser to browser.
For this reason most people will use css resets to have a clean starting point for their own css.
There are several resources for resets out there like the one from meyerweb that you can use or you can simply write your own.