I use Tao theme http://themeforest.net/item/tao-retina-responsive-wordpress-portfolio-theme/5913809
The website I have issue with is this http://www.thamon.co.uk/
If you open the page with Safari, it overlaps the logo with the body of all pages.
In styles.css I have he following code associated with the header that I believe is somewhat relevant to the problem
.header {
position: relative;
}
.header .header-primary-content {
display: table;
width: 100%;
position: relative;
padding: 10px 0;
margin-bottom: 10px;
border-bottom: 1px solid #e6e6e6;
}
/* Border shadow */
.header .header-primary-content:after {
content: " ";
position: relative;
z-index: -1;
bottom: -2px;
left: 0;
width: 100%;
height: 1px;
background: rgba(255, 255, 255, .5);
}
.logo, .header-buttons {
display: table-cell;
vertical-align: middle;
}
/**
* Logo
*/
.logo {
width: 70%;
}
.logo a {
display: inline-block;
position: relative;
width: 120px;
height: 40px;
margin-left: 410px;
vertical-align: middle
color: #444652;
text-shadow: 1px 1px #fff, 0px 0px #0E0E0E, 2px 3px 1px #E3E3E3;
font: normal 400 60px 'Merriweather', Georgia, "Times New Roman", Times, serif;
}
.no-touch .logo a:hover {
animation: tinywiggle 220ms ease-out;
}
You put a height of 40px on .logo a when the height of the logo is 120px x 147px. Try matching the height of the .logo a with the img instead or remove the height from the .logo a
Related
I want the buttons to line up with the numbers. Is therre anyway to make the buttons static or perhaps making the numbers dynamic? I would also appreciate i there´s any best practices when adding CSS to a table because to be honest I mostly just try things out.
Windowed:
Fullscreen:
CSS:
table {
width: 100%;
}
thead {
padding: 3px;
height: 70px;
width: 100%;
table-layout: fixed;
}
td {
padding: 3px;
}
.greenButton,
.yellowButton,
.redButton {
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: 0.6em;
padding-bottom: 0.6em;
color: black;
background-color: rgb(82, 202, 126);
border: solid #cccccc 1px;
border-radius: 5px;
box-shadow: 2px 2px 1px #888888;
clear: right;
float: right;
font-size: small;
}
.greenButton:hover {
background-color: yellow;
}
.redButton {
background-color: rgb(171, 176, 177);
}
.yellowButton {
background-color: rgb(235, 243, 113);
}
.numbers {
display: inline-block;
width: 100%; /* set to 100% */
height: 20%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: 1.1em;
padding-bottom: 0.6em;
text-align: right;
}
Please refer to this image as a visual aid for my question.
I want the text input with "Sindre", the other input, and the buttons, to be placed higher, so they vertically align with the Icehotel logo. How can I do this?
Here's my code...
HTML
<div id="header-content">
<br>
<a href="/index">
<img draggable="false" src="{url}/app/tpl/skins/{skin}/images/logo.gif" style="position:relative; margin-left: 20px; <div align=; color: #FA0000;margin-top: 15px;margin-left: 180px">
</a>
<input id="username" name="log_username" placeholder="Username" style="position:relative; margin-left: 20px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="text">
<input id="password" name="log_password" placeholder="Password" style="position:relative;margin-left: 1px;padding:5px;box-shadow:3px 3px 5px black;border: 0;width:250px;background: #3b8ba4;border-radius: 6px;color: #baedf5;" type="password">
<a href="{url}/api.php">
<button class="login green" name="login" style="height:34px;" type="submit">Let's go!</button>
</a>
<a>
<button class="login red" style="height:34px; margin-left: 4px" type="sumbit">Forgot your password?</button>
</a>
</div>
CSS
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr, img {
page-break-inside: avoid
}
img {
max-width: 100%!important
}
#page {
margin: .5cm
}
p, h2, h3 {
orphans: 3;
widows: 3
}
h2, h3 {
page-break-after: avoid
}
}
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
color: #e0eff5;
background-attachment: fixed;
background-color: #013448;
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png');
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -webkit-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
background-image: url('http://localhost/app/tpl/skins/aura/habboweb/planet.png'), -moz-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #2D3877 480px);
, -ms-radial-gradient(190px 190px, circle farthest-side, #0297c8 0, #013448 480px);
, radial-gradient(circle farthest-side at 190px 190px, #0297c8 0, #013448 480px);
min-height: 755px
}
i, cite, em, var, address, dfn {
font-style: italic;
}
body {
font-family: "Ubuntu Condensed", Arial, serif;
font-weight: normal;
min-height: 0;
}
#footer a {
color: #a1b5c8;
text-decoration: none;
font-size: 13px;
}
body {
font-size: 1em;
line-height: 1.4;
}
.form__input, .form__select {
box-shadow: inset 0 2px 0 0 #9ebecc;
line-height: 1.2;
padding: 5px 12px;
width: 100%;
font-size: 16px;
}
.button b, .new-button i {
position: absolute;
display: block;
left: 2px;
top: 3px;
right: 2px;
height: 9px;
background-color: #4a9fb4;
z-index: 0
}
.button:hover, .new-button:hover {
background-color: #418491
}
.button:hover b, .new-button:hover i {
background-color: #46a9bf
}
.button span, .new-button b {
position: relative;
z-index: 100
}
.button:active, .button-active, .new-button:active {
left: 1px;
top: 1px;
box-shadow: 2px 2px rgba(0, 0, 0, 0.4)
}
.button.dimmed {
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: .5;
opacity: .50
}
.button.large {
height: 100px;
background-color: #c78800;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #5f4416
}
.button.large:hover {
background-color: #d99b00
}
.button.large:hover b {
background-color: #f7ce00
}
.button.large b {
left: 4px;
top: 4px;
right: 4px;
height: 48px;
background-color: #f0bb00;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0
}
.button.large span {
display: block;
font-size: 27px;
font-weight: bold;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
line-height: 54px
}
.button.large span.sub {
display: block;
font-size: 17px;
font-weight: bold;
line-height: 42px;
text-transform: none
}
.button.large.not-so-large {
height: 48px
}
.button.large.not-so-large b {
height: 20px
}
.button.large.not-so-large span {
text-transform: none;
font-size: 22px;
line-height: 46px
}
header, footer {
width: 100%;
background: #101016;
background: rgba(16, 16, 22, 0.85);
position: fixed;
z-index: 999
}
#login-errors {
width: 100%;
height: 35px;
background-color: #c00;
color: #fff;
font-size: 17px;
font-weight: bold;
text-align: center;
line-height: 35px
}
#login-errors a {
color: #000
}
#footer-content {
float: left;
margin-left: 50px
}
#footer-content.partner-logo-present {
margin-left: 20px
}
#footer {
width: 100%;
min-width: 780px;
margin-top: 19px
}
header {
top: 0;
min-height: 99px
}
header #border-left {
position: absolute;
width: 500px;
height: 1px;
left: 0;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
header #border-right {
position: absolute;
width: 100%;
height: 1px;
left: 220px;
bottom: 0;
border-bottom: 1px solid #7aa3b9
}
footer {
height: 69px;
bottom: 0;
border-top: 1px solid #7aa3b9
}
#top-bar-triangle, #top-bar-triangle-border {
position: absolute;
left: 163px;
bottom: -29px
}
#top-bar-triangle {
font-size: 0;
height: 0;
line-height: 0;
border-style: solid;
float: left;
margin: 0;
border-color: #101016 transparent;
border-color: rgba(16, 16, 22, 0.85) transparent;
border-width: 29px 29px 0 29px
}
#top-bar-triangle-border {
background-image: url('http://localhost/images/new_index/images/v3/top_bar_arrow_border.out.png');
width: 58px;
height: 29px
}
header #habbo-logo {
position: absolute;
width: 190px;
height: 52px;
background-image: url('http://localhost/app/tpl/skins/aura/images/logo.png');
left: 32px;
top: 27px
}
#login-form-container {
position: relative
}
header form {
position: relative;
left: 239px;
top: 0;
width: 740px;
height: 99px
}
#login-columns {
position: relative
}
header form.captcha {
height: 200px
}
header form.captcha #login-recaptcha {
height: 103px;
margin-top: 8px
}
#login-recaptcha .field-error, #login-recaptcha #captcha-overlay {
display: none
}
#login-column-1 {
position: absolute;
left: 0;
top: 11px;
width: 205px;
height: 70px
}
#login-column-2 {
position: absolute;
left: 214px;
top: 11px;
width: 134px;
height: 70px
}
#login-column-3 {
position: absolute;
left: 358px;
top: 32px;
width: 205px;
height: 55px
}
Set vertical-align: middle; on the inputs and remove the margin-top from the inline styles in the logo <img> tag.
While I'm at this, though...General cleanup of this code is probably a good idea. I would like to caution you to avoid mixing inline styles and CSS. Also, the <br> tag should probably be replaced with padding - that line break and the inline styles are there only for design purposes and design is handled in CSS. Keeping as much design out of the HTML will help you (or someone else) easily make changes to this site later, if needed. The <img> tag's styles also include two margin-left values. I would remove one to avoid confusion. Lastly, I think you will want to remove <div align=; from the <img> tag's styles. As far as I know, this doesn't accomplish anything.
Hope that helps!
Basically, the image below summarizes my question.
Is there any elegant solution to make it work? I've tried to use rotate, skew and perspective, but didn't work for me.
Note: the background needs to be transparent.
My code for you. :)
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
background: #0f0;
height: 370px;
left: 20px;
padding-top: 10px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
color: #fff;
display: block;
height: 60px;
padding-top: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
}
.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
Here's what I changed your css to make it look like your picture and do the correct hover effect:
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 20px;
padding-top: 5px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
color: #fff;
display: block;
height: 65px;
margin: 0 auto;
padding: 0;
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
line-height: 5;
font-size: 12px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: border-bottom-color 500ms;
}
.abduction a:nth-child(5){
width: 94px;
}
.abduction a:nth-child(4){
width: 88px;
}
.abduction a:nth-child(3){
width: 82px;
}
.abduction a:nth-child(2){
width: 76px;
}
.abduction a:nth-child(1){
width: 70px;
}
.abduction a:nth-child(even) { border-bottom-color: #00d900; }
.abduction a:hover { border-bottom-color: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
So basically to create a 65px high trapezoid with borders (colored #0f0) you'd do this:
border-bottom: 65px solid #0f0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
The width of the last element is 100px. So since the left border width + the right border width = 6px and 100px - 6px = 94px, the second to last element will have a width of 94px to match the top of the last element. You subtract the side border sum from the previous elements width to get the current element width.
Also the transition property needs to be changed to border-bottom-color instead of background because border-bottom-color is what sets the color of the trapezoid.
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 15px;
padding-top: 10px;
position: absolute;
top: 50px;
width: 110px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 400px solid #0f0;
}
.abduction a {
color: #fff;
display: block;
height: 60px;
padding-top: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
}
.abduction a:nth-child(even) { background: #00d900; }
.abduction a:hover { background: #008c00; }
<div class="spaceship">
<div class="abduction">
Button 1
Button 2
Button 3
Button 4
Button 5
Button 6
</div>
</div>
I'm pretty sure you need javascript for that.
jQuery(document).ready(function(){
var buttons = [{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'},{name:'button'}];
var b;
for(b in buttons){
var rev = buttons.length - (b*10);
var btn = jQuery(''+ buttons[b].name + ' ' + b +'').css({left:rev/2, width:100 - rev} );
jQuery('.abduction').append(btn);
}
});
* { box-sizing: border-box; }
body { font: normal 16px sans-serif; }
.spaceship {
height: 430px;
position: relative;
width: 140px;
}
.spaceship::before {
background: #006dd9;
border-radius: 100%;
content: '';
height: 70px;
position: absolute;
width: 140px;
z-index: 1;
}
.abduction {
height: 370px;
left: 20px;
padding-top: 10px;
position: absolute;
top: 60px;
width: 100px;
}
.abduction a {
display:block;
position:relative;
color: #fff;
display: block;
height: 60px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: background 500ms;
border-bottom:80px solid #0f0;
border-left:5px solid transparent;
border-right:5px solid transparent;
}
.abduction a:nth-child(even) { border-bottom: 80px solid #00d900; }
.abduction a:hover { border-bottom: 80px solid #008c00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spaceship">
<div class="abduction">
</div>
</div>
I have a fixed header and footer and when I added an element such as a ribbon for a div header part of the ribbon spills into the header but not the footer.
The element in question can be found at:
http://mikesbaum.com/plan9alehouse/index.html
Here is the header/nav CSS:
header {
position: fixed;
top:0px;
left:0px;
width: 100%;
height: auto;
padding: 0px;
border-bottom: 4px solid #291e13;
background:url(../../img/dark_wood_texture.jpg);
background-color:#FFF;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}
nav {
list-style:none;
text-align:center;
font-family: Conv_goudy_bookletter_1911-webfont;
font-weight:bold;
}
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 10px;
}
and the ribbon:
.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
I found the ribbon tutorial at: http://css-tricks.com/snippets/css/ribbon/ but still cannot figure out a solution.
You need to add z-index:1 to your header to avoid the ribbon to flow above of it:
header {
// your css
z-index:1;
}
I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).
Here is the code I am currently using:
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
JS Fiddle demo.