I'm trying to set up the background white for #7 as seen here:
http://jsfiddle.net/eab6ytom/1/
I dont want a line going through my text where it says 7.Input Type "submit"/"reset"
Relevant code to this portion:
<div class="subHeader">
<h3>7.Input Type "submit"/"reset"</h3>
<div class="submit">
<div class="subBorder">
<div class="subBordColor">
<p> <input type="submit" value="Submit Information" />
<input type="reset" value=" Clear " />
</p>
</form>
</div>
</div>
</div>
</div>
h3{
position:absolute;
border-style: solid;
border-color: blue;
margin-left:-300px;
margin-top:200px;
font-size:12px;
background-color:white;
}
.subBordColor{
border-style:solid;
border-color:blue;
padding:10px;
}
.subBorder{
border-style:groove; border-width:10px;
border-top-color:#A0A0A0;
border-right-color:#A0A0A0 ;
border-bottom-color:#A0A0A0 ;
border-left-color:#A0A0A0 }
}
The background color works fine. The reason that the line goes through the box is that it's on top of it. The z order of elements is determined by the element order by default; the last element is on top.
You can add z-index: 1; to the h3 rule to place it on top of the other element.
Related
I have some centered content on a web page for a small project that I am working on. The username and password text should be next to their corresponding input boxes, and only drop down into the position they are in right now if the screen is too slim. When I inspect the problematic text in chrome, it says that the padding is 100%, even though it is set to 0 in the css.
Here is the problem area:
<div id = 'log in stuff' class = 'logInContainer' hidden>
<h1>Log In:</h1>
<div class = 'small'>Username: </div> <input id = 'username'>
<br>
<div class = 'small'>Password: </div> <input id = 'password'>
<br>
<button id = 'create account'>create account</button>
<button id = 'log in'>log in</button>
<br>
<div id = 'log in problem'></div>
</div>
And here is the css:
.small{
color:#0071a5;
font-size: 3em;
width:50%;
margin:0;
height: 12%;
padding:0;
border:0px;
}
input{
width:40%;
margin: 0;
height: 7%;
border:0.5em solid blue;
border-radius: 0.5em;
background-color: #5d6f72;
}
.logInContainer{
margin: auto;
width: 100%;
position: absolute;
top:1%;
text-align: center;
left:0%;
height: 100%;
}
Currently It looks like this:
I would like the input boxes to be next to the text, not below it, and have the text and the input centered horizontally. This is my first real HTML project, so i'm relatively new to css. Is there a way to do this?
You can use the label tag to make sure that your text falls next to your input tag. This code below worked perfectly fine for me try it yourself :-). And i even added the form tag so you know why the input field is smaller.
<div id = 'log in stuff' class = 'logInContainer' hidden>
<h1>Log In:</h1>
<form>
<label class="small" for='username'>Username: </label>
<input name="username" id = 'username'>
<br>
<label for="password" class="small">Password: </label>
<input name="password" id = 'password'>
</form>
<br>
<button id = 'create account'>create account</button>
<button id = 'log in'>log in</button>
<br>
<div id = 'log in problem'></div>
</div>
Because "div" is a block element so add
display: inline-block;
to "small" class in your code to be as follow:
.small{
color:#0071a5;
font-size: 3em;
width:50%;
margin:0;
height: 12%;
padding:0;
border:0px;
display: inline-block;
}
This is my code and I'm unable to style it using 'button {margin-top:10px}
<input type="text"></input><button type="button"><img src="searchlogo.png" id="search"></button>
It isn't aligning flush with the text input? Any tips?
To see how does margin working please see this demo
CSS
.b1{
background:orange;
color:white;
border:none;
}
.b2{
background:orange;
color:white;
border:none;
margin-top:100px;
}
HTML
<input type="text"></input><button class="b1">Button Title</button>
<br/>
<input type="text"></input><button class="b2">Button Title</button>
<br/>
<input type="text"></input><button class="b1">Button Title</button>
I suspect you have an overriding rule somewhere in your css somewhere that prevents your css code from doing what you intend to do.
You should specify the element that you want to implement the margin on instead of broadly calling on button for the margin-top: 10px; rule.
Try this:
On your HTML:
<button class="my-button"><img src="image.jpg" alt="image" /></button>
On your CSS:
button.my-button {
margin-top: 10px;
}
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" CssClass="button" />
<head runat="server">
<title></title>
<style type="text/css">
.button
{
margin-top: 20px;
}
</style>
So after some digging I am not sure what the issue is here. I have a text field that is overlaid with a div. The div contains a ul with multiple li representing currently applied filters to a table. The overlay is supposed to catch the clicks to open a menu and hold any new filters.
EDIT:
To clarify the need is for IE9 specifically. For some reason the overlay is not what comes to the foreground. I can click on specifically the li and get the behavior I am expecting but there are space between and at the end that the overlay appears not to be present.
--My code--
HTML:
<!-- Start filter row-->
<div class="row collapse">
<div class="small-3 medium-2 large-1 columns">
<span class="prefix">Current Filters:</span>
</div>
<div class="small-9 medium-10 large-11 columns">
<div id="manager_filter_overlay" class="filter_overlay">
<ul>
<li class="filter_item">Status: Active</li>
<li class="filter_item">Start Date: 07/MAR/2014</li>
<li class="filter_item">End Date: 07/APR/2014</li>
</ul>
</div>
<input type="text" onkeydown="return false;" style="z-index:0;">
</div>
<div class="filter-menu">
<div class="arrow-up"></div>
<div class="filter-menu-container">
<ul>
<li>
<label>Status:
<select>
<option>
Active
</option>
<option>
Deleted
</option>
</select>
</label>
</li>
<li>
<label>Start Date:
<input type="text" placeholder="DD/MMM/YYY">
</label>
</li>
<li>
<label>End Date:
<input type="text" placeholder="DD/MMM/YYY">
</label>
</li>
</ul>
<div class="row">
<div class="large-12 center columns">
<input type="button" class="button tiny blue" value="Search">
<input type="button" class="button tiny blue" value="Reset">
<input type="button" class="button tiny blue" value="Save">
</div>
</div>
</div>
</div>
</div>
<!-- End filter row-->
CSS:
.filter_overlay{
position:absolute;
height:37px;
width:100%;
/*border:1px solid black;*/
}
.filter_overlay:hover{
cursor:pointer;
}
.filter_overlay ul{
margin:0;
list-style: none;
margin-left:5px;
}
.filter_overlay ul li{
display:inline-block;
/*border: 1px solid blue;*/
margin-top:10px;
padding-right:5px;
font-size:12px;
}
All browsers except IE9 seem to be doing what I would expect. When hovering over the text box anywhere my cursor is a pointer I click and my drop down show (JS not included it is very basic and not anything I think is impacting the issue). In IE9 however when hovering only a pointer is shown when over an li and when outside of that it is able to get to the text field.
Not sure what exactly you're talking about, but I moight, lol.
Anyway, if you want the default cursor everywhere, try this:
*:hover {
cursor: default;
}
or if just over the bullet points, try:
li:hover {
cursor: default;
}
Hope this works :D
After some further looking into this appears to be related to the background. Without it based on the two threads below there are z-index issues. While they suggest using
background:white; filter:alpha(opacity=1);
I was not able to see an results from this.
All I did was added the background and a 1px border.
IE z-index trouble on element with transparent background
z-index problem in IE with transparent div
I have a tab pane that is basically a line of 6 images, all floated. They are all red and the bottom border is set to 4px white by default. When a tab is selected, the 4px border turns red. Unfortunately in firefox though, there is a space between the content and the border. Right now it's a button with an image inside of it. The 1px margin between the buttons is intentional and working as expected.
The margin/padding/image-border/etc are all zero, according to the development pane, but there is still a 1px white line between the content and border ?????
You can view the webpage here:
www.bookyoursite.com/more/1
The following is the buttons with their images within:
<div id="buttonContainer">
<button id="button1" class="buttons" onclick="hideAllBut('tab',1)"><img src="/images/buttons/sites.png" /></button>
<button id="button2" class="buttons" onclick="hideAllBut('tab',2)"><img src="/images/buttons/rates.png" /></button>
<button id="button3" class="buttons" onclick="hideAllBut('tab',3)"><img src="/images/buttons/recreation.png" /></button>
<button id="button4" class="buttons" onclick="hideAllBut('tab',4)"><img src="/images/buttons/facilities.png" /></button>
<button id="button5" class="buttons" onclick="hideAllBut('tab',5)"><img src="/images/buttons/ratings.png" /></button>
<button id="button6" class="buttons" onclick="hideAllBut('tab',6)"><img src="/images/buttons/nearby.png" /></button>
</div>
CSS assosiated with the above:
#buttonContainer {
font-size:0;
text-align:center;
border-image-width:0;
}
.buttons{
font-size:inherit;
position:relative;
padding:0;
border:none;
background-color:transparent;
width:90px;
margin-right:1px;
border-bottom:4px solid white;
border-image-width:inherit;
}
.buttons img {
padding:0;
border-image-width:inherit;
}
For completeness I'll include the onclick code ... but this is probably not useful:
function hideAllBut(name,n){ //hides all other items with name, and then displays the selected tab's pane
for (i = 1;i <= 1000; i ++){
p = document.getElementById(name + i);
if (p == null)break;
p.style.display="none";
document.getElementById("button" + i).style.borderBottom="4px solid white"
}
document.getElementById(name + n).style.display="block";
document.getElementById("button" + n).style.borderBottom="4px solid red"
}
In Chrome and IE, the tabs render as desired
Try setting the images to display: block
i am currently trying to position a textarea with CSS and to make it look nice. However it's not working.
Relevant CSS:
#BoardInput {
padding:0px;
width:100%;
height:100%;
}
#BoardSmiley {
min-width:100px;
width:20%;
padding:10px;
border-right:thin solid #4E6011;
border-bottom:thin solid #4E6011;
background-color:#C6E466;
}
#BoardCode {
border:thin solid #4E6011;
background-color:#C6E466;
padding:3px;
}
Relevant HTML:
<div id="BoardCode">
<button onclick="addBBCode('[FETT]','[/FETT]');">Fett</button>
<button onclick="addBBCode('[KURSIV]','[/KURSIV]');">Kursiv</button>
<button onclick="addBBCode('[UNTERSTRICHEN]','[/UNTERSTRICHEN]');">Unterstrichen</button>
<button onclick="addLink();">Link</button>
<button onclick="addImage();">Bild</button>
</div>
<form action="index.php?s=board&action=addedit&where=<?=$Result['Overview']['PostID']?>" method="POST">
<table id="Board">
<tr>
<td>
<textarea id="BoardInput" name="Text"></textarea>
<input type="hidden" name="ThreadID" value="<?=$Result['Overview']['ThreadID']?>" />
</td>
<td id="BoardSmiley">
<?php
$BoardTemplate->showSmileys();
?>
</td>
</tr>
<tr colspan="2">
<td><input type="submit" value="OK" />
</tr>
</table>
</form>
The problem is that i want the "Code" Box at the top, the Smileys-Box at the right and the textarea at the left. And i want them to be fully adjusted to each other. However the textarea is 1px more intented to the right than the Code box above and 2px more intented to the top than the Smileys-Box on the right.
What am i doing wrong here?
EDIT:
jsFiddle: jsfiddle.net/SSxSN and an image:
Use:
resize:none;
in your css code in textarea.
Add negative margins for left and bottom, like this:
#BoardInput {
padding:0px;
width:100%;
height:100%;
margin: 0 0 -8px -1px;
}
http://jsfiddle.net/SSxSN/1/