I need this input field to prepend a # before the hex colour code, like so, as well as horizontally center both the div and the span containers:
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
When I try with the following css:
html, body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
border: none;
background-color:#444;
text-align:center;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
I achieve limited success, in that the hash is at the start and the span and input seem to be centered. The problem occurs when I attempt to set the width of the div, and though the width is set, it snaps back to the left.
So, how can I center the div and the span, while also being able to change the div's width?
Here's a fiddle with the code.
Just specify margin: 0 auto for your div.
html body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
width:300px;
border: none;
background-color:#444444;
text-align:center;
margin:0 auto;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
Hope it helps :)
Try this
span,input
{
align:center;
}
Hope it helps :-)
Related
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
This is the misaligned output of the code below.
.recipes-mobile-menu {
display:block;
width:350px;
margin: 0 0 0 12px;
}
.recipes-mobile-menu a:link, .recipes-mobile-menu a:visited, .recipes-mobile-menu a:active {
display:inline-block;
background: #002b76;
width:19%;
height:80px;
text-align:center;
color:#fff;
font-size:0.85em;
padding:10px 4px;
margin:0;
white-space:normal;
text-transform:capitalize;
}
.recipes-mobile-menu a:hover, .recipes-mobile-menu a.on {
background:#da2b28;
}
<div class="recipes-mobile-menu">
Extra<br>kick<br>Eats
Louisiana<br>Recipes
Family<br>Favorites
Asian<br>recipes
Winning<br>Wing<br>Recipes
</div>
This fiddle also shows the misalignment. http://jsfiddle.net/muzfuq7t/
My confusion is coming from fact that the vertical alignment seems to change only if I use developer console to change length of text inside the links.
Changing width, height, padding, and margin does not correct the vertical alignment.
What is happening there and how do I correct it?
This is what vertical-align is for :)
vertical-align: top;
Add this to your inline-block elements!
You can use vertical-align:top; to align vertically inline-block elements.
or alternatively you could also use float:left; and add margin:2px;.
DEMO http://jsfiddle.net/muzfuq7t/4/
I want the hover background to stretch all the way from border to border of the div and not just wrap the word
<div id="selection">
<label class="category_label"><input type="checkbox">abc</label><br>
<label class="category_label"><input type="checkbox">d</label>
</div>
CSS:
#selection{
padding:0.5em;
width:200px;
height:150px;
overflow-y:auto;
position:absolute;
border:1px solid #000;
background: white;
}
label.category_label{
cursor:pointer;
width:100px;
}
label.category_label:hover{
background:#ccc;
}
http://jsfiddle.net/2H2tr/1/
There you go:
http://jsfiddle.net/vahidseo/2H2tr/3/
Delete that br tag.
Change this:
label.category_label{
cursor:pointer;
width:100%;
display: block;
}
One thing You can do is set label styles to
display:block;
remove "br" tag, then, on hover You just set label to
width:100%;
and thats it :-)
updated fiddle: http://jsfiddle.net/2H2tr/2/
try this
label.category_label{
cursor:pointer;
width:100%;
float:left;
}
http://jsfiddle.net/2H2tr/4/
Wrap each of the label elements in a div (which is designed to have display: block;) and give that the hover rule:
div.wrapper:hover {
background: #ccc
}
Fiddle
I have done this code for a bit of extra study but I can't seem to center the work and I'm not to sure if I need so much code feel like some should be removed, please help!
If some of the code needs to be taken away I understand just dont quite understand and I feel like everything I Read make me more lost and Just keep changing my code with no solution :(
#menubar{
background:#3399CC;
height:120px;
}
#menubarwrap {
margin:0 auto;
width:100%;
}
#navigationbar-main {
float:left;
padding:15px;
color:#000;
font-size:24px;
font-weight:bold;
list-style-type: none;
margin-bottom:10px;
text-align:center;
}
#navigationbar-main li {
margin-right:35px;
position:relative;
}
#navigationbar-main li a {
display:block;
color:#000;
}
#navigationbar-main li ul {
display:none;
z-index:80;
}
.nav-sec {
display:block;
font-size:12px;
font-family: lucida sans unicode;
font-weight:normal;
text-align:center;
}
HTML
<body>
<div id="menubar">
<div id="menubarwrap">
<ul id="navigationbar-main">
<li>Home<span class="nav-sec">Where We Start</span></li>
<li>Gallery<span class="nav-sec">Pure Beauty</span></li>
<li>Contact<span class="nav-sec">Come Book</span></li>
<li>Features<span class="nav-sec">Pure Luxury</span></li>
<li>Location<span class="nav-sec">Where Are We?</span></li>
<li>Rates<span class="nav-sec">Price Of Love</span></li>
</ul>
</div>
</div>
</body>
sorry I'm just fairly new to all this
I am providing with two solutions guessing its what you need:
Fiddle 1
Change
#navigationbar-main {
margin:0px auto;
/*removed float
Other styles remain same*/
}
Fiddle 2
Change
#navigationbar-main li {
display:inline-block;
/*Other styles remain same*/
}
change your ul css
#navigationbar-main {
color: #000000;
font-size: 24px;
font-weight: bold;
list-style-type: none;
margin: 0 auto 10px;
padding: 15px;
text-align: center;
width: 1000px;
}
and give flat:left to your li
If you are trying to center align the #navigationbar-main ul, do this
#navigationbar-main ul{
float:left /*remove this line*/
}
This will get you the ul to the center of the page horizontally.
And if you want to align the li items horizontally apply this:
#navigationbar-main li {
display:inline-block;
}
#navigationbar-main {
width: 100%;
}
Add this to your CSS,
I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!
It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}
Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}
What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here
Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}