I know there are dozens of similar questions and some of them have helped me get to this point but I can't see any rhyme or reason to this error.
I've tagged an image with the id HeaderGradient and I'm trying to set it's size in the css file but it's not working. When I inspect the element in Firefox there is no mention of my css file. I'm using the Bootstrap framework. What am I doing wrong?
body {
#HeaderGradient {
width: 80%;
height: 141px;
}
}
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel-heading">
<img class="img-responsive" src="images/logo.png" id="Logo" alt="EP Logo">
<img class="img-responsive" src="images/header_gradient.png" id="HeaderGradient" alt="Gradient Image">
</div>
</div>
<div class="col-sm-4"></div>
</div>
You are using invalid CSS code for this, It should be
#HeaderGradient {
width: 80%;
height: 141px;
}
#HeaderGradient {
width: 80%;
height: 141px;
}
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="panel-heading">
<img class="img-responsive" src="images/logo.png" id="Logo" alt="EP Logo">
<img class="img-responsive" src="images/header_gradient.png" id="HeaderGradient" alt="Gradient Image">
</div>
</div>
<div class="col-sm-4"></div>
</div>
It's not a valid CSS syntax update the syntax as follows to get #HeaderGradient within body tag.
body #HeaderGradient{
width: 80%;
height: 141px;
}
You have the ID selector in the wrong place. Instead of:
body {
#HeaderGradient{
....
}
}
Move the selector outside:
body {
....
}
#HeaderGradient{
....
}
If you want to use that kind of CSS syntax you need to use a CSS preprocessor. Check out LESS or SASS
Related
I'm trying to build a website and to do so I followed this html code and this css code; this guy created a grid of 12 cool images with logos and animations, but they're not linkable. What I would like to do is to make them linkable and to do so I created this code but it's giving me weird stuff; any help please?
<div class="portfolio-items-wrapper">
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background" style="background-image:url(Immagini/Crypto.jpg)">
<img src="Immagini/Crypto.jpg">
</div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="Immagini/Logo/Bitcoin.png">
</div>
</div>
</div>
</div>
I'd suggest not making the images background images if you want to make them into links. Try this:
<div class="portfolio-img">
<img src="Immagini/Crypto.jpg">
</div>
And the CSS:
.portfolio-img {
height: 350px;
width: 100%;
}
Check this solution
.click-img {
position: relative;
display: block;
}
<a class="click-img" href="#" title="Clickable background image">
<img src="https://picsum.photos/seed/picsum/300/300" alt="Your Image">
</a>
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>
(bootstrap 3 and Laravel 5.1 framework)
I have 3 divs in a Boostrap row. Each div has an image and some text that is centered on that image. I would like all three DIVs to be side by side (vertically centered in the row) but I can't seem to achieve it. I have searched through a number of posts but mostly they are simple solutions and aren't working for the complexity I have with mine.
HTML
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols" style="float: left">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols" style="float: right">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
CSS
.wrap {
width: 152px;
height:auto;
vertical-align:middle;
margin: auto;
text-align:center;
position:relative; }
.clocktime {
position: absolute;
font-family: 'Nunito', sans-serif;
font-weight: 400;
margin: auto;
top: 0;
left:0;
right:0;
bottom:0;
color:#fff;
height:36px; }
.wrapcontrols {
width: 375px;
vertical-align:middle;
height: auto;
margin: auto;
text-align:center;
position:relative; }
Here is what it looks like currently
Here, I added appropriate classes that are required for the Bootstrap.I also removed your inline CSS. I would also remove some CSS styles for wrapcontrols and wrap divs.
<div class="container">
<div class="row"> <!--Timer and scoring of match -->
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/blackscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
<div class="wrap col-sm-4">
<img src="/img/clockbackground.png">
<h2 class="clocktime">03:00</h2>
</div>
<div class="wrapcontrols col-sm-4">
<img src="/img/leftminus.png">
<img src="/img/yellowscore.png">
<img src="/img/rightplus.png">
<h2 class="clocktime">5</h2>
</div>
</div>
THis is the correct Bootstrap Structure:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div><!--end row-->
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/
I want to set several div's in succession, but find it unnecessary to copy the code again and again. How it is possible for me to put 5 times the same div's behind the other in a more effective way than I've described here?
HTML:
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>
CSS:
.procduct {
margin: 5px;
padding: 5px;
height: 150px;
width: 150px;
border: 1px solid #F00;
float: left;
}
.image {
z-index: -1;
position: absolute;
}
.overlay {
padding-top: 65px;
padding-left: 17px;
display:none;
}
.procduct:hover .overlay {
display:block;
}
.procduct:hover .image {
opacity:0.00;
}
.clear {
clear: both;
}
http://jsfiddle.net/ghac101/hvpn4/
Unfortunately there is no way with vanilla HTML production to magically reduce the work required. You can, however, use a framework like HAML to reduce some of the repetitiveness.
For example, the code:
<div class='content'>Hello, World!</div>
in HAML, can become:
.content Hello, World!
It's not exactly what you're looking for, per se, but it is probably as close as you'll get. The bottom line is you can't cut corners with writing HTML this way. You could use another language like JavaScript or PHP to create or duplicate HTML elements as you need them, however.
There sure is:
<?php
$numberofdivs = 5;
for ($i=1;$i<$numberofdivs;$i++) {
echo '<div class="procduct">
<div class="image">
<img src="http://i.stack.imgur.com/rOVDt.jpg"/>
</div>
<div class="overlay"></div>
</div>';
}
?>
Hope this helps.