I have created a simple layout with Html and CSS which is like below :
CSS
.search-box{border:1px solid gray;padding:
5px;border-right:5px solid gray;padding-right:30px;
width:60%;font-size:14px;}
.search-box:focus{outline:none;}
.search-buton{background-color:gray;
border:1px solid gray;padding:5px;font-size:14px;
cursor:pointer;color:#fff;width:10%;}
.search-buton:hover{background-color:#575E5B;border:1px solid #575E5B;}
.left{float:left; border:1px solid gray; width:68%;padding:10px;}
.right{float:right; border:1px solid gray;width:28%;padding:10px;}
HTML
<div class="right">
<input class="search-box" type="text" placeholder="ASP.NET MVC, JQuery, Ajax, etc." />
<input class="search-buton" type="submit" value="Search" />
</div>
<div class="left">
</div>
<div style="clear:both;"></div>
See the JSFiddle sample :
http://jsfiddle.net/tugberk/uuVuW/
As you can see, I am unable to see them smoothly. Some screen resolutions, it is perfect. But when I zoom in inside the browser, it is where the things get messy.
I thought about fixing this with CSS3 media queries but I am sure there is some CSS trick which solve this problem for me. Any thoughts?
BTW, Any suggestion for the title of this question would be great. It is
not so creative I think.
You need to use percentages for the padding as well because this affects the overall width
Here's an example:
http://jsfiddle.net/uuVuW/2/
This explains the box model:
http://www.w3.org/TR/CSS2/box.html
you can write like this :
.left{
border:1px solid gray;
padding:10px;
overflow:hidden;
padding: 10px;
}
.right{
float:right;
border:1px solid gray;
width:28%;
padding:10px;
margin-left:20px
}
check this http://jsfiddle.net/sandeep/uuVuW/3/
Related
I have a picture that, when clicked, opens up a css js modal box of another picture. Right now the box is too small. How do I edit the width of the graphic that appears?
http://www.awastudios.net (click one of the comic book covers)
I tried to edit the css code (app.css) but nothing changes.
.creator-modal {
background:#20212a;
border:1px solid #3f4150;
padding:0;
max-width:700px;
}
#media screen and (max-width:63.99875em) {
.creator-modal{
max-width:95%;
min-height:inherit;
height:auto;
margin:auto;
}
}
.reveal-overlay{
background-color:rgba(0,0,0,.45);
}
.regular-modal{
padding:15px;
font-size:14px;
background:#20212a;
border:1px solid #3f4150;
}
I changed max-width from 700px to 1500px and 80%, but nothing changes.
I've done a hard refresh on the browser (ctrlF5) but that doesn't help.
Any help would be appreciated! Thank you.
If i understood u , u want make modal more large thats right , add in ur HTMl div class="reveal creator-modal" width:100%
.creator-modal {
background: #20212a;
border: 1px solid #3f4150;
padding: 0;
max-width: 750px; /* up to 750px */
}
<div class="reveal creator-modal" id="fightgirls" data-reveal="" role="dialog" aria-hidden="false" data-yeti-box="fightgirls" data-resize="fightgirls" data-n="xyhm2h-n" style="display: block; top: 37px; width: 100%;" tabindex="-1">
<img src="assets/img/creators/fightgirls.jpg" alt="Frank Cho">
<button class="close-button" data-close="" aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
I got a Problem with CSS ! :)
I want to style a box to look like this one here:
http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (Chart + 3 boxes right).
Right now i tried:
.wktcontent {
float: left;
width: 80%;
}
.wktinfo {
float: right;
width: 20%;
}
.wkttitle {
height:34px;
padding:5px;
border-bottom:1px solid #000000;
margin-bottom:20px;
}
.wktinfocontent {
font-weight:bold;
border-top:1px dashed #000000;
}
and in html:
<div class="wktcontent">
<center><h2>Title</h2></center>
<p><h3>Content</h3></p>
</div>
<div class="wktinfo">
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
</div>
I think everything aligns fine. But as soon as I add a border to the boxes by defining
border: 1px solid lightblue;
the title is placed over the infos on the right.
My second part of the Question is: How can I align the numbers on the right (as in the example on dribble) to the text next to it?
thank you so much!!
Adding a border changes an elements dimensions. If you add a 1px border to an element, then remove 1px from it's width and height. Failure to do this will result in issues with layout.
I couldn't reproduce your error on jsfiddle and chrome, what browser are you using?
As for the numbers, I'd suggest using a table in each div so you can align both halves properly.
Something along the lines of:
<div class="wktinfocontent">
<table>
<tr>
<td width="30%">
07
</td>
<td width="70%">
Hours play game today
</td>
</tr>
</table>
</div>
Heres my problem how can i make my header looks better
Following is the coding ...!!
1 Index.php
<div class="header">
<div class="headerFont">Yo! Yo! Honey Singh..!!
</div>
<div class="Login">
<form>
Email :<input type="text">
Password :<input type="password">
<input type="submit" value="Login" >
<input type="button" value="register">
</form>
</div>
</div>
2 Web-Style.css
.header{
top:0;
left:0;
padding:10px;
background:#00688B;
width:100%;
height:footer-<length>;
box-shadow:2px 2x 5px #08298A;
border:1px solid black;
text-shadow:2px 2px black;
}
.header a{
color:white;
}
.headerFont{
font-family:MATURA MT ;
font-size:22px;
display:table-cell;
}
.Login{
display:block;
position:absolute;
top:15px;
right:50px;
}
3 Mobile-Style.css
.header {
width: auto;
}
Now i need to know how can i get button like the website[PIC] -> http://i.stack.imgur.com/vlx09.png
How do i make button visible on mobile but not on pc borwsers ..???
Create the button you want on the mobile version of the website.
Add CSS that makes the button invisible (eg, display: none).
Use CSS with media queries to show the button on mobile devices.
More details here:
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
you can do this using javascript and checking the requesting browser's type.
You can detect mobile broswer's request using javascript like following.
if ((screen.width < 480) || (screen.height < 480)) {
location.replace('/mobile/');
/*Get buggon element by id and show it else hide it*/
}
or may be you can use following javascript to detent mobile browser and then hide the button.
https://github.com/miohtama/detectmobile.js
I am using a wrapper but I am pretty confused. I want the two resultbox divs to be in line with the submit div.
Take a look here:
http://jsfiddle.net/QtVwr/
What am I doing wrong?
I'm not very familiar with CSS.
Part of the problem is that there are issues with your HTML. Here's a start:
make sure all the divs are closed.
remove the floats from your css
add display:inline-block;
remove the inline styles from your HTML.
correct the .wrapper class to be .wrapper1 (matching the HTML)
So, this is more what you want, I assume:
.wrapper1 {
height:70px;
width: 800px;
background: #ffffff;
border: 1px solid grey;
color: #BDBDBD;
}
.resultbox {
width: 300px;
background: #ffffff;
color: #BDBDBD;
display: inline-block;
}
.submit {
height:15px;
width: 32px;
margin-top:10px;
background: #ffffff;
border: 1px solid;
color: #BDBDBD;
display: inline-block;
}
and the HTML
<div class="wrapper1">
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="" >
<div class="locationresult" style="" form action="weezyresults.php" method="post">
<input type="text" name="search" size="36" value="" style="" />
</div>
</div>
<div class="resultbox" style="width:35px;" >
<div class="submit"></div>
</div>
</div>
Example: http://jsfiddle.net/QtVwr/2/
You will still need to fiddle with it. But this is a start.
To make div inline you should use the following CSS style:
.mydiv{ display: inline; }
Note: Change width of your wrapper (make it smaller) and you will see the results
There are several issues with the code you have provided.
you have defined css rules for a class wrapper but use class wrapper1 in your html
class wrapper doesn't have enough width for both of the result boxes plus the submit
There are extra quotes on the second result box style="margin-left: 5px; margin-top: 3px;""
form tags are malformed and being intertwined with your div tags
form tags aren't closed
locationresult div tag isn't closed
floats need to be cleared
here is a fiddle
http://jsfiddle.net/e3dg6/
The width of your results boxes combined exceeds the width of your wrapper. You need to either make the wrapper wider or reduce the width on the resultboxes.
Why do you have the submit div within a resultbox div?
Why the margin-left:10px, only with the first div?
I'd do it like this:
<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>
And set the width and height of the wrapper, and let the other divs float. It's just a longshot, not exactly sure what you're trying to accomplish. I just think your nesting is not okay.
i have a layout problem.
i have this sample code:
<div class="frame"><div class="holder"><form class="newform">...<div class="button"><input type="submit"></div></form></div></div>
And this stylesheet:
form.newform{border:1px solid orange}
div.button{border:1px solid red;width:100%;position:relative;overflow:hidden;}
Now the submit button (red-box) will be displayed at the bottom of the form (orange-box). But i like to display it AFTER (eg. 10px after bottom line) the orange-box.
Maybe someone can help me to solve this problem.
Best regards
Tim
Edit:
This is the complete css part of form.newform
overflow:hidden;
height:1%;
background:url(../images/contentform.gif) repeat-y;
padding:0 0 2px;
border:1px solid orange;
i tried to add bottom:-10px; to the div.bottom but the submit button will be cut at the bottom line of the form. Adding a z-index:200 wont help.
One option would be to use CSS to specifically shift the position of the submit button. I've made up the below so it will probably look completely wrong, but play around with it.
HTML:
<input type="submit" id="submitbutton">
CSS:
#submitbutton {
position: relative;
bottom: -50px;
}
You cannot have a submit button outside the form element, it needs to be inside.
If you want two boxes, one orange and one red, with the orange one containing the form input fields and the red one containing the submit button, you should do something like this:
<div class="frame">
<form class="newform">
<div class="holder">
...
</div>
<div class="button">
<input type="submit">
</div>
</form>
</div>
And in your css
.holder { border:1px solid orange; }
.button { border:1px solid red; margin-top:10px; }