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.
Related
I am trying to add a border with a cut. And I wrote code of it, I did all the things but not able to make a cut in border (like this).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box{
background-color:#fff;
border:none;
color:#000;
font-size:30px;
position:relative;
margin:22px;
}
.box::before {
content:'';
width:100%;
height:130%;
top:-10px;
right:0;
bottom:0;
left:-20px;
position:absolute;
border: 3px solid #36b4c2;
border-width:3px 3px 3px 3px;
}
</style>
</head>
<body>
<button class="box" > Menu </button><br><br>
</body>
</html>
Am I on wrong track. Is there any other tag to add a border with a cut.
Add z-index: -1; in :before selector
Works perfectly in IE and Chrome. I feel so betrayed by Firefox. It NEVER causes me problems. Hmpht!
I've tried everything me and Google and you guys here can think of to no avail. So I'll just show you all the bits and hope for some really wonderful person to come along and save the day!
SITE
http://mctesterson.net16.net/
CSS
body {
background:#000000 url(images/backmain.jpg) no-repeat fixed;
overflow-y:scroll;
padding:0;
margin:0;
}
body,html,#menu,#menu:before {
height:100%;
}
#title {
position:relative;
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
font-size:60px;
color:#000000;
font-weight:bold;
text-align:left;
padding:0;
margin:0 0 40px -60px;
}
#font-face {
font-family:kaushan;
src:url(images/kaushan.eot);
}
#font-face {
font-family:kaushan;
src:url(images/kaushan.ttf);
}
a:link,a:visited,a:hover,a:active {
font-family:kaushan,"Lucida Sans Unicode",tahoma,arial;
color:#CE0000;
font-size:25px;
font-weight:bold;
text-decoration:none;
outline:none;
}
#menu {
position:relative;
text-align:center;
padding:0;
margin:0;
}
#menu:before,#menumiddle {
display:inline-block;
vertical-align:middle;
}
#menu:before {
content:"";
}
#menurotate {
background:url(images/backmain.png) repeat;
float:left;
border:1px solid #000000;
border-radius:5px;
-webkit-transform:rotate(40deg);
-moz-transform:rotate(40deg);
-ms-transform:rotate(40deg);
-o-transform:rotate(40deg);
transform:rotate(40deg);
box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-moz-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-webkit-box-shadow:8px 8px 33px -4px #000000,-8px -8px 33px -4px #000000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
-moz-opacity:10;
-khtml-opacity:10;
opacity:10;
padding:10px;
margin:0 20px;
}
#menurotate:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="description" content="Things and stuff."/>
<meta name="keywords" content="web design,fiction,blog,"/>
<meta name="robots" content="noindex,follow"/>
<title>Oh Edie!</title>
</head>
<body>
<div id="menu">
<div id="menumiddle">
<div id="title">Oh Edie!</div>
<div id="menurotate">About</div>
<div id="menurotate">Web Design</div>
<div id="menurotate">Fiction</div>
<div id="menurotate">Blog</div>
<div id="menurotate">Contact</div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Thank you in advance for all your lovely help :o)
To avoid this text effect and still have this opacity effect,
you may set hover the links a translucide mask instead switching opacity;
#menurotate:hover:before {
content:'';
position:absolute;
top:-0px;
left:-0px;
right:-0px;
bottom:-0px;
background:rgba(255,255,255,0.4);
border-radius:5px;
box-shadow:0 0 20px rgba(255,255,255,0.6)
}
or to reduce this jumpy effect, a transition could smoother this defaut :
#menurotate {transition:0.5s;}
And as mentionned , id can only be used once per document, turn id="menurotate" into class="menurotate" and update selectors #menurotate to .menurotate in style sheet.
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.
I want to create a horizontal scrolling image panel that consists of large images with a max height of 800px. When the browser is resized I want the entire selection of images to get smaller/bigger according to the size of the browser window. I want the top of the images to hang 200px at the top with a 30px margin at the left (when page is loaded) and 30px at the bottom.
I am really new to this so any help whatsoever would be greatly appreciated
The HTML looks like this so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="infoleft">
<ul>
<li>Dean Pauley</li>
<li>Graphic Design</li>
</ul>
</div>
<div id="inforight">
<ul>
<li>Information</li>
</ul>
</div>
<div id="images">
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
</div>
</body>
</html>
The css:
#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
}
#infoleft {
position:fixed;
top:20px;
left:0px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 30px;
}
#inforight {
position:fixed;
top:20px;
right:30px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
width:25000px;
height:800px;
padding-top:100px;
padding-bottom:30px;
}
img {
padding:10px;
}
a {
text-decoration:none; color:#000;
}
a:hover {
color:#0080ff;
}
What is the most efficient way to do this?
Many thanks in adavnce
EDIT
On page load
On scroll
On 75% decrease window
How about something like these changes to your CSS for the "#images" and "img" sections...
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
border: 2px ridge gray;
width: 90%;
display: inline-block;
overflow: scroll;
white-space: nowrap;
}
img {
padding:10px;
width:50%;
height:95%;
}
You can play around with those values but you should get a horizontally scrolling image section that changes on resizing the window...
You can take the gray border off if you'd like - I was just using it for testing...
EDIT
Uploaded a code sample with absolute positioning instead of relative as that keeps the image section 30px off the bottom...
I would change the image-related size measurements to % rather than px. That way the size of your images, paddings, margins, etc. will change with the size of the browser window although the proportions will stay the same.
example: img {width:80%; height:60%; etc.}
edit
Using part of Zack's answer, I would change your css img rule to:
img {
padding:10px;
width:3.799;
height:100%;
}
That will give you an image that adjusts with the browser window size.
However you will need to use percents (%) to adjust your positioning rules (i.e. left, top, padding, margin, etc.) to keep all proportions the same.
Note
At this point I am only adjusting the example, so for the record Zack's design is more efficient, and would be better if the look satisfies you.
I have just started making web pages and I'm having lots of trouble with this very simple web page. I can't make anything appear on IE but it works fine on everyother browser. I'll take the liberty of putting all the code in my question because it is really short. If anyone could help me it would be great!
The html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Rhaya<title>
<link rel='stylesheet' media="screen" type="text/css"
href='rhaya.css'/>
</head>
<body>
<div id="masthead"> Rhaya </div>
<div id="content"> Aca va todo el
contenido </div>
<div id="footer"> ©2009 Rhaya | Teresa
Siu | Pía Fabry </div>
</body>
</html>
and the css is:
ul,ol,li {list-style:none}
body { margin:0 auto; padding:0;font-family: Tahoma;font-size:13px; background: #fff; line-height:15px; color:#000;}
a {color: #000;text-decoration:none}
a:hover {text-decoration:none;color:#000;cursos:default;}
/* Masthead */
#masthead {
margin:10px 0 10px 0;
height: 50px;
font-weight: bold;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
background-image: url(img/header.png);
}
/* Content */
#content {
margin-left:0px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
min-width: 300px;
min-height: 300px;
font-family: Tahoma;
font-size:13px;
}
/* Footer */
#footer {
clear:both;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
text-align:center;
}
#wrapper{
width:1002px;
clear:both;
height:auto;
margin:0px auto;
background:#fff;
}
I'm really sorry for asking so blatantly but I really am stumped.
Thanks!
For future reference: http://validator.w3.org/#validate_by_input
Use it for resolving html issues.
You have a mistake in your html head:
<title>Rhaya<title>
should be
<title>Rhaya</title>
Wow, it actually didn't show up at all in IE.
The reason is that you have the entire page in the title of the page. Change this:
<title>Rhaya<title>
to:
<title>Rhaya</title>
I suggest adding the following to you css:
div { position: relative; }
<html
tag isn't closed properly
title tag isn't closed properly.
I have tried and tested. it is your title problem. enclosed it title /title will definitely work.