I have two .SCSS stylesheets contributing to one website. This is so that i can have a base, and a home stylesheet.
In the base style sheet, div has a float of left, however in the What We Do section i would like there to be no float. i cant seem to fix the issue. Any advice would be greatly appreciated!
Here is the JSFiddle - https://jsfiddle.net/hbyeyv6y/
Here is the Base .scss -
body, html, div, nav, section, ul, li, header { float: left; margin: 0px; padding: 0px; }
Here is the What We Do .scss -
div.whatwedo { box-sizing: border-box; margin: 0 auto; background-color: #366e81; padding: 100px; text-align: center; width: 100%; }
div.whatwedo .inner { float: none; }
div.whatwedo h1 { color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 45px; }
div.whatwedo h2 { margin-top: -15; color: #8e8e8e; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 25px; }
div.whatwedo h3 { margin-top: -15; color: #fff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 20px; }
div.whatwedo p { margin: 0 auto; color: #ffffff; font-family: 'Franklin Gothic', 'Arial', 'sans serif'; font-weight: lighter; font-size: 15px; max-width: 500px; }
div.whatwedo hr { border-bottom: 1px solid #fff; margin-bottom: 50px; width: 100px; }
div.whatwedo div.container { vertical-align: top; display: inline-block; text-align: center; }
div.whatwedo div.container img { margin: 50px 25px 0 25px; width: 231px; height: 231px; }
div.whatwedo div.container p { margin-top: 20px; display: block; max-width: 210px; }
As said, you could do float: none !important; and initial !important; for other rules.
But if you want to write good code, asigning float to body, html and so on doesn't look like a good idea. Float breaks the usual behaviour of the elements and it can lead you to unexpected results. You could add clases like:
.f-left{
float:left;
}
only to the elements you want to float.
.whatwedo is not floating - all it's parents and all it's descendants are though. Setting a float on everything is bad; why do you need to float everything?
Even so, to answer your question - you can unset the float for all .whatwedo's descendants with the wildcard selector ...
.whatwedo * {float: none;}
Related
I'm styling the section headings for a website and I can't quite get a span symbol and a H1 heading to align properly. This is how it looks on the site -
Annoyingly, when I've come to include the code in this snippet the two elements seem to align. When I check the console the span element seems to have a buffer around the symbol which prompts it slightly out of line as you can see in the image. I'm using bootstrap for the site, could this be a hidden rule that I'm missing?
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
}
.secthead h1, span {
display: inline-block;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
Just use vertical-align: middle; in both tag & remove padding from bottom in h1 tag. check updated snippet below..
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 0px 20px;
}
.secthead h1, span {
display: inline-block;
vertical-align: middle;
}
<div class="secthead"><span style="color: rgb(255,128,55);">+</span><h1>Who We Are</h1></div>
You could use a height and line-height.
.secthead span {
font-weight: bolder;
font-size: 80px;
font-family: 'Gotham-Medium', sans-serif;
}
.secthead h1 {
margin: 0;
font-size: 50px;
font-family: 'Gotham-Medium', sans-serif;
color: #000;
text-align: left;
padding: 0 0 20px 20px;
line-height: 92px;
}
.secthead h1, .secthead span {
height: 92px;
display: inline-block;
vertical-align:top;
height: 92px;
}
<div class="secthead">
<span style="color: rgb(255,128,55);">+</span>
<h1>Who We Are</h1>
</div>
I have stumbled across a problem that I can not seem to solve in any way, maybe I am using divs in a wrong way?
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
This is the outcome:
I want to decrease the space between my <h1> and <h2>, and I found out that the way to do that was to set line-height in h1 to 0px.
But as I do that my entire page moves up like so:
I want to keep the text at the same position as it was before I change the line-height. I am suspecting that I am using the div class function wrong. This is more of theoretical question.
headings h1 to h6 have margin by default, so you need to reset it, setting: margin:0.
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin: 0
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
text-align: center;
margin: 0
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
HTML heading tags have some default CSS values applied in most browsers. Following are the values of h1 and h2 that are applied to them by default, so you need to override the margin-bottom of h1 and margin-top of h2 if you want to decrease the spacing between your h1 and h2.
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
h2 {
display: block;
font-size: 1.5em;
margin-top: 0.83em;
margin-bottom: 0.83em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
.greeting h1 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 100px;
text-align: center;
margin-bottom: 0;
}
.greeting h2 {
font-family: 'Raleway', sans-serif;
font-weight: lighter;
font-size: 35px;
line-height: 0px;
text-align: center;
margin-top: 0;
}
<div class="greeting">
<h1>Hi.</h1>
<h2>Select a group</h2>
</div>
Just add the following lines
.greeting h1 {
margin:0px;
line-height:35px;
}
.greeting h2 {
margin:0px;
line-height:35px;
}
If you just want you to assign the margin only for this block you do not need to define it globally you can just do the same this using inline CSS
<h1 style="margin-bottom: 0">Hi</h1>
<h2 style="margin-top: 0">Select a group</h2>
This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/
Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.
This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}
You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}
Just wondering how to get rid of the unnecessary looking spaces
in my heading. I want my header to look similar to the capture 2 (2nd picture) but there are unnecessary spaces that I can't seem to get rid of. I ran it through jsfiddle:
http://jsfiddle.net/yT6h6/ and I can still see the spaces even though I don't think there was anything wrong with the code. Please take a look at this and greatly appreciated if you can help me.
HTML Code:
<div class="content">
<div class="heading"><b style="font-size:14px; font-family:'Arial', Gadget, sans-serif"><b style="font-size:9px;">Home \\ Current Students \\</b>
</b>
<br />FBE Degrees & Electives
<br>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
CSS Code:
.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
font-size: 28px;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
try this one remove line-height and add display:block
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
display:block;
color: #336666;
}
I think you firstly need to seriously tidy up that HTML and use some more natural elements. The heading should be a H of some level, probably h1. The paragraph tags make more sense for the text. Everything will be far cleaner and easier to solve if you do this. Here's my suggestion that changes the HTML and fixes your margin issues.
HTML
<div class="content">
<div class="heading">
<p class="crumbs">Home \\ Current Students \\</p>
<h1>FBE Degrees & Electives</h1>
<p class="subheading">FBE Degrees & Other Courses for FBE students including Elective courses</p>
</div>
</div>
CSS
p {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #336666;
}
a {
color:#fff;
text-decoration:none;
}
.heading {
background:#333333;
padding:20px;
}
.heading p {
margin:0;
padding:0;
line-height:10px;
}
h1 {
margin:0;
margin-bottom:5px;
font-family:"Courier New", Courier, monospace;
font-size:28px;
line-height:36px;
color:#DBDBDB;
}
Fiddle here:
http://jsfiddle.net/yT6h6/6/
It can be simplified more actually (I left some of your classes in there even though they aren't used), but this is at least a lot neater to work with.
Hey i've tried your code see at: http://jsbin.com/awonek/1/edit
Looks fine to me.
could code try
div#heading{
margin-bottom:-20px;
}
what browsers have you tried it in?
Added some changes: See http://jsbin.com/uvurev/1/edit
<div class="content">
<div class="heading">
Home \\ Current Students \\
<h2 class="M_logo_text">FBE Degrees & Electives</h2>
<span class="style11">FBE Degrees & Other Courses for FBE students including Elective courses</span>
</div>
</div>
CSS
div.heading {
height: auto;
width: 525px;
background-color: #333333;
font-family:"Courier New", Courier, monospace;
color: #DBDBDB;
padding-left: 30px;
font-weight: bold;
padding-top: 5px;
margin-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
background-repeat: no-repeat;
background-position: left center;
}
.content {
height: auto;
float: left;
width: 575px;
background-repeat: repeat;
background-color: #FFFFFF;
}
.style11 {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 15px;
color: #336666;
}
a.link5{
font-size:9px; font-family:'Arial', Gadget, sans-serif
margin-right: -2px;
text-decoration: none;
}
a.link5:link {
color: #FFFFFF;
}
a.link5:visited {
color: #FFFFFF;
}
a.link5:hover {
color: #E9E8C7;
}
a.link5:active {
color: #E9E8C7;
}
/*
added style
*/
b.type1{
font-size:9px; font-family:'Arial', Gadget, sans-serif
}
h2.M_logo_text{
font-size: 20px;
margin:0px;
}
What I have done so far : http://goo.gl/sDhLA
What I am supposed to achieve : http://goo.gl/tqo7m
Thanks in advance for any help, newbie in html/css here.
Cheers.
UPDATE
My bad. I forgotten to mention that I am actually aiming for the results with the least amount of major edits to the code, as there are some code which I can't change. ( stipulated in my assignment ) .
On the other hand, there isn't any harm in learning more stuff though. Learnt more about new commands like line-height, box-sizing: border-box is really interesting.
However, I was quite sad that negative padding doesn't occur. It would have solved the gap at the left and right edges eh ? :O
Looks like you need to reduce the width for your container (or increase the width of your content).
You should post your code here though, only then I will be able to be sure this answer is correct.
Your code is a mess. Here's what I made (I have the units in cm because it will gives better control when printing, you may change the units)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Revisions Bookstore and Cafe</title>
<style type="text/css">
#font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: local('?'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
font-weight: normal;
font-style: normal;
}
* {
padding: 0;
margin: 0;
}
h1 {
border: 0.1cm solid rgb(65, 105, 225);
font-family: ChunkFiveRegular,serif;
background-color: rgb(189, 204, 212);
font-size: 2em;
}
#card div {
font-family: ChunkFiveRegular,serif;
}
#card {
font-family: Verdana,serif;
width: 15cm;
padding: 0.2cm;
border: 0.07cm black solid;
margin: 1cm auto;
}
#card div p {
padding: 0.2cm 0.2cm 0.2cm 0.4cm;
}
#card > p {
background: black;
color: white;
text-align: right;
padding: 0.1cm;
}
</style>
</head>
<body>
<div id="card">
<h1>Revisions Bookstore and Cafe</h1>
<div>
<p class="maintext">Custom brewed coffee and hand-selected books.</p>
<p class="maintext">Special orders are our specialty.</p>
</div>
<p>412 N. 25th St.<br/>Richmond, VA 23223<br/>(804) 555-2565</p>
</div>
</body>
</html>
I updated your jsfiddle: http://jsfiddle.net/BramVanroy/LGFLB/1/
A hint: do NOT use an ID 'body' (or any html tag as ID for that matter)! It gets confusing! You can easily target the body by simply using body.
I have kept the HTML structure you proposed. I changed quite a lot of the CSS. Especially the width, margins and size. Also note box-sizing!
body {
font-family: Verdana;
border: 0.07cm solid black;
margin: 2.5em;
margin-left: 17em;
margin-right: 4em;
width: 45em;
}
h1 {
text-align: center;
border: 0.1em solid rgb(65,105,225);
width: 96%;
margin: 0.2em auto;
padding: 0.25em;
font-family: Rockwell;
font-weight: bold;
letter-spacing: 2px;
background-color: rgb(189,204,212);
font-weight: normal;
font-size: 2.5em;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#contact {
text-align: right;
width: 96%;
margin: 1em auto 0;
padding: 0.25em;
font-family: Rockwell;
color: white;
background-color: #212100;
margin-bottom: 8px;
}
#box {
width: 92%;
margin: 0 auto;
padding: 0.5em;
line-height: 2;
}
.maintext {
text-align: left;
}
Well I looked at achieving the result you are wanting so i've basically manually set things to the same width as your original but with a couple of modifications (mainly just setting margins and widths) while keeping things in em format.
but heres the new css:
#font-face {
font-family: 'ChunkFiveRegular';
src: url('Chunkfive-webfont.eot');
src: local('?'), url('Chunkfive-webfont.woff')format('woff'),url('Chunkfivewebfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj')format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
text-align: center;
border: 0.1em solid rgb(65,105,225);
margin-top: 8px;
margin-left:8px;
margin-right:8px;
padding: 0.25em;
font-family: ChunkFiveRegular;
background-color: rgb(189,204,212);
font-weight: normal;
font-size: 2em;
}
#contact {
text-align: right;
margin: 0 8px 8px;
padding: 1em;
font-family: ChunkFiveRegular;
color: white;
background-color: #212100;
margin-bottom: 8px;
}
#box {
margin: 0 8px;
padding: 0.5em;
}
.maintext {
text-align: left;
}
#body {
font-family: Verdana;
border: 0.07cm solid black;
margin: 2.5em;
margin-left: 23em;
margin-right: 4em;
width: 33.4em;
}
</style>