Element not displaying next to text HTML/CSS - html

So this is the code I'm working on:
HTML
<div id="t_welcomesection">
<h1>Hello World!</h1>
<p>Lorem Ipsum.
<div class="morebtn">More >>
</div>
</p>
</div>
<!-- end of welcomesection -->
CSS
.morebtn {
color: #FFF;
background-color: rgba(219,87,5,1);
font-size: 17px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.morebtn:active {
color: #FFF;
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
}
#t_welcomesection {
float: left;
width: 800px;
text-align: justify;
padding: 0px 50px 30px 50px;
}
See working sample here
I want the button to be next to the text. I don't know what's wrong with the code I have. Help is much appreciated. Thanks.

#t_welcomesection p {
display: inline-block;
}
.morebtn {
display: inline-block;
}

You've got div (a block element) inside a p. Just use span instead of div:
Demo

You cannot have div nested inside a p tag as p can only hold inline elements, make your div a span and assign display: inline-block; to the span element
Demo

Related

CSS Button Doesn't Look the Same on IOS

This is my CSS code and it works fine on android and PC Browser but not Iphone
.button{
color: #fff !important;
text-transform: uppercase;
text-decoration: none;
background: #4A5D88 ;
padding: 5px 40px 5px 40px;
border-radius: 20px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.button:hover{
text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
this is how it works every where but not on Iphone
Add this line and it should work normally.
-webkit-appearance: none;

CSS Box 2.5D Pop Out Shadow effect

So I'm trying to create a div element that upon hovering, will "pop" out, and appear as a 2.5D box. Basically, what this person was looking for:
3D Box Shadow effect
Except animated with a transition, so when not hovered upon, its a simple 2D box, and when hovered on, it appears like the second image in that person's question.
Here's a fiddle with what I have so far:
http://jsfiddle.net/78m3nzv6/
<div class="cat-box bot-row">
<h4>Hello World!</h4>
<p>Info</p>
</div>
.
.bot-row:hover {
transition: all 0.3s ease-in-out;
transform: translate(10px,10px);
}
.cat-box {
background-color: grey;
outline: #DDD8D4 solid 3px;
padding: 3px 5px 5px 5px;
margin: 10px 30px 10px 30px;
transition: all 0.3s ease-in-out;
}
You can actually do this in a very similar way to the answer that you linked to, by using multiple box-shadow declarations.
I also took the liberty of converting your outline to a border and setting box-sizing: border-box so that the border doesn't stick out from the effect.
Here is a Live Demo:
.bot-row:hover {
transition: all 0.3s ease-in-out;
transform: translate(10px, 10px);
box-shadow: -1px -1px 0px #999, -2px -2px 0px #999, -3px -3px 0px #999, -4px -4px 0px #999, -5px -5px 0px #999, -6px -6px 0px #999, -7px -7px 0px #999, -8px -8px 0px #999, -9px -9px 0px #999, -10px -10px 0px #999, -11px -11px 0px #999, -12px -12px 0px #999;
}
.cat-box {
box-sizing: border-box;
background-color: grey;
border: #DDD8D4 solid 3px;
padding: 3px 5px 5px 5px;
margin: 10px 30px 10px 30px;
transition: all 0.3s ease-in-out;
}
<div class="cat-box bot-row">
<h4>Hello World!</h4>
<p>Info</p>
</div>
JSFiddle Version: http://jsfiddle.net/78m3nzv6/3/

Why isn't text hovering working on my asp.net project?

This hovering idea works fine when i use it saperately on a small single page, but when I use it on my project, its not working.
Here's the code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="WebRole1.WebForm4" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<style>
#sel>a: hover #span1 {
display: block;
}
#sel>a{
position: relative;
color: rgba(255,255,255,1);
text-decoration: none;
background-color: rgb(0, 148, 255);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 3px 10px 55px 14px rgba(51,39,51,1);
-moz-box-shadow: 3px 10px 55px 14px rgba(51,39,51,1);
box-shadow: 3px 10px 55px 14px rgba(51,39,51,1);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
top: 0px;
left: -1px;
}
#sel>a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
position: relative;
top: 6px;
}
</style>
<div id="sel">
<a href="webform1.aspx" >Private Album!</a>
Public Album!
</div>
<span id="span1">
Apple.
</span>
</asp:Content>
What i want is whenever I hover to, private album or public album, it should show Apple. Otherwise, nothing. But it keeps showing Apple on the lower left corner of the screen. What is wrong?
Your CSS selector is wrong.
Instead of this:
#sel > a:hover #span1
use this
#sel > a:hover + #span1
Selectors reference: http://www.w3schools.com/cssref/css_selectors.asp
And the "Apple" is still visible, because you should hide it from the beginning like this:
#span1 {display: none;}

css3 circle glow like a Moon light glow

i am trying to create a moon with light glow. same as in images.
i have tried but not much successful.
I don't wants to use image in website. i wants to create only this with CSS3.
My circle is creating very small and also glow is in small area . i want glow in large radius area
http://jsfiddle.net/naresh_kumar/ezUfG/6/
Html
<div>
<span>Glow</span>
</div>
Css
div {
margin: 20px 10px 10px;
text-align: center;
font-family: sans-serif;
}
span {
display: inline-block;
padding-top: 40px;
background: whiteSmoke;
width: 100px;
height: 60px;
text-align: center;
vertical-align: middle;
-webkit-box-shadow: 0 0 10px #F8A50E;
-moz-box-shadow: 0 0 10px #F8A50E;
box-shadow: 0 0 10px #F8A50E;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: box-shadow .4s ease;
-moz-transition: box-shadow .4s ease;
-ms-transition: box-shadow .4s ease;
-o-transition: box-shadow .4s ease;
transition: box-shadow .4s ease;
}
span:hover {
-webkit-box-shadow: 0 0 10px red;
-moz-box-shadow: 0 0 10px red;
box-shadow: 0 0 0 10px red;
}
use box-shadow :)
This example uses two comma separated shadows:
box-shadow:0 0 50px gold,0 0 150px gold;
http://codepen.io/gcyrillus/pen/qdcos
You could draw it with radial-gradient too.
Result will varie from browser to browser.
I believe this is what you want:
span:hover {
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow: 0px 0px 10px red;
box-shadow: 0px 0px 10px red;
}
Demo: http://jsfiddle.net/ezUfG/10/
Instead of this style for your box-shadow:
box-shadow: 0 0 0 10px red;
Try this:
box-shadow: 0 0 10px red;
Edit: If you want the glow to be bigger, just increase the radius:
box-shadow: 0 0 30px red;
jsFiddle here

Removing the border on select tag

I made a form for a site and all textboxes have rounded corners except the select drop down box. I made a rounded box style and it shows but the original square also shows behind it. Is there any way I can remove this so my is the only one that shows. I'll add the code
<td>Service Requested:
<select style="margin-left: 10px" name="service" tabindex="4">
<option value=" " selected="selected"> </option>
<option value="Residential Move">Residential Move*</option>
<option value="Commercial Move">Commercial Move*</option>
<option value="Storage Unit Loading">Storage Unit Loading</option>
<option value="Storage Unit Unloading">Storage Unit Unloading</option>
<option value="Furniture Consignment">Furniture Consignment</option>
<option value="Assembly/Removal">Assembly/Removal</option>
<option value="Landscaping">Landscaping</option>
<option value="Cleanout">Cleanout</option>
<option value="General Help">General Help</option>
</select>
</td>
and this is the entire css for the whole form. Just have at it
#searchbox {
padding-left: 190px;
padding-bottom:40px;
background: url(../images/border-dashed.gif) repeat-x left bottom;
}
#searchbox form {
margin: 0;
}
#searchbox table {
margin: 0;
}
#searchbox th, td {
text-align: left;
font-weight: normal;
color:#302f2f;
}
#searchbox .submitrow {
text-align: right;
}
#search {
}
#search input[type="text"] {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 100px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 150px;
}
#search select {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 200px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search select:focus {
width: 250px;
}
#search textarea {
border: 2px solid #c1c2c3 ;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #302f2f;
width: 300px;
padding: 6px 15px 6px 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search textarea:focus {
}
.contactwrapper {width:auto; height:200px; overflow:hidden;}
.extra-wrap {width:800px; overflow:hidden;}
.formbtn {
background: url(../images/formbtns.png) no-repeat;
background-position: 0 bottom;
color: #f1f2ea;
display: block;
line-height: 28px;
float:right;
margin-left:450px;
margin-bottom:40px;
height: 30px;
width: 100px;
margin: 48px 10px;
outline: 0;
text-align: center;
text-decoration: none;
}
.formbtn:hover {
background-position: 0 top;
}
thanks
The ability to style select boxes is inconsistent across browsers. Some of them respond well to CSS styling and some don't, but if you really want to have completely consistent control over it and its behavior, you need to make a faux-select that is powered by javascript.
Check out the Select2 control, it's nice.
Styling to a select box is chosen mostly by the browser and is not very customizable without javascript besides using a background image.
Since jQuery UI 1.8 there has been an autocomplete control that has a combobox functionality which replaces a select control.
I found an alternative, but not sure how it will behave with all browsers. But if you change the border property to inherit it will do it. At least in Chrome
border: 2px inherit #c1c2c3 ;