I looked at the answers to similar questions, but none provided the help I need; I'm still getting unresponsive links !?
To be clearer, by unresponsive links I mean the link does not work; they style exactly as expected.
Here's the CSS:
#nav3 { padding: 0; margin:15px 15px 0; height:29px; background-repeat: repeat; background-position: left top; }
.ddcolortabs { padding: 0; width: 100%; }
.ddcolortabs ul { font: normal 13px Arial, Verdana, sans-serif; margin:0 0 0; padding:0; list-style:none; }
.ddcolortabs li { display:inline; margin:0 2px 0 0; padding:0; }
.ddcolortabs a { float:left; color: #4963AE; background: #B9D6E5 url(../../content/themes/wd/images/tabs/color_tabs_left.png) no-repeat left top; margin:0 6px 0 0; padding:0 0 1px 3px; text-decoration:none; letter-spacing: 1px; font-weight: bold; }
.ddcolortabs a.selected { background: #98a5d3 url(../../content/themes/wd/images/tabs/color_tabs_left.png) no-repeat left top; color: #FFF; }
.ddcolortabs a span { float:left; display:block; padding: 8px 20px 6px 19px; background: transparent url(../../content/themes/wd/images/tabs/color_tabs_right.png) no-repeat right top; }
And here's the html:
<div id="nav3">
<div id="colortab2" class="ddcolortabs">
<ul style="margin-left:10px;">
<li><span>Most Active</span> </li>
<li><span>Most Popular</span></li>
<li><span>Most Recent</span></li>
<li><span>Browse Categories</span></li>
</ul>
</div>
</div>
My bad, higher in the markup I had a div styled with z-index: -1
I just ran into this issue. I solved it by including the full link for the page plus the anchor.
Click here
Annoying issue to have. It was working fine locally prior to making this change. I am not sure if the web host's server plays a part in this somehow?
Related
I am currently building a new site in Joomla 3.6.5 using Twitter Bootstrap. My site is currently on my localhost and I have attached an image of what I currently have but I am now trying to add bootstrap code in order to make this responsive and I am struggling with the section (image shown below)
What I would like to do is to stack this on top of each for the mobile version but the background image (attached as well) needs to resize as the screen becomes smaller.
Also would appreciate any advice on how to tackle issues with tablet screen sizes as ideally would like all three to show side by side or on top of each other but i am guessing there will be a lot of space on a tablet screen size.
My current html is the following:
<div id="mainbox" class="span12">
<div class="box1 span4">
<div class="boxes-img1"><img src="images/pic1.png" alt="" border="0" /></div>
<div class="boxes1">20 MINUTES REPAIRS</div>
<div class="boxestext1">We have a 20 Minute Repairs Service and all Minor Repairs are diagnosed while you wait. Upgrades are also provided and completed within 20 minutes!</div>
<div class="boxes-link1">READ MORE</div>
</div>
<div class="box2 span4">
<div class="boxes-img2"><img src="images/pic2.png" alt="" border="0" /></div>
<div class="boxes2">WALK-IN REPAIRS</div>
<div class="boxestext2">We have a Walk-In Repairs Service and all faults are diagnosed while you wait. Please bear in mind all Major Faults can take up 24/48 hours.</div>
<div class="boxes-link2">
<div class="boxes-linktxt2">READ MORE</div>
</div>
</div>
<div class="box3 span4">
<div class="boxes-img3"><img src="images/pic3.png" alt="" border="0" /></div>
<div class="boxes3">BUY MOBILE PHONES</div>
<div class="boxestext3">All the latest models and great deals on Mobile Phones available, so visit our store today!</div>
<div class="boxes-link3">
<div class="boxes-linktxt3">READ MORE</div>
</div>
</div>
</div>
CSS:
#mainbox {
float: left;
position: relative;
background: url(../images/box.png) no-repeat;
height: 249px;
width: 100%;
}
div.box1{
position: relative;
}
div.boxes1 {
position:absolute;
top:65px;
left:0;
margin: 0 0 29px 39px;
text-decoration:none;
font-size: 24px;
font-family: 'Cabin-Bold'; /* no .ttf */
font-style:italic;
color:#fff;
width: 268px;
}
div.boxestext1 {
position:absolute;
top:115px;
left:0;
margin: 0 0 0 39px;
text-decoration:none;
font-size: 13px;
font-family: 'Open-Sans'; /* no .ttf */
color:#7A869B;
width: 268px;
}
div.boxes-img1 {
position:absolute;
top:-40px;
left:0;
margin: 0 0 14px 125px;
width: 268px;
}
div.boxes-link1 {
display:block;
background: url(../images/readmore.png) no-repeat;
margin: 0 0 14px 125px;
position:absolute;
top:221px;
left:0;
height: 37px;
width: 84px;
color:#FFF;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
padding: 10px 0 0 9px;
}
.boxes-link1:visited, .boxes-link1:hover, .boxes-link1:active {
display:block;
background: url(../images/readmoreover.png) no-repeat;
margin: 0 0 14px 125px;
position:absolute;
top:221px;
left:0;
height: 37px;
width: 84px;
color:#fc1300;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
padding: 10px 0 0 9px;
}
div.box2{
position: relative;
}
div.boxes2 {
position:absolute;
top:65px;
left: 310px;
margin: 0 0 29px 39px;
text-decoration:none;
font-size: 24px;
font-family: 'Cabin-Bold'; /* no .ttf */
font-style:italic;
color:#fff;
width: 268px;
}
div.boxestext2 {
position:absolute;
top:115px;
left: 310px;
margin: 0 0 0 39px;
text-decoration:none;
font-size: 13px;
font-family: 'Open-Sans'; /* no .ttf */
color:#7A869B;
width: 268px;
}
div.boxes-img2 {
position:absolute;
top:-40px;
left: 310px;
margin: 0 0 14px 125px;
width: 268px;
}
div.boxes-link2 {
position:absolute;
top:221px;
left:310px;
margin: 0 0 14px 125px;
height: 37px;
width: 268px;
background: url(../images/readmore.png) no-repeat;
}
div.boxes-linktxt2 {
margin: 10px 0 0 9px;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
color:#FFF;
}
/* 2 BOXES END */
div.box3{
position: relative;
}
div.boxes3 {
position:absolute;
top:65px;
right:0;
margin: 0 39px 29px 0;
text-decoration:none;
font-size: 24px;
font-family: 'Cabin-Bold'; /* no .ttf */
font-style:italic;
color:#fff;
width: 268px;
}
div.boxestext3 {
position:absolute;
top:115px;
right:0;
margin: 0 39px 0 0;
text-decoration:none;
font-size: 13px;
font-family: 'Open-Sans'; /* no .ttf */
color:#7A869B;
width: 268px;
}
div.boxes-img3 {
position:absolute;
top:-40px;
right:0;
margin: 0 -50px 14px 0;
width: 268px;
}
div.boxes-link3 {
position:absolute;
top:221px;
right:0;
margin: 0 -50px 14px 0;
height: 37px;
width: 268px;
background: url(../images/readmore.png) no-repeat;
}
div.boxes-linktxt3 {
margin: 10px 0 0 9px;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
color:#FFF;
}
Any help would be really appreciated.
i think that the above approach is completely wrong.
First of all you should use col-xx-xx grid style
Take a look at this Bootstrap Grid Options
using this grid style would solve your problems with viewports
As for the bg image in the #mainbox try using object-fit:cover;
I'm new to creating websites and can't seem to find out why the alignment of my website doesn't work properly.
On all three of my computer monitors, the website looks fine:
http://www.spectanium.com
But I looked at it on my one friends computer and it looked wrong.
I have a main body and then space on both the right and left, but depending on the monitor I use, there has been varying space and it looks bad...
Can anyone take a look at my code and see what I'm doing wrong?
index.html -->
<html>
<head>
<title>Spectanium Studios</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
Homepage<li>Products</li>
<li>About Us</li>
</ul>
</div>
<div id="content">
<div id="updatesCol">
<h2>Recent Updates</h2>
<h3> * Website Created *</h3>
<p></p>
<p style="font-size:small">Website is now done!</p>
</div>
<div id="contentCol">
<h2>Welcome to Spectanium!</h2>
<p>
<em>So far we have to do a few things before we are ready to roll!</em>
</p>
<h3>Game Stuff:</h3>
<ol>
<li>Finish the actual game.</li>
<li>Get final graphics.</li>
<li>Get final music.</li>
<li>Find out distribution method.</li>
</ol>
<h3>Website Stuff:</h3>
<ol>
<li>Write descriptions for about us.</li>
<li>Improve it</li>
<li>Make it pretty</li>
</ol>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
<p></p>
<p> © 2014 Spectanium Studios</p>
</div>
</body>
</html>
default.css -->
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:190%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
h1, h2, h3 {
color: #B13413;
}
h2 {
font-size: 1.6em;
}
h3 {
margin: 0;
font-size: 1em;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
border-bottom: 1px dotted #CCCCCC;
text-decoration: none;
color: #3284B5;
}
a:hover {
border: none;
}
img {
border: none;
}
/* Header */
#header {
width: 890px;
height: 273px;
margin: 4px 0 4px 300px;
background: url(images/header.png) no-repeat;
}
/* Menu */
#menu {
background: url(images/topborder.png) repeat-x;
width: 950px;
height: 41px;
margin: 0 auto;
margin-left:275px;
background-color: #a1a1a1;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#menu li {
display: inline;
text-decoration:none;
}
#menu a {
display: block;
float: left;
height: 28px;
padding: 15px 20px 0 20px;
text-decoration: none;
color: black;
font-weight:bold;
border-bottom: 0 dotted #DDDDDD;
}
#menu a:hover{
height:8px;
color: #B13413;
}
/* Content */
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:275px;
height: 1000px;
}
#updatesCol {
float: right;
width: 250px;
height:1000px;
border-left:1px black solid;
text-align:center;
}
#contentCol {
float: left;
width: 500px;
padding: 20px 0 0 0;
margin-left:25px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:275px;
padding: 10px 0;
font-size: smaller;
background: url(images/bottomborder.png) repeat-x;
clear:both;
}
#footer * {
color: #666666;
}
This is how it's displaying to me, running on 1920x1080.
http://s30.postimg.org/s3w6clowg/hello.jpg
Problem is your backgorund. It's set to repeat-y but the width it's 1450, so it will repeat-y but won't extend further than that.
Also it'll look a bit to the left because you set all the margins in pixels, like the header:
4px 0 4px 300px .
So no matter what it'll be pushed from the left to the right of 300px. If my resolution is high it'll show a huge gap on the RIGHT side of the page.
This is because you are using margin-left to align the whole website so when it scales up it is still aligned to the left. Use margin: 0 auto; to center your website. If you want the website to stay aligned to the left like it currently is however then use a percentage instead. You probably should also set a background color or having a repeating background to avoid the black background when the page is wider than your background image.
Try this.
body{
background-position-x:center;
}
body > div{
margin:auto !important;
}
Now the content is centered I assure you. But it won't feel centered as the blackened area in the background-image you are using is not centered horizontally. You can see the green line is longer than the red line. Correct that and you're good to go.
My suggestion is that you use an image on background which doesn't have blackened area and achieve that by css
You have specified a absolute margin-left which is causing the problem.
I changed some parts of your css file and it works fine for me.
basically replace absolute margins with
margin-left:auto
margin-right:auto
Changes in default.css
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('http://www.spectanium.com/images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:100%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
#header {
width: 890px;
height: 280px;
margin-left:auto;
margin-right:auto;
background: url(http://www.spectanium.com/images/header.png) no-repeat;
}
#menu {
background: url(http://www.spectanium.com/images/topborder.png) repeat-x;
width: 950px;
height: 51px;
margin-left:auto;
margin-right:auto;
background-color: #a1a1a1;
}
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:auto;
margin-right:auto;
height: 1000px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:auto;
margin-right:auto;
padding: 10px 0;
font-size: smaller;
background: url(http://www.spectanium.com/images/bottomborder.png) repeat-x;
clear:both;
}
I have a <div> and a <button>, but for some reason, the button will not stay in the div.
I have tried to clear the div, as well as float: left but it has not helped.
I have also added padding to the bottom of the div, but I don't think that is the solution.
My code:
<div class="service-text text2">
<p>
this is some text
</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
</div>
JSFiddle
Usually parent div set its height auto to its child heights, but padding you assigned to button-learn is causing the issue.
you just need to set display:inline-block; on your anchor tag
An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.
.button-learn {
margin: 2px;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans',helvetica;
background: #69c773;
display:inline-block;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
Here is fiddle
Floating both the elements seems to do what you want, unless you want the button to be next to the text.
add these:
.service-text {
float: left;
}
.button-learn {
float:left;
}
or check: http://jsfiddle.net/Milanzor/Qt9u3/4/
working demo
Set document height first:
body, html {
height:100%
}
then set .service-text height:
.service-text {
margin:0;
width:100%;
height:100%; /* change this from auto */
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
and it works!! :)
EDIT
div inside another div
HTML
<div id="parent">
<div class="service-text text2">
<p>this is some text</p>
<i class="fa fa-credit-card" style="padding-right:10px;"></i> Learn More
CSS
body, html {
height:100%;
margin:0;
padding:0;
}
#parent {
height:100%; /* remove this and everything falls out of place*/
}
.service-text {
margin:0;
width:100%;
height:100%;
display:block;
background-color:#34495e;
-moz-border-radius: 0px;
-webkit-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
.service p {
margin:0;
padding-top:5px;
padding-bottom:10px;
padding-right:7px;
padding-left:15px;
font-family:'PT Sans', 'Arial', 'Open Sans';
font-size:14px;
line-height:22px;
color:white;
display: block;
position:relative;
}
.button-learn {
margin: auto;
position:relative;
text-align: center;
border-radius:4px;
text-decoration: none;
font-family:'PT Sans', helvetica;
background: #69c773;
font-size: 17px !important;
padding: 10px 10px 10px 10px;
color: #FFF;
}
.button-learn:hover {
color: #51A65F;
}
</div>
</div>
Explaination : you just need to set the height of the div always, once you set it.....you'll get the desired view!
firstly I just would like to put out there I'm not very good at coding, and this is sorta a first for me. I'm having some trouble with the footer; the background of the footer, when it's too small for bigger computer screens, just repeats itself like this: http://prntscr.com/29fxeu
I was hoping to get the background so that it automatically adjusts to each screen width to fit the whole way across. Is that possible? I've got it up on JSFiddle here: http://jsfiddle.net/HXs2A/1/
And here's the HTML used: (forgive me if there's errors)
<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
</div>
<!-- Footer border End-->
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div>
</div>
</body>
And the CSS:
#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222;
}
#lower-wrapper {
background: none; repeat scroll 0 0 #222222;
margin:auto;
padding: 20px 0px 20px 0px;
width: 100%;
border:0;
}
#lowerbar-wrapper {
background: none; repeat scroll 0 0 #222222;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 30%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#46A28D;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0px !important;
padding: 0px;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
Thanks!
to #lower
add
background-size: 100% 100%;
and remove height:120px; as it will force background to stretch on odd ratio screen.
You mean background-size? Following code change works for me (CSS3).
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png);
background-size:100% 100%;
background-repeate: no-repeat;
}
See http://www.w3schools.com/css/css3_backgrounds.asp
However, older browsers might give different results.
#lower {
margin:auto;
padding: 0;
width: 100%;
height: 120px;
background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
background-size: cover;
}
*Note: When you assigning attributes to element in HTML use " instead of '
Right <div id="lower">
Wrong <div id='lower'>
i want to make and style submit buttons i.e.
input type="submit" style="buttonClass">
using CSS and provided images, that works on both hover as well as normal state, however i'm unable to reach the desired output.
I created the buttons using anchor tags and span which are perfect but i want the same look and feel for submit buttons also.
PS: i cannot use the moz and webtooolkit of css3 as my target browser will be IE7 and IE 8, and further i have to use the client provided images only.Is there any way around for submit button<input type="submit"> to reach the desired output just similar to the buttons as created using the anchor buttons <a><span></span></a>?
HTML AS IS
<a class="buttonImage" href="javascript:blankCheck('Approve');"><span> <bean:message key="button.common.submit"/> </span></a>
HTML TO BE
<input type="submit" class="buttonImage">
CSS AS IS for buttons using anchor
.buttonImage span {
background: url('common/images/LeftButton.png') no-repeat 0 0; display: block;
line-height: 14px; padding: 7px 0 5px 8px; color: #1b1d60;
}
.buttonImage
{
background: url('common/images/RightButton.png') no-repeat top right;
display: block; float: left; height: 26px; margin-right: 6px;
padding-right: 7px; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
font-size:12px; font-weight:bold;
}
.buttonImage:hover span {
background-position: 0 -26px; color: #fff;
}
.buttonImage:hover {
background-position: right -26px;
}
Live Demo
Hi now change to some properties your css stylesheet or add two div in your anchor tag
as like this
Please check to this
Css
.buttonImage{
display:inline-block;
vertical-align:top;
text-decoration:none;
}
.buttonImage .left_img {
background: url('http://i.stack.imgur.com/634e1.png') no-repeat 0 0;
float:left; line-height: 15px; padding: 7px 0 5px 8px; color: #1b1d60;
}
.right_img{
background: url('http://i.stack.imgur.com/SyeSO.png') no-repeat 0 0;
float:left; height: 27px;
width:7px;
}
.buttonImage:hover .left_img, .buttonImage:hover .right_img{
background-position:0 -26px;
color:#fff;
}
HTML
<a class="buttonImage" href="javascript:blankCheck('Approve');">
<span class="left_img"> <bean:message key="button.common.submit"/>Hello this is coding
</span>
<span class="right_img"></span>
</a>
Demo