I have created a website however when I shrink the browser the website stays in position, apart from the form.
If anyone know's how I can stop the form from moving, I will be very grateful.
I have tried position: relative and white-space: no-wrap; but still no luck.
Thanks in advanced
Unique
My Code:
http://jsfiddle.net/r5cu1157/
#form-holder {
float: left;
width: 400px;
height: 400px;
padding-left: 100px;
padding-top: 30px;
display: block;
*display: block;
white-space: nowrap;}
If you want the form to be center aligned then do a
Margin: 0 auto;
remove the float left and i would suggest to stay away from specifying a height of elements
http://jsfiddle.net/r5cu1157/1/
This is the CSS that I have for my container that holds my table and forms, could try using it for your form, I believe it is a mix of position and margin:
.container
{
position: relative;
top: 250px;
background-color: #877CB0;
margin:0 auto;
text-align: center;
}
Related
I'm having real trouble understanding something in CSS which to my mind ought to be simple. I want to change the contents of a div of size 50x50 pixels from an image to text content using jquery. The contents swap fine, but the position of the div gets messed up and I just don't see why.
EDIT: By messed up I mean when I inspect the element, a div of the correct size is highlighted, but the text sits outside of the highlighted box and the lower elements are displaced.
$('.cross').html('?');
#island{
margin: 20px auto;
border-radius:10px;
height: 500px;
width: 500px;
background: url('../images/island-500x500.png')
}
#crosses{
line-height: 0;
position: relative;
top: 50px;
left: 50px;
}
.crosses-row{
}
.cross{
display: inline-block;
width: 50px;
height: 50px;
}
I've made a fiddle here.
Here is the working fiddle
https://jsfiddle.net/6zkLvLeg/1/
Add the following code to ur .cross
.cross {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
vertical-align: top;
text-align: center;
}
Add vertical-align: top; to css class cross and remove line-height: 0px; from #crosses
I'm creating a menu bar on my website. My issue is that there is a small margin at the side of one of my menu items. (I have highlighted this by adding background-color: black; to the container.) I am using safari.
The CSS:
.testMenuOption{
width: calc(100% /3);
height: 100%;
float: left;
margin:auto;
background-color: white;
display: table;
}
Can somebody tell me what my issue is? I have tried removing the text and it is not the issue.
Since you calculate the width by using 100/3, there will be rounding errors, where as a result the widths wont add up 100% again. What you can do to fix it is to set the width of two of the .menuOptionsWraps to 33% and one to 34%.
For example by doing so:
.menuOptionSelectedWrap {
float: left;
width: 33%;
height: 100%;
margin: auto;
margin-right: -4px;
background-color: #d6eef2;
display: table;
}
.menuOptionSelectedWrap:last-of-type {
width: 34%;
}
I'm not sure what you say,that black line change when window resize.check your css, width: calc(100% /3);
change the value 3,you will get idea.
I struggled for some time with this issue. My landscape images looked great but I couldn't get my portrait orientated images to align properly. This is the code I had and the auto margin and padding seemed to have no effect at all and the image would always align to the left of the slider (parent element).
.slider img#portrait {
min-height: 100%;
width: auto;
margin: 0 auto;
padding: 0 auto;
}
I managed to find little snippets of what might solve the problem from different sources so I wanted to include all of the ones I used here in one place.
This is now what I have which works well:
.slider img#portrait {
height: auto;
width: 50%;
display: block;
float: none;
position: relative;
margin: 0 auto;
padding: 0 auto;
}
Images are by default displayed as inline-block elements. So change this to display: block;
If there is a float: left; then the rulemargin: auto; will have no effect either, so set float: none;
The margin auto will have no effect either unless the image has a set width so width: 50%;
And don't forget to set position: relative;
If you are not modifying the display property of images then you can use: .slider {text-align: center;}. (Only works if applied to parent element.)
I would like to have a image on the left with a heading on the right. I want both of them to scale in size and spacing as the page is shrunk. I have used this code: width: 10%; height: auto; margin: 2% 0px; to have the image on the top left of my page and scale in both spacing and size to the page when the browser is shrunk (I have also included media queries which wouldn't think would make a difference). I have tried using positioning: absolute which doesn't work. I am a novice to using HTML5 and CSS3. This is my first project and second post on Stack Overflow.
I think this is what you are trying to do
HTML
<div class="wrapper"><img src="yourimage.jpg"/><h1>my Heading Goes here</h1></div>
CSS
div.wrapper {
width: 100%;
height: auto;
max-width: 600px;
border: thin solid #333;
}
div.wrapper:after {
content: '';
display: block;
clear: both;
}
div.wrapper img {
display: block;
float: left; width: 40%;
height: auto;
margin-right: 5%;
}
div.h1 {
display: inline-block;
line-height: 20px;
margin: 0px;
padding: 0px;
}
You can check it here
jsfidlle
Could you make a http://jsfiddle.net/?
It's kinda hard to understand what you're after based on our description alone.
I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.
This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.
The affected page can be found here.
I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper
.wrapper {
width: 800px;
margin: 0 auto;
position: relative;
}
and position:absolute to the searchbox will prevent any jumping.
header#top #searchBox {
position:absolute;
top: 0;
right: 0;
display: block;
width: 240px;
height: 45px;
// line-height, any other styles
}
Try the following
header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;
text-align: right;}
The solution is quite simple,
just ad float: left; to the menu element ( header#top nav ul)
header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}
than you will only need to add height to the wrapper
.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}