I really can't get why, somehow margin-left is just affecting other elements, which is very annoying.
code and pics are included below:
CSS
.setting-container {
position: relative;
top: 60px;
left: 0px;
width: 100%;
height: calc(100% - 60px);
}
.setting-topnav {
width: 100%;
height: 40px;
left: 0px;
background-color: #081723;
}
.setting-topnav a {
font-size: 12px;
font-family: NanumGothic;
color: #fafafa;
vertical-align: middle;
line-height: 40px;
margin-left: 43px;
text-decoration: none;
}
.setting-title {
width: 100%;
height: 40px;
left: 0px;
}
.setting-title a {
font-size: 28px;
font-family: NanumGothic;
color: #fafafa;
vertical-align: middle;
line-height: 40px;
margin-left: 43px;
text-decoration: none;
}
HTML
<div id="navbar_template"></div>
<div class="setting-container">
<div class="setting-topnav">
<a>Setting / Basic Configuration<a>
</div>
<div class="setting-title">
<a>Basic Configuration<a>
</div>
</div>
sorry I don't have reputation..
IMAGE: http://i.imgur.com/jBtfeCl.jpg
Close your a tags:
<div id="navbar_template"></div>
<div class="setting-container">
<div class="setting-topnav">
<a>Setting / Basic Configuration</a>
</div>
<div class="setting-title">
<a>Basic Configuration</a>
</div>
</div>
Related
So basically my problem is when I zoom in-out of the page, some DIVs move out from their position which causes my layout to break. I used the position relative and absolute properties as well as used % instead px as my units in positioning. I've gone through some articles saying that it's not favorable to use position absolute and that this was an expected behavior but I couldn't seem to find an answer to my question. I also tried find a way to do it using CSS Flexbox but i couldn't find a direct answer to my problem.
My expected layout should be something like https://snipboard.io/Mr8sNv.jpg but as I said before, it breaks when zooming in/out.
Here is my HTML.
<div class="Container">
<div class="background">
<div class="Space"></div>
<p class="Branding_Design">BRANDING & DESIGN</p>
<div class="Project_One">Project One</div>
<div class="SliderBOX"></div>
<div style="position:absolute; right: 8%; top: 59%;">
<div class="ProjectDetailsContainer">
<p class="Project_Details">PROJECT DETAILS</p>
</div>
</div>
<div style="position:absolute; right: 12%; top: 62.5%;">
<div class="ViewSlidesContainer">
<p class="View_Slides">VIEW SLIDES</p>
</div>
</div>
</div>
</div>
Here is my CSS
.Container {
width: 100%;
position: relative;
height: 721px;
}
.background {
background: black;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
}
.Space {
width: 1000px;
height: 100px;
background: red;
position: relative;
z-index: -1;
}
.SliderBOX{
height: 525px;
width: 50%;
background: yellow;
margin: 0 auto;
}
.Branding_Design {
font-size: 10px;
font-weight: 500;
font-family: 'Open Sans';
color: #f7ac53;
letter-spacing: 0.5px;
position: absolute;
top: 39%;
left: 12%;
}
.Project_One {
color: white;
font-family: "Merriweather";
font-size: 39px;
font-weight: 300;
position: absolute;
top: 45%;
left: 14%;
z-index: 1;
}
.ProjectDetailsContainer {
position: relative;
}
.Project_Details {
color: white;
font-family: 'Open Sans';
font-weight: 400;
font-size: 11px;
}
.ViewSlidesContainer {
position: relative;
}
.View_Slides {
color: white;
font-family: 'Open Sans';
font-weight: 400;
font-size: 11px;
}
I also included my code in jsfiddle in order to make it easier to go through my code
https://jsfiddle.net/wa3bLx1h/22/
What am I doing wrong?
I think believe the code below, is what you're looking for correct? Flex-box would the solution to remedy this problem. I would suggest just go thru MDN tutorials and mess around with each properties of flex-box. Your problem helped me understand Parent and Child containers better now.
<div class="container">
<div class="background">
<div class="space"></div>
<div class="textCon1">
<div class="p-text-1">
<p class="brandingDesign"> BRANDING & DESIGN</p>
</div>
<div class="p-text-2">
<p class="projectOne">Project One</p>
</div>
</div>
<div class="sliderBox"></div>
<div class="projectDetailContainer">
<div class="p-text-3">
<p class="projectDetails"> PROJECT DETAILS</p>
</div>
<div class="viewSlideContainer">
<p class="viewSlides">VIEW SLIDES</p>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.container {
height: 721px;
width: 100%;
}
.background {
height: 100%;
width: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
}
.sliderBox {
height: 525px;
width: 50%;
display: flex;
background: yellow;
}
.textCon1 {
display: flex;
flex-direction: column;
margin-right: 10px;
}
.brandingDesign {
font-size: 10px;
font-weight: 500;
font-family: "Open Sans";
color: #f7ac53;
letter-spacing: 0.5px;
margin-right: 100px;
padding: 5px;
}
.projectOne {
color: white;
font-family: "Merriweather";
font-size: 39px;
font-weight: 300;
margin-left: 50px;
padding: 5px;
}
.projectDetailContainer {
display: flex;
flex-direction: column;
margin-top: 200px;
margin-left: 100px;
}
.projectDetails {
color: white;
font-family: "Open Sans";
font-weight: 400;
font-size: 11px;
margin-left: 50px;
padding: 10px;
}
.viewSlides {
color: white;
font-family: "Open Sans";
font-weight: 400;
font-size: 11px;
padding: 5px;
}
I have 4 posts in my HTML page, they look same except the text content and images and colors of text and background, in the image below you will find the result that i want:
my question is how can i style every post without creating class css for every post i want just change colors
this i my code
.art-content {
position: relative;
}
.art-content img {
width: 100%;
}
.main-content article {
margin-top: 15px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.main-content article:nth-child(2n) {
padding-left: 0px;
}
.main-content article:nth-child(2n+1) {
padding-left: 15px;
padding-right: 0px;
}
.rect-date-even {
position: absolute;
display: block;
background-color: #c2022a;
width: 75px;
height: 77px;
top: 0;
left: 0;
text-align: center;
padding: 9px 6px 15px 4px;
}
.rect-date-even span {
font-family: 'Quicksand';
font-size: 20px;
color: white;
padding-bottom: -10px;
}
.rect-info-art {
position: relative;
width: 100%;
height: 105px;
background-color: #dcdcdc;
}
.rect-cat {
position: absolute;
width: 120px;
height: 18px;
background-color: #c2022a;
color: white;
font-family: 'Quicksand';
font-size: 12px;
padding-left: 3px;
top: 10px;
left: 25px;
}
.rect-info-art p {
position: absolute;
font-style: italic;
font-size: 18px;
max-height: 10px;
padding-right: 50px;
top: 30px;
left: 25px;
}
.rect-info-art a {
position: absolute;
color: #c2022a;
font-size: 14px;
text-align: center;
top: 70px;
right: 20px;
}
<section class="col-md-8 col-lg-8 main-content">
<div class="title-section-bg">
<img src="assets/img/ombre-title-section.png">
<div></div>
<span class="icon-megaphone"></span>
<h2>Prochainement a Rabat</h2>
</div>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
détails <span class="icon-circle-plus"></span>
</div>
</article>
<article class="col-md-6 col-lg-6 art-content">
<img src="assets/img/IMG-even1.png">
<div class="rect-date-even">
<span>03</span>
<span>AVR</span>
</div>
<div class="rect-info-art">
<div class="rect-cat">Musique du monde</div>
<p>Rihanna en concert à Mawazine 2015</p>
détails <span class="icon-circle-plus"></span>
</div>
</article>
</section>
thanks for helping
Use the :nth-of-type(n) pseudo selector to style them individually.
div {
width: 100px;
height: 100px;
margin: 5px;
}
div:nth-of-type(1) p {
background-color: red;
}
div:nth-of-type(2) p {
background-color: blue;
}
div:nth-of-type(3) p {
background-color: yellow;
}
div:nth-of-type(4) p {
background-color: green;
}
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
<div><p>hello</p></div>
Use e.g.
article:nth-of-type(1) .rect-date-even {
background-color: green;
}
This selects all elements with the class rect-date-even that are descendants to any article that is the first article inside its parent element.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
nth-child (which you have tried) does not take into account element name (or class or whatever) - all it ever asks is
Am I the nth-child of my parent (regardless of element name, class, id, attributes whatever)?
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
I am learning HTML,CSS and JAVAScript and I recently wrote a very simple code. It showed everything and was working fine until I added the div class "mainLeft". After that it doesn't show anything except for the code before that class. Can you kindly assist?
Below is the HTML and CSS code;
CSS Code
**CSS Code**
body {
background-color: white;
}
.main h1 {
font-family: Candara;
text-align: center;
color: white;
}
.main {
display: table;
height: 50px;
width: 600px;
margin-left: auto;
margin-right: auto;
background-color: #13b5ea;
}
.SME {
display: table;
position: absolute;
width: 250px;
height: 250px;
left: 50%;
top: 50%;
margin-left: -125px;
margin-top: -125px;
color: #13b5ea;
}
.SME h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.DataAnalysis {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 28%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.DataAnalysis h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.ProdMonitor {
display: table;
position: absolute;
width: 200px;
height: 200px;
left: 38.3%;
top: 72%;
margin-left: -100px;
margin-top: -100px;
color: #13b5ea;
}
.ProdMonitor h4 {
font-size: 30px;
color: white;
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: Candara;
}
.mainLeft h1 {
font-family: Candara;
text-align: center;
color: white;
}
.mainLeft {
display: table;
height: 50px;
width: 600px;
margin-right: auto;
background-color: #13b5ea;
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="satmap.css" />
<title>My Home</title>
</head>
<body>
<!--Go bananas!-->
<div class="main">
<h1> XYZ</h1>
</div>
<div class="mainLeft">
<h1> Current Stats </h1>
</div>
<div class="SME">
<h4> My Explorer </h4>
</div>
<div class="DataAnalysis">
<h4> Data Analysis </h4>
</div>
<div class="ProdMonitor">
<h4> Production Monitoring </h4>
</div>
</body>
</html>
first of all, I don't see any div with the class 'mainLeft'. You only have texts in those divs so the reason you can't see anything is because you have this css on your h definitions.
color: white;
Thank you Everyone. I solved it.
I had forgottent to add background-color attribute in CSS.
When use auto height with float its not work but when remove float its work fine. how can fix it ?
there is DIV with auto height (aboutus) ,inside it is another div (aboutus-title p) with float left but the content is overflow how can all content inside div with auto height ?
http://jsfiddle.net/haeb0q8d/1/
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1{
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p{
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div><h1>about</h1></div>
<hr>
<div class="aboutus-detail">
<p>
We are a tight knit team of digital thinkers, designers and<br>
developers, working together to create fresh, effective projects<br> delivered personally.
</p>
</div>
</div>
</div>
You have to clear float with clear: both.
.aboutus {
position: relative;
z-index: 2;
width: 100%;
height: auto;
background: #333333;
}
.aboutus-title div h1 {
text-align: center;
text-transform: uppercase;
font-size: 24px;
padding-top: 80px;
color: #fcd803;
}
.aboutus-title hr {
margin: 0 auto;
border: 0;
height: 1px;
background: #333;
margin-top: 30px;
width: 60px;
}
.aboutus-detail {
width: 100%;
}
.aboutus-detail p {
text-align: center;
color: #fcd803;
line-height: 25px;
font-size: 17px;
margin-bottom: 30px;
padding-right: 30px;
padding-left: 30px;
float: left;
}
.clear {
clear: both;
}
<div class="aboutus" id="aboutus">
<div class="aboutus-title">
<div>
<h1>about</h1>
</div>
<hr>
<div class="aboutus-detail">
<p>We are a tight knit team of digital thinkers, designers and
<br>developers, working together to create fresh, effective projects
<br>delivered personally.</p>
</div>
</div>
<div class="clear"></div>
</div>
I have the following code:
<div id="conteudo">
<img id="logo" height="137" width="327" />
<div id="data_hora">
</div>
<div id="nome_patio">
<div id="cor_patio"></div> #NOME_PATIO#
</div>
</div>
css:
body
{
background-color: #000000;
margin: 0;
padding: 0;
font-family:Arial;
}
#conteudo
{
height: 100%;
width: 100%;
}
#data_hora
{
float: right;
font-size: 50px;
color: #E0E428;
margin-top: -90px;
margin-right: 40px;
}
#nome_patio
{
text-align: center;
font-size: 80px;
color: #E0E428;
width: 100%;
font-weight: bold;
}
#cor_patio
{
border: solid 1px #FFFFFF;
height: 10px !important;
width: 80px;
background-color: #E0E428;
margin-right: 20px;
}
So, i'm trying to change the div cor_patio height, but nothing happens... why?
OBS: when i remove font-size from nome_patio, it works fine.
try to set position:absolute; to home_patio, if it doesn't work, also set to cor_patio.
Set position:relative; to #nome_patio and position:absolute; to #cor_patio;
Hope it help.
You need to set your height on #nome_patio to 100%.
Working example: http://jsfiddle.net/aYnyk/
I solve the solution with this:
<div id="patio">
<span id="cor_patio"></span><span id="nome_patio">#NOME_PATIO#</span>
</div>
css:
#patio
{
text-align: center;
width: 100%;
}
#cor_patio
{
height: 63px;
width: 63px;
background-color: #E0E428;
margin-right: 30px;
}
#nome_patio
{
font-size: 80px;
color: #E0E428;
font-weight: bold;
}