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; }
Related
I have two columns 41% and 59% of the total screen width each. The height of the columns is 1102px.
In the first column I have 4 divs. The first one is for the navigation and it can be maximum 60px. The second one is for a logo I am using. The third one is for text and the fourth one is the trickiest one. I am using an image which does not have the same size and ratio. I want the image to get the 100% of the width.
My challenge is to get the height of the first image and the text divs to be dynamic depending on the heigh of the bottom image in the first column. For example, the margins are really big when the screen size is big :
body{
color: #fff;
font-family: Arial;
}
.wrapper{
background-color: #484848;
}
#col1{
float:left;
width:41%;
height: 1102px;
background-color: #E90649;
position: relative;
}
img#productImg{
width:100%;
height:auto;
}
img#product{
max-width:100%;
}
#col2{
float: left;
width:59%;
height: 1102px;
background-color: #124;
}
div #centerText{
width: 70%;
margin: 0 auto;
height:455px;
}
#productLogo{
margin-top: 2%;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 70%;
}
.list {
padding-right: 14px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
padding-left: 4px;
color: #000;
font-size: 18px;
font-weight: lighter;
}
div.nav{
padding-top: 3%;
height:24px;
padding-left: 5%;
}
#productImg img{
width:100%;
position: absolute;
bottom: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<div id="col1">
<div class="nav">
<ul>
<li>HOME</li>
</ul>
</div>
<img id="productLogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"/>
<div id="centerText">
<h1>#############</h1>
<p2>#############</p2>
<h3>#############</h3>
</div>
<div id="productImg"><img src="https://www.w3schools.com/css/img_fjords.jpg" /></div>
</div>
</div>
<div id="col2">aaaaaaaaa</div>
</body>
</html>
I used the #media screen-size feature but still I am not happy with the results as I have to put many lines in the CSS. Ideally, the part with the first logo (stackoverflow) and the text will be vertically aligned to center and the padding-top, padding-bottom will have the same value (percentage). The height of this div will depend on the height of the bottom image (JS parsing possible here?) and thus the text can be dynamic using the vw or vh in the CSS.
Is there an easier way to align the divs in the column and keep everything without breaking (that was the initial problem)?
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>
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.
I have a problem with my pixel calculations not adding up.
I have a main div (#page) that is: 980px wide
It has a child div (#content) that is also: 980px wide
Inside the div (#content) there are two divs (#left-pane), which is 300px wide and (#right-pane), which is 676 px wide.
Both of them have a 1px border all the way around - looking across the site horizontally this should give 4px in width.
Therefore,
300px + 676px + 4px = 980px
Despite this, my div (#right-pane) moves down below the div (#left-pane). Why?
I have padding and margin set to NONE on both of them.
HTML:
<head>
<title>Brazil Learner | The easy was to master Brazilian-Portuguese</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="top">
<img class="logo" src="images/logo.png" />
<ul class="social">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="nav">
<div class="nav-button">Home</div>
<div class="nav-button">Lessons</div>
<div class="nav-button">Guides</div>
<div class="nav-button">About us</div>
</div>
<div id="content">
<div id="left-pane">
</div>
<div id="right-pane">
</div>
</div>
<div id="footer">
<div>
</div> <!-- Page closer -->
</body>
</html>
CSS:
html,body,p,ul,li,img,h1,h2,h3 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: black;
}
#page {
width: 980px;
margin: 0px auto;
}
/* Top */
#top {
border: 1px solid black;
overflow: hidden;
padding: 30px 30px;
}
.logo {
float: left;
width: 130px;
height: 130px;
}
.social {
float: right;
margin-right: 40px;
}
.social li {
display: inline;
margin: 0px 10px 0px 0px;
}
/* Nav */
#nav {
border: 1px solid red;
overflow: hidden;
margin-bottom: 20px;
}
.nav-button {
float: left;
width: 100px;
margin-right: 6px;
background-color: grey;
text-align: center;
}
/* Content */
#content {
margin-bottom: 20px;
overflow: hidden;
width: 980px;
}
#left-pane {
float: left;
width: 300px;
height: 700px;
border: 1px solid green;
}
#right-pane {
float: right;
width: 676px;
height: 700px;
border: 1px solid black;
}
/* Footer */
#footer {
float: left;
width: 980px;
height: 70px;
border: 1px solid blue;
}
I'm not sure if this will work or not, but add this and see if it works.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
What browser are you using to test your site?
I tossed up your code on a fiddle, and it appears just fine in my Firefox, which suggests that you're probably looking at it in IE, and possibly either in a non-standards mode, or an old version.
If that's the case, then it's due to how IE (namely, old versions), handle the box model and math. To IE, 300px + 676px + 4px > 980px . The easiest way to fix this is to reduce something that affects the width by 1-2px, and it will probably fix it.
To consider a width of a div, there are 4 comoponents you should think about
The width of the div itself (this is where your text will be for example)
The padding width (surrounding the width mentioned in point 1 above)
The width of your border (surrounding the padding)
The margin (surrounding the border)
So, if you search for CSS Box Model (some examples are here http://www.w3.org/TR/CSS2/box.html and here http://www.w3schools.com/css/css_boxmodel.asp), you will be able to see the box model that will help you with that. Also using jQuery you can retrieve the width of each section using the following methods: .width(), .innerWidth(), and .outerWidth(). Note you may need to do some calculations to finds border width, padding width, or margin width.
Read CSS documentation and jQuery documentation to have a clearer idea of how those work. Sometimes you may need to utilize jQuery to make the width calculations for you properly if you need some exact values with variable width objects.
Basically I'm trying to create a small div (header class) that sits on top of a main banner image div (banner class). I've been able to position it correctly when my browser window is maximized, but when I resize the browser the header div maintains the margins and shrinks down to much less than the banner's width. I realize this is because I have the margins set at fixed positions on the left and right so they're maintaining those positions... I'm just new to CSS and am not sure exactly what to do to prevent this from happening. I've been messing around with positioning for about an hour and just can't get it right.
CSS:
<style type = "text/css">
body {
background-color: #595959;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
margin: 0px 137px 0px; 137px;
}
.banner {
text-align: center;
}
</style>
HTML:
<html>
<head>
<title>Thanks!</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="header">
</div>
<div class="banner">
<img src="banner.jpg" />
</div>
</body>
</html>
Any help would be much appreciated!
either put the banner into the header div
or create a "wrapper" div for the whole site, if your banner image, for example, is 960px wide and that how wide you want the site to be a wrapper many be beneficial as you can center the wrapper and forget about trying to center everything inside it.. or even if then your banner is less you can then center it inside the #wrapper.. options ;)
CSS:
body {
background-color: #595959;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
.header {
background-color: #4CBB17;
padding: 12px 0;
}
.banner {
text-align: center;
}
HTML:
<div id="wrapper">
<div class="header">header text</div>
<div class="banner">
<img src="banner.jpg" style="width: 960px; height: 230px;" />
</div>
</div>
I´m not sure what you are trying to achieve exactly, but if you want the banner always to be the same size as the header, you can use:
.header, .banner {
margin: 0px 137px 0px; 137px;
}
.header {
background-color: #4CBB17;
padding: 12px 0px 12px 0px;
}
.banner img {
width: 100%;
}
Or you get rid of the banner altogether and use a background image for the header.
Maybe you can add a min-width: property to the header?