I am working in wordpress and I have this menu with 4 menu items.
The problem is that they are touching each other and there is 0
space between which makes it ugly in my opinion.
Now this problem only
occurs in wordpress. So I have to find a solution how to put some space between.
Maybe you guys know a solution without having to install something on WP.
(the codes in the body is exactly as in my wordpress to demonstrate how it looks like. You can enter it and that will put some space between, but unfortunately that doesn't work in wordpress.)
<style>
.smallmenu {
margin: 0 auto;
max-width: 436px;
width: 100%;
}
.Capital {
margin: 0px 0 -5px 0;
line-height: 63px;
font-size: 60px;
font-weight: ligter;
}
.smalltext {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
}
.smalltextpub {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
margin-left: -5px;
}
.cornermenu {
display: inline-block;
margin: auto;
border-radius: 25px;
background: #769DBD;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
#hoverr:hover {
border-radius: 25px;
background: #464646;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
* {
box-sizing: border-box;
}
</style>
<div class="smallmenu"><a id="hoverr" class="cornermenu" href="#methods"><span class="Capital">M</span>
<span class="smalltext">Methods</span></a><a id="hoverr" class="cornermenu" href="#background"><span class="Capital">B</span>
<span class="smalltextpub">Background</span></a><a id="hoverr" class="cornermenu" href="#results"><span class="Capital">R</span>
<span class="smalltext">Results</span></a><a id="hoverr" class="cornermenu" href="#publications"><span class="Capital">P</span>
<span class="smalltextpub">Publications</span></a></div>
Just set a fixed margin on .cornermenu.
Something like margin: 2px
JSFiddle link
.cornermenu {
...
margin: 2px;
...
}
These are some of the inline-styles.
body{
font-family: helvetica;
font-size: 12px;
font-weight: normal;
color: gold;
margin: 0;
padding:0;
background: black;
}
p{
font-family: helvetica;
font-size: 12px;
font-weight: normal;
color: white;
margin: 0;
padding-top: 5px;
line-height: 14px;
}
header{
width: 100%;
height: 300px;
background-color: red;
border-bottom: 2px solid gold;
}
/* I would like to add a height to this wrapper, but when I do, the while loop doesn't stack the products in a row of 3. It just lists the products straight down the page. */
#wrapper{
width:618px;
margin: 10px auto;
/*background: yellow;*/
}
#stack{
width:201px;
height:200px;
float: left;
margin-right:5px;
margin-bottom:0px;
padding:0;
text-align:center;
/* background:pink;*/
}
a{
cursor:pointer;
color: gold;
text-decoration: none;
}
h3{
width:618px;
height:30px;
font-family: helvetica;
font-size: 16px;
font-weight: bold;
color:21a4ff;
margin: 0 auto;
text-align:center;
padding-top:10px;
}
p.price{
font-weight: bold;
color: tomato;
font-size: 14px;
line-height:10px;
}
p.name{
font-family: helvetica;
font-size: 13px;
font-weight: bold;
color: gold;
margin:0;
padding:0;
line-height: 12px;
}
</style>
<?php
include("mysql.connect.php");
$stmt = $mysqli->prepare("SELECT sku, name, price, sm_image
FROM products ORDER BY price");
$stmt->execute();
$stmt->bind_result($sku, $name, $price, $sm_image);
This is where my problem is. How can I set this while loop to list results in rows of three using the $stmt-fetch()) method?
while($stmt->fetch()){
echo "<div id='wrapper'>
<div id='stack'>
<img src='$sm_image'></img><br>
<p>$sku</p>
<p class='name'>$name</p>
<p class='price'>$$price<br></p>
</div>";
echo "</div>";
}
// Recuperate the statement resources
$stmt->close();
// Close the connection
$mysqli->close();
?>
this is a follow-up question to the one posted here. i am trying to get my fonts to show up[ in my laravel website. i tried changing things so SASS will import my fonts, but they're still not showing up on my website. I went to check weaqther the font downloaded in Chrome devtools, but Chrome said the font loaded a 404 error. i checked the link, and the font downloads. Very strange. How do i get my fonts to show up/
Here is my SASS file:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
#mixin fontFace($family,$src,$weight: normal,$style: normal) {
#font-face {
font-family: $family;
src: url('#{$src}'); // IE9 compat
font-style: $style;
font-weight: $weight;
}
}
#include fontFace('Nexabold', 'public/build/fonts/nexaBold.otf')
body {
margin: 0;
background-color: #ecf0f1;
font-family: NexaBold;
}
.mainheader {
height: 75px;
font-family: NexaBold;
font-size: 28px;
line-height: 75px;
text-align: center;
vertical-align: middle;
background-color: #dce0e1; }
.menu {
height: 40px; }
.subcontainter-title{float:left;}
.subcontainer-left {
height: 75px;
float: left;
width:50%;
}
.subcontainer {
height: 75px;
margin: auto; }
.subcontainer-right {
height: 75px;
width: 50%;
float: right; }
.subcontainer-button {
height: 90px;
width: 105px;
float: right;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.subcontainer-left .subcontainer-button{float:left;}
.subcontainer-button a {
text-decoration: none;
color: black; }
.subcontainer-button a:visited {
text-decoration: none;
color: black; }
.subcontainer-button a:active {
color: black; }
.subcontainer-button a:hover {
border-bottom: 3px solid gray;
cursor: pointer; }
.subcontainer-title {
height: 75px;
float: left;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 75px;
font-family: OpenSans;
font-size: 14px; }
.bt-active a {
border-bottom: 3px solid gold; }
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.maincontainer {
height: 700px; }
.textheader {
height: 180px;
text-align: center;
vertical-align: middle;
line-height: 180px;
font-family: NexaLight;
font-size: 48px; }
.ongoing-header {
width: 700px;
margin: auto;
height: 70px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #bcc0c1; }
.subheader {
height: 70px;
width: 260px;
font-family: OpenSans;
font-weight: bold;
font-size: 22px;
text-align: center;
line-height: 70px;
vertical-align: middle;
float: left; }
.subheader-menu {
height: 36px;
background-color: #ccd0d1; }
.button {
height: 36px;
width: auto;
margin: auto;
padding-left: 12px;
padding-right: 12px;
text-align: center;
vertical-align: middle;
line-height: 36px;
font-family: OpenSans;
cursor: pointer;
border-radius: 4px;
transition: 0.3s; }
.button:hover {
background-color: #ecf0f1; }
.subheader-right {
float: right;
padding-top: 16px;
width: 260px;
margin: auto;
margin-right: 24px; }
.ongoing-container {
width: 700px;
margin: auto; }
.ongoing-game {
height: 40px;
line-height: 40px;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-family: OpenSans;
transition: 0.3s; }
.ongoing-game:nth-child(even):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(odd):hover {
background-color: #f3f9fa; }
.ongoing-game:nth-child(even) {
background-color: #d3d9da; }
.ongoing-game:nth-child(odd) {
background-color: #dce0e1; }
.iconholder {
height: 20px;
width: 20px;
float: left;
margin-top: 4px;
margin-right: 4px; }
#username {
float: left;
height: 40px;
width: 220px;
text-align: left;
padding-left: 24px; }
#btcamount {
float: left;
height: 40px;
width: 220px;
text-align: right;
padding-right: 24px; }
#ongoing {
height: 40px;
width: 212px;
float: left; }
.bitcoinlogo {
height: 15px; }
.helpcontainer {
height: 600px;
width: 500px;
margin: auto;
font-family: OpenSans; }
.helpform {
margin-top: 20px;
height: 400px;
font-size: 12px; }
.helpform textarea {
resize: none;
font-family: OpenSans; }
#issuetext {
height: 100px;
width: 480px; }
#emailtext {
height: 18px;
width: 220px;
font-family: OpenSans; }
.submitbutton {
height: 40px;
width: 180px;
float: none;
margin: auto;
margin-top: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
vertical-align: middle;
line-height: 40px;
font-size: 14px;
cursor: pointer;
border-radius: 3px;
transition: 0.2s background-color; }
.submitbutton:hover {
background-color: lightgrey; }
I'm doing a database project for university, but actually my question is related to html or css (I think).
Here's the thing: I have a navigation bar around the website but when I'm in some some pages I can't access others, for example when I'm in "change password" page and I put the mouse over "Log Out" it's impossible to click.
Thanks in advance, André
Here's the code:
<div id="linking">
<ul>
<li>
Home
</li>
<li>
Search for trips
</li>
<?php
if (isset($_SESSION['user_logged_in'])) {
if (($_SESSION['user_email']) === "admin#email.com") {
?>
<li>
Create tour
</li>
<li>
Create service
</li>
<?php
}
?>
<li>
<a href='profile.php'>Change settings</a>
</li>
<li>
<a href='change_password.php'>Change password</a>
</li>
<li>
<a href='logout.php'>Log out</a>
</li>
<label>Hello <?php print_r($_SESSION['user_name']) ?>!</label>
<?php
}
else {
?>
<li>
<a href='login.php'>Log In</a>
</li>
<li>
Register
</li>
<label>Hello visitor!</label>
<?php
}
?>
</ul>
</div>
And here's the css:
/* common properties */
body{
background-color: #d8d8d8;
}
hr{
color: firebrick;
background-color: firebrick;
border-color: transparent;
}
.registering {
position: absolute;
left: 30%;
top: 0%;
}
.loging {
position: absolute;
left: 33%;
top: 25%;
}
td{
vertical-align: middle;
}
/* .loging class properties */
body .loging{
position:absolute;
left:32%;
top:25%;
}
.loging td{
padding: 5px;
text-align: center;
font-size: 20px;
font-family: sans-serif;
color: firebrick;
}
.loging td input{
width: 500px;
height: 23px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-style: solid;
border-color: transparent;
text-align: center;
font-size: 16px;
}
.loging td input[type="submit"]{
width: 120px;
height: 30px;
background-color: firebrick;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 0px;
}
.loging td input[type="password"]{
font-size: 24px;
}
/*. registering class properties */
.registering td{
padding: 5px;
text-align: center;
font-size: 18px;
font-family: sans-serif;
color: firebrick;
}
.registering td input{
width: 500px;
height: 23px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-style: solid;
border-color: transparent;
text-align: center;
font-size: 16px;
}
.registering td input[type="submit"]{
width: 120px;
height: 30px;
background-color: firebrick;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 0px;
}
.registering td input[type="password"]{
font-size: 24px;
}
/* .linking properties */
#linking label{
color: firebrick;
font-weight: bold;
float:right;
position: fixed;
left: 90%;
font-family: sans-serif;
font-size: 16px;
}
li{
display: inline;
padding-right: 2px;
padding-left: 2px;
}
a{
color:firebrick;
font-weight: bold;
position: relative;
display: inline-block;
font-family: sans-serif;
font-size: 14px;
text-decoration: none;
}
/* section properties */
section{
padding:5px;
position: absolute;
width:30%;
}
section table{
padding: 8px;
}
section hr{
background-color: #FFFFFF;
}
section td, th{
width:32%;
text-align: center;
}
/* search for trips */
body .search{
position:absolute;
left:32%;
top:25%;
}
.search td{
padding: 5px;
text-align: center;
font-size: 20px;
font-family: sans-serif;
color: firebrick;
}
.search td input{
width: 500px;
height: 23px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-style: solid;
border-color: transparent;
text-align: center;
font-size: 16px;
}
.search td input[type="submit"]{
width: 120px;
height: 30px;
background-color: firebrick;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
border-radius: 0px;
}
Logout.php code:
<?php
session_start();
unset($_SESSION['user_logged_in']);
session_destroy();
header("Location:index.php");
echo "<script>alert('You have been logged out! Please come back anytime!')</script>";
?>
i think you have not added the link(logout.php) to every page..
I am making a simple wordpress theme for a friend that will be designed specifically for the content he will be posting. I am now in te process of switching out the temporary static content for dynamic php content.
I have limited knowledge of CSS and usually spend half the time googleing things, and now I have encountered the first real problem that I cant find a solution to myself. In the index.php-part of my theme is a div that contains two floated divs, left (main content) and right (extra stuff), the left one will always have content in it (the WP loop fetching the news posts) while the one on the right may at times be empty (here I have a loop that fetches the featured image of posts that I want to highlight, linking to that post).
Now if no posts are shown in the right div, the containing div ignores the left div and collapses. I previously had the problem of it collapsing anyway, which I solved by giving the container this CSS:
overflow: auto;
}
* html #main {
height: 1%;
}
Here is my html for the index.php (static content in 'main_left' will be replaced with a WP loop later):
<?php get_header(); ?>
<div id="main"><div id="main_left"><h2>Välkommen till Klamas Kultur & Nöje!</h2><p class="small">Klamas Kultur & Nöje producerar fars, komedi och barnteater – både inomhus och utomhus – i hela Västsverige, och har gjort så sedan 1987.</p><hr />
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green. Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green. Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
<h1>TURNÉ - Våren 2015</h1><p class="small">Publicerat 2014-12-09 18:42</p>
<p>Efter höstens stora succé, med utsålda hus på Fjärås Bygdegård, ger sig gänget under våren 2015 ut på en liten turné. Första stopp blir Vänersborgs Teater där det blir nypremiär SÖNDAG 18/1 kl. 15.00. Då kommer dessutom ett antal Tvåstadsbekantingar att dyka upp på scen, nämligen Thomas Fridén, Maria Zeffer Johnsson samt Thomas Green. Fyra veckor varar spelperioden för att sedan avslutas med att original-ensemblen återförenas för en finalhelg med föreställningar på Dergårdsteatern i Lerum LÖRDAG 14/2 kl. 19.00 samt på Kungsbacka Teater SÖNDAG 15/2 kl. 15.00.</p>
</div>
<div id="main_right">
<div id="main_right_top"><h3>AKTUELLT</h3></div>
<?php query_posts('cat=4 &posts_per_page=3'); while (have_posts()) : the_post(); ?>
<div class="main_right_contents"><?php the_post_thumbnail('category-thumbnail'); ?>Mer info & Bokning</div>
</div>
<?php endwhile; ?>
</div>
<?php get_footer(); ?>
The 'main'-div is inside two additional divs spanning the entire layout; 'dropshadow' and 'wrapper'.
This is the full CSS stylesheet:
body {
margin: 0px;
background-attachment: fixed;
background-image: url(graphics/burnBG.jpg);
background-repeat: repeat-y;
background-position: center top;
}
#dropshadow {
width: 990px;
height: 100%;
margin-right: auto;
margin-left: auto;
background-image: url(graphics/dropShadow.png);
background-repeat: repeat-y;
margin-bottom: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#wrapper {
width: 950px;
height: 100%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#header {
background-color: #FFFFFF;
height: 260px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
#banner {
background-color: #FFFFFF;
margin: 0px;
height: 225px;
width: 100%;
}
#slider_container {
z-index: 9;
position: relative;
}
#logo {
z-index: 10;
margin-top: -225px;
position: relative;
}
#menu {
background-color: #ffff2d;
height: 35px;
margin: 0px;
}
#main {
width: 950px;
height: 100%;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
overflow: auto;
}
* html #main {
height: 1%;
}
#main_left {
width: 572px;
height: 100%;
float: left;
border-right-width: 3px;
border-right-style: dotted;
border-right-color: #ffff2d;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
#main_right {
float: right;
width: 325px;
height: 100%;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}
#main_right_top {
width: 250px;
margin-right: 25px;
margin-left: 20px;
padding-right: 15px;
padding-left: 15px;
height: 28px;
background-image: none;
background-color: #883831;
line-height: 28px;
}
.main_right_contents {
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
width: 280px;
margin-right: 25px;
margin-left: 20px;
background-image: url(graphics/diagonalstripes.png);
background-repeat: repeat;
margin-top: 10px;
}
#main_full {
width: 870px;
height: 100%;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 25px;
padding-left: 40px;
}
#main_full a:link{
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
#main_full a:hover{
color: #000000;
text-decoration: none;
background-color:#ffff2d;
}
#main_full a:visited{
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
#footer {
width: 950px;
margin-right: auto;
margin-left: auto;
height: 150px;
margin-bottom: 0px;
border-top-width: 7px;
border-top-style: double;
border-top-color: #ffff2d;
background-image: url(graphics/footerBG.jpg);
background-repeat: repeat-x;
}
#footer a:link{
font-family: Arial, Helvetica, sans-serif;
color: #cb867c;
text-decoration: none;
}
#footer a:hover{
color: #000000;
background-color:#ffff2d;
}
#footer a:visited{
font-family: Arial, Helvetica, sans-serif;
color: #cb867c;
}
#footer_contents {
margin: 0px;
height: 130px;
width: 910px;
padding-right: 20px;
padding-left: 10px;
color: #cb867c;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: bottom;
}
#footer_contents_left {
float: left;
width: 600px;
padding-top: 110px;
}
#footer_contents_right {
float: left;
width: 200px;
padding-top: 10px;
padding-left: 110px;
}
#copyright {
width: 865px;
margin-bottom: 0px;
padding-right: 45px;
padding-left: 20px;
padding-top: 3px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #cb867c;
padding-bottom: 0px;
bottom: 0px;
height: 25px;
text-align: right;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #cb867c;
margin-right: auto;
margin-left: auto;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: normal;
}
p.small{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: normal;
}
h1 {
font-family: "Trebuchet MS";
font-size: 18px;
font-style: normal;
color: #000000;
font-weight: bold;
}
h2 {
font-family: "Trebuchet MS";
font-size: 20px;
color: #000000;
font-style: italic;
}
h3 {
font-family: "Trebuchet MS";
font-size: 18px;
font-style: normal;
color: #E9CDC9;
font-weight: bold;
}
h4 {
font-family: "Trebuchet MS";
font-size: 14px;
font-style: normal;
color: #000000;
font-weight: bold;
margin-bottom: 5px;
}
hr {
color: #ffff2d;
background-color: #ffff2d;
height: 2px;
width: 100%;
border: 0px;
}
#main_left a:link {
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
#main_left a:hover {
color: #000000;
text-decoration: none;
background-color:#ffff2d;
}
#main_left a:visited {
font-family: "Trebuchet MS";
color: #000000;
text-decoration: underline;
}
.nav {
background-color: #ffffff;
}
.nav ul {
overflow: auto;
width: 950px;
margin: 0;
padding: 0;
}
.nav li {
float: left;
list-style: none;
background-color: #ffff2d;
text-align: center;
padding: 0;
margin: 0;
font-family: "Trebuchet MS";
font-size: 1.2em;
line-height: 35px;
height: 35px;
width: 16.6667%;
width: calc(100% / 6);
font-style: normal;
}
.nav a {
text-decoration: none;
color: #000000;
display: block;
transition: .3s background-color;
}
.nav a:hover {
color: #ffffff;
background-color: #883831;
font-style: italic;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.boka {
width: 200px;
height: 30px;
line-height: 30px;
background-color: #ffff2d;
text-decoration: none;
color: #000000;
display: block;
margin-right: auto;
margin-left: auto;
transition: .3s background-color;
cursor:pointer;
font-family:Trebuchet MS;
font-size: 1.2em;
padding:6px 8px;
}
.boka:hover {
color: #ffffff;
background-color: #883831;
font-style: italic;
}
.boka:active {
background-color: #fff;
color: #444;
cursor: default;
}
/* Everything below is for ssslider */
.sss {
height: 0;
margin: 0;
padding: 0;
position: relative;
display: block;
overflow: hidden;
}
.ssslide {
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
display: none;
overflow: hidden;
}
.ssslide img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
display: block;
}
.sssnext, .sssprev {
width: 25px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
background: url('images/arr.png') no-repeat;
}
.sssprev {
left: 3%;
background-position: 0 50%;
}
.sssnext {
right: 3%;
background-position: -26px 50%;
}
.sssprev:hover, .sssnext:hover {
cursor: pointer;
}
I have been trying to fix this for the last 3 hours with no success. Also, there is a margin of a few pixels at the bottom of the page that have been haunting me throughout the project.
Link to site: http://wordpress.klamas.se/
Collapsing Div Issue
You could write in a check for the content and add a space to keep the div from collapsing.
<?php
$args = array(
'cat' => 4,
'posts_per_page' => 3
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<div class="main_right_contents"><?php the_post_thumbnail('category-thumbnail'); ?>Mer info & Bokning</div>
<?php }
} else {
echo ' ';
}
wp_reset_postdata();
?>
Bottom Margin Issue
The odd margin at the bottom is due to the content being too large for the fixed height footer. With anything content based I wouldn't recommend fixing the height to a pixel value. By applying the gradient using CSS3 with Graceful Degradation and removing the fixed height we ensure the footer will always look correct.
#footer {
width: 950px;
margin-right: auto;
margin-left: auto;
border-top-width: 7px;
border-top-style: double;
border-top-color: #ffff2d;
background: #cd655a;
background: -moz-linear-gradient(top, #cd655a 50%, #672324 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#cd655a), color-stop(100%,#672324));
background: -webkit-linear-gradient(top, #cd655a 50%,#672324 100%);
background: -o-linear-gradient(top, #cd655a 50%,#672324 100%);
background: -ms-linear-gradient(top, #cd655a 50%,#672324 100%);
background: linear-gradient(to bottom, #cd655a 50%,#672324 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd655a', endColorstr='#672324',GradientType=0 );
}
References
Colorzilla - CSS Gradient Generator - A nice quick CSS3 Gradient Generator.