I am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. I do not know much about CSS at all.
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011
</div>
</body>
</html>
What you are asking and the code you have presented is extremely unclear. If you are extremely new to html/css then drawing a picture instead of trying to explain it in words often helps.
Here is an example where the sidebar is in a fixed position on the left. Fixed means that it will always be there, no matter where the page scrolls to.
http://jsfiddle.net/Bceat/
Don't make CSS declarations inside of other CSS declarations. They should each be on their own.
/* BAD */
div#left-sidebar{
position:fixed;
iframe { width: 250px !important; }
}
/* GOOD */
div#left-sidebar {
position:fixed;
}
iframe { width: 250px !important; }
You've also declared your styles inside the body of your html. Don't do that. Declare styles between the <head></head> tags.
/* BAD */
<head>
</head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
/* GOOD */
<head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
</head>
You also have some invalid declarations like:
/* right-sidebar-<length> means nothing */
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
I know that you are new, but you are going to have to read up on the basics of html and css. That will allow you to do two things. One is pose questions using language that other developers will understand. The second is presenting at a minimum, code that is properly formatted. That way even if your terminology is incorrect, your code can speak for you. Right now you aren't getting any answers because everything is kind of a mess.
I think you must create a table layout like this
<table width ="100%">
<tr><td></td> </tr>
<tr ><td rowspan="3"></td></tr>
your monkey servey here
<tr><td>nav content</td></tr>
<tr><td> main content</td></tr>
</table>
Related
I am new to CSS and html and I was wondering if you could help me.
I am trying to make a page where people can go to my website and shop on any platform they want. I have managed to create the page in html but I couldn't get the four image (square) if you want to call it that... centered on the page.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width = device-width. initial-scale= 1"
<!-- Links to other files -->
<!-- Default Location -->
<base href= "http//home/makenna/Documents/Amazon Docs/Kittiesnmore Web Files"/>
<!-- Links to CSS Stylesheets -->
<link rel="CSS Stylesheet" type "text/css"href="sellpagestylesheet1.css"> <!-- This is the main style sheet -->
<title> Shop with us on your Favorite E-retailer's Website </title>
<body>
<div>
<h3> Shop with us on your favorite shopping platform! </h3>
</div>
< id= "all pics">
<a href= "http://kittiesnmore.com/index.php/shop/">
<img src="https://imgur.com/DTEzmL3.jpg" alt= "Shop on our Site" style= "width:500px; height:500px; border:5x; bordercolor:4C4646; align:center; bordercolor:00008B;" id= "kittiesnmoreLogo" >
</a>
<a href= "https://www.amazon.com/s?marketplaceID=ATVPDKIKX0DER&me=A3O390GOKHZKJR&merchant=A3O390GOKHZKJR&redirect=true">
<img src="https://imgur.com/Icu5jwn.jpg" alt="Shop our Amazon Inventory" style=" height=500px; width: 500px; height: 500 px; border: 5px;" id= "amazonLogo">
</a>
<p id="secondRow">
<a href= "http://www.ebay.com/sch/makennher-0/m.html?item=152544640003&rt=nc&_trksid=p2047675.l2562">
<img src="https://imgur.com/hNBGJwg.jpg" alt= "Shop our Ebay Inventory" style="width:500 px; height:500px; border: 5px;" id= "ebayLogo">
</a>
<a href= "https://kittiesnmore.myshopify.com/">
<img src="https://imgur.com/o1zeKZF.jpg" alt="Shop on our Shopify Store" style= "height:500px; width:500px; border:5px;" id="shopifyLogo">
</a>
</p>
Here si the CSS
<head>
<style>
#firstRow.kittiesnmoreLogo{
*{font-family: "Arial Black" Gadget, sans-serif;}
.website{ padding 10px 10px 10px 10px
}
I would like to know the best way to target the images I have created in order to do the above, any improvements I should make to the way I have included them, or if there's something awfully terribly wrong.
Also I do apologize if my code is formatted incorrectly for this website, I am not really familiar with how to make code blocks >.<
Which software you use for coding, In your code it has too much syntax errors. first correct all off them, Then try using this,
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
I'm trying to build a HTML5 page with respsonsive design, but notice there is spacing between some elements (see JSFiddle here: http://jsfiddle.net/LWQg2/):
Notice how the organge header are is displayed between some elements internationalization and mymenu, also between mainnav and sitesearch. I don't know how to remove this space.
<!DOCTYPE html>
<html class="no-js grid">
<head>
<meta charset="utf-8">
<title>TT-Design</title>
<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 36.236em)">
<!-- These styles are for presentation only -->
<link rel="stylesheet" href="css/presentation-global.css" media="all">
<link rel="stylesheet" href="css/presentation-layout.css" media="all and (min-width: 36.236em)">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/style.css?v=1" />
</head>
<body>
<header>
<section id="social">
FB+Social
</section>
<section id="internationalization">
lang/curr
</section>
<section id="mymenu">
<ul>
<li>login</li>
<li>myaccount</li>
</ul>
</section>
<img src="/images/logo.png" />
<section id="bc_dialog">
</section>
<nav id="mainnav">
<ul>
<li>Home</li>
<li>Directory</li>
<li>Shop</li>
</ul>
</nav>
<section id="sitesearch">
Searchbox
</section>
</header>
<div id="container">
<header>
<h1>Pagetitle</h1>
</header>
<!-- page specific content -->
<aside id="facets">
facet navigation
</aside>
<aside id="leftside">
left side menu
</aside>
<div id="pagecontent">
<p>
some regular content on the page. This is not a newsarticle page.
</p>
</div>
<aside id="rightside">
related content
</aside>
<!-- end of page specific content -->
</div><!--! end of #container -->
<footer id="sitefooter">
Advertise | Contact | About
</footer>
<section id="sitemap">
sitemap links
</section>
</body>
</html>
body {
margin:2px;
}
body header{
background-color:orange;
}
#social{
background-color:blue;
}
#internationalization{
background-color:yellow;
}
#mymenu{
background-color:grey;
padding:0px;
}
#bc_dialog{
}
#mainnav{
background-color:#FF00DC;
}
#sitesearch{
background-color:#CDCDCD;
}
#container{
background-color:#FFF;
}
#container header{
background-color:#FFB7BF;
}
#container header h1{
margin:0px;
}
#facets{
background-color:purple;
}
#pagecontent{
background-color:#FFD7AD;
}
#leftside{
background-color:#FF0C00;
}
#rightside{
background-color:#60FFEF;
}
#sitefooter{
background-color:#BCE0FF;
}
#sitemap{
background-color:#C5AAFF;
}
It is because of marging of ul elements.
Remove it with ul { margin:0; } or declare #mainnav, #mymenu { overflow: auto; } to fix it.
The spacing is caused by the default top and bottom margins of ul elements.
Change your margin to 0 and you may also float everything left.
margin:0;
float:left;
You can use the F12 in your browser to help you identify such problems.
I am trying to get 3 icons horizontally aligned with the title of my website. I can't seem to get them within the same margin as my banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
CrossFit Villains
</span>
<div id="social">
<img src="fb.png" />
<img src="bird.png" />
<img src="tv.png" />
</div>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
The CSS for the icons:
#social img {
float: right;
width: 70px;
height: 70px;
}
Allright,
First of all be sure to float the a elements instead of the img.
The title should be floated as well, to lign them up correctly.
Also give classes to the other span element in your header so you can apply styles to it. Using <br /> for a new line between elements in HTML is wrong practice.
span.title {
float:left;
}
#social {
float:right;
}
#social a {
float:left;
margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
float:left;
}
div#banner {
clear:both; /* to replace the <br /> tag */
}
Please see the edited fiddle.
Note: The images weren't linked properly, so I gave the "icons" a red background and your body a black one for readability..
Cheers, Jeroen
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533
I've inserted an image below showing were I currently stand (css version) and where I want to be (tabled based version).
I originally created this layout with tables and I would like to move to a css based version. I have a long way to go.
I'm using Blueprint CSS.
Current issues:
There is a gap between the tabs that I'd like to get rid of. How do I get rid of this gap?
I would like to put more padding inside each tab. How do I do this without pushing the tabs onto the next line?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Heatmap using BluePrint</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="/heatmap/styles/blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="/heatmap/styles/blueprint/print.css" type="text/css"
media="print">
<!--[if IE]><link rel="stylesheet" href="/heatmap/styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<style type="text/css">
body{font-size:70%;font-family:Verdana, "Helvetica Neue", Arial, Helvetica, sans-serif;padding:5px;}
table.heatmap td {border: 1px solid black;}
table.heatmap{border-collapse:collapse;}
a {color:black;text-decoration: none;}
a:hover {text-decoration: underline;}
.list-as-tabs
{
margin-left:0px;
}
.list-as-tabs, .list-as-tabs li
{
display: inline;
}
.hover-links
{
background-color:#fffdbf;
}
.hover-links li a:hover
{
background-color:yellow;
}
table.heatmap tr td {text-align:center;}
</style>
</head>
<body>
<div class="container">
<div class="span-20">
<div class="prepend-5 span-10">
<h3>
Issuer Heatmap</h3>
</div>
<div class="span-5 last">
<ul class="list-as-tabs">
<li>Legend</li>
<li><img src="/heatmap/images/lightbulb.gif" alt="Send Feedback about Heatmap." /></li>
<li><input type="image" src="/heatmap/images/excel-mini.gif" alt="Export Heatmap to Excel." /></li>
<li><img src="/heatmap/images/printer.gif" alt="Print this page." /></li>
</ul>
</div>
<div class="prepend-5 span-15 last">
<ul class="list-as-tabs hover-links">
<li>View Draft Heatmap</li>
<li>Manage Security</li>
<li>Edit Heatmap and Platforms</li>
<li>View Revision History</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There's no gap between tabs in the screenshot you posted.
As for adding padding to the tabs, you can do this:
.list-as-tabs li a {
padding: 3px 5px;
}
That gives the link top and bottom padding of 3px and left and right padding of 5px. This is nice because it gives you a bigger click target.
You state that you don't want to wrap but from what I can tell on the screenshot, there simply isn't enough room. You'll either have to make the font smaller or use shorter phrases for the tabs. Maybe this?
<ul class="list-as-tabs hover-links">
<li>Draft Heatmap</li>
<li>Security</li>
<li>Edit Heatmap/Platforms</li>
<li>Revision History</li>
</ul>