I am trying to achieve this
the way I see it and would be tempted to do it is the following
but this is a lot of div and css
<div class="route-information-container">
<div class="route-information-container__header">
<div class="route-information-container__name">DRONE ID ID </div>
<div class="route-information-container__battery"><mat-icon svgIcon="battery-90"></mat-icon></div>
</div>
<div class="route-information-container__drone-info">
<img class="route-information-container__drone-logo" src="./assets/images/drones/drone_front.jpg" />
<div class="route-information-container__drone-name">DroneID</div>
<div class="route-information-container__drone-camera">CameraID</div>
</div>
</div>
most of my HTML structure are always similar to this. I tend to put boxes everywhere, and I was wondering, is this a bad practice? what would be another way of doing it ?
As per the standard practice the structure is perfect.
You can also achieve the above structure using the below Code:
https://jsfiddle.net/ulric_469/m5dvx2q7/7/
<div class="route-information-container__header">
<div class="route-information-container__name">DRONE ID ID </div>
<div class="route-information-container__battery">
<mat-icon svgIcon="<battery-></battery->90">Right Section</mat-icon>
</div>
</div>
<img class="route-information-container__drone-logo" src="./assets/images/drones/drone_front.jpg" width="50px"/>
<div class= "bottom-section">
<div class="route-information-container__drone-name">DroneID</div>
<div class="route-information-container__drone-camera">CameraID</div>
</div>
.route-information-container__header {
display: flex;
border: 1px solid black;
justify-content: space-between;
}
.bottom-section {
display: inline-block;
vertical-align: top;
}
Your structure is not incorrect and there will never be a problem.
But you can use css selectors to make clean structure in your html tags.
For example you can use this in your css file :
.route-information-container div:first-child {text-decoration: underline;}
.route-information-container div:last-child {color: red;}
Related
I want to make boxes for those images, not for the entire row.
I've tried putting div tag with a class named caja-img, which contains a specific width.
HTML
<div class="col-md">
<div class="contenido">
<div class="caja-img">
<img src="img/icon1.png" alt="Autogestion">
</div>
<h3 class='text-center'>Facil y seguro!</h3>
</div>
</div>
CSS
.caja-img {
background-color: red;
}
Instead of coloring all the row, i just want to color the image.
You can style all <img> tags in your <div>. The CSS would look like this:
.caja-img img{
background-color: red;
}
What this is doing is styling all of the img elements inside of .caja-img.
You can set the element with the class .caja-img to display: inline-block.
See the code example below:
.caja-img {
background-color: red;
display: inline-block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md">
<div class="contenido">
<div class="caja-img">
<img src="img/icon1.png" alt="Autogestion">
</div>
<h3 class='text-center'>Facil y seguro!</h3>
</div>
</div>
I'm trying to center an img in a div without success and I have tried many CSS hacks. I'm missing something and I have no idea what I'm doing wrong.
Markup
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
</div>
CSS
.img-guarantee img{
display: inline-block;
margin: 0 auto;
}
First of all, using a column outside a row is not advised whatsoever. I take it that you use Bootstrap so it's only appropriate to use a column within a row.
Secondly, you can create another class by the name .text-center, add the CSS rule: text-align: center; and finally add the newly created class to the parent element which in this case is <div class="col-md-4">
This is the final result: https://jsfiddle.net/ydeeLLrd/1/ (including a fix to the first issue)
This should work:
.img-guarantee img{
margin: 0 auto;
}
.img-guarantee {
text-align: center;
}
<div class="col-md-6">
<div class="row">
<div class="col-md-4" >
<div class="img-guarantee">
<img src='img/clock.png' class='img-responsive'>
</div>
</div>
</div>
I'm pretty new to HTML and CSS so perhaps this is a crazy easy question to answer.
The question is:
How to do this using only divs and css?
I don't want to use <table> <tr> <th> <td>....
Here's a basic setup of what you're asking using the flexbox property.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Read more about it at MDN and experiment with it so you feel comfortable using it. The setup might not be pixel perfect, but it gives you a good start for the desired layout. Trial and error, that's the best way to learn.
div {
box-sizing: border-box;
border: 1px solid black;
min-height: 20px;
}
.container {
display: flex;
flex-flow: row-wrap;
width: 100%;
}
.column {
flex: 1 1 100%;
}
.middle {
flex-basis: 200%;
}
.middle-top,
.right-top,
.right-bottom {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.language,
.search,
.login,
.signup,
.some-text,
.avatar {
flex: 1 1 50%;
}
<div class="container">
<div class="column left">
<div class="social">
Social icons
</div>
<div class="logo">
Logo
</div>
</div>
<div class="column middle">
<div class="middle-top">
<div class="language">
Language
</div>
<div class="search">
Search
</div>
</div>
<div class="slogan">
Slogan
</div>
<div class="menu">
Menu
</div>
</div>
<div class="column right">
<div class="right-top">
<div class="login">
Login
</div>
<div class="signup">
Signup
</div>
</div>
<div class="right-middle">
Welcome guest
</div>
<div class="right-bottom">
<div class="some-text">
<div class="something">
Some text
</div>
<div class="something">
Some text
</div>
</div>
<div class="avatar">
Avatar
</div>
</div>
</div>
</div>
I'd like to have all surnames on the second line AND maintain the exact same width for test div. What is the best way of achieving this with CSS?
HTML:
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
CSS:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
http://jsfiddle.net/zcg9k5xh/
Update your code with this:
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
h1 span{display: block;}
<div class="test">
<h1>Mike <span>S</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smith</span></h1>
</div>
<div class="test">
<h1>Mike <span>Smiths</span></h1>
</div>
You can also do this by using css, update above css
h1 span{display: list-item;list-style:none;}
jsfiddle with this
http://jsfiddle.net/zcg9k5xh/2/
Given that it seems you are willing to change your HTML, I would recommend you simply add <br> after the first name, instead of wrapping the last name in any other tags. This would be deemed best practice.
The HTML <br> Element (or HTML Line Break Element) produces a line
break in text
This will give more semantic HTML- without the need to adjust native element styling, or clutter your DOM with uneccessary nodes.
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
text-align: center
}
<div class="test">
<h1>Mike<br>S</h1>
</div>
<div class="test">
<h1>Mike<br>Smith</h1>
</div>
<div class="test">
<h1>Mike<br>Smiths</h1>
</div>
Use the word-spacing attribute to the child tag:
.test {
width: 25%;
float: left;
background: red;
margin-right: 20px
}
h1 {
background-color: blue;
word-spacing: 100px;
}
<div class="test">
<h1>Mike S</h1>
</div>
<div class="test">
<h1>Mike Smith</h1>
</div>
<div class="test">
<h1>Mike Smiths</h1>
</div>
I don't see what you are asking, it seems like the jsfiddle is what you are asking here.
But you can always set width to 100% so it cover for the text, if you want all that text in the same div then put it all under one Div tag.
Is this what you want?
.test {width:25%;float:left;background:red;margin-right:20px}
h1 {text-align:center}
<div class="test">
<h1>Mike</h1>
<h1>S</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smith</h1>
</div>
<div class="test">
<h1>Mike</h1>
<h1>Smiths</h1>
</div>
I have the simple table generated by js and I'd like to change some properties of columns and rows like background color, width statically. I can extend the row and col classes directly in CSS file or do it in html.
Example (CSS approach):
HTML:
<div class="table">
<div class="row">
<div class="col">
<div class="row">
<div class="foo"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
CSS:
...
.col, .foo {
display: table-row;
height: 20px; }
.foo { background: red; width: 100px; }
...
Example (html approach):
HTML:
<div class="table">
<div class="row">
<div class="col">
<div class="row">
<div class="col foo"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
CSS:
...
.col {
display: table-row;
height: 20px; }
.foo { background: red; width: 100px; }
...
In my opinion the second approach is more convenient for dynamically changing elements rather then static ones. However the first one obscures the structure of the html which can cause some problems with understanding the javascript. My question is which approach would be better in this case?