Background: Ive done a few small websites using W3CSS, & get my knowledge from this website: https://www.w3schools.com/w3css/w3css_input.asp
Right now, I am starting on a brand new website & having a bit of difficulty centering an input field. (the form doesnt work as yet, i'm just trying to get it to look right).
http://clubs.kwister.com/login
Basically, you can see TWO forms asking for an email address. The first one, is CENTERED, with the input field at 50% width. However the actual input field where a person enters their email address is flushed to the left.
The second form, I have taken out the width:50% but now i see an input field taking the whole width of the screen.
Is there something i am missing, to make it look somewhat presentable & have the actual input field centered, but only 40-50% of the width ?
I see from the W3 website that theres no 'width' examples and all the input fields take up 100% of the available width.
i do want white-space on both sides (I may or may not add anything later on to fill the whitespace)
PS I could do the w3-third class (responsive section), and divide the screen into thirds, however i want the form to take up more than a third of the width of the screen.
Ive found a working solution - using INLINE BLOCK.
width: 50%; text-align: center; display: inline-block;
Number 1 of my example is working, i'll edit out the others out.
Well, There's an easy way to center an input field. There's a way you could center it by setting its position: relative; and left: 25%;, or you could set text-align: center; on the parent form. Depends on what you're after. Personally, I'd go with the relative position and left.
Hope that helps
ps. I wouldn't try to use display: inline-block; use display: block; float: left;
If You are still using w3css stylings- inside the input feild add class w3-center
This will center the input feild content.
Just add this class on div and should be centered
<div class="w3-display-container w3-col s4 w3-display-middle">
your contents here.....
</div>
Related
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...
I'm learning HTML/CSS and I encountered a problem. I'm currently working on goodwill.heyscout.com as a side project.
From learnlayout.org, I learned that the best way to structure a layout with a div is to give the inner a position:absolute, and the outer a position:relative. This works.
However, this throws the alignment off as soon as I add the position:absolute (I want the profile cards side-by-side). Without the position absolute, everything gets shifted if I want to alter the layout of the profile card. As you can see on the bottom two profile cards, they align as those aren't altered.
Can anybody point me in the right direction?
I also know that my code is pretty messy and that's what I really need to get better at... any other suggestions on how I can improve my code would also be useful.
You can throw a float: left onto your outer class and that should get them sitting side by side again. You may want to read up on using floats at some point as they can be very powerful (if a little hard to get your head around at first)
.outer {
width: 49%;
display: inline-block;
float: left;
}
BTW, I notice you using id="outer" multiple times. You should change this to class="outer" as an ID should be unique, whereas a class can be used multiple times. You'll see in the above CSS that I've used .outer as I'm targeting by a class name (rather than #outer which targets by ID)
Interesting problem you have found. I can't tell you exactly why it is behaving this way but it appears to be related to having text directly in the #box div or not. If you remove the "test" from the second one it aligns as you would expect. Likewise, if you put the exact same content in the second div as the first, they align.
For improvements I would start by never re-using an id (like you are doing with #outer and #box for example, these should be classes). The id attribute needs to be unique, no two DOM-elements should have the same id.
I would also suggest using a ul for #businesscards sice it represents a list of cards. This would make #outer an li. You did this in #navlist so you know what I mean.
Give just vertical-align: top; to your #outer div. The problem will be solved.
As this happens only to child elements, give something like this to solve the issue:
div > * { /* or just '*' */
vertical-align: top; /* or middle */
}
I'm trying to make a button span the width of a column.
e.g. here: http://davidnhutch.com. Notice how the light grey buttons are only as large as the text they contain? I'd like each button to span the width of that column, but can't for the life of me figure out how to do it. I've done quite a bit of looking around but am still kinda new to this.
Any ideas?
You will have to make them block elements to be able to set a width:
.button {
display: block;
width: 100%;
}
Generally, these buttons are so-called "inline element". The browser renderer has very complex algorithms of layouting these elements. It's like Typesetting but with objects on your screen instead.
CSS and HTML together influence how the algorithm works: determining the width and height, color, etc. of objects. Also their position and how text flows, or how long buttons are.
There is a limitation, however. You cannot use anything that's like a variable width for inline elements.
Adding width: 100%; display: block as others suggested makes some buttons perfect: but only when they start at the left or right of the containing box. If it's after a sentence, then it (should) display as:
<---width of container--->
Text
<----------button-------->
However, the button is not after "Text" anymore, but is put below it. This is because it's now a so-called "block element". It is like a full paragraph, instead of elements in a text line.
If this is what you want; fine and problem solved. If this is not what you want, and instead want:
<---width of container--->
Text <-------button------>
This is not possible. CCS4 would be cool if it adds inline-width: 100% or inline-height, and solve a lot of problems. However CSS4 does not exists yet.
Adding width:100% to .button seems to work for the center and right buttons at the bottom of the page.
How can I do to have an image as the background for all links? I want to have a nice box representing buttons, but I cannot figure this out.
I have tried:
a {
font-size: 40px;
background: url('images/shooting-stars/shooting-star-link.png') no-repeat left top;
}
But this is not working, image is not displaying.
"I want to have a nice box representing buttons, but I cannot figure this out." - I don't understand this part.
Anyway, your css looks fine from here, are you sure the image exists? This is a working example with the exact same code, just an image that I'm sure exists:
http://jsfiddle.net/3k9nm/
If you want to always show the image, even if the text is shorter, you should set a minimum width for the links. This does mean they'll have to be inline-blocks, you can't set width on a regular link (which is an inline element).
a {
display: inline-block;
min-width: 25px;
}
(25px was randomly chosen, fill in the width of your background image..)
Two things to try, is there any text in the actual <a> links? And if you use Firebug, you can check you've definitely got the right file path to the image...
HTML
<div id="example-link">
Link to journal article
</div>
CSS
#example-link a {
background: url('images/shooting-stars/shooting-star-link.png');
}
I have a select list, where some clients have entered insanely long options for them, which breaks the design. I'm wondering if there is a way to set a fixed width on the select widget, but still have the drop down menu it produces still be wide enough to display all of the option.
Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+
select {
width: 100%;
max-width: 150px;
}
Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).
See the working example here.
You just need to apply width to your select box either inline or CSS. It will be as wide as you have specified but when clicked, it will show all options with whatever width.
I don't know if you can do it with css (browser independent), but here are 2 other solutions:
1. Instead of displaying "veeeeery looooooooooong teeeeeeeeext" you can display something like "veeeeery loooo...";
2. Build your select using divs and lists so when it is closed to have a specific width and when you press something like an arrow to display full width. (I am not sure you understand what I'm trying to say with this one....).
If the list you have (the entries in <select>) are user entered, and the user can enter, say 500 characters, they they definiteky will.
In this case, I would not go for a <select> list, but a custom list built with, say a <div>.
This is not difficult, all you need is
a div that contains the default
option,
a hidden div with all the options
When the user clicks the default option show the hidden div
On click of the items in the hidden div (that is now visible) make that the selected item in the first div
Perhaps there already jquery plugin for this. but i am not sure whether you are open to jquery, I am not a jquery expert anyway.
I know this comparitively more effort than having a select, but i think it is worth the effort. All the hacks - expand the div onmouseover, onclick etc do not look great, might still break your design, and depending on the amount of data the user can enter, would still not be effective.
In the custom list approach, you can wrap the elements, so that you are in complete control.
Add to the CSS something like this:
select {
border: 1px solid #838383;
border-style: outset;
font-weight: bold;
color: #3F3F3F;
max-width: 150px !important;
overflow: hidden;
}
option {
max-width: 120px !important;
overflow: hidden;
}
This works for me. Note there are no dots in front of the anchors.
Not sure if you're open to using jQuery at all but I usually use this method:
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
Is a bit choppy but looks better than cutting off the content