I am looking to make a footer type thing for blakehawley.com where it has some different links and such. It is supposed to be a banner style, and by that I mean it is supposed to stay at the bottom and be fixed. The div is "menu"
Here is my HTML:
<html>
<head>
<link rel="stylesheet" media="all and (min-width: 1378px)" href="style/grid-1378.css">
<link rel="stylesheet" media="all and (min-width: 1218px) and (max-width: 1377px)" href="style/grid-1218.css">
<link rel="stylesheet" media="all and (min-width: 978px) and (max-width: 1217px)" href="style/grid-978.css">
<link rel="stylesheet" media="all and (min-width: 748px) and (max-width: 977px)" href="style/grid-748.css">
<link rel="stylesheet" media="all and (min-width: 0px) and (max-width: 747px)" href="style/grid-400.css">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<title>The Official Site of Blake Hawley</title>
</head>
<body>
<div id="homeimage">
<img src="style/images/blakehome.jpg">
</div>
<div id="name">
Blake Hawley
</div>
<div id="maincontent">
<a class="twitter-timeline" href="https://twitter.com/BlakeHawley5" data-widget-id="414439781083267072">Tweets by #BlakeHawley5</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="menu">
</div>
</body>
</html>
Here is my CSS:
body{
margin:0 auto;
}
#homeimage{
margin:0 auto;
margin-top:20px;
width:720px;
height:480px;
box-shadow:5px 5px 5px #888888;
}
#name{
text-align:center;
font-family:'Playfair Display', serif;
font-size:130px;
}
#maincontent{
margin-bottom:20px;
}
#menu{
position:fixed;
float:bottom;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}
li{
list-style:none;
}
Anything that you guys see?
#menu{
position:fixed;
bottom: 0px;
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}
Guess did should do the trick, changed second rule
(Maybe make the width: 100% as well)
Float is for an image inside some text, can be left or right, instead of float, you should use positioning, in your case :
bottom:0px;
also, if you want your footer to take the whole screen, use
width:100%;
First the menu tag is empty(you cant see it becouse of it).
Second you didnt position it with using the properties left,top,bottom or right.
and Third there isn't such thing like "float:bottom;"
#menu{
position:fixed;
margin:0 auto;/*use it if you want to show middle of the webpage if not remove it*/
left:/* put*/ px;/* use it if you want to move your div from the left postion*/
height:200px;
width:1218px;
border:3px solid green;
box-shadow:0px -5px 5px #888888;
}
keep remember float:bottom is not correct rule more info visit www.w3schools.com !
Why isn't "position:fixed;" keeping my page header in the same place?
this happens due to display:flex for #pageTitle. The menu when expanded tries to fit in, pushing other elments in the same parent div.
Separate .responsive-menu from #pageTitle into a new div.
Related
I have an <img> tag inside a <div> tag and they both have classes but when I try to style the img class inside of CSS, it doesn't work? Also, whenever I try to set the div class to an id and change it in CSS, it disappears. Any help?
JSFiddle: https://jsfiddle.net/mmfm4vee/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-info">
<img class="steam-avatar" src="<?$steamprofile['avatar'];?>">
<ul>
<li><a href=#></a>
</ul>
</div>
</div>
</body>
CSS:
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
.steam-info {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:160px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-info a {
display:block;
color:rgb(255,255,255);
height:100%;
width:100%;
font-size:30px;
}
.steam-avatar {
width:30px;
height:30px;
}
Looking through the code, there appears to be no problem adjusting the style of the image when using an image through placehold.it.
I simply replaced <?$steamprofile['avatar'];?> with http://placehold.it/200 and was able to both see the image, and succesfully change the way it displays with simple changes to:
.steam-avatar {
width: 100px;
height: 30px;
}
Therefor, I conclude that the problem is with the way your PHP script grabs the image from Steam.
Updated code with that slight change can be found here.
Sorry this can't be of more help, but the code appears to be functioning correctly aside from the image coming through from Steam.
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
Please consider that I am a newbie in CSS!
I am trying to build a simple webpage having some CSS properties, but the problem is that my webpage is alright in fully maximized window but the design breaks down when I try to re-size the browser window.
Webpage source :
<html>
<head>
<title>Registration From</title>
<style type="text/css">
body
{
background-color:#d2d2ff;
margin:0;
padding:0;
width:100%;
}
header
{
margin:0px;
padding:0px;
height:90px;
background-color:#a0b7e0;
box-shadow:0px 0px 90px #00000f;
}
footer
{
margin-top:40%;
height:40px;
background-color:#a0b7e0;
box-shadow:0px 0px 30px #00000f;
position:relative;
}
.text_h
{
text-align:center;
color:white;
font-size:65px;
text-shadow:2px 2px 1px #555555;
}
.text_f
{
text-align:center;
color:#ffffff;
font-size:15px;
text-shadow:2px 2px 1px #555555;
padding-top:0.7%;
}
cont1
{
height:43%;
width:12%;
border:1px solid black;
background-color:#c9c9c9;
float:left;
margin-top:2%;
margin-left:1%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
}
cont2
{
height:73%;
width:84%;
border:1px solid black;
background-color:#e2e2e2;
float:left;
margin-top:2%;
margin-left:2%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
vertical-align: top;
}
.ql
{
text-align:left;
color:#829fd7;
font-size:20px;
font-weight:bold;
text-shadow:0px 0px 1px #ffffff;
padding-left:4%;
}
.list
{
color:#1f1f1f;
font-size:18px;
text-shadow:0px 1px 1px #555555;
list-style-type: circle;
}
a
{
text-decoration:none;
}
a:hover
{
color:white;
font-weight:bold;
padding-left:4%;
}
</style>
</head>
<body>
<header>
<div class="text_h">Basic Homepage</div>
</header>
<cont1>
<p class="ql">Quick Links</p>
<ul class="list">
<li>Homepage</li><br>
<li>Contact Us</li><br>
<li>About Us</li><br>
<li>Message</li><br>
<li>Registration</li>
</ul>
</cont1>
<cont2></cont2>
<footer>
<div class="text_f">© 2014 Neeraj Singh</div>
</footer>
</body>
</html>
Can anyone please suggest me the right way to do it?
So I see a couple issues with your code that I would definitely go ahead and fix:
1) <cont1> and <cont2> are not valid HTML tags. If you want to differentiate between two of the same tags, use classes or ids.
2) The top of your document is missing some key items which make a page render correctly. Replace <html> with <!DOCTYPE html> and add the following meta tags before your <title> tag:
<meta charset='utf-8' />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
As for your question, it depends on your definition of when a design 'breaks down.' If you're talking about the word wrap of the header, you can apply a mid-width to your css, which will force the page to be scrollable when the screen becomes too small. To avoid future issues with this, you could put the min-width on the html and body elements of the page. Like:html, body { min-width:800px;}. Hope that helps to get you started!
What you will need to do is use CSS Media Queries to apply styling at specific screen size breakpoints. The should look like this:
#media screen and (min-width:###px ) and (max-width: ###px ) {
/* enter styles that appliy here */
}
Use these for diferent screen sizes. I use one for mobile phones and one for tablets. These can go either at the top or bottom of your stylesheet. But for readability keep the together.
I'm developing a mobile version of my website. I have this code, tested on Galaxy S3, there is no scroll and the site displays okay.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="css/mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="css/desktop.css" />
</head>
On the iPhone 4 however, I get this. The image is a bit too large, and the top bar does not extend to the phone's full width. I assume that this is because iPhone's width is 480px, but how can I target the device and its width, ideally without creating another CSS file for it?
The top bar is set here, as border-top:
body { background-color:#F5F5F5; width: 100%; font-family:Verdana, Geneva, sans-serif; font-size:14px; margin: 0px auto; border-top: 15px solid #003663; line-height: 14px; }
This can go in your primary stylesheet:
/*Target iPhone's screen width*/
#media screen and (max-device-width: 480px){
/*Do not set fixed widths, use %*/
body{
-webkit-text-size-adjust:none;
font-family:Helvetica, Arial, Verdana, sans-serif;
padding:5px;
}
/*Set widths to 100%*/
div{
clear:both!important;
display:block!important;
width:100%!important;
float:none!important;
margin:0!important;
padding:0!important;
}
/*Create vertical navigation menu*/
#nav,#nav li{
float:none!important;
clear:both!important;
margin:0 0 20px 0!important;
display:block;
padding:0;
text-align:left!important;
width:100%;
}
#nav{
border:1px solid #ccc;
padding:5px;
border-radius:5px;
}
#nav li{
margin:0!important;
}
#nav li a{
display:block;
}
}
I need my banner to sit tight against the top of the browser. Problem is that there is a small white gap btween the div that the image sits in and the top...Ive tried setting padding to 0 for div and body and it doesnt work :-(
<!DOCTYPE html>
<html>
<head>
<title>Welcome Home</title>
<link type="text/css" rel="stylesheet" href="/Shared/Css/Style.css" />
<link type="text/css" rel="stylesheet" href="/Shared/Css/Navigation.css" />
<script language="javascript" type="text/javascript" src="../../Shared/Scripts/jquery-1.6.2.min.js"></script>
</head>
<body>
<div style="padding-top:0px;">
<div id="header-image">
<img alt="Header" src="../../Security/FileFetcher.aspx?RelativePathToFile=App/images/topnav.jpg&mimetype=image/jpeg" />
</div>
</div>
</body>
</html>
body
{
background: url("/Security/FileFetcher.aspx?RelativePathToFile=App/images/background.jpg&mimetype=image/jpeg") repeat-x scroll 0 0 transparent;
padding:0px 0px 0px 0px;
}
#main-content-container
{
margin-left:auto;
margin-right:auto;
width:930px;
border-left:2px solid Gray;
border-right:2px solid Gray;
}
#header-image
{
width:960px;
margin-left:auto;
margin-right:auto;
padding-top:0px;
}
You need to set the <body>'s margin:
body {
margin: 0px;
}
Try adding this above the body options in your stylesheet
* {margin:0;padding:0;}
You could also look at one of the many CSS reset options