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 6 years ago.
Improve this question
I wanted to place a form over a mobile phone image. I tried everything I could think of (I'm new to html and Css).
Here is a link to my work PicText .
This is the
Image
By the way, it is on the middle phone(the Iphone) I am trying to place the form on.
You can add a class to the div around the form, then add a background-image to that div.... then adjust the size and position of the form to fit the image:
The only HTML adjustment was the addition of the class to the div below:
<div class="formhold">
<form method="post" action="action_page.php">
Essential CSS
.formhold {
width: 600px; /* width of the image */
height: 520px; /* height of the image */
background: url(http://i.imgur.com/YUuTWwr.png?1) no-repeat center top;
}
form {
display: block;
width: 180px; /* width to use in the middle phone screen */
margin: 0 auto; /* centers form over image */
padding-top: 120px; /* moves form down from top of image */
}
jsFiddle Demo
Note that I adjusted your the CSS padding and margins on your text and password inputs as well so the form would fit vertically. More refinement is most likely desired, but this should at least get you started.
(Personal preference is jsFiddle, the others just require signup. With jsFiddle I can choose to sign in or not.. the code isn't lost.)
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
So I have a logo on my site and the problem is when you hover under it or around it you can still click it. I want it only to be clickable once on it.
www.theanimedatabase.com
The logo is found in the top right!
If you right click on your logo and click "Inspect Element", you will be able to see the area of your image is actually 200px x 200px.
Try crop away your logo extra height at the bottom (and extra height on the top I am guessing you have extra height at the top as well because you set the header img margin-top as -68px to push your logo upwards) so that the total height of your logo is 70px. Which will match with your header.
Next, change this in your css:
header img {
margin-top: -68px;
float: left;
width: 200px;
height: 200px;
float: left auto;
}
to:
header img {
float: left;
width: 200px;
height: 70px;
float: left auto;
}
best solutions would be to crop image appropriately, but you can solve it with adding this css rule to your image:
overflow: hidden
notice this will hide part of the image, so if you have something under Anime Database it would be hidden.
Look at this image:
Just as stated by everybody, cropping your image is the best solution.
header {
overflow: hidden;
}
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 have a prob in my website. Whenever I click on a text box, an unwanted blank space is generated at the end of the page. Please help. link : http://connectorz.tk/
PS: I use the transition css effect. Maybe it has something to do with this? Thnx
Change your pageBottom to include position, width & bottom attributes. The problem I believe had nothing to do with your text boxes or content and was that your footer was not position to fix to the bottom and when the height of the viewport increased over 1200px that it was simply displaying the background colour set for the body because it ran out of stacked content.
/* PAGE BOTTOM */
#pageBottom{
background: #666;
padding: 1.500em;
font-size: 0.750em;
color: #CCC;
text-align: center;
overflow: hidden;
//ADDED
position: fixed;
width: 100%;
bottom: 0;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This is what I have so far:
http://clients.emagid.com/practice_work/darwin/index.html
What I want the final result is this webpage:
http://php1.emagid.net/~laurenbe/
I'm just doing a practice work on an already finished website. I want to make my responsive Menu button to be in the center (0 auto) when I resize my browser and not fixed to the top right corner as most bootstrap menu buttons do.
Additionally, how do I make it so that when I click the menu button, the menu lists would push down all the content below so that it doesn't stay underneath it? (Try my webpage and see what I mean, instead of pushing down the body content along with the lists, the body content overlaps the lists).
And last but not least, how do I make my images rescale smaller as I resize the browser? (Check my webpage and the finished one).
At the moment, the button is floating to the right because at line 4300 in bootstrap.min.css there is the rule
.navbar-toggle {
position: relative;
float: right; <==== problem
padding: 9px 10px;
....
}
One solution would be to add the following inside the max-width:767px media query
#media (max-width:767px){
.navbar-toggle {
float: none;
}
}
The problem of the expanded mobile menu not pushing the main page content is because at line 121 on style.css you have fixed the height of the header:
header {
height: 198px; <== problem
text-align: center;
margin: 0 auto;
max-width: 710px;
}
You could either remove this height rule, or maybe reset it for in the max-width:767px #mendia block.
To force your images to scale, you could size them based on %. So for example, if you made width:80%; then they would be 80% of their parent element. In practice, this isn't always easy though because you'll need to have multiple #media rules so that the image sizes stays appropriate and doesn't go weird on you when the bootstrap grid collapses at narrow viewport.
Hope this helps!
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Have a look at mockup image
The site have a fixed content width. I need elements inside a red area to be stretched, depending on the screen width. So in case it's like on the image, green and blue stripes should go till the end of the screen. If screen is wider, site content area( that is inside the vertical red lines ) will be the same. But blue and green lines will stretch more, to reach the sites left and right side.
I was going to implement it using absolute positioning. But I need to know the width of the block. And as it can be different I do not know how to do it, except for using javascript. but I'd like to use html and css only.
There are many ways to accomplish this, but the coolest of all is using the before & after pseudo elements to fill in the edges.
.container {
width: 1200px; /* whatever... */
margin: 0 auto;
}
.header {
position: relative;
background: #000; /* whatever... */
}
.header:before, .header:after {
content: '';
position: absolute;
background: #000; /* whatever... */
top:0 ; bottom: 0; width: 999em;
}
.header:before {
right: 100%;
}
.header:after {
left: 100%;
}
Here's the fiddle: http://jsfiddle.net/bnket/
Check out this cool article by Chris Coyer: Full Browser Width Bars.
using css assume your center content is 800px in width..
You would add 800 plus the width of the stripes and asign fixed left & right
thats about it.
This is all i can provide due to the lack of a jsfiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have two spans with inline-block display, in responsive mode (for resolution lower than 768X1024) I need to position one on top of the other so I set display to block but the wrong one is on top how can i make the second span to go on top?
thanks
See if this variation helps:
http://jsfiddle.net/panchroma/RLSkL/
The important bits are that I flipped the order of the two divs in the HTML then used CSS to manage the layout
CSS
/* pull the first div to the right and the second to the left for desktop views */
#loginContent{
width:330px;
float:right;
}
#attensions{
width:330px;
float:left;
}
.LgnBtn{
clear:both;
}
/* for tablets and smartphones, remove the floats above */
#media (max-width: 790px){
#loginContent{
width:100%;
float:inherit;
}
#attensions{
width:100%
float:inherit;
}
}
Hope this helps!
Use float:left on the <div> you'd like to be on top.
the only way is move up the #loginContent in your html code, in other hand you can use absolute position to set their position as you like. for exam:
#attensions{
position: absolute;
top: 180px;
}
#loginContent{
position: absolute;
top: 0;
}