I need some help with a practice project I'm working on. I've got my content divs (.primary, .secondary and .tertiary) sat within a wrapper that's currently set to 100% width (for the sake of debugging).
I want it so that .primary and .secondary appear next to each other side by side at a screen size of 779px and above with tertiary set at 100% of the wrapper's width below them.
All three content divs also have the class col which I've floated left so in theory, I should be able to set .primary and .secondary to 50% and they should happily sit next to each other, right?
Wrong.
They sit as blocks below each other. Both have a width of exactly half of the wrapper (used dev tools in google chrome to check) but they won't sit next to each other until I sit their widths to 48% and then they leave a gap to their immediate right.
I honestly can't make heads or tails of it. I'm going to include the full code below for anyone that wants to just copy and paste to see the weirdness. I should note as well, there is a normalize file on there, downloaded from: https://necolas.github.io/normalize.css/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dragon Ball Fan Site</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
</head>
<body>
<header class="main-header clearfix">
<div class="container">
<h1 class="title">Dragon Ball Fan Site</h1>
<ul class="main-nav">
<li>Main</li>
<li>Manga</li>
<li>Anime</li>
<li>Video Games</li>
<li>Register</li>
</ul>
</header>
<div class="banner">
<img src="img/main-img.png" alt="Main Image, Goku" class="main-img">
<h1 class="name">Dragon Ball Fansite</h1>
<span class="tagline">A Site For Fans, By Fans</span>
</div>
</div>
<div class="wrapper clearfix">
<div class="secondary col">
<h2>Welcome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem. Praesent eleifend dignissim ligula. Nunc enim lectus, fringilla at odio vel, sagittis volutpat velit. Integer pretium ac nisl eget volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="primary col">
<h2>About Dragon Ball</h2>
<img src="img/cast.png" alt="Main Cast" class="cast">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac. Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</p>
</div>
<div class="tertiary col">
<h2>About Us</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Ut vel dui at odio imperdiet pulvinar vitae sed arcu. Cras accumsan leo nulla, at suscipit augue finibus ac.</li>
<li>Aliquam ut mi vulputate, ullamcorper metus quis, tempor lorem.</li>
</ul>
</div>
</div>
</div>
<footer class="main-footer">
<span class="copyright"> ©Dragon Ball Fan Site 2018</span>
</footer>
</body>
</html>
/* =========
Fonts
========= */
#font-face {
font-family: 'Roboto', sans-serif;
}
##font-face {
font-family: 'saiyain-sans';
src: url(font/Saiyan-Sans.ttf);
}
/* =========
Elements
========= */
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', helvetica, sans-serif;
font-size: 1.25em;
}
h1 {
margin: 0;
font-weight: 400;
font-size: 2.441em;
}
h2 {
font-size: 1.953em;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
div {
margin: 0;
}
/* =========
Classes
========= */
.main-header {
text-align: center;
color: #f85b1a;
margin-bottom: 1em;
padding-top: 2em;
}
.title {
padding-bottom: 1em;
}
.main-nav li {
padding-bottom: 0.5em;
font-weight: 400;
}
.main-nav a {
text-decoration: none;
color: #f85b1a;
display: block;
}
.banner {
text-align: center;
background-color: #f85b1a;
color: #fff;
padding: 1em;
margin-bottom: 2em;
}
.main-img {
border-radius: 50%;
border: 3px solid #000;
margin-bottom: 2em;
}
.name {
font-family: 'saiyain-sans', 'Roboto', sans-serif;
margin-bottom: 0;
}
.wrapper {
margin: 0 auto;
width: 90%;
}
.col {
border: 1px solid red;
}
.primary,
.secondary {
margin-bottom: 1em;
}
.cast {
width: 100%;
padding: 0;
margin: 0 auto;
}
.main-footer {
background-color: #072083;
text-align: center;
padding: 1em;
margin-top: 1em;
}
.copyright {
font-size: 0.8em;
color: #8a9294;
}
/* =========
media queries
========= */
#media (min-width: 779px) {
.container {
margin: 0 auto;
}
.main-header {
padding: 1em;
}
.title,
.col {
float: left;
}
.title {
padding-top: 0;
padding-bottom: 0;
font-size: 1.25em;
}
.main-nav {
float: right;
}
.main-nav li {
display: inline-block;
float: left;
list-style: none;
font-size: 1.25em;
padding: 0 0.2em;
border-right: 1px solid #8a9294;
}
.main-nav li:last-child {
border-right: none;
}
.name {
padding-bottom: 0.5em;
}
.tagline {
font-size: 1.5em;
}
.wrapper {
width: 100%;
padding: 0;
}
.secondary,
.primary {
width: 50%;
}
.copyright {
padding: 2em;
}
/* =========
Clearfix
========= */
.clearfix::after {
content: " ";
display: table;
clear: both;
}
}
I finally figured it out. It was the border box property. Adding any padding and things like that were pushing it to be bigger than the wrap. I had the border property added to test where it was going wrong and that was just adding to the problem.
Thanks to everyone that took the time to look.
Related
I'm trying to get css values from vue component. What I want is to receive the css of vue component in string format like this
"#about {
margin: 70px;
}
#header {
color: blue;
font-size: 30px;
}
#sub-header {
color: blue;
font-size: 10px;
}
.text {
border: 1px solid #4caf50;
}"
In my case document.styleSheets doesn't do the job. I need some other way go get css from vue component.
Here is sample template from which I'm trying to get css:
<template>
<div id="about">
<div id="header">This is an about page</div>
<div id="sub-header">CSS Margins</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dictum nisi. </div>
<br>
<div class="text">Pellentesque vehicula sollicitudin nisl, vitae feugiat justo condimentum vel. Integer tellus nisi, porttitor sit amet sodales sit amet, imperdiet a nisl.</div>
</div>
</template>
<style scoped>
#about {
margin: 70px;
}
#header {
color: blue;
font-size: 30px;
}
#sub-header {
color: blue;
font-size: 10px;
}
.text {
border: 1px solid #4caf50;
}
</style>
I want to make a child div inside parents div visible if I give the child div margin-top negative value.
I have tried with position:relative and z-index, but it doesn't seems work.
Here are my code:
HTML:
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
CSS:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
It sounds like you're looking to remove overflow: hidden on .container:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
/*overflow: hidden;*/
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
I want to manage hover event just like in the linked fiddle, assuming I don't know how long the content would be...
My question is: how can I add smooth transitions while hovering?
Fiddle
.news{
max-width:250px;
font-family:Arial, Helvitica, sans-serif;
}
.thumbs {
list-style: none;
position: relative;
padding: 0;
margin: 0;
text-align: left;
letter-spacing: -0.25em;
}
.thumbs li {
display: inline-block;
margin-top: 10px;
position: relative;
overflow: hidden;
letter-spacing: normal;
background-color: white;
border: 1px solid #CCC;
min-height:264px;
}
.thumbs .news-img-container {
height: 180px;
overflow: hidden;
z-index: 0;
}
.thumbs li a img {
display: block;
position: relative;
width: 100%;
height: auto;
}
.thumbs li a div.text {
display: block;
padding: 10px;
text-transform: none;
font-weight: 300;
text-align: left;
color: rgba(0, 0, 0, 0.9);
background-color: white;
border-top: 2px solid #8c1c40;
margin: -40px 15px 0 15px;
z-index: 1;
position: relative;
height: 100px;
overflow:hidden;
}
.thumbs li a div.text:hover {
height: 100%;
min-height:206px;
vertical-align: bottom;
margin-top: -160px;
}
.thumbs li a div.text:hover:after {
background: none;
}
.thumbs li a div.text:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2em;
background: linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 100%);
}
.thumbs li a div.text p {
padding: 0;
margin: 0;
font-size: .9em;
}
h2 {
color:#8c1c40;
font-size:1em;
text-transform:uppercase;
margin:0 0 5px 0;
font-weight:bold;
}
a {
text-decoration:none;
}
}
<div class="news">
<ul class="thumbs">
<li>
<a href="#">
<div class="news-img-container">
<img src="http://docteurnature.org/boutique/img/cms/homepage_logo_1.jpg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>Long text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsumorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsum...</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news-img-container">
<img src="https://static.pexels.com/photos/65977/pexels-photo-65977-large.jpeg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>Shorter text :lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis. Pellentesque et fringilla ipsumorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news-img-container">
<img src="https://static.pexels.com/photos/33045/lion-wild-africa-african-large.jpg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>even shorter text: lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget ante libero. Morbi maximus urna id tellus tempus, sit amet volutpat augue venenatis.</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="news-img-container">
<img src="https://static.pexels.com/photos/28201/pexels-photo-28201-large.jpg" />
</div>
<div class="text">
<h2>Title h2</h2>
<p>Smallest text: lorem ipsum dolor sit amet...</p>
</div>
</a>
</li>
</ul>
</div>
Besides, It would be great that the animation launches while hovering the picture...
I'd like to avoid using js, if possible... But if not, well... why not.
Thanks a lot for your help
Here's your updated fiddle with smooth transition on hover.
https://jsfiddle.net/fhqxv36q/4/
All I have done is added some transition to .thumbs li a div.text. In this particular case, it's 0.3s for all properties that are changing on hover.
The solution, obviously doesn't take into consideration all the possible transitions and scenarios. It is here to give you an idea of what you need to do.
EDIT :
https://jsfiddle.net/fhqxv36q/7/
This takes away the transition effect when you mouse out.
Learn more about transitions here - https://developer.mozilla.org/en/docs/Web/CSS/transition
This one should do exactly what you want.
Adding the transition to both the element and its :hover state + fixed some other issues it caused.
https://jsfiddle.net/fhqxv36q/5/
I'm trying to generate reports with header, footer and content. The header and the footer works fine, however the text of the content div breaks higher than I want. See the image. I really don't understand why the page is breaking so high.
This is the CSS code:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
background-color: lightgreen;
height: 850px;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
And this is the HTML:
<html>
<head>
<style>
'.$css.'
</style>
</head>
<body>
<div id="header">
'.$header.'
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
'.$content.'
</div>
</body>
</html>
Could anyone help to solve this problem? Tanks!
If your DOMPDF_DPI is set to 72 then a 180px margin is pretty expansive. A DPI of 72 gives a one-to-one translation from PX to PT (the native unit in a PDF). PDF documents produced by dompdf are always 72 PPI. That translates into 2.5 inches of margin around the content. I don't think you meant to pad your margins quite that much.
Another problem I see is that you've set a height condition on your content element. You don't really need this and I see it causing some problems as I run some test renders. If you want your content background to have a specific color then I'd recommend setting it on the body element, which is the true bounds of your document content.
Try the following:
#page {
margin: 180px 50px;
}
#header {
position: fixed;
left: 0px;
top: -150px;
right: 0px;
height: 150px;
text-align: left;
}
#footer {
position: fixed;
left: 0px;
bottom: -180px;
right: 0px;
height: 80px;
text-align: right;
background-color: lightblue
}
#footer .page:after {
content: counter(page, upper-roman);
}
body {
background-color: lightgreen;
height: 850px;
}
#content {
padding-left: 10mm;
padding-right: 5mm;
line-height: 6mm;
}
#logo {
height: 4cm;
}
#head_text {
display: inline-block;
line-height: 6mm;
padding-top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="header">
HEADER
</div>
<div id="footer">
<p class="page">Página </p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
</div>
</body>
</html>
Given the following html
<div class="module">
<div class="header">
<h1>Test Heading</h1>
edit
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu lacus at augue tristique dignissim. Nunc vitae porta lorem. Nullam eu nunc sit amet arcu dictum convallis. Vestibulum quis purus quis sem rhoncus imperdiet eget at nisl. Fusce non metus libero, vel viverra purus. Quisque ullamcorper congue risus vel adipiscing. Quisque vehicula ante in quam malesuada at porta diam gravida. Aenean sagittis, ipsum eget egestas malesuada, turpis neque aliquam metus, lobortis congue ligula nisi quis purus. Integer nec dui et elit suscipit ultrices et sit amet enim. Nulla euismod commodo metus, eget luctus urna dignissim in.</p>
</div>
</div>
and the following css
body { font-family: Helvetica, Arial, "Lucida Sans Unicode", Tahoma, Verdana, Arial, Helvetica, sans-serif; }
h1 { margin: 0; padding: 0; border-bottom: 3px solid #333333; color: #333333; font-size: 40px; font-weight: normal; letter-spacing: 0; line-height: 1.3em; }
.module { }
.module .header h1 { }
.module .header a { }
I'm having a tough time figuring out how to float the "edit" link to the right of the h1 tag, but keeping the h1 tag as a block element so that it has its underline (border-bottom)
Can anyone offer me some advise ... done this before? Thank you in advance
There are different strategies to achieve this. You could either float a container to fix a float or use generated content to clear a float. I'll attempt to explain both w/ code. For both you can keep your markup, but need to move the underline from the h1 to the .header class. Then float the header to the left, edit to the right and fix the floats by floating the .header class as well. This technique has the disadvantage of depending on what comes after, but works for your isolated piece of code:
h1 {
margin: 0;
padding: 0;
color: #333333;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 1.3em;
}
.header { border-bottom: 3px solid #333333; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { float: left; width: 100%; }
The imho nicer solution is to use CSS-generated content to clear the opposing floats instead of floating the .header container. But be aware that this will cause trouble on less CSS capable browser versions.
h1 {
margin: 0;
padding: 0;
color: #333333;
font-size: 40px;
font-weight: normal;
letter-spacing: 0;
line-height: 1.3em;
}
.header { border-bottom: 3px solid #333333; }
.header:after { content: "."; display: none; clear: both; }
.module .header h1 { float: left; }
.module .header a { float: right; }
.module .header { width: 100%; }
For more information on the first method see Eric Meyer's article http://www.complexspiral.com/publications/containing-floats/. The second method is documented in http://www.positioniseverything.net/easyclearing.html.