I need to adjust the width of a select HTML box without using css, is there a way? I tried size but then it's adjusting the height, and width does nothing? Is there another way?
There is no way to do it in pure HTML as per http://www.w3.org/TR/html401/interact/forms.html#h-17.6. You can set it using the style element, though which is kind of without css in that it is inline.
<select style="width: ....
<style type="text/css">
select {
width:200px;
}
</style>
Does that not work?
Add an empty option with enough spaces in it ...
If u using jquery,
Maths
Physics
Chemistry
This is my select html code. So u have to add another div which contains jquery class name including your class name and apply height and width in your class.
<div class="ui-select selBox">
<select>
<option>Maths</option>
<option>Physics</option>
<option>Chemistry</option>
</select>
</div>
.selBox{
width: 470px !important;
height: 40px !important;
}
here selBox is my class name and ui-select is jquery class name.
select
{
width: 100%;
height: 42px;
}
Add this class to your style tag. It works fine.
Related
Hi I have an HTML page where I want to include CSS only if two conditions are met.
The HTML page will always have the div with id flipbook-page3-front
The HTML page will sometimes have the div with id pagesFlipbook
These divs are not siblings and are not after each other
I want to create some CSS on flipbook-page3-front only if the div pagesFlipbook is present. Is it possible. This is my CSS without any conditions:
.flipbook-page3-front{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
This will work only if you have class pagesFlipbook of parent div so it will affect.
Write conditional CSS like this.
.pagesFlipbook .flipbook-page3-front { /* write css */ }
Yes, it is possible, please see the code below...
const element = document.querySelector('#pagesFlipbook')
if(element != null){
document.querySelector('#flipbook-page3-front').classList.add('myconditionalclass')
}
You can declare in your CSS the following class to complete this...
.myconditionalclass{
width: 4000px !important; /*LARGEST WIDTH OF SCALED IMAGES*/
left: -800px !important;
}
Need to change class in CSS for a DIV based on different screen sizes
<div id="tab" class="tab_small"></div>
I need to change class of DIV having ID "tab" to "tab_small","tab_medium" & "tab_large"
based on the screen size using css only
#media(max-width:450px){tab_small class will apply}
#media(min-width:450px) and (max-width:768px){tab_medium will apply}
#media(min-width:768px) and (max-width:990px){tab_large will apply}
Is that doable?
with JS I can do, Is there a way to do with CSS in bootstrap?
If all three classes will be there in HTML on that DIV, is there a way to display one out of them in html based on screen sizes?
Thanks in advance!
I think you are trying to achieve a behavior like this. Try to resize the fiddle window. Please be aware that setting a property within #tab selector will override the #media queries, if you want to prevent this behavior just use #tab .tab_small, #tab .tab_medium, #tab .tab_large selectors inside the #media queries.
#tab{
width: 200px;
height: 200px;
}
#media(max-width:450px){
.tab_small{
background:red;
}
}
#media(min-width:450px) and (max-width:768px){
.tab_medium{
background: green;
}
}
#media(min-width:768px) and (max-width:990px){
.tab_large{
background: blue;
}
}
Fiddle Demo
There is not way to change DOM property value using CSS. There is only way to achieve this using javascript.
Try this jQuery js solution, probably this will resolve your issue..
<div id="tab" class=""></div>
<script type="text/javascript">
if($('body').width() < 450){
$('#tab').addClass('tab_small');
}else if($('body').width() > 450 && $('body').width() < 768){
$('#tab').addClass('tab_medium');
}else{
$('#tab').addClass('tab_large');
}
</script>
I'm trying to remove the margin-left on http://insightcxo.com/epicwin/
The problem is when I target the class .container, it shifts the whole website over - I only want to target the div on the specific page.
This is the code I'm using that makes the page work but shifts the whole website over as well:
.container {
margin-left: 0;
}
Most WordPress themes (including yours) include the page ID as a body class name. In this case, the <body> tag looks like the following:
<body class="page page-id-731 page-template-default page-shadow responsive-fluid ">
This means that you can target this page via:
.page-id-731 .container {
margin-left: 0;
}
More about WordPress's body_class() function can be found in the Codex.
As per the page you are linking, it seems you are using an page-id as a class in your body, so this might work:
.page-id-731 .container {
margin-left: 0;
}
I am not sure if I understand completely, but I think what you need to do is add an id to the div you want to target.
Here is a JSFiddle of what I mean:
https://jsfiddle.net/dT9Yk/25/
HTML:
<div class="div1"></div><br>
<div class="div1" id="marginleft"></div><br>
<div class="div1"></div><br>
CSS:
.div1 {
width: 100%;
height: 50px;
background: red;
}
#marginleft{
margin-left:10%;
}
As you can see they all have the same class name but the middle one has an additional id tag.
Add a class to the body on that page only and then use specificity to target the container on only that page. For instance, add body class epicwin on that page and then use
.epicwin .container {
margin-left:0;
}
to target it.
Adding margin-left: 0px; to your CSS file is conflicting with the default .container class of bootstrap.
To fix your issue apply the class directly inline, it will solve your issue, like so:
<div class="container" style="margin-left: 0px;">
You can create something like this in the stylesheet you are using:
.Container_Div { padding: 0px 0px 0px 0px;}
Add this to your HTML:
div class="Container_Div"
Try this and let me know.
You can target a div with class/id .you can target directly or with reference of parents div class/id as follow.
<div class="parent">
<div class="child"></div>
</div>
direct target
.child{}
with reference to parent div .It will only apply style to class/id that exist in parent with specific id/class
.parent .class{
}
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I would like to know if there is a way to use a particular css page as styling for a tag.
For example, instead of
<div class="header" style="position: absolute; text-align:left; right: auto; margin: 0 auto 20px; z-index: 1; width: 60%; height: auto; left:9%">
Is there a way to specify style.css for the div tag?
For example,
This style.css must ONLY apply to the div tag above.
Also, is it possible for all tags contained within that div tag to follow the same specified css page?
Put this in the header of your page
<head>
<link rel="stylesheet" href="/styles.css" type="text/css">
</head>
If you want to specify style for a page, include that CSS when you render the page.
If you want to have multiple ways of rendering a particular tag, differentiate the tags.
I'm not aware of conditional logic you can apply to the CSS directly.
HTML:
(include this in the head)
<link href='style.css' rel='stylesheet' type='text/css'/>
CSS: (in the style.css file)
div.header{
//your style here
}
or without the class:
div{
//your style here
}
but without the class it will get all div tags so I recommend the first code
You can create the CSS page you want and then create the styling you want inside
something like this
div > table {
padding: 5px;
}
That would make the div have a padding of five as well as it's child the table a padding of 5