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)
Related
I have a container on my landing page and it makes white space. I want it full screen. I try to make the top and right 0px, but the right still edge.
This is what looks like
And this is what I want
The code
<section class="zerra-porto">
<div class="container">
<div class="row">
<div class="col align-self-center">
<h1 class="mb-4">
Hi, My Name is <br />
Sumnit Parfit
</h1>
<p>A Front End Developer</p>
Get to know
</div>
<div class="col">
<img src="/images/foto.png" alt="" class="landing-pic" />
</div>
</div>
</div>
</section>
.zerra-porto .landing-pic {
position: relative;
right: 0px;
top: 0px;
z-index: -1;
}
Can you please check the below code? Hope it will work for you. Based on your question, we have understood that you need your content inside the container but you want your banner image outside the container, for that, we have made modifications in your HTML structure and positioned the Image in right as per your required screenshot.
Please refer to this link: https://jsfiddle.net/yudizsolutions/zgcydft1/
I am trying to create a simple, floating and responsive navigation bar while using Skeleton boilerplate.
It should be nothing more than a logo align to the left of container and a few menu anchor links aligned to the right. Position of it should be fixed while scrolling the site's content, while staying in Skeleton's responsive grid. Exactly like here.
Natural way of doing this would be something like this for me.
<header>
<div class="container">
<div class="row" style="position: absolute; margin-top: 5rem">
<div class="two columns">
<!--LOGO-->
</div>
<div class="ten columns" style="text-align: right;">
<!--MENU-->
</div>
</div>
</div>
</header>
The problem is that by setting position: absolute, div loses its ability to divide into columns. Also, the links aren't clickable. Can anyone suggest a working solution? Having a hamburger menu icon on mobile would be an ideal extension, so if anyone knows the simplest way to do this, I would love to hear it out.
Thanks in advance!
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
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.
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