I need help because I'm not good with CSS. I want to create a floating hide and show panel on google maps similar to the example here :
http://jsfiddle.net/rionmonster/J8U25/
But I'm still failing. here is the screenshot:
when hidden :
when I click the red button to show panel :
here is my CSS :
#map-canvas {
margin:0;
float: right;
width: 70%;
position: absolute;
padding: 0;
height: 650px;
z-index:1;
max-width: none;
}
#click {
margin:0;
height: 50px;
width: 25px;
position: absolute;
background: red;
float: right;
margin-top: 200px;
z-index: 2;
}
#floating-panel {
float:right;
width: 17%;
position: absolute;
top: 90px;
left: 5%;
z-index: 5;
background-color: #fff;
padding: 0px;
display: none;
border: 1px solid #999;
text-align: left;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
margin-top: 90px;
}
and here is my html tag :
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="Stasiun Pondok Cina">Pondok Cina</option>
</select>
<br> <b>End: </b>
<select id="end">
<option size="25" value="Margonda Residence">Margonda Residence</option>
</select>
</div>
<div id='click'></div>
<div id="map-canvas" ></div>
</div>
</div>
</div>
thanks for your help :)
I have take the jsfiddle that you provided and reproduce the solution as I have posted below you can check it, and here is the fiddle demo http://jsfiddle.net/meily/J8U25/1765/:
<div class="container-fluid map-container">
<div class="row">
<div id='panel'>
Hi!
<div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="Stasiun Pondok Cina">Pondok Cina</option>
</select>
<br> <b>End: </b>
<select id="end">
<option size="25" value="Margonda Residence">Margonda Residence</option>
</select>
</div>
</div>
<div id='click'>
</div>
<div class="map-canvas-container">
<div id="map-canvas">
<iframe frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=USA&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU">
</iframe>
</div>
<a class="embedded-map-code" href="https://www.hostingreviews.website/compare/namecheap-vs-fatcow" id="get-data-for-embed-map">fatcow namecheap</a>
</div>
</div>
</div>
This is the css:
.map-container {
position: relative;
}
#panel
{
height: 500px;
background: black;
opacity: 0.9;
float: left;
display: none;
color: white;
font-size: xx-large;
position: absolute;
left: 0;
z-index:1;
}
#click
{
height: 50px;
width: 25px;
background: red;
float: left;
margin-top: 200px;
z-index: 1;
display: block;
position: absolute;
left: 0;
}
.map-canvas-container {
overflow:hidden;
width:1000px;
height:500px;
resize:none;
max-width:100%;
}
iframe {
height:100%;
width:100%;
border:0;
}
#embed-map-canvas img{
max-width:none!important;
background:none!important;
font-size: inherit;
}
#map-canvas {
margin:0;
float: left;
width: 70%;
position: absolute;
padding: 0;
height:100%;
width:100%;
max-width:100%;
}
This is the jQuery code for that:
$('#click').click(function()
{
$("#panel").animate({width:'toggle'},500);
});
Related
I have a 3 rows fluid layout after a media query the css is
html, body {
height : 100%;
margin : 0;
padding : 0;
font-family : Arial, Helvetica, sans-serif;
font-size : 85%;
color : #333399;
}
h1 {
font-size : 380%;
font-weight : bold;
margin : 0;
}
#container {
width: 100%;
}
#header {
width:95%;
height:80px;
float:left;
top:0;
left:0;
}
#indexleft {
display:none;
}
#indexright {
float:left;
top:;
width:85%;
margin: 0 auto;
}
#footer {
float: left;
height: 50px;
left: 0;
width: 100%;
bottom: 0;
position: absolute;
}
#footer p {
text-align: center;
}
.clearCol{
display:none;
}
.space{
display:none;
}
.indexheader {
width: 95%;
text-align:center;
left:0;
top:20px;
margin-bottom:10px;
}
#indexcontainer {
left: 20px;
position: relative;
top: 0;
}
#indexcontainer .indextext{
width : 80%
}
#indexcontainer .formstyle{
width : 80%;
float: left;
margin-top: 10px;
vertical-align: middle;
}
input[type="submit"]:hover {
background-color : #652D91;
color : #FFFFFF;
cursor : pointer;
}
.button, .textfields, .select {
background-color : #BAB3D6;
border : 0;
color : #333399;
margin-bottom : 10px;
padding : 5px;
-webkit-appearance: none;
}
#indexcontainer .textfields {
margin-right: 10px;
width: 250px;
}
<div id="container">
<div id="indexleft">
<div class="top"></div>
<div><img alt="" src="#"></div
</div><div id="header">
<div class="indexheader"><h1>unblock code</h1></div>
</div>
<div> </div>
<div id="indexright">
<div id="indexcontainer">
<div><img alt="" src="#"></div>
<div class="indextext">request yours unblock code (check spam folder)</div>
<div class="formstyle">
<div class="error"> </div>
<form action="#" method="post">
<div><input type="text" name="username" class="textfields">Username</div>
<div><input type="password" name="password" class="textfields">Password</div>
<div><input type="text" name="email" class="textfields">Email</div>
<div><input type="submit" value="Send" name="send" class="button"></div>
</form>
</div>
</div>
</div><div class="clearCol"></div>
<div id="footer">
<p>Copyright © 2001-2017 localhost Conctat us</p>
<!-- **********end footer*********** -->
</div>
</div>
I have 3 problems
Check the snippet for my CSS.
when window is reduced header indexright and footer div overlap
Description text slips below instead of above textfield
I want header and footer fixed and index-right fluid
Don't know if I understood everything correctly, but this should be close.
PS, use form labels.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
color: #333399;
}
h1 {
font-size: 380%;
font-weight: bold;
margin: 0;
}
#container {
width: 100%;
}
#header {
width: 95%;
top: 0;
left: 0;
}
#indexleft {
/*display:none;*/
}
#indexright {
float: left;
top: ;
width: 85%;
margin: 0 auto;
}
#footer {
float: left;
height: 50px;
left: 0;
width: 100%;
bottom: 0;
position: absolute;
}
#footer p {
text-align: center;
}
.clearCol {
display: none;
}
.space {
display: none;
}
.indexheader {
width: 95%;
text-align: center;
left: 0;
top: 20px;
margin-bottom: 10px;
}
#indexcontainer {
left: 20px;
position: relative;
top: 0;
}
#indexcontainer .indextext {
width: 80%
}
#indexcontainer .formstyle {
width: 80%;
float: left;
margin-top: 10px;
vertical-align: middle;
}
#indexcontainer .formstyle div{
clear: both;
}
input[type="submit"]:hover {
background-color: #652D91;
color: #FFFFFF;
cursor: pointer;
}
.button,
.textfields,
.select {
background-color: #BAB3D6;
border: 0;
color: #333399;
margin-bottom: 10px;
padding: 5px;
-webkit-appearance: none;
}
#indexcontainer .textfields {
margin-right: 10px;
width: 250px;
float: left;
}
.formstyle label{
line-height: 23px;
}
#media (max-width: 700px) {
#footer {
clear: both;
position: static;
float: none;
}
}
<div id="container">
<div id="indexleft">
<div class="top"></div>
<div>
<a href="#">
<img alt="" src="#">
</a>
</div </div>
<div id="header">
<div class="indexheader">
<h1>unblock code and if text is long header div overlap</h1>
</div>
</div>
<div> </div>
<div id="indexright">
<div id="indexcontainer">
<div>
<img alt="" src="#">
</div>
<div class="indextext">request yours unblock code (check spam folder)</div>
<div class="formstyle">
<div class="error"> </div>
<form action="#" method="post">
<div>
<label>Username</label>
<input type="text" name="username" class="textfields"></div>
<div>
<label>Password</label>
<input type="password" name="password" class="textfields"></div>
<div>
<label>Email</label>
<input type="text" name="email" class="textfields"></div>
<div>
<input type="submit" value="Send" name="send" class="button">
</div>
</form>
</div>
</div>
</div>
<div class="clearCol"></div>
<div id="footer">
<p>Copyright © 2001-2017 localhost Conctat us
</p>
<!-- **********end footer*********** -->
</div>
</div>
I face the problem that when I put float to my #middle-content. The float doesn't display. Moreover, this removes its background too. I want the middle-content to be at the right of #leftcontent. Help please!!
<body>
<div id="page">
<div id="banner">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" /> </div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div> <!--banner-->
<div id="maincontent">
<div id="leftcontent">
<div class="navigation">
Home
</div><!--navigation-->
<div class="navigation">
About Us
</div><!--navigation-->
<div class="navigation">
Products
</div><!--navigation-->
<div class="navigation">
Contact
</div><!--navigation-->
<div class="navigation">
ABOUT US
</div><!--navigation-->
</div> <!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div> <!--middle-content-->
</div> <!--maincontent-->
</div> <!--page-->
</body>
And this is my CSS
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align:center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
#leftcontent {
width: 150px;
display: table;
}
#middle-content {
width: 400px;
float: left;
}
You need to float the #leftcontent, and to fix the background, add a clear fix
#cloud {
float: left;
padding: 0px;
margin: 0px;
}
#page {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#home {
float: left;
padding-left: 59px;
padding-right: 59px;
text-align: center;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding-top: 37px;
padding-bottom: 37px;
}
#banner {
background-color: #78c8f0;
height: 130px;
}
.navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
padding: 10px;
font-weight: bold;
text-align: center;
}
.navigation a {
text-decoration: none;
color: #000000;
background-position: center;
}
#maincontent {
background-color: #A6D2FF;
}
.clear:after {
content: '';
display: block;
clear: left;
height: 0;
}
#leftcontent {
width: 150px;
display: table;
float: left;
}
#middle-content {
padding-top: 1px;
width: 400px;
float: left;
}
<div id="page">
<div id="banner" class="clear">
<div id="cloud">
<img src="file:///C|/Users/admin/Desktop/DW CS3 Mr.Davis/Final/Cloud4.gif" width="573" height="121" />
</div>
<!--cloud-->
<div id="home">
<h2>HOME</h2>
</div>
<!--home-->
</div>
<!--banner-->
<div id="maincontent" class="clear">
<div id="leftcontent">
<div class="navigation">
Home
</div>
<!--navigation-->
<div class="navigation">
About Us
</div>
<!--navigation-->
<div class="navigation">
Products
</div>
<!--navigation-->
<div class="navigation">
Contact
</div>
<!--navigation-->
<div class="navigation">
ABOUT US
</div>
<!--navigation-->
</div>
<!--leftcontent-->
<div id="middle-content">
<h1>Welcome To Bagger</h1>
</div>
<!--middle-content-->
</div>
<!--maincontent-->
</div>
<!--page-->
I have also added 1px top padding to middle-content to stop the h2 margin causing a gap above maincontent
Update
Sounds like your dreamweaver does not support pseudo elements, see if this fixes your clear problem:
change css .clear:after to:
.clear {
display:block;
height:0;
overflow:hidden;
clear:both;
}
and then in the html above, find the divs with the clear class and remove the class, then at the end of those divs, add a physical div to see if it fixes your problem:
<div class="clear"></div>
try this
#leftcontent {
width: 150px;
float:left;
}
#middle-content {
width: 400px;
float: left;
}
also I have added
#maincontent:before,
#maincontent:after{
clear:both;
display:table;
content:"";
}
to fix the background color
working code is here
For your problems, i have the following solutions:
#maincontent can't show its background because its height is 0. You can fix it :
#maincontent {
background-color: #A6D2FF;
height:250px;
}
#leftcontent must have float:left so the middle-content to be at the right of #leftcontent
#leftcontent {
width: 150px;
display: table;
float: left;
}
So I want to add a new part of a website. well its hard to explain... So look at this.
CSS:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu-side-open{
left:0px;
}
.menu{
overflow-x: hidden;
position: relative;
left: 0px;
}
.menu-open {
left:231px;
}
.menu, .menu-side{
transition: 900ms;
}
.bar {
height: 7px;
width: 25px;
background-color: black;
margin: 2px;
border-radius: 20px;
}
.listing{
text-align: center;
}
.list {
padding: 2px;
color: white;
text-decoration: none;
width: 233px;
}
.list img{
position: absolute;
}
.box:hover {
background-color: gray;
}
body {
background-image: url('download.jpeg')
}
Html:
<header>
<a href="#" class="menu-toggle">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</a>
<nav class="menu-side">
<div class="listing">
<div class="box"><a class="list" href="/"><h1>Home</h1></a> </div>
<div class="box"><a class="list" href="/Photos/"><h1>Photos</h1></a></div>
<div class="box"><a class="list" href="/Store/"><img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxQHEgkUBwgWFgkVFxcbGRgYGSMWHBAeGiQYIiUWHyQfHyosJCYxJxwXIzQtKywsLjEuGCs/OjMsOSg3OjcBCgoKDg0OGxAQGy8kHSQ3LDI3LysvLiwsLi0uNyw0NS83NCw0NCwrNTIsLSwsLDQ0LDQtNCwsLC8yLDctLCwsN//AABEIAEEAQAMBEQACEQEDEQH/xAAcAAEBAQACAwEAAAAAAAAAAAAABwYBCAIDBQT/xAA2EAABAwIBCQQIBwAAAAAAAAABAAIDBBEFBgcSEyExQWFiFEJRsSIjMkORocHRJDVxdIGz4f/EABsBAQACAwEBAAAAAAAAAAAAAAAFBgEDBAcC/8QALhEAAQMDAgUDAwQDAAAAAAAAAAECAwQFERIhIjFBUWFxscFCoeFSgdHwEyMy/9oADAMBAAIRAxEAPwD1VebauweGR9RJFKxnCNzi4Dxs5gvb4qLnpFRNTS6W29xvckMm3ZV9jMArgLKeQK+QeQKGSnZvsttLV02MS+lujkPHpd9CpKkqvoeVK9WbGZ4E9U+UKWpMqQQBAEBLc4eQ2r1lTgsXo75Ixw62/UKNqqX62Fus15ziCdfRfhSaAqOLWarJTJft7opMWvHh+k0C+wzk7mN+66qelV65dyIW53ZtO3RFu/28qfgxbDCJMQkw+kcMOjkLdLeGW2Wv+q1TRYcqtTZDso6tHRxtlcn+RyZx3N1m+y21urpsYl9Zujee90nmuykqs8Dyv3qzaczwJt1T5KQpIqgQBACL79yAlecPIfVaypweL1e+SMcOofZRtVS442Fvs15ziCZd+i/Blcmsa1NTh7sarXmjh0tEG7tXcHd/q1wTq57UeuyHdcKBrYJHQM43YyaOso5co4o3x1nZ8OcbQwjSOs0jbWSaPieJ2bV0va6VvAuG+5EwzQ0U3+1qvkTmv6fCeiGHqYHUj3tmaRI0kfDiFEOarVwpcI5GyNRzeSlNzfZbdo1dPjEvrtzHnv8ASefmpOkqs8DypXqzaMzwJt1Tt5KMpEqoQBAcEXvcbEBKs4eQ/Z9ZU4PF6re9g7vUFGVVLjjaXCzXjViCZd+i/BlMNyhkibSRsIbURnRin0rGFryLtcLWc3jt8F8xVOERvX7HZV2tr5HyKvAu6p1ynZTU5R4ZFXtl1dbpmnY2ONsY03Svdtu4+J2m3ALfUQI5M55e5FWyvdE9G6dnrlVXZERO398GHqqKWhfIyqgc2dli4cWczbdwUW6NzVwpbop45Wo5ioqL9ymZvst+1aumxiT8RuY8+86Tz81JUlVq4Hcyp3qzaMzwJt1Tt59CiKQKsEAQHBGlcOGxAi4JPnDyH7IZKjCIrwHa9g7nUOSjKqmxxNLjZrxrRIJl36L38GTwbG6inYymw2pbHG9/tWDS0usPa4Baoah6Joam69SQrbdTvetRLnDU5J4PfXYuKaJ1PQXL3gdoledN8zh3AT3Ad3iszTI1unm5ea/BrpKJ0kqTO4WNzoanL1X1Pitda1jt8lwk6dmFZTyUIAgCA4c3SBDhcH5oZRcboSTOHkP2IyVGExXpTtewdzqHJRlTTaeNhcrPeElRIJl36L38E+by3KPUsp5Ar5MnZtWU8mCAIAgCA4c0PBDhdp+aGUVUXKEhzhZEHDTJUYTHejO17B7rqHLyUXVU2nibyLpZrwkyJDMvF0Xv+TAgrgLIdnVYzyYIAgCAIAgOHNDwQ8Xad4PFDKKqLlCDZycMiwGubFRbI5YxIG8GkueC0cvRv/KiKqn0LlvIvVmua1EeiX/pNs9/yXpS5RAgCAIAgCAICDZ+fzHD/wBuz+yVc05N2rl+/wDB/9k='><h1>Store</h1></a></div>
</div>
</nav>
</header>
Sorry about the long img src, well ive looked aroung and i found one thing but it didnt work for me. But what i am trying to accomplish is the image in the top right corner. so it would be like an actual banner. I did the position: absolute; but Is there something else? Should i Move the img tag?
I have two html files: index and portfolio. They use the same stylesheet. In index two divs extend to the full width of the container. However in portfolio the div only extends as long as the <h6>. I cannot figure out what is going on and how this could possibly be happening.
.container {
padding-top: 35px;
padding-left:18px;
padding-right:18px;
display:inline-block;
font-size: 0px;
overflow: hidden;
}
.spacer {
height: 2px;
}
h6 {
position:relative;
font-family:"code_boldregular";
font-size:18px;
margin: 0px;
top: 17.5px;
text-align:center;
}
#link1 {
position:relative;
height: 52.5px;
background-color: #545454;
width: 100%;
}
#link2 {
height: 52.5px;
background-color: #545454;
width: 100%;
}
<div class="container">
<div class="spacer"></div>
<div id="navlinks2">
<div id="link1" class="smalllinks"><a id="homeLNK" href="index.html"><h6>Home</h6></a>
</div>
<div class="spacer"></div>
<div id="link2" class="smalllinks"><h6>Portfolio</h6>
</div>
</div>
<div class="spacer"></div>
</div>
My divs do not center properly in IE, it works fine in Firefox.
I've tried following this site: http://flumpcakes.co.uk/css/center-div-ie but the container div appears in the right hand side in IE.
<div id="topbar">
<div id="previous"> « {block:PreviousPage} {/block:PreviousPage} </div>
<div id="next"> {block:NextPage} {/block:NextPage} » </div>
</div>
<div id="container">
<div id="header">
<div id="logo">
Title here please
</div>
<div id="tagline">
So, why do arrays start from zero?
</div>
<div id="topmenu" class="toplinks">
Home Archive Ask Me Archive Random
</div>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="" id="" />
</form>
</div>
</div>
<div id="posts-container">
<div id="posts">
Lorem ipsum dolor sit amet, post content goes here
</div>
<div id="leftmenu">
<div id="date" >
23rd November 2010
</div>
<div id="posttitle">
This is a title and it contains all that you may need...
</div>
<i>- Filed under Misc -<i>
</div>
</div>
</div>
The css:
body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
font-family:Georgia,"Times New Roman",Serif;
font-size: 14px;
text-align:center;
}
#topbar
{
height: 25px;
background: #030303;
min-width: 900px;
width: 100%;
}
#container
{
width: 800px;
margin:0 auto;
text-align:center;
}
#header
{
height: 140px;
width: 800px;
}
#logo
{
font-size: 40px;
font-weight: bold;
margin-left: 0px;
margin-top: 45px;
position: absolute;
}
#tagline
{
font-size: 14px;
font-style: italic;
margin-top: 89px;
padding: 5px;
position: absolute;
}
#topmenu
{
margin-top: 45px;
position: absolute;
text-align: right;
margin-left: 500px;
}
#search
{
margin-top: 62px;
position: absolute;
text-align: right;
margin-left: 570px;
float: right;
}
#next
{
color: #ffffff;
text-align: right;
width: 350px;
padding:3px;
float: right;
}
#previous
{
color: #ffffff;
text-align: left;
width: 350px;
padding:3px;
float: left;
margin-left: 0px;
padding-left: 0px;
}
#posts-container
{
width: 800px;
text-align: center;
}
#posts
{
width: 613px;
margin-left:177px;
position: absolute;
padding-left: 3px;
text-align: left;
}
#leftmenu
{
width:175px;
text-align: right;
margin-left: 0px;
}
#posttitle
{
font-size: 18px;
font-weight: bold;
text-align: right;
padding: 3px;
margin-left: 5px;
}
#date
{
background: #d4ff40;
width: 165px;
height: 14px;
text-align: center;
padding: 4px;
color: #7c9c2d;
margin: 5 auto;
font-size: 11px;
}
just delete text-align:center; from body, #container and #posts-container
My divs do not center properly in IE, it works fine in Firefox
I'm not going to try to parse that HTML and CSS in my head (working links are appreciated) but odds are that you are in Quirks mode.
Add a Doctype that triggers standards mode.