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>
Related
my left sidebar has no structure and I want it to be like a menu with a background color. I also have no idea how to make the changes in CSS so I can change the width and height...etc
here is the code for the sidebar
<div class="sidebar">
<nav>
<h1>Menu</h1>
<ul>
<li><strong>Home</strong></li>
<li><strong>Workshop </strong></li>
<li><strong>Team </strong></li>
<li><strong>Resources </strong></li>
<li><strong>Publication </strong></li>
<li><strong>Opportunities </strong></li>
</div><!-- /sidebar -->
CSS syntax can be called for in three ways.
Internal CSS: <style> tags, which must be underneath a <head> element that precede your <body>.
External CSS: Linking external CSS with just the CSS syntax, void of any HTML tags. You connect the two documents with a <link> tag using the href attribute
Block-level/Inline elements: CSS can be placed inside of block-level elements and inline elements (a list of which appear here)
Here is how to color your sidebar's background using the first method:
<head>
<style>
.sidebar {
background-color: gray;
}
</style>
</head>
And here's one way to add containers/boxes around your sidebar using the first method:
<head>
<style>
.box {
background-color: #eee;
margin-top: 5px;
padding: 10px;
text-align: center;
}
.sidebar {
display: block;
width: 150px;
font-family: Arial, sans-serif;
}
.row:after {
clear: both;
content: "";
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="sidebar">
<div class="box">
<strong>Home</strong>
</div>
<div class="box">
<strong>Workshop</strong>
</div>
<div class="box">
<strong>Team</strong>
</div>
<div class="box">
<strong>Resources </strong>
</div>
<div class="box">
<strong>Publication</strong>
</div>
<div class="box">
<strong>Opportunities</strong>
</div>
</div>
</div>
</body>
I'm not sure if this is exactly what you're looking for, but you can change the font, margins, and padding underneath the <style> tag however you want.
Also, I would suggest going through w3school's CSS introduction just to familiarize yourself with how it all works. Another tip: Make sure all of your starting tags have the necessary end tags! For example, in the code you wrote a closing </ul> and </nav> are missing.
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;}
I have header in such a way that I would like to hide my image and span's in my pheader div if "banner" exists. Is there a quick way to do this using CSS selectors? Below is the HTML code.
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="../images/defaultHeadshot_lg.png" class="userimg">
<!-- Hide This -->
<span class="caret" id="down-arrow"></span>
<span class="hey-user d2c-header-username"><b>Hello</span>
</div>
</header>
Yes.
#banner + .pheader img,
#banner + .pheader span {
display:none;
}
This selector only applies if .pheader is directly after #banner.
You might find this Tutsplus article useful:
The 30 CSS Selectors You Must Memorize
.pheader {
padding: 1em;
background: lightblue;
}
#banner + .pheader img,
#banner + .pheader span {
display: none;
}
<header>
<div id="banner">
<!-- main content -->
</div>
<div class="pheader">
<div class="user-panel">
<div id="hey-user" class="d2c-user-panel">
<img src="http://lorempixel.com/output/animals-q-c-100-100-3.jpg" class="userimg" />
<span class="caret" id="down-arrow">Arrow</span>
<span class="hey-user d2c-header-username"><b>Hello</b></span>
</div>
</div>
</div>
</header>
It's probably worth noting that I've had to close a few divs in your original HTML structure which were missing from your code.
Try this. Link https://jsfiddle.net/7bv53xqd/
#banner + .pheader img {
display: none;
}
#banner + .pheader span {
display: none;
}
Here is what my print page look like,
Here is my html glimpse,
<style>
.container{
float: left;
border: 1px solid Black;
width: 400px;
height: 350px;
margin: 10px;
padding: 10px;
page-break-inside: avoid;
}
.container img{
max-width: 200px;
max-height: 200px;
}
</style>
<div class="container">
<b>Name: </b>#Product.Name<br />
<b>Model: </b>#Product.ModelNumber<br />
<img src="#Product.ImagePath" /><br />
<span style="font-size: 20px">DetailedDescriptions</span><br />
#foreach(var attr in Product.DetailedDescriptions){
#attr.Header<br />
}
<span style="font-size: 20px">KeyAttributes</span><br />
#foreach(var attr in Product.KeyAttributes){
#attr.Name<br />
#attr.Value<br />
}
</div>
How to make sure that the page break after every 6 divs using css
You should encapsulate your divs and create a better structure of this type in HTML:
<body>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
</div>
<div class="container-holder">
<div class="container-row">
<div class="container"></div>
<div class="container"></div>
</div>
<!-- keep adding more container-rows -->
</div>
</body>
Then in CSS take several things into account:
let body take up whole page
use page-break-inside: avoid;
give specific width and height in pixels to divs
containers should have the display: inline-block and vertical-align: bottom;
container-holders should have display:block property
[bonus] avoid inline style
Here is a working jsFiddle
I have tried it outside of jsFiddle and I get this result:
You can use
div:nth-of-type(6n) {
page-break-after:always;
}
to insert a page-break after each 6. div, but I think this will not work with floats.
You could do it this way:
FIDDLE
.wrapper div:nth-child(6n)
{
margin-bottom: 300px;
}
Which means: after every 6 containers - add a bottom margin of x px (how ever much you need) so that it pushes the next boxes to the next page.
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>