This is probably a simple one, but I can't seem to figure it out for the life of me. I'm making a mobile menu and I'm trying to make it sit to the right of the screen. (the search bar and the menu icon)
My problem is that if I float it to the right, the background disappears and if I text-align it the text-indent I have on a link decides to show up.
My html
<div id="subHeader">
<ul class="mobileMenu">
<li>
<form>
<input type="text" name="search" id="search" />
<input type="submit" value="Search" class="sub" />
</form>
</li>
<li class="menLink">MobileMenu</li>
</ul>
</div>
and an example can be seen over here at jsfiddle
http://jsfiddle.net/zazvorniki/9SWbs/1/
Some help would be much appreciated!
I achieved the layout you are after by adding width :100% and float: right to #subHeader. I also added float: right to .mobileMenu li and removed the margin attributes of .menlink. Please see below changes and jsfiddle...
#subHeader{
background: #c1c1ab;
width: 100%;
color: #1a1a15;
float: right;
}
.mobileMenu li{
display: inline-block;
float: right;
font: bold 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin-right: 4px;
}
.menLink {
background:url("http://tinyurl.com/kgd7ayt") no-repeat;
height: 3em;
width: 3em;
}
.menLink a {
text-indent:-9999px;
display:block;
height: 3em;
width: 3em;
}
jsfiddle demo
Related
I want to place a picture in the header following by a horizontal menu under the picture.
So I divided the header in two subregio's: img and navbar (html). I get the navbar correct, but the picture does not appear. Anyone an idea? What is the problem in my css-part? Thank you!
<div id="header">
<div id="img">
</div>
<div id="navbar">
<ul>
<li>home</li>
<li>band</li>
<li>contact</li>
</ul>
</div>
</div>
<!-- end header -->
#header{
height: 300px;
background: black;
}
#header img{
background-image: url("img/despikes-header.jpg");
background-repeat: no-repeat;
}
#navbar{
color: white;
font-size: .9em;
font-weight: normal;
font-family: Tahoma, Arial, sans-serif;
font-variant-caps: all-small-caps;
text-decoration: none;
float: left;
text-align: center;
}
#navbar ul{
height: auto;
padding-top: 8px;
padding-left: 20px;
}
#navbar li{
display: inline;
padding: 3px;
}
Apologies for posting as an answer rather than comment, however my rep isn't high enough to comment yet.
Your CSS is incorrect.
Rather than #header img, you should be using #header #img and go from there.
You may well need to apply a height (and perhaps background-size to that styling too, otherwise the div id="img" doesn't know what size to be.
As an aside, you should probably look to avoid using ids and use classes instead.
Hope this helps.
I'll give the examples, as well as screenshots, first:
HTML:
<div class="add-link-box">
<div class="add-link-box-close-button" id="add-link-box-close-button">X</div>
<form name="add-link" id="add-link-form" method="post" action="" enctype="multipart/form-data">
<div style="width: 90%;" class="alink-field">Add A Link</div>
<div class="mobile-form-frame" id="mobile-form-frame">
<div class="alink-field mobile-alink"><label for="link-url">Link Address:</label></div>
<div class="alink-field"><input type="text" name="linkurl" id="link-url" class="add-link-form"
placeholder="www.awebsite.com"></div>
<div class="alink-field mobile-alink"><label for="link-description">Link Description:</label></div>
<div class="alink-field"><input type="text" name="linkdescription" id="link-description" class="add-link-form" placeholder="my
website"></div>
<div class="alink-field mobile-alink"><label for="link-image">Link Image:</label></div>
<div class="alink-field"><input type="file" name="linkimage" id="link-image" class="add-link-form"></div>
<div class="alink-field"><input type="button" name="submit" value="Submit Link" class="add-link-form" id="add-link-submit"></div>
<div class="alink-field"><input type="reset" name="reset" value="Clear" class="add-link-form" id="reset"></div>
</div>
</form>
</div>
CSS:
.add-link-box{border: 2px #006BB5 solid; color: #006BB5; font-family: bonvenocf; text-align: center; font-size: 16pt; margin: 10px; height: 90%; margin-top: 30px; overflow: auto; -webkit-overflow-scrolling: touch;}
.mobile-form-frame{overflow: auto; height: 90%;}
.add-link-box-close-button{position: absolute; display: block; right: 5px; top: 5px; width: 20px; height: 20px; padding: 2px; line-height: 18px; font-size: 18pt; text-align: center; cursor: pointer; font-weight: bold; color: #FF0000;}
.add-link-box-close-button:hover{color: #FF0000;}
.alink-field{width: 90%; margin: 0px; display: block; padding: 10px; margin-left: auto; margin-right: auto; text-align: center;}
.mobile-alink{text-align: left;}
Here is the problem:
When adding -webkit-overflow-scrolling: touch; to the mobile-form-frame class (in order to achieve native scrolling on iOS devices), the "X" to close this div is hidden. If we remove the -webkit-overflow-scrolling: touch;, it does not. I've done some searching and can't really find anyone else that has seen this same problem. I don't understand why this would cause the absolute-positioned div add-link-box-close-button to be obscured from view. Can anyone please help me figure this out? Is it actually a bug in Safari on iOS?
I've included screenshots to demonstrate the result I am experiencing.
EDIT: Above html is wrapped in container div with position: fixed;
use this css
.add-link-box {
position: relative;
}
Not an expert just a thought, what if you move the 'X' z-index? Have you tried that?
Maybe the X is displayed but not on the foreground. Just a thought
I have a small image placed within the right side of my text box and I am trying to prevent my text from running behind that image. However, I do not want to limit the amount of characters by doing this. Any suggestions?
<div id="searchContainer">
<!--Search Bar-->
<input id="searchBar" type="text" placeholder="Type here to search" onfocus="placeholder = ' '"/>
<!--Microphone-->
<img id="mic" src="*Super long URL*"/>
</div>
/*Search Bar*/
#searchBar {
opacity: 0.6;
position: relative;
display: block;
height: 24px;
font-size: 16px;
font-family: Arial, sans-serif;
width: 550px;
}
What people typically do is put the text input, and image inside of a container. They remove the border of the input so it appears to be a white input box. They stylize the container with a border and such to make it look like THAT is the input. Then they put the (in your case) microphone image floated to the right, and add a margin right to the input. so the text does not hide behind the image.
Here is the basic idea: http://codepen.io/anon/pen/pJdMJB
HTML:
<div id="searchContainer">
<img src="http://i.imgur.com/w5j4E5O.png"/>
<input id="searchBar" type="text"/>
</div>
CSS:
#searchBar {
opacity: 0.6;
position: relative;
display: block;
height: 24px;
font-size: 16px;
font-family: Arial, sans-serif;
width: 500px;
border:none;
}
#searchContainer{
border:1px solid #ddd;
width:520px;
}
img{
width:20px;
height:20px;
float:right;
}
I have a header bar with a logo on the left and a search form following. Both are floated to the left. I am trying to control the vertical spacing of the search form using CSS but I cannot find a good solution other than adding padding and/or margin either on top or bottom of the search form, and although I may be able to find values that work in one browser, it is not a solution that is consistent across browsers... The same problem exists if I have a search button next to the search field. Is there a solution for this that is cross-browser compatible or do I need to use JavaScript? Is there a standard to doing something like this?
P.S. I reset the CSS in my dev code.
Here is a simplified version of my header code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
margin-top: 5px
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Link to code on JSFiddle: http://jsfiddle.net/mg535m80/2/
Edit: I found a solution, it's not as cross-browser compatible is I'd hoped, but it works in all modern browsers. I just added display: flex; and align-items: center to the parent, and it worked like a charm. New code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
display: flex;
align-items: center;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Updated JSFiddle: http://jsfiddle.net/mg535m80/9/
The problem is the style of the input, which is different between browsers.
Solution: to make the input look the way you want, set all its styles explicitly instead of relying on the defaults. Example:
input {
width:10em; height:1.25em;
margin:0; border:2px solid #888; padding:0;
font:inherit; vertical-align:baseline;
}
See updated fiddle
Yes, it is possible to specify vertical properties in pure CSS. Partially you already answered your question (i.e. padding and margin properties). Other properties include height, line-height, min-height, max-height, etc. Also, you can use position: absolute or fixed and specify top/bottom properties. Hope this may help. Best regards,
One solution can be set height in header:
header {
height: 33px;
}
And then use display: flex to align search box:
#search {
display: flex;
align-items: center;
height: 100%;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/mg535m80/3/
I'm new to web design, so please forgive if this is super simple- I've tried everything I know and can't quite seem to get this right.
I've put together a contact form using html & css. Ideally, I'd like to have a 1px line extending from each label to use as an input guide. This line should be level with the bottom of the label. I'd also like a series of lines extending vertically in the text area to allow for extra writing space.
Currently, the input lines for Name and Email aren't showing, and there is only one line at the very bottom of the textarea for Message.
Here's the code I'm working with:
<div id="contact-form">
<div id="invite">
<h1>Let's Talk.</h1>
<div class="postinfo">
<h2>Have you got a project needing an eye for detail and a creative touch? I'd love to hear from you.</h2>
</div><!-- end postinfo -->
</div><!-- end invite -->
<form>
<label for="user">Name:</label>
<input type="text" name="user" value="" /><br />
<label for="emailaddress">Email:</label>
<input type="text" name="emailaddress" value="" /><br />
<label for="comments">Message:</label>
<textarea name="comments"></textarea><br />
<input type="submit" name="submitbutton" id="submitbutton" value="Submit" />
</form>
</div><!-- end contact -->
#contact-form {
float: left;
margin-left: 300px;
margin-top: 310px;
}
#invite .postinfo {
list-style-type: none;
width: 150px;
}
label {
float: left;
font-family: dalle;
font-size: 160%;
letter-spacing: 2px;
text-transform: uppercase;
margin-left: 200px;
margin-top: -105px;
width: 120px;
}
input, textarea {
border-style: none;
border-bottom: 1px solid #202020;
margin-bottom: 5px;
margin-left: 300px;
margin-top: -105px;
width: 245px;
}
textarea {
width: 250px;
height: 150px;
}
#submitbutton {
background: none;
border-style: none;
font-family: Georgia,
Constantia,
"Lucida Bright",
"Bitstream Vera Serif",
"Liberation Serif",
serif;
margin-left: 173px;
margin-top: 5px;
width: 90px;
}
br {
clear: left;
}
Ideal outcome:
Based on your code i create a fiddle see below. If any changes or other requirement please clarify.
Fiddle: http://jsfiddle.net/EaKmZ/
Demo: http://jsfiddle.net/EaKmZ/embedded/result/
Note: I have not edited your code too much so many un necessary css are present and not required.
There were some unneeded CSS rules on your codes. Try this demo to see it fixed to some extent but lines on text area cannot be achieved using CSS.
You need to use image for that. See a demo