I have some problem trying to center vertically a input inside a div. I tried so many hours with different positions, margins, align, etc...
Some details about the code :
Website : http://goo.gl/bDjv8C
Section : contact (the last one, on the bottom)
I try to center the input "your email" but when you zoom in/out on the page (or use different devices aka smartphones) the position isn't exactly the same >_<
First I had just an input and a "OK" button on the right, but both where never vertically centred (some times the "OK" was up, sometimes down...). So I tried to make a div with a black background and them inside in order to hide the gap between the two inputs, but it went worse :s
Someone have an idea ?
PS: thats not a horizontal-align issue, but a vertical one.
the answer is line-height in css check this fiddle http://jsfiddle.net/elviz/qvzk1eoj/1/
.sample{
height: 50px;
background-color: red;
line-height: 50px;
}
Related
Q1. When resizing, the text inside the submit button gets cut since the container seems to be smaller. How can I still show the text and resize the container accordingly?
Q2. How can I get the name input field the same size as the other input fields?
As you can see the width is not exactly the same.
I tried everything, am clueless at this stage.
See website: http://demo.chilipress.com/epic3/
Add min-width to css of .sendButton
e.g.
.sendButton {
min-width: 100px;
...
}
I have a validation control elements in ASP.NET which they needs to be inside form tag in order to work, that's why I'm doing silly things with positioning div which includes validation controls but I can't get it to work. Please check my two images:
Here is my current layout. Gray div is actually div whre validation controls are. Because as you see this site has plenty of space so I want to position gray div on the left side, just like you will see in second image.
I've already positioned like shows upper image (with properties: top, left, position absolute), but if I resize browser window, gray div will overlay centered div ( will stay on the same spot ). Check following image to see what I mean:
This is a very easy answer! Give your body a min-width.
body {
min-width: 1000px;
}
You will have to find out what the brown div and gray div equal plus a little room to give space between them.
If you want it to happen only on a certain page then use this java script if statement.
if(document.location.href === 'pageURL.com') {
$('body').css('min-width', '1500px');
}
to find page URL go into a web console and type in document.location.href and it will give you the exact url.
I have a header with a small horizontal bar right underneath it that serves as the main navigation for my site. When the window is full sized it works perfectly. But if the window is resized even a little bit smaller, the right-most menu moves down to the next line, as you would expect any floated element to behave.
Question: How can I make it so the navigation bar always stays on one line, resizing appropriately to the window size? I've tried changing the lengths to percentages, though this often causes problems since there are many components to the CSS.
Here is all the relevant code: http://jsfiddle.net/HSVdg/1/
Here is what I think is the main culprit, though I could be wrong:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my question.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Any help would be immensely appreciated!
You can do this by using CSS display modes.
Just set the ul to have display:table
And the child list items to display: table-cell
The table cells will automatically adjust thir width to fill the parent table at any width.
You'll need to remove the explicit width from
<li>
and
<a>
to allow them to be automatic.
I've updated the fiddle for you: http://jsfiddle.net/HSVdg/13/
Hope this helps.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.
I'm pretty sure I'm having a CSS issue, but I just can't figure out how to correct it. Currently, I have these accordions working perfectly, they collapse, expand, expand again when told to etc.
The problem I'm having is aligning the content within these accordion divs. Ideally, when everything is default (collapsed) all I want seen is the thumbnail image and the Headline. Then if the user wishes, they click on the headline and it expands and if they want to make a comment or view comments, they can click once again to expand that.
Here's the thing, I have to make the height 62px so everything will fit in and just not float all over the place. This creates a problem with the "View Comments" to "Text Here" area, as you can tell it has outrageous space between the two.
The other issue is, as I currently have it I'm forcefully indenting the article text so that it doesn't TEXT WRAP underneath the thumbnail image. Basically, I want it split into 2 columns so nothing ever goes beneath the image, but working with this accordion and divs inside the divs it's proving to be difficult for me.
You can define this in your CSS to set the height:
.acc2 { height: auto !important; }
Since your child accordions have an acc2 class on their header, this will override, restoring a default height to match the text.