a.mO {color: white; cursor:pointer; margin-left:10px; font-weight:400; font-size:12px; display:block; border-top:1px solid #300;}
a.mO:link {
color: white; cursor:pointer; margin-left:10px; font-weight:400; font-size:12px; display:block; border-top:1px solid #300;
}
a.mO:visited {
color: white; cursor:pointer; margin-left:10px; font-weight:600; font-size:16px; display:block; border-top:1px solid #300;
}
a.mO:hover {
color: white; cursor:pointer; margin-left:10px; font-weight:900; font-size:12px; display:block; border-top:1px solid #300;
}
a.mO:active{
color: white; cursor:pointer; margin-left:10px; font-weight:900; font-size:14px; display:block; border-top:2px solid #300;
}
The first code works. But as soon as I replace it with the second one it stops working.
My html is :
<div><a class="mO" onclick="loadPage(31);">ABCD Status</a></div>
Thanks for help...
Some of these will not work unless you include the href attribute (it isn't a link other wise):
<a class="mO" href="#" onclick="loadPage(31);">ABCD Status</a>
You may also want to return false; after calling the function, to prevent the page from jumping to to top. You can either do onclick="loadPage(31); return false;", or onclick="return loadPage(31);", and have it returning false.
Try changing your code to
<div><a class="mO" href="#" onclick="loadPage(31);">ABCD Status</a></div>
and see if that helps any.
Related
I have a navigation bar at the top of my website.
HTML:
<text align="center">
<div class="home-nav">
<button class="nav-btn">What's New</button>
<button class="nav-btn">Community</button>
<button class="play-btn">Coming Soon</button>
<button class="nav-btn">Profile</button>
<button class="nav-btn">Information</button>
</text>
CSS:
.home-nav {
width:1240px;
height:49px;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:69px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
I want the play button to be bigger than the normal buttons. But when I make the height higher than the normal buttons and look at it, it makes the normal buttons change position. How can I fix this?
Ok I have bring some small changes to your CSS styling just try these and let me know its working as you wanted or not.
body{
margin:0; padding:0;
}
.home-nav {
width:90%;
margin: 0 auto;
display: block;
background-color:#F1B84E;
border:5px solid #FFDE84;
border-style:outset;
}
.nav-btn {
width:auto;
height:49px;
background-color:#F1B84E;
border:none;
font-family:showcard gothic;
color:white;
-webkit-text-stroke:1.25px #000000;
-webkit-text-fill-color:#FFFFFF;
font-size:20px;
}
.play-btn {
width:auto;
height:70px;
background-color:#79E119;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:5px solid #FFFFFF;
font-size:20px;
font-family:showcard gothic;
color:white;
}
Whilst designing a page i come across a conflict (i guess) in a div that holds a group of divs.
How it currently looks http://castellvmaqvae.nl/exposities/
img is how it should look. enter image description here
Change the following, your div inside the main div are wider than they should be, which in your case you want them the same width as the image, here is the updated CSS :
.col-md-4 third {
width:25%; //You may want to play around with this on different screen sizes
}
OR FIXED WIDTH:
.col-md-4 third {
width:200px; // Same width as the picture
}
Somehow the wrappers background color has no effect but giving background color to the individual divs and borders seem to work great.
code:
.verwikkeld {width:316px;
height:auto;
background-color: #FFF;
border:#999 1px solid;
margin-left:20px;
margin-right:30px;
}
.verwacht{color:#666;
border-left:#000 1px solid;
border-right:#000 1px solid;
border-top:#000 1px solid;
width:220px;
background-color:#FFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
padding-top:10px;
padding-bottom:10px;
font-size:32px;
}
.verwacht_img{border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
}
.verwacht_naam{color:#666;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:28px;
}
.verwacht_titel{color:#000;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:16px;
}
.verwacht_datum{color:#F90;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:12px;
}
.verwacht_text{color:#000;
border-left:#000 1px solid;
border-right:#000 1px solid;;
border-bottom:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
padding-bottom:20px;
font-size:12px;
}
Thank you guys for your time.
Just do this modify:
`col-md-2` --> `col-md-1`
`col-md-6` --> `col-md-7 second`
`col-md-4 third` --> `col-md-3 third`
Also in the existing, add text-align: center; to col-md-3 third.
I hope this is what you want.
I want image in left side and content in right side. But the image not in the middle when I using float:left, maybe someone of you give me a solution?
HTML:
<div class="wrap-shop"><div class="pro-img">
<img src="http://tshop.r10s.com/c18/f19/b968/3a87/a005/a662/e954/11bee5abd6005056ae13f2.jpg?_ex=125x125"/></div>
<div class="kanan">
<div class="discount">
40%
</div> <!-- end discount -->
<div class="judul">
beauty korea beauty korea beauty korea beauty korea beauty korea
</div>
<div class="harga-coret">Rp<del>1,000,000</del></div>
<div class="harga-asli">Rp 500,000</div>
<div class="bonusRsp">
300,000
</div>
<span class="go-shop">
Rincian Produk
</span>
CSS:
.wrap-pop{
margin-top:10px;
}
.wrap-shop{
border:solid #eaeaea 1px;
width:100%;
height:130px;
}
/* here is problem */
.pro-img{
padding:2px;
border:1px solid red;
--float:left;
vertical-align: middle;
display: table-cell;
width:125px;
height:125px;
background: #fff;
background-size:135px 100px;
--border-right:2px solid #bf0000;
}
.pro-img img{
max-width:125px;
max-height:125px;
border:1px solid yellow;
}
.kanan{
border:3px solid brown;
}
.judul{
font-family:Arial;
font-weight:bold;
margin-left:145px;
text-transform:capitalize;
text-decoration:none;
margin-bottom:1px;
color:black;
font-size:12px;
height:30px;
border:1px solid red;
overflow:hidden;
}
.discount{
border:1px solid yellow;
text-align:center;
font-weight:bold;
font-size:12px;
}
.discount::before {
content: "Diskon ";
}
.bonusRsp{
color:#bf0000;
margin-top:4px;
margin-bottom:5px;
font-size:12px;
}
.bonusRsp::before {
content: "Bonus ";
color:black;
font-size:12px;
}
.bonusRsp::after {
content: " Poin";
color:black;
font-size:12px;
}
.discount a{
color:yellow;
}
.harga-coret{
margin-top:5px;
font-size:11px;
margin-left:150px;
}
.harga-coret a{
color:black;
text-decoration:none;
}
.harga-asli{
font-size:15px;
color:#bf0000;
font-weight:bold;
margin-left:150px;
margin-bottom:2px;
}
.harga-asli a{
color:#bf0000;
text-decoration:none;
}
.go-shop{
border:1px solid #bf0000;
border-radius:2px;
width:120px;
color:#bf0000;
text-align:center;
background-color:white;
margin-left:9px;
text-decoration:none;
font-size:12px;
}
.judul a{
color:black;
text-decoration:none;
}
.go-shop a{
color:black;
text-decoration:none;
}
Here is my code https://jsfiddle.net/dedi_wibisono17/m6snbftt/2/
thank you.
--float:left;, change it to float:left; to work. Update: Add top padding and decrease the height.
Please try following:
.pro-img{
padding-top:15px;
padding-right:2px;
border:1px solid red;
float:left;
vertical-align: middle;
display: table-cell;
width:125px;
height:111px;
background: #fff;
background-size:135px 100px;
--border-right:2px solid #bf0000;
}
HI now used to this code
Define
.kanan{display:table-cell;}
Remove float left .pro-img
Demo
.kanan{display:table-cell;vertical-align:top;}
.wrap-pop{
margin-top:10px;
}
.wrap-shop{
border:solid #eaeaea 1px;
width:100%;
height:130px;
}
/* here is problem */
.pro-img{
padding:2px;
border:1px solid red;
vertical-align: middle;
display: table-cell;
width:125px;
height:125px;
background: #fff;
background-size:135px 100px;
--border-right:2px solid #bf0000;
}
.pro-img img{
max-width:125px;
max-height:125px;
border:1px solid yellow;
}
.kanan{
border:3px solid brown;
}
.judul{
font-family:Arial;
font-weight:bold;
margin-left:145px;
text-transform:capitalize;
text-decoration:none;
margin-bottom:1px;
color:black;
font-size:12px;
height:30px;
border:1px solid red;
overflow:hidden;
}
.discount{
border:1px solid yellow;
text-align:center;
font-weight:bold;
font-size:12px;
}
.discount::before {
content: "Diskon ";
}
.bonusRsp{
color:#bf0000;
margin-top:4px;
margin-bottom:5px;
font-size:12px;
}
.bonusRsp::before {
content: "Bonus ";
color:black;
font-size:12px;
}
.bonusRsp::after {
content: " Poin";
color:black;
font-size:12px;
}
.discount a{
color:yellow;
}
.harga-coret{
margin-top:5px;
font-size:11px;
margin-left:150px;
}
.harga-coret a{
color:black;
text-decoration:none;
}
.harga-asli{
font-size:15px;
color:#bf0000;
font-weight:bold;
margin-left:150px;
margin-bottom:2px;
}
.harga-asli a{
color:#bf0000;
text-decoration:none;
}
.go-shop{
border:1px solid #bf0000;
border-radius:2px;
width:120px;
color:#bf0000;
text-align:center;
background-color:white;
margin-left:9px;
text-decoration:none;
font-size:12px;
}
.judul a{
color:black;
text-decoration:none;
}
.go-shop a{
color:black;
text-decoration:none;
}
<div class="wrap-pop">
<div class="wrap-shop">
<div class="pro-img">
<img src="http://tshop.r10s.com/c18/f19/b968/3a87/a005/a662/e954/11bee5abd6005056ae13f2.jpg?_ex=125x125"/>
</div> <!-- end pro-img -->
<div class="kanan">
<div class="discount">
40%
</div> <!-- end discount -->
<div class="judul">
beauty korea beauty korea beauty korea beauty korea beauty korea
</div>
<div class="harga-coret">Rp<del>1,000,000</del></div>
<div class="harga-asli">Rp 500,000</div>
<div class="bonusRsp">
300,000
</div>
<span class="go-shop">
Rincian Produk
</span>
</div>
</div> <!-- end wrap shop -->
</div> <!-- end wrap-pop -->
Add this display: table; class .wrap-shop
https://jsfiddle.net/m6snbftt/5/
My site here is fluid width, but the middle header section with the search bar and image doesn't resize correctly in either IE, Chrome or FF.
I've tried using media screen stylesheets for lower screen resolutions, but this just causes there to be a gap to the right of the right-hand image in some browsers where they display the width differently.
If anyone could possibly take a look and see it at different resolutions and browsers that would be great, and perhaps help with any suggestions.
Currently in IE9, when it's reduced slightly under 1263px (approx 1250px), the image jumps down entirely and looks awful.
Here's the CSS:
/*Town Image */
#town-image-search {
box-shadow:0 5px 5px #CCC;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#e4e4e4');
border-top:1px solid #D6D2D5;
border-bottom:#d1d1d1;
}
#search-bar {
float:left;
width:16.5%;
padding:8px 15px;
}
input#search {
width:100%;
height:22px;
color:#aaa;
text-indent:10px;
border:1px solid #d6d6d6;
font-size:14px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 0 6px;
padding:0;
}
input#submit {
width:100%;
border:1px solid #666;
height:22px;
color:#fff;
text-shadow:0 1px 0 #555;
background-color:#803C6D;
font-family:'Arial Rounded MT Bold';
cursor:pointer;
-webkit-border-top-right-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0;
}
#middle-top {
height:68px;
float:left;
width:81%;
border-left:1px solid #Fafafa;
}
#town-name {
word-spacing:5px;
position:relative;
z-index:0;
float:left;
font-family:'arial rounded mt bold';
font-size:36px;
color:#354057;
line-height:69px;
text-indent:27px;
letter-spacing:-3px;
}
#town-name span {
font-family:'arial rounded mt bold';
color:#354057;
}
img#heart {
float:right;
width:230px;
height:68px;
position:relative;
z-index:10;
margin-right:-120px;
}
img#town-image {
width:404px;
height:68px;
float:right;
}
Any ideas would be much appreciated.
#middle-top a float:right and changed the width to 80%
I am using one template to build my web site. I want to add some pictures on a page that are enlarged and opened in a new window when user clicks them.
I have found some pieces of code by search but real problem I am facing is that this template is build using CSS of which I have very less exposure. Those pieces of code required putting code in body of HTML that I am not able to do here using this template.
Here is style sheet I am using & made all pages using it. How do I add few pictures to a page like when they are clicked, are enlarged in a new window.
* {
margin: 0;
padding: 0;
}
a:link {
color: #506F09;
}
body {
background: url(images/backgr.jpg) top left no-repeat #2D2E2B;
}
#tot{
position:relative;
overflow:hidden;
z-index:0;
}
#antet{
background:#2D2E2B;
height:100px;
border-bottom:#F7FDE1 solid 7px;
margin-left: 157px;
}
.butonas1{
background:url(images/butonas3.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas1 a:link{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:visited{
text-decoration:none;
color:#2D2E2B;
height:62px;
width:125px;
}
.butonas1 a:hover{
text-decoration:none;
color:#2D2E2B;
}
.butonas2{
background:url(images/butonas1.png) left no-repeat;
height:62px;
width:125px;
position:absolute;
top:-36px;
font-family: Arial, Helvetica, sans-serif;
color:#F7FDE1;
font-size:22px;
line-height:62px;
text-align:center;
font-weight:bold;
}
.butonas2 a:link{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:visited{
text-decoration:none;
color:#F7FDE1 ;
}
.butonas2 a:hover{
background:url(images/butonas3.png) left top no-repeat;
text-decoration:none;
height:62px;
width:125px;
position:absolute;
top:0;
left:0;
color:#2D2E2B;
}
#logo_sus{
background:url(images/logo1.png) left no-repeat;
height:178px;
width:171px;
position:absolute;
left:274px;
top:60px;
}
#bara {
position:relative;
height:62px;
}
#container{
width:408px;
background:url(images/sus.jpg) top center no-repeat #F7FDE1;
float:left;
margin-left:470px;
display:inline;
z-index:1;
}
#jos {
background:url(images/jos.jpg) no-repeat bottom center;
width:408px;
height:30px;
z-index:1;
}
.text{
width:380px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
margin:30px 12px;
}
.titlu {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
}
.titlu2 {
color:#506F09;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
font-weight:bold;
padding-left:170px;
padding-top:20px;
}
.clear{
height:1px;
clear:both;
}
#bottom {
background:url(images/bara.jpg) bottom left no-repeat;
height:30px;
width:556px;
float:left;
margin-left:340px;
margin-top:30px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#F7FDE1;
text-align:right;
display:inline;
z-index:1;
}
#bottom span{
padding-right:25px;
}
#jos2 {
background:url(images/jos2.jpg) no-repeat bottom center;
width:563px;
height:53px;
z-index:1;
}
How do I add few pictures to a page like when they are clicked, are enlarged in a new window.
You do not need CSS to achieve that. Just add an anchor around the image in your markup:
<a href="/images/image1_large.jpg" title="Open picture in new window" target="_blank">
<img src="/images/image1_small.jpg" alt="Image 1" />
</a>
But if you like a STRICT doctype, or if you trust your readers on using the therefore designed browser features, I would recommend to open the image in the same window; the user can always override that with middle- or right mouseclick:
<a href="/images/image1_large.jpg" title="Open picture in this window">
<img src="/images/image1_small.jpg" alt="Image 1" />
</a>
And to open a link in a popup window, you need to call the JavaScript window.open(); routine, as explained e.g. on this page.