How can I move my image vertically up? - html

I have a logo on my site. Just about the first thing there is. But it's pretty far down. I wanted to know how I can move it down. The website currently looks like this: http://i.gyazo.com/29b9116903051e82640f63b7a1a14464.png
As you can see the logo is pretty far down and not near the top. The current code I have for the header (which has logo in it) is this:
<div id="header">
<img src="images/Logo.png" alt="" height="150" style="left: 0px; top: 0px" width="150" />
<h1>Hey there! I'm Mario!</h1>
<p> <h2> AKA IridiumKills </h2> </p>
<p>I'm a Coder, Gamer, DJ, Music Producer, and Designer!</a>
<br />
Now that you know a bit about me,why don't you scroll down to see some more?</p>
<p> <span class="logo fa fa-arrow-down"> </span> </p>
</div>
This seemed to fix my problem:
<!-- Header -->
<div id="header">
<img src="images/Logo.png" alt="" height="225" style="position:absolute;left:565px; top:40px;" width="225" />
<h1>Hey there! I'm Mario!</h1>
<p> <h2> AKA IridiumKills </h2> </p>
<p>I'm a Coder, Gamer, DJ, Music Producer, and Designer!</a>
<br />
Now that you know a bit about me,why don't you scroll down to see some more?</p>
<p> <span class="logo fa fa-arrow-down"> </span> </p>
</div>

Strictly speaking, this is more of a css problem, not just an HTML problem.
Your inline css (the style= stuff) is not working because you must add this:
style="position:absolute;left:0px; top:0px;"
You might want to experiment with:
position:absolute;
vs
position:relative;
Important: As noted by Chris Coyer in the below referenced article, absolute positioning only works if your element is inside a div (any element) where the positioning has been set to position:relative; (or absolute or fixed -- it only cannot be the default position setting, which is position:static) So, add this:
<div id="header" style="position:relative;">
See the below reference for more info.
Sources:
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Use css to make
position:relative,
top: -10px;
Play with the top value till your needs are met
Inline it like this
style="position:relative; top:-10px;"

Add this property to the css of your image:
style: "position:relative;"
And modify the "top" property of your image to the location you need:
top:-10px; //for example

Related

Different monitor/resolution, different layout

I have this logo on the website, which is positioned in the center between the navbar menus.
Here's a picture:
Logo Position
The problem is that the logo moves when I switch to a different monitor or resolution. Am I doing something wrong? How do I make it fixed between different resolutions.
Here's the html code:
<main class="site-main">
<center><img src="img/corelogo.png" alt="Post" height="180" width="180" style="position: absolute; top: -1px; left: 570px; margin: 0 auto;"></center>
<section class="hero_area">
<div class="hero_content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>TeamSpan Global Solutions</h1>
<h2>Your partner in building satellite workforce teams.</h2>
</div>
</div>
</div>
</div>
</section>
First of all center tag has been deprecated. Secondly, you're positioning it 570px left of the right edge of the first positioned (not static) ancestor element. I can't see what styles are applied to your classes so I can't see what that would be. But it would definitely move around based on resolution.
Have you already heard about Responsive Design?
Look, you have to post your css too! Can you write it on jsfiddle?
Some examples:
https:// codepen.io/bootstrapped/pen/dGPZvR (remove space)
https://www.bootply.com/mQh8DyRfWY
https:// codepen.io/davidcochran/pen/Fkwys (remove space)

How to prevent named anchor from introducing a line break

In the following code snippet:
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>
the named anchor (<a name="top"></a>) introduces a line break before the topbar div. Is there a way to prevent this? For a variety of reasons it is essential that the named anchor be located above the div containing the banner image.
I have tried using CSS to set the height of the anchor to 0px and display to none, but this renders he anchor non-functional (i.e. linking to #top from elsewhere in the page no longer works).
Is there a workaround for this?
Actually, using an anchor to link to a certain part on the page is obsolete. You can use the global id attribute instead. That also fixes your problem as you don't have to add extra dom elements:
<div class="topbar" id="top">...</div>
Somewhere else:
Go to top
Easy does it!
Make the div <div class="topbar"> inline,
.topbar{
display:inline-block;
}
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>

Overlay one image with another without extending parent height

I had a front image on the page, inserted like this:
<h1>
<a href...>
<img .../>
</a>
</h1>
Now I want to add another image link, to overlay first one (it is smaller image so it would be Ok):
<h1>
<a href...>
<img .../>
</a>
<a href... style="position:relative;top:-150px;">
<img ... style="height:150px"/>
</a>
</h1>
It does what I want, but the height of the parent H1 is still enlarged by these 150px leaving silly empty space.
I made height of H1 predefined constant to solve this, however I'm interested in more proper / elegant solution.
First I need to mention if you are using inline styles remove it and add an external style sheet.
Below I am giving the answer with inline styles just because you have used them too in your question .Try the following:
<h1 style="position:relative;">
<a href...>
<img .../>
</a>
<a href... style="position:absolute;top:0;">
<img ... style="height:150px"/>
</a>
</h1>

Strange div positioning

I received HTML & CSS layout that should be working fine. However, I'm experiencing some strange problems for which I'm not sure why do they occur.
At the bottom of the following this website there is slider that should display couple of photos with text and by clicking on arrows it should slide them. The problem is I can't position neither arrows, nor wrapper containing images.
As you can see arrows(CSS classes: .strelica-lijevo and .strelica-desno are currently behind the image wrapper (CSS class: .slike-wrapper) when they should be left (.strelica-lijevo) or right (.strelica-desno).
Code can be seen directly on the website. Any help would be appreciated.
There are some issues with the HTML and CSS - you should either try to contact whoever delivered this slider to get support for implementing it or you could try by yourself as follows (just checked the markup and CSS and maybe this helps):
Your current HTML:
<div class="w-clearfix main-content karta">
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
could be changed into:
<div class="w-clearfix main-content karta">
<div class="strelica-lijevo"> <img src='/Content/strelica-lijevo.svg' /> </div>
<div class="slike-wrapper">
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/zagreb-is-the-capital-and-the-largest-city-of-croatia/5">
<img class="featured-male-slike" src='/Content/610ddd4a-b9a7-45f8-ac56-66eec5968329.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Zagreb is the capital and the largest city of Croatia</div>
</div>
</a>
<a class="w-inline-block featured-male-slike karta" href="/zagreb/category/to-see/2/museum-of-broken-relationships/8">
<img class="featured-male-slike" src='/Content/3a6ee262-676f-4599-9f97-6b9c48136449.jpg' />
<div class="potpis-mala-slika-featured">
<div class="potpis-ispod-slike">Museum of Broken Relationships</div>
</div>
</a>
</div>
<div class="strelica-desno"> <img src='/Content/strelica-desno.svg' /> </div>
</div>
This would just change the order of the elements - 1st the left arrow, than the gallery, than the right arrow - so they're displayed next to each other. Guess this could be changed in another way, but this is the easiest approach withouth having to change too much in the CSS.
In the CSS
.featured-male-slike.karta
{
clear: right;
display: inline;
float: left;
margin-top: 30px;
overflow: hidden;
/* position: absolute; */ /* <--comment position abolute out */
}
comment "position: absolute;" out - you could also remove it, but it's better to keep it just so you can check with whomever created this slider for you, maybe there's some other way to fix the slider as you mentioned it should be working as it is. Because of this position:absolute the gallery would still be displayed above the left arrow, removing it has the purpose to keep the CSS-property float:left for all three elements - left arrow, gallery, right arrow, so they will be displayed next to each other.
Next is up to you - the images are displayed not positioned correctly because they have a different height, and the css for the img is height: auto, meaning that the height for each img depends on the actual calculated height (as both images are scaled down from bigger original images). You could either try to display images with the same size, or you can add css to set a fixed height for both images, e.g.
.slike-wrapper img
{
height:140px;
}
as the left image has a calculated height of 158px and the right image has 140px. As I only tested this directly in the browser's web developer tools, I can't guarantee that this approach would work for you, but you can give it a try.

Positioning element to exact div

I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;