CSS - Top to Logo = 0px - html

I am working for a few hours right now on the CSS changes on one of my customer´s website. My customer wants the header image (logo) to appear at the top of the screen without a space between the top and the logo.
<header id="header">
<div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">
<div class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-top="3px" data-margin-bottom="3px" style="margin-right:0px;margin-top:3px;margin-left:0px;margin-bottom:3px;">
<a href="#">
<img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
</a>
</div>
</div>
</header>
I do not find the correct .css settings to solve this problem and to move the header image to the top. I already tried:
margin-top: -30px;
...but that is not working. It is a Wordpress Site, I am using Avada and the only thing I need is the header image at the top.
Would be cool if someone can help me out.

The problem is that your generated code contains padding-top:30px in:
<div class="avada-row" style="padding-top:30px;padding-bottom:0px; overflow:hidden;">
I understand that you cannot change this, and a simple CSS won't help you because the inline style is more important.
Use this trick to override the inline style using an external CSS:
.avada-row {
padding-top:0px !important;
}

either use this HTML
<header id="header">
<div style="padding-bottom:0px; overflow:hidden;" class="avada-row">
<div style="margin-right:0px;margin-left:0px;margin-bottom:3px;" class="logo" data-margin-right="0px" data-margin-left="0px" data-margin-bottom="3px">
<a href="#">
<img src="http://placehold.it/1000x100" alt="Heider Matriken – Falk Fengler" class="normal_logo">
</a>
</div>
</div>
</header>
or use this css
.avada-row {
padding-top: 0px !important;
}
.avada-row .logo {
margin: 0px !important;
}

tha class ".avada-row" is top padded, so you need to remove that padding:
.avada-row { padding-top: 0px !important; }

Related

Align wordpress site title with logo

My website tite is not aligned with the logo
This is how it looks now:
Wordpess is generating the following html snippet:
<div id="logo" class="clearfix">
<img width="100" height="100" src="http://localhost/test/wp-content/uploads/2016/06/icon.png" class="custom-logo" alt="recette flocon advoine" itemprop="logo">
<h1 class="site-title">test test</h1>
<h2 class="site-description">slogan</h2>
</div>
How can I get something like this :
#logo{display: table;}
.h1{display: table-cell; vertical-align:middle}
This should work, if not, try:
top: 50%; margin-top: - half.the.height.of.the.font.size .
By the way, "http://localhost/test/" this is wrong on so many levels. Use "index.php / index.html" instead.
To your h1 element add the following: style="padding-top:20px;" resulting:
<h1 class="site-title" style="padding-top:20px;>
Add more padding pixels as needed.

html/css floating image right of text

I am attempting to float an image to the right of some text currently wrapped in the P tag inside a parent div. using float: right for the image takes it all the way to the right but under the text.
I would like to see them aligned side by side, please check screenshot here:
https://drive.google.com/file/d/0B3STRGf0b16iNWhMVDBETEpaczQ/view?usp=drivesdk
My css
h1 {
font-family: 'open sans';
font-size: 35px;
font-weight: 200;
padding: 0;
margin: 0;
}
p {
max-width: 550px;
padding: 0;
margin-top: 15px;
font-size: .9em;
line-height: 1.8em;
}
.why-nexishost {
width: 980px;
overflow: hidden;
margin: 70px auto 0 auto;
background-color: #f2f2f2;
}
.quality-badge {
float: right;
}
My html
<head>
<title>NexisHost</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<div class="header-content">
<img src="images/twitter-icon.png" class="twitter-icon" alt="Twitter icon">
<ul>
<li>Support 513.571.7809</li>
<li>Account Manager</li>
</ul>
</div>
<div class="navigation">
<img src="images/logo.png" alt="Site Logo">
<ul>
<li>Products</li>
<li>Domains</li>
<li>Services</li>
<li>Something</li>
<li>Design</li>
<li>Support</li>
<li>Signup</li>
</ul>
</div>
<div class="home-banner"></div>
<div class="why-nexishost">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p><img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
</div>
</div>
</body>
</html>
Try adding this:
p{
display: inline-block;
}
.quality-badge{
display: inline-block;
}
You can also do this by floating left as another person suggested, but inline-blocks will put things in a line.
You can check this site out for more info.
I'm not sure what is considered better-practice, I think inline-blocks are just the newer way of doing things although old versions of some browsers may not support it. This site shows which don't.
You probably want to float your <p> left, not your image right.
p {
float: left;
...
}
.quality-badge {
//float: right;
}
You can do it like this with your current css:
<div class="why-nexishost">
<img src="images/premium_quality-01-256.png" class="quality-badge" alt="Quality Guarantee badge">
<h1>Quality is our #1 priority</h1>
<p>A domain name, your address on the Internet, says a lot about who you are and what you do. New domain endings like .guru and .photography can help you find a meaningful address that stands out on the web. Every domain includes website forwarding, email forwarding (help#your_company), simple management tools and other helpful features.</p>
</div>
You'll probably want to keep float:right applied to your image. This will make your image float to the right and HTML elements that come after it in the same container will wrap around it. However, you'll need to move your img tag up so it comes before the text you want to wrap.
HTML:
<div class="container">
<img src="myImage.png" class="myImage" alt="Alt Text" />
<h1>Heading</h1>
<p>Paragraph text</p>
</div>
CSS:
.myImage {
float:left;
}
See this fiddle using your code for a demonstration.
If you want the container to expand to the size of the floating image (by default if the image is bigger than the container it overflows out) you can add the following CSS to your container class:
.container { overflow: auto; }
As an additional note, your img tags aren't closed (you have <img src="source" > rather than <img src="source" /> which will probably cause rendering errors in at least some browsers.
You can learn more about float and clear in CSS here.

Hyperlink not responding

My landing page has a slideshow with text and links that direct the visitor to it's corresponding page.
Landing page link: http://karenrubkiewicz.com/martin/
The yellow arrow in the second box should be a clickable link, but it doesn't respond.
Here is my coding:
HTML
<div id="maximage">
<div>
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
<div>
<img src="images/00_landing page/backgrounds/background_02.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
ETC...
</div> <!--END MAXIMAGE DIV-->
CSS
#maximage {
/* position:fixed !important;*/
display:block;
}
.in-slide-content {
font-family: 'Oswald', sans-serif;
font-size:16pt;
letter-spacing:1px;
position: absolute;
right:63px;
bottom:240px;
width: 220px;
background: rgba(0,0,0,0.8);
color:#FFF;
text-align:center;
text-decoration:none;
padding-top:23px;
padding-bottom:23px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2{
position: absolute;
right:63px;
bottom:162px;
width: 220px;
background: rgba(0,0,0,0.8);
text-align:center;
padding-top:25px;
padding-bottom:25px;
-webkit-font-smoothing:antialiased;
}
.in-slide-content2 a{
position: relative;
display:block;
}
I am using a maximage plugin, I am not sure whether that could be a possible cause of inference.
One more note, in my HTML, when I remove a certain div, the link begins to work, only then my slideshow falls apart.
EXAMPLE
<div id="maximage">
<div> <----REMOVE THIS DIV
<img src="images/00_landing page/backgrounds/background_01.jpg" alt="" width="1400" height="1050" />
<div class="in-slide-content">
PLACES
</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div> <-----AND REMOVE THIS DIV
ETC...
</div> <!--END MAXIMAGE DIV-->
I'm really stuck on this one.
Thanks in advance!
Place this in CSS:
#nav {
z-index: 2;
}
body .mc-cycle {
z-index: 0;
}
If it wont help, then this:
#nav {
z-index: 2 !important;
}
body .mc-cycle {
z-index: 0 !important;
}
Looking at your codes on your site, (which btw look different from what you posted here), I think things get complicated when your in-slide-content and in-slide-content2 divs are enclosed in your mc-image with its background set to your image file (instead of using an img tag).
This is what your current codes look like:
<div class="mc-image " ... background-image: url(http://karenrubkiewicz.com/martin/images/00_landing%20page/backgrounds/background_01.jpg);" data-href="">
<div class="in-slide-content">PLACES</div>
<a class="in-slide-content2" href="places.html"><img src="images/arrow.png" height="20px"></a>
</div>
Try convert your mc-image to an image tag and extract your in-slide-content and in-slide-content2 out of your maximage.
I think this live demo on jsfiddle is very similar to what you are trying to do.
The reason why manipulating the z-index attribute (of the image, the anchor tag etc.) in your css script probably won't work is because the jquery.cycle.all.js script assigns all your images with some high value z-index on start-up so that they can stack on top of each other.
// line 295 - 303
// set position and zIndex on all the slides
$slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) {
var z;
if (opts.backwards)
z = first ? i <= first ? els.length + (i-first) : first-i : els.length-i;
else
z = first ? i >= first ? els.length - (i-first) : first-i : els.length-i;
$(this).css('z-index', z)
});
As the script cycles through your images, some codes (I haven't figured out where yet) will reset the z-index of that image to z+1, so that current image will be stack on top of the rest. I tried setting the z-index of some of your HTML elements to some ridiculous high number but to no avail. Anyway, I still think the cleanest way to solve this is to look at the fiddle I shared.

HTML/CSS misplaced header and missing images

I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.

How to align an image of any size from the centre, rather than the top/bottom/sides, using css

I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.
Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.
Thanks!
EDIT: Here's the layout http://pastebin.com/SisQHM4y
Hi you can do this pure css as like this
css
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 500px;
height: 400px;
background:green;
}
HTML
<div class="wraptocenter"><img src="//?" alt="images" /></div>
Live demo http://jsfiddle.net/rohitazad/tvrMp/
More information about this http://www.brunildo.org/test/img_center.html
​
Perhaps something like this:
<style>
#blue { margin-left:auto;margin-right:auto; }
</style>
<div id="red">
<div id="blue">
<img src="?" id="myImg" />
</div>
</div>
EDIT
I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to
<style>
.user-picture { margin-top: auto; margin-bottom: auto; }
</style>
<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
<div class="user-picture">
<a href="/users/diver1" title="View user profile." class="active">
<img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1's picture" title="Diver1's picture" />
</a>
</div>
</div>
I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;