So I'm working on a website I'm building and am in the process of consolidating stylesheets. I'm currently having a problem where one div section of the page is not connecting to the stylesheet. The rest of the page is fine but it's just this one section and I have no idea why. I copied and pasted it (html and style) from the first draft and am using the same fonts and bootstrap cdn (bootstrap fonts 4.1 and bootstrap cdn 3.3.7) but am getting different results. Would appreciate any help you could offer.
here's the html
<div class="main">
<div class="container">
<header>
<center><h2>My Work</h2></center>
</header>
<div class="box">
<span class="image featured"><img src="laptopstock.jpg" alt="" /></span>
<h3>Arris SURFboard SBG6700-AC Wireless Gateway Manual</h3>
<p>The Arris SURFboard SBG6700-AC wireless gateway is the premier modem on the market today. It's top of the line security, simple user interface and blazing fast speeds make it the number one consumer choice for modems. With this guide you can set up your home wireless network in 30 minutes.</p>
<br>
<p>Learn More</p>
</div>
</div>
</div>
here's the css
main {
padding: 8em 0;
}
main.header {
text-align: center;
margin: 0em 0 3em 0;
padding-top: 1000em;
}
/* difference between padding and margin?
padding is on the inside.
margin on the outside.*/
/* this is the gray space between the header and the image */
main.header h2 {
font-size: 2.75em;
margin: 0;
letter-spacing: .005em;
color: #000;
}
body.landing main {
margin-top: -14em;
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
.box {
margin: 1em;
overflow-x: hidden;
padding: 2em 2em !important;
}
.box.features .features-row {
border-top: 0;
padding: 0;
}
.box.features .features-row section {
border: 0;
border-top: solid 1px #e5e5e5 !important;
float: none;
margin: 2em 0 0 0 !important;
padding: 2em 0 0 0 !important;
width: 100%;
}
.box.features .features-row:first-child section:first-child {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.box .image.featured {
margin-left: -2em;
width: calc(100% + 4em);
}
.box .image.featured:first-child {
margin-bottom: 2em;
margin-top: -2em;
}
.box .image.featured:last-child {
margin-bottom: -2em;
margin-top: 2em;
}
Your element selector is wrong. From your html, 'main' is a class, 'header' is an element. To refer to class in css, use '.' as in .main, to refer to element, use the tag name directly. Writing main.header means and element 'main' that has class 'header' which is not what you want. Use the Css instead;
.main {
padding: 8em 0;
}
.main header {
text-align: center;
margin: 0em 0 3em 0;
padding-top: 1000em;
}
/* difference between padding and margin?
padding is on the inside.
margin on the outside.*/
/* this is the gray space between the header and the image */
.main header h2 {
font-size: 2.75em;
margin: 0;
letter-spacing: .005em;
color: #000;
}
That should work. Let me know how it goes.
center tag is deprecated in your html header. Replace with text-align in css. An example would be: h2 { text-align: center; }
Related
I am trying to create a part of my website,
Here is the code:
import React from 'react';
import './stylesheets/BeyondHelloWorld.css';
import BHW from './assets/bhw.png';
function BeyondHelloWorld() {
return (
<div className="mainDiv">
<div className="card">
<div className="cardContainer">
<div style={{height: "100%", display: "block"}}>
<img src={BHW} className="bhwImage"/>
</div>
<div class="bhwText">
<span className="bhwTitle">BeyondHelloWorld</span>
<span className="fadedTitle">Beyond</span>
<span className="bhwDescription">BeyondHelloWorld is a learning community for budding programmers. It is aimed at equipping amateurs with easy knowledge of the tech world through engaging content like New Tech information, tips & tricks & BTS of a developers life!</span>
<span className="bhwDescription">A lot of community problems can be solved using technology. BeyondHelloWorld aims to influence non-programmers into the world of programming.</span>
</div>
</div>
</div>
</div>
)
}
export default BeyondHelloWorld
If you see the span bhwDescription, it is inside bhwText div which is inside cardContainer.
Now I have a picture on the left with classname bhwImage
When the text exceeds the height of this image, the text starts from the left of the cardContainer, but I want it to start from the starting edge of the bhwText.
Example:
But with my code, What it looks like:
What am I doing wrong?
Also, if you notice, the fadedTitle and bhwTitle are not exactly aligned. I want them all to start where the picture starts. But something is going off. Even if I keep the padding/margin same, even then they have different starts.
Here is the css:
.mainDiv {
width: 100%;
padding: 50px;
background-color: #1e3512;
}
.card {
background-color: #1e3512;
box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.48);
padding: 0;
overflow: hidden;
}
.cardContainer {
margin: 0;
padding: 0 20px 0 0;
width: 100%;
}
.bhwImage {
height: 18vh;
object-fit: contain;
margin: 40px;
border: 5px solid #fff;
float: left;
}
.bhwText {
margin-top: 20px;
color: #ffffff;
}
.bhwTitle {
font-size: 3.5rem;
font-weight: 600;
display: block;
margin-bottom: 20px;
}
.fadedTitle {
position: absolute;
top: 25px;
font-size: 150px;
line-height: 75px;
opacity: 0.1;
font-weight: 900;
}
.bhwDescription {
display: block;
margin-bottom: 20px;
font-size: 1.8rem;
font-weight: 500;
word-wrap: break-word;
}
Add display:flex to your .cardContainer class
.cardContainer {
margin: 0;
padding: 0 20px 0 0;
width: 100%;
display: flex;
}
and remove width:100% from .mainDiv class
.mainDiv {
/* width: 100%; */ remove this
padding: 50px;
background-color: #1e3512;
display: flex;
}
Live Demo
The reason why the content runs underneath the image is because its style is float: left;, and your .bhwText class has a width of 100% because it's a block element. div elements are generally display: block; by default. This means .bhwText width is 100% of the parent container by default. The text will fill up space where available in it's container; including below the image.
To fix this issue, add left padding to the .bhwText class. Something like this example here.
.bhwText {
margin-top: 20px;
color: #ffffff;
padding: 0 0 0 200px;
}
I have an h1 inside a nav that is currently centering based on the width of the h1. How would I use text-align so that the title is centered based on the width of the nav?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: 100%;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Thank you in advance for your help!
You can set your nav to have a position of relative which means that any inside absolute element will be within the bounds of this element. Then set the h1 to have a position of absolute this will remove the element from the normal flow of the page and have it flow with the parent element with the position of relative. From there you can center it using margin: 15px auto;, left: 0 and right: 0 this will make the h1 element 100% width of the nav thus centering it correctly.
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
margin: 0;
padding: 0;
}
h1 a {
color: inherit;
text-decoration: none;
}
.logo {
height: 100%;
}
nav {
background-color: black;
display: flex;
height: 90px;
position: relative;
width: 100%;
}
nav h1 {
color: white;
flex: 1 0 auto;
font-size: 44px;
left: 0;
line-height: 55px;
margin: 15px auto;
position: absolute;
right: 0;
text-align: center;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Now this method also has its fallback, you will lose the ability to click on the logo, but this can be remedied by setting a position of relative and z-index: 2 so the logo element will be higher up than the h1 making it clickable.
Flexbox is perfect approach, and you were nearly there.
I added an empty div with class .ghost to act as a counter balance to the logo. Since I know the logo is 90px wide I set the ghost div to the same, and both the ghost div and the logo get similar flex settings:
.logo {
height: auto;
width: 90px;
flex: 0 0 90px; // same
}
.ghost {
width: 90px;
flex: 0 0 90px; // same
}
Now, with the <h1> allowed to grow (flex: 1 0 auto), it will take up all the rest of the space naturally and remain perfectly centered thanks to the ghost div flanking the right side.
* {
margin: 0;
padding: 0;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: auto;
width: 90px;
flex: 0 0 90px;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
.ghost {
width: 90px;
flex: 0 0 90px;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1>The Novel Column</h1>
<div class="ghost"><!-- nothing here --></div>
</nav>
HTML and CSS below. Div id "black" seems to be pushing a space between itself and the "brown" div above it. When I remove the "black" div, the excess space disappears. I have all margins and padding at zero. Can't sort out what's causing this. ANy suggestions are appreciated.
html {
padding: 0;
margin: 0;
}
body {
font-size: 62.5%;
margin: 0;
padding: 0;
text-align: center;
font-family: raleway;
font-style: normal;
font-weight: 400;
color: #000000;
}
#greyWrapper {
background-color: #303030;
margin: 0;
padding: 0;
width: 100%;
color: #FFFFFF;
height: auto;
}
#Brown {
margin: 0px;
padding: 0px;
width: 100%;
height: auto;
background-color: #644015;
}
#Brown ul {
text-decoration: none;
list-style-type: none;
text-transform: uppercase;
font-size: 0.7em;
margin: 0;
padding: 0;
}
#Brown ul li {
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#black {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #000000;
height: auto;
}
<div id="greyWrapper">
<div id="Brown">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolios</li>
<li>Team</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<div id="black">
<p>Grab Your Copy Of</p>
<p>The Premium Quality PSD Template</p>
<p>For free Download</p>
</div>
</div>
Your ps have a margin and this margin extends beyond the limits of the #black div and "push against" the #brown div. There's a good explanation in Why does this CSS margin-top style not work?
You can either:
Put a border around #black. The border will force the div to expand so that it contains all of the margins of the children.
#black {
border: 1px solid black;
}
or
Remove the top margin of the topmost paragraph
#black > p:first-child {
margin-top: 0px;
}
It's the automatic margin-before on the <p> tag that is applied by most browsers. Set:
#black p {
margin: 0
}
and you'll see it go away.
I have a header with a div inside of it, for some reason there is more space under the div then above. I tried setting all the padding to 0 in hope to see which one was causing it but it seems to not be a padding at all.
HTML
<header>
<div class="logo">
<div class="centrDivInDiv">
<h1>Welcome to Planet Earth</h1>
<p>The best planet after Pluto.</p>
</div>
</div>
</header>
CSS
body {
margin: 0px;
}
h1 {
margin-bottom: 0px;
}
header {
background-color: #E74C3C;
padding: 10px;
}
header p {
line-height: 0%;
}
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
}
.logo p {
margin-top: 24px;
}
.centrDivInDiv {
display: table-cell;
vertical-align: middle;
margin: 0;
}
JsFiddle
Add vertical-align:middle to your .logo div (and you can remove it from .centrDivInDiv):
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
vertical-align: middle;
}
jsFiddle example
Your problem is caused by the display: inline-block of your CSS. If you remove that or change it for display: blockit will be fine. You should also set your width: 50%
All of that in your .logo
check the fiddle
jsFiddle
The problem exists because you're using display: inline-block; in .logo
The best way to solve this problem is to set font-size to 0 in header so it will be like this:
header {
background-color: #E74C3C;
padding: 10px;
font-size: 0;
}
Also you should set font-size in .logo so it will be like this
.logo {
line-height: 80%;
padding: 10px 20px 10px 20px;
margin: 0px;
background-color: #2C3E50;
display: inline-block;
font-size: 16px;
}
Maybe this link will help you, it has more details
Fighting the Space Between Inline Block Elements | CSS-Tricks
i'm using blogger and I want to know how can I remove the white spaces between a img and a text, because is a lot separated. Blogger contains a class called separator but I don't know what to do for fix that.
Here's a image:
How can I remove it?
This is my css
.separator{
margin: 0;
display: block;
padding: 0;
}
.post img {
display: block;
text-align: center;
padding: 0px;
margin: 0px;
}
CSS
/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em;display:none;}
.wrapfullpost{display: block;}
.post{
display: block;
margin: 0;
}
.post img {display: block;
margin: auto;
text-align: center;
padding: 0;
}
.post-title{color:#333333;margin:0 0 10px 0;padding:0;font-family:Arial,Helvetica,Sans-serif;font-size:24px;line-height:24px;font-weight:bold;}
.post-title a,.post-title a:visited,.post-title strong{display:block;text-decoration:none;text-decoration:none;}
.post-title strong,.post-title a:hover{text-decoration:none;}
.post-body{
font-size: 17px;
display: block;
margin: 0;
}
.entry-content{ padding: 0; margin: 0; display: block;
}
.separator{
margin: 0;
display: block;
padding: 0;
}
.post-footer{margin:5px 0; font-weight: 300;}
.comment-link{margin-$startSide:.6em}
.postmeta-primary{color:#999;font-size:12px;line-height:18px;padding:0 0 5px 0}
.postmeta-secondary{color:#999;font-size:12px;line-height:18px;padding:0 0 10px 0}
.postmeta-primary span,.postmeta-secondary span{padding:3px 0 3px 20px;background-position:left center;background-repeat:no-repeat}
.meta_date{background-image:url(http://2.bp.blogspot.com/-paWPYJvQDqA/UC7eiuIKgUI/AAAAAAAAAvw/af410sUcO2w/s000/date.png)}
.meta_author{background-image:url(http://3.bp.blogspot.com/-reTaoyVmDXA/UC7ejgVBQbI/AAAAAAAAAv4/u6d-iPeLZi0/s000/author.png); border-right: 1px solid #ccc;
padding-right: 10px!important;
m
argin-right: 5px;}
.meta_comments{background-image:url(http://2.bp.blogspot.com/-zZgvwATiF3E/UC7ej-cvmbI/AAAAAAAAAwA/THMs0579MII/s000/comments.png) }
.meta_edit{background-image:url(images/edit.png)}
.meta_categories{background-image:url(http://1.bp.blogspot.com/-g-ptS39XbNM/UC7ekTJsEXI/AAAAAAAAAwI/t8fMhUuUvQI/s000/category.png)}
.meta_tags{background-image:url(http://3.bp.blogspot.com/-fZuK3yymXmo/UC7ek6kEDLI/AAAAAAAAAwQ/-J16r4bHvFo/s000/tags.png)}
.readmore{margin-bottom:5px;float:right}
.readmore a{color:#F85B48;background:#EAEAEA url(http://4.bp.blogspot.com/-m6AJDK0k2xA/UC7emOYbEbI/AAAAAAAAAwY/Q4o73QiZdc4/s000/readmore-bg.png) left top repeat-x;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase}
.readmore a:hover{color:#fff;background:#E74F3D url(http://4.bp.blogspot.com/-m6AJDK0k2xA/UC7emOYbEbI/AAAAAAAAAwY/Q4o73QiZdc4/s000/readmore-bg.png) left -126px repeat-x;text-decoration:none}
And this is what blogger add in HTML
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://3.bp.blogspot.com/-DGgnyTkp3xc/VAtkSdWZLxI/AAAAAAAAAb4/oXctHDcrSRk/s1600/Sinopsis%2Bwissar.png" height="160" width="640" /></div>
Since you didn't share any of your code, It's hard to explain where is the problem (You may get negative rep).
but i can suggest you to look at your style classes. try following, it's just a removal of Padding, and Margin
.imageClass{
padding: 0px;
margin: 0px;
display: block;
}
.textClass{
padding: 0px;
margin: 0px;
display: block;
}
Within the seperator class there is a blockquote which contains the text, and an a tag which is a link containing the image. Both of these have margins that you do not want. Try this.
.seperator blockquote {
margin: 0px;
}
.seperator a {
margin-right: 0px;
}
Note: Remove what was in my previous answer.
If you can't get it to work, go to the section on your webpage that you want to change, right click -> inspect element. This will bring up the HTML inspector. You can then click on different elements and see the css on the right hand side that relates to that element. Try unticking different css statements or changing them/adding new ones. Just continue to play around with it until you can get it. I really can't be of any more help.
Solved, just added the next
.separator {
display: block;
line-height:0;
margin: 0;
padding: 0;
}
.separator blockquote {
margin: 0;
}
.separator a {
margin-right: 0;
}
Thanks to Yep_It's_Me who helped me a lot.