I'm in the process of building a webpage, and I have a background image that spans the entire screen. When pressing ctrl and - (or ctrl and scrolling down), this scales down the image so it becomes smaller (I'm sure everyone's aware of what it does).
My question is, is there a css property that allows me to keep the image scaled (i.e. the size never changes, and it still spans the whole webpage) regardless of zooming in and out of the window?
I've googled for my answer, checked w3school, etc, but everything seems to be linking to actually physically scrolling up and down the webpage and leaving the image static, which is not what I want.
This is what my webpage looks like normally: https://gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538
and when I zoom out: https://gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4
I'd like the background to continue spanning the entire page, I don't care about the navigation bar/footer size decreasing.
http://www.dragonstoneproductions.com/ This website demonstrates what I'm trying to achieve (try zooming out).
Any help/pointers to some resources is much appreciated
HTML:
<head>
<meta http-equiv="refresh" content="4">
<link href="main1.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
</head>
<header>
<nav>
<ul>
<li class="active"><strong>Home</strong></li>
<li><strong>About Me</strong></li>
<li><strong>Portfolio</strong></li>
<li><strong>Contact</strong></li>
<li><strong>Links</strong></li>
</ul>
</nav>
</header>
<body>
</body>
<footer>
<div class="col">
Copyright © 2016<br>
<span style="font-size:0.6em;">HTML5 | CSS3 | JavaScript</span></span></div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/linkedin.png" alt="My LinkedIn" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/gmail.png" alt="Email Me" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/bitbucket.png" alt="My BitBucket" height="41" width="50" border="0">
</a>
</div>
</footer>
CSS:
body {
margin: 0;
}
header {
background: url(images/bg-image.jpg) center no-repeat fixed;
width: 100%;
height: 100%; /* viewport units are good for sizing big containers */
background-color: red;
background-size: cover;
}
.tint img {
opacity: 0.8;
background-size: cover;
}
nav {
position: fixed;
top: 0;
left: 0;
right:0;
background: rgba(139,23,28, 0.5);
padding-top: 5px;
padding-bottom: 5px;
}
nav h1 {
display: inline;
font-family: lobster;
color: #fff;
padding-left: 30px;
padding-right: 60px;
}
nav ul {
display: inline;
text-align : right;
}
nav ul li {
font-family: arial;
display: inline-block;
list-style-type: none;
padding: 5px 20px;
text-align: center;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
letter-spacing: 0px;
margin: 0;
font-size: 15px;
text-align: center;
}
footer {
background: #8B171C;
color: white;
width: 100%;
display: inline-block;
}
#copyright {
text-align: left;
padding-right: 150px;
display: inline;
}
.sociallink {
height: 30px;
width: 30px;
}
.col {
float: left;
margin: 1%;
}
The answer is in the page you linked: background-size: cover;.
Working Example on how to apply it here: http://codepen.io/wilman/pen/vGKqjm
body {
background: url(background.jpg) center no-repeat fixed;
background-size: cover; /* forces bg to span the entire screen */
background-color: #111;
color: #FFF;
}
Also try to avoid using html img elements for backgrounds as they are not very convenient for that purpose. See When to use IMG vs. CSS background-image? for more info.
Related
I am fairly new to CSS and HTML.
And I understand that this question has been asked several times, yet I cannot seem to fix my current issue.
I have been working on little small projects like trying to recreate other websites with extra features.
My current task is recreating a front page search area, such as google.
Implementation and Issue
I have been focusing in the responsiveness of websites when a browser resize occurs, so I have been using Flexbox as often as possible.
Implementation
A main div with a container id, with a min-height of 100% and a relative position.
Inside the container div are nav(#nav), center(#center) and footer(#footer) elements and their respective id's.
nav: a flex display, baseline align-items and min-height of 9vh.
center: a width of 100%, and a min-height of 10vh;
footer: absolute position, bottom 0, width of 100%
I have made some research into the Footer and how to keep it at the bottom of a page while being responsive when shrinking the browser, but I seem to have come to a halt or possibly I haven't fully understood yet how to get the footer to stop at a certain element.
Issue
The issue is that I cannot get the footer to function correctly. I do not wish it to overlaps with the bottons and links in the main content. It stops at the search bar when resizing the browswer, but I would like it to stop when it meets the buttons.
As you will see from the block of code snippets in the JSbin link, I have an issue with the footer.
Current HTML + CSS files and output: JSBin
*{
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#container {
min-height:100%;
position:relative;
}
a:visited{
color: #609;
}
/* ----- Navigation Styling ----- */
#nav {
display: flex;
border: 10px solid goldenrod; /*Colourful Borders*/
min-height:9vh;
justify-content:flex-end;
align-items: baseline;
background:#ff0;
padding:10px;
}
/*Nav Content*/
/* ----- Center Styling ----- */
#center {
width: 100%;
background-color: white;
min-height:10vh;
}
.ctr_img {
height: 92px;
width: 272x;
padding-top: 20px;
}
.ctr_img:hover {
-webkit-filter: invert(100%);
}
.img_mic {
padding: 0 8px;
float: right;
display:inline-block;
top: -30px;
position: relative;
}
.srch_bx {
border-style: hidden;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
max-width: 40%;
min-height: 40px;
}
.srch_in {
width: 100%;
border-radius: 2px;
border: none;
overflow: auto;
outline: none;
left: 0px;
background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
font: 16px arial,sans-serif;
display: inline-block;
text-align: start;
}
.mic_set {
background-size: 30px 30px;
height: 100%;
width: 26px;
}
.btn_sbmt {
padding: 20px 50%;
min-height: 20px;
display: flex;
justify-content: center;
}
.btn_srch, .btn_lcky {
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
font-family: arial,sans-serif;
font-size: 1vw;
font-weight: bold;
margin: 11px 4px;
padding: 0 16px;
height: 36px;
}
.lang_diff{
max-height: 28px;
font-size: 0.9vw;
margin-bottom: 24px;
font-family: arial,sans-serif;
}
/* Footer Styling */
#footer {
position:absolute;
bottom:0;
height: 5.2em; /* Height of the footer */
width: 100%;
min-height: 10vh;
background-color: #f2f2f2;
line-height: 40px; /*Specifies the line height.*/
min-width: 400px;
}
.ctry {
display: flex;
margin-left: 30px;
text-align: left;
color: rgba(0,0,0,.54);
border-top: 1px solid #e4e4e4;
max-width: 150px;
}
.ctry_ftr {
font-size: 1vw;
}
.opt_ftr {
display: flex;
justify-content:space-between;
border: 1px solid #e4e4e4;
}
span.blft_ftr a, span.brght_ftr a, span.brght_stg a {
text-decoration: none;
color: #666;
margin-left: 16px;
font-size: 1vw;
}
.brght_ftr{
margin-right: 30px;
float: right;
}
.adv_ftr {
padding: 0 16px;
text-decoration: none;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<title>Testing Ground</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="icon" href="http://www.favicon.cc/logo3d/53653.png" />
<meta charset="UTF-8">
</head>
<body> <!--FLEX-->
<div id="container"> <!-- Added New for Footer behaviour -->
<nav id="nav" class="nav_cls">
<!--Currently at work-->
<p>Navigation Bar Content</p>
</nav>
<center id="center">
<a class="img_link" href="">
<img class="ctr_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/250px-PM5544_with_non-PAL_signals.png" alt="image">
</a>
<div class="in_forms">
<div class="srch_bx">
<form>
<input class="srch_in" type="text" name="search"/>
</form>
<div class="img_mic">
<a href="https://youtu.be/Ye8mB6VsUHw ">
<img class="mic_set" src="https://cdn.sesamestreet.org/sites/default/files/1496328210/Cookie_Big.png" />
</a>
</div>
</div>
</div>
<div>
<div class="btn_sbmt">
<input class="btn_srch" type="submit" value="Don't Hide me!" name="search"/>
<input class="btn_lcky" type="submit" value="Seriously, Don't!" name="luck"/>
</div>
</div>
<div class="lang_diff">
Links:
<a class="lang" href="">Link1</a>
<a class="lang" href="">Link2</a>
<a class="lang" href="">Link3</a>
<a class="lang" href="">Link4</a>
<a class="lang" href="">Link5</a>
</div>
</center>
<footer id="footer">
<div class="ctry">
<span class="ctry_ftr">
First half of a footer
</span>
</div>
<div class="opt_ftr">
<span class="blft_ftr">
<a class="adv_ftr" href="">Footer Link 1</a>
<a class="adv_ftr" href="">Footer Link 2</a>
<a class="adv_ftr" href="">Footer Link 3</a>
</span>
<span class="brght_ftr">
<a class="adv_ftr" href="">Footer Link 4</a>
<a class="adv_ftr" href="">Footer Link 5</a>
</span>
</div>
</footer>
</div>
</body>
</html>
Visited Websites
Footer is displayed over content. I need it always on the bottom of the page
HTML, CSS - Sticky footer displays over content on screen resize
Footer is displayed over content. I need it always on the bottom of the page
How to keep footers at the bottom of the page
Sticky Footer
Footer overlaps main content when window shrunk
:)
Congratulations, first of all, for following the rules of asking on SO.
Your problem comes from placing your footer out of document flow (position:absolute). It looks like you want it placed in document flow. So change position:absolute into position:relative (or static).
To keep it at the bottom of the screen at all times, adjust your #container to display:flex;flex-direction:column;min-height:100vh and make #center grow:
#footer {
position:static; /* this is default value of position
* so you could just remove `position:absolute`
* from your code.
*/
}
#container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#center {
flex-grow: 1;
}
See it working:
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
a:visited {
color: #609;
}
/* ----- Navigation Styling ----- */
#nav {
display: flex;
border: 10px solid goldenrod;
/*Colourful Borders*/
min-height: 9vh;
justify-content: flex-end;
align-items: baseline;
background: #ff0;
padding: 10px;
}
/*Nav Content*/
/* ----- Center Styling ----- */
#center {
width: 100%;
background-color: white;
min-height: 10vh;
}
.ctr_img {
height: 92px;
width: 272x;
padding-top: 20px;
}
.ctr_img:hover {
-webkit-filter: invert(100%);
}
.img_mic {
padding: 0 8px;
float: right;
display: inline-block;
top: -30px;
position: relative;
}
.srch_bx {
border-style: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
max-width: 40%;
min-height: 40px;
}
.srch_in {
width: 100%;
border-radius: 2px;
border: none;
overflow: auto;
outline: none;
left: 0px;
background: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D) transparent;
font: 16px arial, sans-serif;
display: inline-block;
text-align: start;
}
.mic_set {
background-size: 30px 30px;
height: 100%;
width: 26px;
}
.btn_sbmt {
padding: 20px 50%;
min-height: 20px;
display: flex;
justify-content: center;
}
.btn_srch,
.btn_lcky {
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
font-family: arial, sans-serif;
font-size: 1vw;
font-weight: bold;
margin: 11px 4px;
padding: 0 16px;
height: 36px;
}
.lang_diff {
max-height: 28px;
font-size: 0.9vw;
margin-bottom: 24px;
font-family: arial, sans-serif;
}
/* Footer Styling */
#footer {
/* position: absolute;
bottom: 0; */
height: 5.2em;
/* Height of the footer */
width: 100%;
min-height: 10vh;
background-color: #f2f2f2;
line-height: 40px;
/*Specifies the line height.*/
min-width: 400px;
}
.ctry {
display: flex;
margin-left: 30px;
text-align: left;
color: rgba(0, 0, 0, .54);
border-top: 1px solid #e4e4e4;
max-width: 150px;
}
.ctry_ftr {
font-size: 1vw;
}
.opt_ftr {
display: flex;
justify-content: space-between;
border: 1px solid #e4e4e4;
}
span.blft_ftr a,
span.brght_ftr a,
span.brght_stg a {
text-decoration: none;
color: #666;
margin-left: 16px;
font-size: 1vw;
}
.brght_ftr {
margin-right: 30px;
float: right;
}
.adv_ftr {
padding: 0 16px;
text-decoration: none;
display: inline-block;
}
#footer {
line-height: 2.42em;
}
#container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
#center {
flex-grow: 1;
}
<div id="container">
<!-- Added New for Footer behaviour -->
<nav id="nav" class="nav_cls">
<!--Currently at work-->
<p>Navigation Bar Content</p>
</nav>
<center id="center">
<a class="img_link" href="">
<img class="ctr_img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/250px-PM5544_with_non-PAL_signals.png" alt="image">
</a>
<div class="in_forms">
<div class="srch_bx">
<form>
<input class="srch_in" type="text" name="search" />
</form>
<div class="img_mic">
<a href="https://youtu.be/Ye8mB6VsUHw ">
<img class="mic_set" src="https://cdn.sesamestreet.org/sites/default/files/1496328210/Cookie_Big.png" />
</a>
</div>
</div>
</div>
<div>
<div class="btn_sbmt">
<input class="btn_srch" type="submit" value="Don't Hide me!" name="search" />
<input class="btn_lcky" type="submit" value="Seriously, Don't!" name="luck" />
</div>
</div>
<div class="lang_diff">
Links:
<a class="lang" href="">Link1</a>
<a class="lang" href="">Link2</a>
<a class="lang" href="">Link3</a>
<a class="lang" href="">Link4</a>
<a class="lang" href="">Link5</a>
</div>
</center>
<footer id="footer">
<div class="ctry">
<span class="ctry_ftr">
First half of a footer
</span>
</div>
<div class="opt_ftr">
<span class="blft_ftr">
<a class="adv_ftr" href="">Footer Link 1</a>
<a class="adv_ftr" href="">Footer Link 2</a>
<a class="adv_ftr" href="">Footer Link 3</a>
</span>
<span class="brght_ftr">
<a class="adv_ftr" href="">Footer Link 4</a>
<a class="adv_ftr" href="">Footer Link 5</a>
</span>
</div>
</footer>
</div>
Another minor issue which needed addressing was using line-height expressed in px for #footer while its height was expressed in em, causing the page to develop a vertical scrollbar. line-height:2.42em fixes it.
On a different note, it would be unfair of me to give you this answer without mentioning the major accessibility problem your example has from lowering font-size on narrow devices. Try opening the example page on any mobile and you'll understand what I mean. At all times, elements in your page should keep a font-size allowing users to read.
The main purpose of web pages is to present content. If you present the content in a form disabling user ability to receive the message, your page does not perform its function.
#footer is positioned absolutely, which means that the parent container doesn't know how big it is (i.e. it is outside of the "document flow"). #container's height is set to min-height: 100%, so at a minimum, it needs to be the full height of the parent (in this case, the body), but if the child content is taller, it will stretch to accommodate that extra height.
Because #footer is not considered when#container is trying to figure out it's height, #container is just making sure it can fit it's other position: static or position:relative children.
So, when you scale down the height of your browser so it is very short, #container is too short - it doesn't leave space for the #footer.
There are a few ways to take care of this, though it is tricky from a responsive perspective if the height of the #footer is variable depending on the content and whether it wraps, etc.
If you know the height, you can add that amount of padding on the bottom of #container (if box-sizing: border-box; is turned on, it will not add onto the height: 100% - it will be included) and it will reserve the space for the #footer.
If you don't know the height, you could leverage display: flex; to fill the full height and have the footer self-align to the bottom, without needing to use position: absolute;. Flexbox has a bit of a learning curve though, I would recommend you read through some tutorials. http://flexboxfroggy.com/ is a fun game that can also help to learn it.
I have a header that contains a dropdown menu. Beneath that header is the "body" of content, which is filled completely by an iframe. When you hover over the "Pick a game..." dropdown menu, and you move your mouse over the part of that div that is over the iframe, that div disappears as if you moved your mouse off of it. See the pen below if you want to try it yourself.
Also, if you turn on the iframe's border, then the border will show through the dropdown. This leads me to believe that somehow the iframe is rendering above the dropdown div; however, even with the iframe z-indexed back, it still shows.
Any ideas as to why I can't get to my second dropdown option?
Pen: https://codepen.io/Spirit_Ryu/pen/PJwrKp/
#font-face {
font-family: Baumans;
src: url("./data/Baumans-Regular.ttf");
}
body {
margin: 0 0 0 0;
overflow-x: hidden;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: #666666;
}
iframe {
border: 0;
z-index: 1000;
}
#visibledata {
position: absolute;
width: 100%;
font-family: Baumans, sans-serif;
}
#header {
width: 100vw;
background: #f5f5f5;
padding-top: 16px;
padding-bottom: 16px;
}
#header #name {
display: inline;
font-size: 20pt;
margin-left: 20px;
}
#header #pickagame {
cursor: pointer;
float: right;
width: 200px;
padding: 4px;
margin-right: 20px;
background: #e8e8e8;
}
#header #pickagame .dropdown {
display: none;
list-style: none;
z-index: 1;
}
#header #pickagame .dropdown li {
padding-top: 8px;
}
#header #pickagame:hover .dropdown {
display: inline;
}
#page {
position: absolute;
top: 63px;
height: 100vh;
}
#page #game {
height: 100%;
width: 100vw;
}
<!DOCTYPE html>
<html>
<head>
<link href='./data/index.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div id='visibledata'>
<div id='header'>
<a href='./index.html'>
<div id='name'>All-Star Favorites Arcade</div>
</a>
<div id='pickagame'>
Pick a game...
<div style='float: right'>▼</div>
<div class='dropdown'>
<a href='./data/ArmorMayhem.html' target='gameWindow'>
<li>Armor Mayhem</li>
</a>
<a href='./data/ArmorMayhem.html' target='gameWindow'>
<li>Armor Mayhem</li>
</a>
<a href='./data/ArmorMayhem.html' target='gameWindow'>
<li>Armor Mayhem</li>
</a>
</div>
</div>
</div>
<div id='page'>
<iframe id='game' name='gameWindow'></iframe>
</div>
</div>
</body>
</html>
The issue is that the element with an id of 'page' is position: absolute, and the dropdown is not. Even when the dropdown is at a higher index than the element with an id of 'page' that the iframe lives in, it will not matter since absolute positioned elements will sit on top of any elements that are position: static underneath it.
I just have a top nav of a website. I want to float a div to the right for User Login controls etc.
I looked on the web and tried but it does not work in Chrome / Firefox.
What is the EXACT way to do this correctly in ALL browsers using Divs and CSS? WHat I have works only in IE 9 .. Chrome and Firefox both drop the loginControls Div down to the next line.
<div id="topNav">
<div id="logoBar">
<img src="images/header_logo.gif" width="132" height="50" border="0" />
<div id="loginControls">User: John Doe Logout</div>
</div>
<div id="navTabs">
</div>
</div>
#logoBar {
width: 1300px;
height: 50px;
background-image: url(../images/line.gif);
background-repeat: repeat-x;
padding: 0px 22px;
position: relative;
}
#navTabs {
background-color: #333b52;
height: 30px;
}
#loginControls {
color: #FFF;
position: absolute;
right: 0;
width: 250px;
}
#loginControls a:link, #loginControls a:visited, #loginControls a:active {
color: #FFF;
text-decoration: underline;
}
Just add
float : right;
In #loginControls' CSS
The person who answered just add float is correct as long as you remove the absolute positioning.
#logoBar {
width: 1300px;
height: 50px;
background-image: url(../images/line.gif);
background-repeat: repeat-x;
padding: 0px 22px;
position: relative;
}
#navTabs {
background-color: #333b52;
height: 30px;
}
#loginControls {
float:right
}
#loginControls a:link, #loginControls a:visited, #loginControls a:active {
color: #000;
text-decoration: underline;
}
<div id="topNav">
<div id="logoBar">
<img src="images/header_logo.gif" width="132" height="50" border="0" />
<div id="loginControls">User: John Doe Logout</div>
</div>
<div id="navTabs">
</div>
</div>
The nature of a div is to always use 100% of the width of the parent Container.
you may have to try span instead of div for the Login Controls.
OR use float:
#LoginControls {
float:right;
width: 250px;
}
I can't test it yet but I hope Im right. ;)
Edit: Ok someone was faster then my but did you try span?
I am new to web designing and I am currently designing a website for my college project.Right now, I am facing a problem which is as follow:-
When I resize the browser window,specially when i resize the browser window to a small size, the div elements jumps out of it's normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as i give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But i want to design a full width browser window website so that it can adjust on any browser window size Please tell me how it can be done.
jsfiddle link is http://jsfiddle.net/9BuHt/3/
My CSS code is as under:-
I am new to web designing and I am currently designing a website for my college project. Right now, I am facing a problem which is as follows:
When I resize the browser window, specially when I resize the browser window to a small size, the div elements jumps out of its normal flow and everything gets scattered on giving width:100% value in my container id of CSS.
But as as I give the width of the wrapper id in pixels(say 960px), everything works and looks fine. But I want to design a full width browser window website so that it can adjust on any browser window size. Please tell me how it can be done. My CSS code is as follows:
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
background-color: #e9e5e5;
}
* {
margin: 0px;
padding: 0px;
}
#container {
min-height: 300px;
margin: 0 auto;
width: 1400px;
}
#header {
height: 150px;
width: 100%;
}
#logo {
padding-top: 10px;
padding-left: 20px;
float: left;
}
#header #title_panel {
float: left;
padding-top: 25px;
min-width: 60px;
}
#header #title_panel h1 {
color: #125ab4;
font-size: 36px;
}
#header #title_panel p {
color: #f5071d;
font-size: 20px;
font-family: "Comic Sans MS", cursive;
}
#search_panel {
margin: 10px 0px 0px 80px;
float: left;
width: 180px;
position: relative
}
#search_panel img {
float: right;
margin-top: -20px;
z-index: 1;
}
#search_field, #usrnam_field, #pwd_field {
border-radius: 20px;
color: #999;
padding-left: 4px;
s
}
#login_panel {
float: right;
width: 520px;
margin: 10px 200px 0px 0px;
min-height: 40px;
}
#login_btn, #signup_btn {
height: 20px;
width: 70px;
border-radius: 30px;
background: #125ab4;
text-align: center;
color: #FFF;
font-weight: bold;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
.
}
#login_btn {
float: right;
margin-top: -20px;
text-decoration: none;
}
#signup_btn {
margin: 0 auto;
}
#header h3 {
text-align: center;
padding-right: 20px;
color: #125ab4;
}
#sidebar {
min-height: 200px;
width: 136px;
margin-top: -20px;
border: solid 1px #999999;
background: #FFF;
}
#sidebar_header {
height: 32px;
background-color: #009933;
}
#sidebar_header h2 {
text-align: center;
text-decoration: none;
color: #FFF;
vertical-align: middle;
text-decoration: none;
padding-top: 2px;
}
#sidebar_header img {
position: absolute;
float: left;
margin-left: 15px;
}
#sidebar ul {
list-style: none;
}
#sidebar ul a {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
color: #009933;
}
#sidebar ul li {
padding-top: 15px;
text-align: center;
display: block;
vertical-align: middle;
}
#sidebar a:hover {
background-color: #009933;
padding: 10px 5px 10px 5px;
color: #FFF;
}
And the html code is as under:-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>App Store-The one stock shop for all</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" width="100" height="100" alt="logo"></div>
<div id="title_panel">
<h1>App Store</h1>
<p>The one stock shop for all</p>
</div>
<div id="search_panel">
<form action="" method="post">
<input name="search" type="text" value="Search..." id="search_field">
</form>
<img src="images/Search_icon.png" width="22" height="22" alt="SearchIcon"> </div>
<div id="login_panel">
<form action="" method="post">
<input name="usrname" type="text" value="Username" size="30" id="usrnam_field">
<input name="psswrd" type="text" value="Password" size="30" id="pwd_field">
</form>
<a href="#">
<div id="login_btn">Login</div>
</a>
<h3> </h3>
<h3>Not a member yet?</h3>
<a href="#">
<div id="signup_btn"> Signup</div>
</a>
</div>
</div>
<div id="sidebar">
<div id="sidebar_header"> <img src="images/logo_small.png" width="22" height="28" alt="logoIcon">
<h2 style="">Store</h2>
</div>
<ul>
<li>Technologies</li>
<li>Categories</li>
<li>Developers</li>
<li>Apps</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There are cases where you need to specifically fix small browser windows(this just might be one of them)
.myClass {
width: 50%;
}
but at small sizes, 50% is not big enough and we make it 100%
#media (max-width: 600px) {
.myClass {
width: 100%;
}
}
so when the browser window is less than 600px, we fix it.
here are common device sizes http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
EDIT
after creating an html file of the code and looking at it, it looks like you have a 100% header with some floating elements in it.
under that you have a float left sidebar.
2 fixes that make it look a bit better are:
clear: both; on your #sidebar
and use max-width instead of width on your login_panel
so clear: both will make sure that it accounts for any element floating left or right.
max-width means that the login_panel won't get too big when the screen is huge, but when the screen it small, it won't go off-screen.
As I correctly understand you. You are need to create a fluid markup for any device support. So look to my example and try to adapt your code the same way.
So, for example you need #wrapper width = 960px for desktops and full sized content on mobile devises (if device width < 960px). So your code must be:
HTML
#wrapper {
max-width:960px;
margin:0 auto;
overflow:hidden // if you have float elements inside wrapper
}
If you have a question - welcome
I'm very new to all of this and am trying to build this website, but the main image on the page is not centering. I've tried all sorts of centering things but they don't work. Also, the width percentage is ignored too.
I've readjusted margin/padding to 0. don't know what it could be.
css for the picture:
#pictures img{
width:"70%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
}
and the html div that has to do with it:
<div id="pictures">
<img src="img/homepage.png" alt="HomePage"></div>
FULL HTML
<!DOCTTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jacobs Bookeeping</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style-no-grid.css" type="text/css" media="screen">
</head>
<body>
<div class="container clearfix">
<div id="main">
<div id="header">
<img src="img/logo.png" alt="Jacobs Bookkeeping Logo" width="248">
</div>
<div id="twitter">
<img src="img/twitter.jpg" alt="Twitter">
</div>
<div id="facebook">
<img src="img/facebook.jpg" alt="Facebook">
</div>
<ul class="nav">
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
<li class="last">Resources</li>
</ul>
<div id="pictures">
<img src="img/homepage.png" alt="HomePage">
</div>
</div>
</div>
<div id="copyright">
<p>K. RONI JACOBS, <em>KEEPER OF THE BOOKS</em> — EMAIL JACOBS BOOKKEEPING — CALL 206.861.5664 — © 2013 JACOBS BOOKEEPING    </p>
</div>
</body>
</html>
FULL CSS
html {
margin: 0px;
padding: 0px;
}
body {
font-family:'Futura', sans-serif;
color: #FFFFFF;
font-size: 13;
margin: 0px;
padding: 0px;
}
#main {
border-top: 10px solid #EAE1C9;
border-right: 10px solid #EAE1C9;
border-left: 10px solid #EAE1C9;
padding-bottom: 20px;
background: url('../img/bg-jacobs.jpg') repeat;
background-color:#96B9BF;
}
a {
color: #FFFFFF;
text-decoration: none;
}
#facebook img{
float: right;
padding: 45px 5px 10px 10px;
position: static;
}
#twitter img{
float: right;
padding: 45px 50px 20px 0px;
position: static;
}
#header img {
padding: 40px 0px 0px 40px;
float: left;
position: static;
}
ul.nav {
margin-top: 45px;
list-style: none;
text-transform: uppercase;
float: right;
position: relative;
}
ul.nav li {
margin: 0px 50px 0px 60px;
display: inline;
}
ul.nav li a {
color: #FFFFFF;
}
#pictures img{
width:"80%";
margin: 0 auto;
padding-bottom: 80px;
padding-top: 20px;
display: block;
text-align: center;
}
#copyright {
text-align: right;
background: #867131;
border-top: 10px solid #EAE1C9;
position: fixed;
bottom: 0;
width: 100%;
height: 30px;
font-size: 10px;
letter-spacing: 2px;
color: white;
}
.container{
width: auto;
margin: 0 auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Put display: block; on it. By default, images are inline.
To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:
div#pictures {
text-align: center;
}
The other solution is the one from #One Trick Pony, and display the image as a block element and just then apply the automatic margin.
#pictures img{
display:block;
}
Add this code then i will be centered
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
You have two options:
Remove img from #pictures and then put the image inside that div.
Add the #pictures to the image Tag in html (inline style).
You might remove the display tag in #pictures.
Good luck with that.