This is my HTML and CSS code.
HTML
<section id="content">
<article id="areaRegister">
<div class="row-fluid">
<div class="span6">
<?php include 'formulario.php'; ?>
</div>
<div class="span6">
<div class="contentBarcode">
<div class="codigoBarras">
<header><h4>Código de barras generado!</h4></header>
<canvas id="registerBarcode" width="230" height="100"></canvas>
</div>
</div>
</div>
</div>
</article>
<article id="areaSearch">
<div id="toEdit" class="row-fluid">
<div class="span6">
<?php include 'formulario.php'; ?>
</div>
<div class="span6">
<div class="contentBarcode">
<div class="codigoBarras">
<header><h4>Código de barras generado!</h4></header>
<canvas id="editBarcode" width="115" height="70"></canvas>
</div>
Guardar
</div>
</div>
</div>
</article>
</section>
CSS
.row-fluid .span6:nth-child(1) {
padding-left: 10%;
}
For example, with the css above: The first span6 the first "row-fluid" has left padding of 10%, but the first span6 the second "row-fluid" does not have it, what happens? If it is the same style.
Also does not work if I want the second span6 each "row-fluid" has margin-left: 0; alone puts the first "row-fluid" but the second does not.
Other issue is when I try to apply any style to the first span6 of #toEdit:
#toEdit div:first-child{
padding-left: 10%;
}
It's supposed to apply to the first span6 but observing the code in the development tool of chrome and firefox, I realize that the top style applies to :/
FIXED
The problem was: With JS prepend a H3 to second "row-fluid" and bootstrap doesn't allow put any element between "row-fluid" div and "spanN" div
FIXED
The problem was: With JS prepend a H3 to second "row-fluid" and bootstrap doesn't allow put any element between "row-fluid" div and "spanN" div
Thanks anyway to #Miljan Puzović
Related
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 6 months ago.
So i have a div with 2 columns and images in both of them,and i want only the first image to have a margin.
HTML code:
<div class="column">
<div class="center">
<img src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img src="assets/images/images/sliced-2.png">
</div>
</div>
CSS portion:
div.center img:first-child{
margin-left:100px;
}
The only problem is,the first child selector isn't working as intended and styles both of my images and give them a margin...How do i Fix this?
You css isn't working because both of your img elements are the first child inside of their parent.
What you maybe want is to add a margin to the image inside of the first column.
Something like
.column:first-child img {
margin-left: 100px;
}
Without seeing the rest of your html i cannot know if this will work correctly. It will only work if the first column is indeed the first child inside its parent.
Another solution would be for you to add classes to your images, something like
<div class="column">
<div class="center">
<img class="image image--with-margin" src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img class="image" src="assets/images/images/sliced-2.png">
</div>
</div>
and then
.image--with-margin {
margin-left: 100px;
}
you can wrap the columns in a container div and target only the first column
html:
<div class="container">
<div class="column">
<div class="center">
<img src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img src="assets/images/images/sliced-2.png">
</div>
</div>
</div>
and css:
.container .column:first-of-type img {
margin-left: 100px;
}
I tried the following html code (an example from w3schools site):
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;margin-top:20px">
Copyright © W3Schools.com
</div>
</div>
</body>
</html>
And this is the output:
I need to add a space between the sections #footer and #content, and as you can see I tried using the margin-top attribute, but any value I use (in my example 20px) does not change the result: there is no space between the two sections.
How can I solve this problem?
Another reason why floats suck as much as they rock.
You can add an empty div in between the footer and the content like...
//content html
<div style='clear:both;'></div>
//footer html
http://jsfiddle.net/rK5zV/1/
Or you can make the footer a float also with a width of 100% like...
http://jsfiddle.net/7KZy9/
Other solutions can be found here...
Why top margin of html element is ignored after floated element?
You can add to content margin-bottom:20px;
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;margin-bottom: 20px;">
You can place all your elements apart from the footer in a wrapper that has margin-bottom: 20px:
<body>
<div id="container" style="width:500px">
<div id="wrapper" style="margin-bottom: 20px; border: 1px solid black; width: 100%; float: left;">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
Here is a jsFiddle that demonstrates the behavior.
I gave your footer relative positioning and used the top attribute
Here is a working DEMO
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here
</div>
<div id="footer" style="background-color:#FFA500;clear:left;text-align:center;position:relative;top:20px">
Copyright © W3Schools.com
</div>
</div>
Try making footer display: inline-block; width: 100%. It's not ideal, but it works.
After two blocks with styles float you should to use element with style cler:both;
You code view like this
<div id="content">
...
</div>
<div style="clear:both;"></div>
<div id="footer">
...
</div>
I am trying to select every other div with a class name. the issue is there are all in different parent div's. I've tried many things with sibling selection but have not yet found a solution. This is what I am looking for:
Add a margin of 30px to ever even div with the class name article
<div class="wrapper">
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
</div>
I tried something like this but did not work:
.section > .article:nth-child(even){
margin-right: 30px;
}
Rather than select the even/odd .article elements, you need to select the even/odd .section elements.
.section:nth-child(even) > .article
{
/* Your css here */
}
Fiddle: http://jsfiddle.net/jakelauer/4PMbS/
I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>
I downloaded the twitter bootstrap, then customized the starter-template.html file with the following very basic code:
<body>
<div class="container">
<div class="row">
<div class="span8 outsidecontainer"> ... </div>
<div class="span4 outsidecontainer"> ... </div>
</div>
</div>
</body>
So far so good. It shows up fine and the widths are OK too. As you notice, I tried adding an "outsidecontainer" style to bootstrap.css, at the very bottom, which is:
.outsidecontainer{
padding:5px;
background:#f2f2f2;
border-color:#cfcfcf;
border-width:0px;
border-style:solid;
border-radius: 5px;
}
For some reason, this styling doesn't show up though. What am I doing wrong? Something tells me it's at the very code level, not the CSS, because not even the background color changes.
You've added extra padding, which will result in the spanX divs no longer fitting inside the row.
Try this instead...
<body>
<div class="container">
<div class="row">
<div class="span8"><div class="outsidecontainer">...</div></div>
<div class="span4"><div class="outsidecontainer">...</div></div>
</div>
</div>
</body>