Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
So uhm I am VERY new here at StackOverflow and html/css in general.
So my problem is this: When visiting the website, the button called "Zeig mir mehr!" isn't scaled properly with the size of the browser. To get you an idea of what I mean here are some screenshots: This is how it looks like with the first pixel ratio (and how it should look like from the positioning)
now to the broken part: different pixel ratio, button overlaps with text/animation
Here is the html code:
<div class="container">
<span class="text1">Kevnkkm /Startseite </span>
<span class="text2">Willkommen!</span>
<h1>THIS PORTFOLIO WEBSITE WHICH IS USED FOR PERSONAL USAGE ONLY IS STILL HEAVILY UNDER CONSTRUCTION!</h1>
</div>
<section class="banner">
<div class="button" style="top: 500px">
Zeig mir mehr!
</div>
</section>
and this is the stylesheet:
.button{
top: 58%;
left: 50%;
position: absolute;
width: 100%;
Thanks in advance! (Also sorry for the facepalms I might cause xd)
The reason this happens is because you are using a set pixel amount for the button. Ideally, a button like that would be after the text in HTML so it would move with the text, instead of using position: absolute.
You should move the button element into the container element after the red h1. You can then replace the CSS for .button for a margin-top: 32px
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am developing a website where I have a top menu and a background image with some text on the home page. This covers the whole screen. BUT at the bottom of the screen there have to be 3 blocks who show up at the bottom of any screen or device. I am able to to this for Chrome but for Firefox for example the blocks are way far down at IE the same... What I want:
I am currently doing applying following code on the div containing the 3 blocks:
position: relative;
top: -150px;
But as mentioned above in another browser this div shows up to low so the user won't see it until he scrolls...
Any solutions here?
Simple change:
position: fixed;
bottom: 0;
Better idea to wrap it inside another <div class="bottom-stuff"> and give the rules to .bottom-stuff.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I designed a page and put a hyperlinked image in the header.
In the picture above, I want the entire image 'Vivo city' to be clickable and to go to a certain hyperlink. But actually only a small part of it is clickable.
I am not sure why the entire image is not clickable.
<a href="index" >
<img src="../../assets/img/logo_white.png" width="110px" height="51px" /></a>
You can check my website here - http://107.167.189.78/codeigniter/index.php/web/
The image link is inside a Bootstrap navbar. Please help me find the issue. Thanks!
It's because its sister element .navbar-collapse is positioned partially above it:
Edited: To be fair, this is the answer to the question "what is wrong?". The follow-up question "...and how do I fix it?" is answered by Serlite in this answer
(Note: I know the initial question of "what is wrong" has been answered - but felt it would be of value to explain a bit and show a solution too.)
As noted by danielaKay, your navigation menu next to the logo is causing the overlapping issue. Currently you're using relative positioning to move the menu to the right:
{
position: relative;
top: 0px;
left: 55px;
}
In combination with your float on the logo, this is causing the menu to partially cover the logo and make it unclickable. Consider floating the menu in the same direction the logo is already floated, and just add a margin to the left instead (replacing your relative positioning):
{
margin-left: 55px;
float: left;
}
Hope this helps! Let me know if you have any questions.
Unfortunately, it's difficult to demonstrate this fix without recreating your entire site, since you haven't provided a minimal, complete, and verifiable example in your original question. Please be sure to do that in the future, as it would be a great benefit to readers of this question.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am designing a website, I am using a text link(href) as logo, but for some reason it is not clickable. I inspected it with chrome and didn't find anything'suspicious. I even tried changing the html code, nothing works. Can someone shed light on this? Thank you.
The link is the logo in the top left corner, WhatAboutHTML
Here is the link: http://whatabouthtml.com
below is the code:
<div class="logo">
<h1 style="font-size: 24px;line-height: normal; margin-bottom: 0px;">
What About HTML
</h1>
</div>
Just add the following to your code:
#nav {
position: relative;
z-index: 9999;
}
Or put you nav in the right place. Which is inside the wrapper.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I've cut a big image into pieces that are more manageable and put them together so the big image is shown again. I've done this since I wanted each of the individual pieces to have a different hyper-link. Now I'm seeing that when I resize the images the display is broken into pieces. I've used a in order to put them all together but unfortunately this does not solves the problem. How can I resize the images dynamically without breaking the whole thing into pieces.
Ps: Is there any option to make the pieces act as one large image using div
You can just use the CSS mapping on an image, instead of cutting the image to pieces ?
http://www.w3schools.com/tags/tag_map.asp
http://www.neopets.com/~Kacizilla
Update:
For Responsive image maps there are a couple of options - JS / SVG and it still is possible with pure CSS:
JQuery Plugin - http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
JavaScript: http://www.andensolutions.com/blog/responsiveImagePaths
SVG: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
Pure CSS: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Update 2:
Pure CSS method:
Its not really a map, but it follows nearly the same logic:
You have an image within a Relative positioned container:
<div class="imageMap">
<img src="yourimage.png" style="position: relative;">
</div>
Your links are actually Absolutely positioned tags, that have: top,left (or any other combination) + width, and height. Just make sure you use percentages, so it can stay responsive.
.yourLink {
position: absolute;
left: 11%;
top: 5%;
width: 25%;
height: 34%;
}
and there is also a JS based image map editor: http://www.maschek.hu/imagemap/index
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I apologise in advance if this is a really obvious and noobish question, but how do i segment a web page into multiple portions, with each portion of the webpage filling the screen in it's entirety?
A good example of what i wish to do would be similar to treehouse's homepage when i segment the webpage into multiple portions e.g "home","about us", etc.. I've tried right clicking on the webpage and having a look through the css but did not see height and/or width applied to anything on the page.
How exactly does treehouse, and others segment their webpages?Do they simply make use of a background image or is there some other method of doing so?
When you give the html, body elements a the css property's:
html, body {
height: 100%;
width: 100%;
}
And in your html you makke a couple of div's like this:
<div class="fitScreen">
content 1
</div>
<div class="fitScreen" style="background-color: red">
content 2
</div>
<div class="fitScreen" style="background-color: blue">
content 3
</div>
<div class="fitScreen" style="background-color: yellow">
content 4
</div>
And you give them a css property of height: 100%; They fill the whole screen.
Demo here
EDIT:
Or if you just want 1 element that fills the screen, and all that is beneath that element has a height of auto, just just give make one div with the class of fitScreen.
And beneath that another element with your own content.