First, here's an example I'm trying to achieve:
Here's the code I'm using to achieve that
HTML:
<div class="card demo-card-header-pic" style="margin:15px;">
<div style="background-image:url(https://pbs.twimg.com/profile_banners/6253282/1431474710/web_retina)" valign="bottom" class="card-header color-white no-border"></div>
<div class="avatar">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_bigger.png" style="border-radius:50px;">
</div>
<div class="card-content">
<div class="card-content-inner">
<div>
<p><b>****</b> wants to know what you think of him!</p>
</div>
<div>
<span class="text-muted" style="float:left;">Asked two days ago</span>
<span style="float:right;" class="text-muted"> 5 comments</span>
</div>
</div>
</div>
<div class="card-footer">Footer</div>
</div>
CSS:
.demo-card-header-pic .card-header
{
height: 40vw;
background-size: cover;
background-position: center;
}
.avatar
{
border-radius: 50px;
}
.card > .avatar
{
position: relative;
top: -40px;
left:5px;
}
.text-muted {
color: #777;
}
My question is how do I get rid of all the white space that is between the header of the card and the text? I tried using position:absolutebut that would mess up anytime the display was changed, even when using percentages.
A quick solution would be to give .card-content a negative margin-top value. I do agree that it's not the most elegant solution, but it get's the job done. Also adding a clear:both to the footer will prevent the overlay of both DIVs that you have at the moment
CSS:
.card-content{
margin-top: -40px;
}
.card-footer{
clear: both;
}
just remove margin form your main div and also if you want to remove body default white space then use following css on body
body{
margin:0;
padding:0;
}
Related
For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
I have an <h3> element which I need to keep at width:100% so it remains clickable from JavaScript I have, but at the same time, I need the description to be positioned on the right side of the title in one line instead of the next line which usually works fine with display:inline-block, but not while the title keeps 100% width, obviously pushing to a new line.
h3.main.title {
width:100%
}
.main.title {
display:inline-block
}
.description {
display:inline-block
}
<div class="header">
<h3 class="main title">Category</h3>
<div class="description">
<p>Description</p>
</div>
</div>
https://jsfiddle.net/kk5he25q/
Any way I can achieve this?
If you really need to keep h3 at 100%, you can set the position of the description as absolute (don't forget to make the position of the parent div relative). However, keep in mind that h3 and description may overlap. See your updated jsfiddle here: https://jsfiddle.net/kk5he25q/1/
h3.main.title{width:100%; position:relative;}
.main.title {display:block;}
.description{display:block; position:absolute;right:10px; top:7px}
You could use float.
h3.main.title {
width: 100%;
}
.description {
float: right;
margin: 0;
}
<div class="header">
<p class="description">Description</p>
<h3 class="main title">Category</h3>
</div>
Something like this ?
*{
margin:0;padding:0;
}
.header {
display: flex;
}
h3 {
flex: 1;
border: 1px solid;
text-align: center;
padding:15px;
}
.description {
padding:15px;
border: 1px solid;
}
<div class="header">
<h3 class="main title">Category</h3>
<div class="description">
<p>Description</p>
</div>
</div>
I am trying to color in an element in HTML with CSS but I want the color to be a certain size, relative to the text.
I want the color to be about 1/2 as tall as the text and slightly longer. Any way I try to do this messes up the layout and moves elements around.
HTML
<div class="no-left-padding col-lg-4 col-md-4 col-sm-6">
<div class="colored">
<h1 class="blog-title">{{ site.title }}</h1>
</div>
<h2 class="blog-desc">{{ site.description }}</h2>
</div>
CSS
.colored {
opacity: 0.8;
height:25px;
width: 300px;
margin-top: 10px;
background-color: rgba(255,218,50,0.4);
}
My problem is the bottom <h2> is being moved up under the top <h1>. I know that this is because the <div> I am encasing the <h1> in is having its height decreased, but I don't know how else to achieve the effect I want.
Here is a diagram to help you understand what I want:
Think this will give you the effect your looking for, you can add the background colour to a <span> and position that absolute inside the heading.
html:
<div>
<h1 class="blog-title">{{ site.title }}
<span class="colored"></span></h1>
</div>
css:
.blog-title{
position: relative;
}
.colored {
opacity: 0.8;
height:25px;
width: 300px;
position:absolute;
left:0;
margin-top: 10px;
background-color: rgba(255,218,50,0.4);
}
Second question
Need to make some changes to get this to work. Move the span from outside to inside the <a href></a>then apply the position:relative to the by adding a class. See the updated code below.
html:
<div>
<h1 class="blog-title">greagaregare<span class="colored"></span>
</h1>
</div>
<div>
<h1 class="blog-title">aergae<span class="colored"></span></h1>
</div>
css:
.color-container{
position: relative;
}
.colored {
opacity: 0.8;
height:22%;
width: 100%;
position:absolute;
left:0;
margin-top: 10px;
background-color: rgba(255,218,50,1);
}
I have two divs:
content2 which has my background color and has a height:auto and width:100%
and another div inside content2 called extensive_look
The latter is the container for my content and thus has a fixed width, is centered (with margin:0 auto), but has no background color. The idea is that content structures the content down to a certain width, and content2 gives a background color that spans the width of the whole page.
The problem is that it seems content2 does not cover all of the content with it's background color.
I first thought it might be because extensive_look has position:relative; top:20px; but even removing that didn't fix the problem.
The issue I'm talking about can be seen here if you scroll down to the bottom of the good examples section where you will see the background color ends early. How can I fix this issue? My code is below.
HTML:
<div class="content2">
<div id="extensive_look" style="width: 1000px; margin: 0 auto;
position: relative; top: 20px; height: auto;">
<h1 align="center">Good Website Examples</h1>
<p>Check out these websites for some inspiration...</p>
<div id="white_house" class="ext_image">
<a href="http://www.example.com" target="_blank">
<div class="view_site"></div>
</a>
</div>
<div id="abc" class="ext_image">
<a href="http://www.example.com" target="_blank">
<div class="view_site"></div>
</a>
</div>
<div id="quartz" class="ext_image">
<a href="http://www.example.com" target="_blank">
<div class="view_site"></div>
</a>
</div>
<div id="usatoday" class="ext_image">
<a href="http://www.example.com" target="_blank">
<div class="view_site"></div>
</a>
</div>
</div>
</div>
CSS:
.content2 {
padding: 20px;
background-color: #e0e0e0;
min-height: 500px;
height: auto;
width: 100%;
}
The problem is that you need to 'clear' the floated elements inside #extensive_look.
To do that you can either use:
#extensive_look {
overflow: hidden
}
Or you can create a clearfix class with the following styles and add that class to the extensive_look div.
<div id="extensive_look" class="clearfix">
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.content2 {
padding:20px;
background-color:#e0e0e0;
min-height:500px;
height:auto;
width:100%;
overflow-y:auto;
}
"Min-height" is your culprit, I believe. The computed height of the div is exactly 540px--which is the min-height plus 20px padding on top and bottom. Adding "overflow-y:auto" seems to fix the issue.
I'm designing a web page with a small label off to the right of the body on some lines. For this, I created an absolute-positioned <div> inside of a relative-positioned one.
The label is appearing exactly as I want it. However, even though the absolute-positioned <div> dimensions are 0 x 0, it still is taking up some room on the line.
This can be seen at http://jsfiddle.net/sznH2/. I would like the two buttons to line up vertically. Instead, the button next to the label is pushed left a few pixels.
Can anyone see what is causing this spacing and how to eliminate it?
HTML:
<div>
<div class="pull-right">
<button>Hello world!</button>
</div>
</div>
<div>
<div class="pull-right">
<button>Hello world!</button>
<div class="outer-relative">
<div class="inner-relative">
<span>XXX</span>
</div>
</div>
</div>
</div>
CSS:
body {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.pull-right {
text-align: right;
}
.outer-relative {
display:inline-block;
position:relative;
height: 0px;
width:0px;
}
.inner-relative {
position: absolute;
left: 0px;
top: -15px;
background-color: Lime;
}
Inline block elements will render the spacing between the tags. Check this out: http://jsfiddle.net/sznH2/4/
<button>Hello world!</button><div class="outer-relative"><div class="inner-relative"><span>XXX</span>
Remove the spaces and you're good to go
I think You Need to make pull-right postiton:relative
and outer-relative absolute
http://jsfiddle.net/tousif123/sznH2/3/
is this what are you looking for?
.pull-right {
position:relative;
}
.outer-relative {
position:absolute;
}