Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.
This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.
Here is my entire css file, called custom1.css
#topmostheader
{
background: none repeat scroll 0% 0% rgb(0, 0, 0);
height: 90px;
text-align: center;
}
#topmostheader.inner
{
width: 1280px;
margin: 0 auto;
text-align: left;
background-color: Red;
}
#topmostheader.app-name
{
font-size: 14px;
float: left;
line-height: 90px;
color: rgb(119,119,119);
margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
margin: 0px;
height: 90px;
float: right;
}
and here is my div box layout.
<div id="topmostheader">
<div class="inner" >
<div class="app-name">
Lunch Application
</div>
<div class="xxx-logo">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.
I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)
<div id="topmostheader">
<div class="inner" >
<div class="app-name" style="float:left">
Lunch Application
</div>
<div class="xxx-logo" style="float:right">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?
To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)
You’re missing a space between your ID selectors and your class selectors.
#topmostheader.inner means “select the element with an id of topmostheader and a class of inner”.
You want #topmostheader .inner, which means “select elements with a class of inner that are descendants of the element with an id of topmostheader“
you need to put a space between the id #topmostheader and the class e.g. .acceleration-logo otherwise the browser assumes you are applying style to div with id #topmostheader and class .acceleration-logo not a child of class .acceleration-logo with parent of #topmostheader
Related
This is code for the div
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
and this is how it displays it
But if display is set as list-item it shows up,any other display won't work
I'm not sure what i messed up,and why height shows 0
height only works on block box, and display: list-item uses block box by default. I guess your original css may contain inline-type display and cause height not working. Here is an example to show the results in different cases:
.bar {
width: 110px;
height: 10px;
background: #ffff;
border-radius: 30px;
margin-top: -10px;
}
.display-block {
display: block;
}
.display-inline {
display: inline;
}
.display-list-item {
display: list-item;
}
<body style="background: #999;padding: 10px">
<div>Div (default display is "block")</div>
<div class="bar"></div>
<div>Span (default display is "inline")</div>
<span class="bar"></span>
<div>With "inline" display</div>
<div class="bar display-inline"></div>
<div>With "block" display</div>
<div class="bar display-block"></div>
<div>With "list-item" display</div>
<div class="bar display-list-item"></div>
</body>
Ref: MDN - Introduction to the CSS basic box model - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content_area
Another possible case is that there are other display, height or max-height settings in the current css hierarchy and override the original ones. You may check the css applied to the target div is what you want.
I am using slick slider and showing 3 slides, I would like to add specific styling on the center slide. by using nth-of-type but it seems to fail when I add .slick-active:nth-of-type(2) any ideas?
for example:
<div class="slickslider">
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-current slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
</div>
.slick-slide{
background: blue;
width: 20px;
height: 20px;
margin-bottom: 1px;
}
.slick-active{
background: green;
width: 20px;
height: 20px;
}
.slick-active:nth-of-type(2){
background: pink;
}
https://jsfiddle.net/pixelatorz/73scpych/2/
You can do it this way by playing process of elimination:
.slickslider .slick-active + .slick-active:nth-child(odd){
background: pink !important;
}
See demo
Basically, eliminate the first one with the + and next, eliminate the last one by choosing the odd child. Or first child would've worked too
EDIT
If you think there will be more than 3 active slides in the future and you want to make this more dependable, I suggest you wrap the active slides in a <span> and class it active-slides or something similar. Then. you will be able to select through them with nth-child without using .slickslider as a parent.
Is a stupid solution, but works:
.slick-slide:nth-of-type(6){
background: pink;
}
I'm doing some customizations to a shopify theme for a client, and I've included a simple snippet that is just a grid of three images with a description beneath each one. The containing div of each image/description set is floated.
It renders perfectly fine on every browser except IE, which is adding some several hundred pixels of space beneath the grid. When I comment out the images, and leave everything else, the space disappears. I've tried all sorts of things, and am really at a loss on this one.
Here's my code (I took out img src and hrefs to keep it clean):
<style>
.homePageGrid {
margin-top: 125px;
margin-bottom: 125px;
}
.homePageImageGrid {
float: left;
width: 33%;
box-sizing: border-box;
padding-left: 2%;
padding-right: 2%;
}
.homePageImageGrid img {
border-radius: 10px 10px 0px 0px;
width: 100%;
}
</style>
<div class="homePageGrid">
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Cook with xx
</div>
</div>
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Shop with xx
</div>
</div>
<div class="homePageImageGrid">
<img src = "#" width = "100%">
<div class = "homePageImageLinkBox">
Give with xx
</div>
</div>
<div style = "clear:both"></div>
</div>
I've inspected the website HTML Code and find out why there is huge vertical space. Its happened because in body element display:flex property are added which I don't think is required there.
Remove display:flex property from the body element and it will perfectly work in IE as well.
The following code is injected into the page via jQuery. I can't change that, but I can change the css:
<div id="slideshow-prevnext" class="slideshow-prevnext">
<a id="prev" class="left" href="#"><span class="invisible">Prev</span></a>
<a id="next" class="right" href="#"><span class="invisible">Next</span></a>
</div>
I want the three
appear on the left of and the two ("Prev" and "Next") on the right.
How can I do it? I tried float:left but does not work.
Edit: CSS is too long to post. Development site is here at : http://site2.ewart.library.ubc.ca/
The most basic answer:
a.left, a.right { float: right;}
a.dot { float: left;}
In addition, it looks like the stylesheet '/profiles/ubc_clf/themes/logie/style.css' line 37 is trumping your float:
#slideshow-prevnext .left {
background: url(http://site2.ewart.library.ubc.ca/profiles/ubc_clf/themes/logie/images/controller/controller_left_button_on.gif) no-repeat;
**float: left;**
height: 30px;
margin-top: 8px;
text-decoration: none;
width: 29px;
}
If that is to be on the right, it will need to read:
float: right;
In order to accomplish this, you'll need to provide a CSS style which is more specific than the #slideshow-next .left rule. For example, place this in the page <head> tag:
<style type="text/css">
#slideshow-prevnext .left, #slideshow-prevnext .right {
float: right;
}
</style>
Because the <style> tag on the page has a higher precedence than those loaded before it, the rule should override the float value.
I'm not particularly happy with this way of doing things - ideally you should just change the Javascript.
On #slideshow-prevnext add position: relative.
On #slideshow-prevnext .left and #slideshow-prevnext .right remove float: left and add position: absolute.
On #slideshow-prevnext .left add right: 29px and top: 0.
On #slideshow-prevnext .right add right: 0 and top: 0.
On #slideshow-prevnext a.dot add float: left.
It looks like this when you're done:
you can do it by this example.
<div class="wrapper">
<div style="float:left"> </div>
<div style="float:right;">Prev | Next</div>
<div style="clear:both;"></div>
</div>
i have used Inline Css. You can do it by classes or external Css also.
Without seeing your CSS it makes it hard to guess how you have this working.
Assuming left and right are css classes for floating left/right, just remove them and move the links down like so:
<div id="slideshow-prevnext" class="slideshow-prevnext">
<a id="prev" href="#"><span class="invisible">Prev</span></a>
<a id="next" href="#"><span class="invisible">Next</span></a>
</div>
You'll have to post your CSS if you want a better example.
If anyone can suggest a better place than stackoverflow for css questions please let me know.
I have an outer div with background and border and then I need to have two columns within the colored box. Some reason when I place the floating divs inside the outer div, the outer div does not grow.
Here is my HTML:
<div class="tip_box">
<h3>Send</h3>
<hr />
<form id="email_form">
<div class="three-columns">
<div class="contact_form_input">
<h6>Your Name</h6>
<input type="text" name="name_text_box" class="form_input" id="name_text_box" />
</div>
<div class="contact_form_input">
<h6>Your Email</h6>
<input type="text" name="email_text_box" class="form_input" id="email_text_box" />
</div>
</div>
<div class="three-columns">
<div class="contact_form_input">
<h6>Recipient Name</h6>
<input type="text" name="name_text_box" class="form_input" id="Text1" />
</div>
<div class="contact_form_input">
<h6>Recipient Email</h6>
<input type="text" name="email_text_box" class="form_input" id="Text2" />
</div>
</div>
</form>
</div>
<p>This is where your message will go. Anything you want, as long as you want. Make it personal; make the recipient know you care.</p>
Here is my CSS:
.three-columns {
width: 290px;
float: left;
margin-right: 45px;
}
.tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
background: #eff7d9 url(../images/icons/tip.png) no-repeat scroll 10px 15px;
border: 1px solid #b7db58;
color: #5d791b;
}
Screenshot:
http://dl.dropbox.com/u/2127038/cssissue.png
Non-float blocks containing float blocks will not automatically expand, since float blocks are taken outside the normal flow (or at least specially outside the flow). One way to correct that is to specify the overflow property to hidden or auto.
.tip-box { overflow: auto; }
See quirksmode for more.
Add following HTML after <div class="tip_box"></div>:
<div class="clear"></div>
Here is the CSS:
.clear{
clear:both;
}
It will surely work.
.tip_box { overflow:hidden; zoom:1; }
this establishes new block formatting context in ie7+ and other browsers, triggers haslayout in ie6 to contain floats
You're going to need what is commonly known as a clearfix. In this case a overflow: hidden on the containing element will do - see: http://www.jsfiddle.net/yijiang/zuNwH/2
.tip_box {
overflow: hidden;
}
As an aside, you might also want to use label elements instead of h6 to markup labels for your form elements, and use a list instead of individual divs for containing each label - input pair, and reduce the amount of class attribute you use by relying on more complex selectors for your CSS file.
<li>
<label for="recipient_email">Recipient Email</label>
<input type="text" name="email_text_box" id="recipient_email" />
</li>
In this case I wouldn't float the divs left, I would make them display: inline or inline-block.
Your 3 columns will turn into 2 columns, then 1 column if the browser window shrinks.