I am having difficulty with IE 9 and Opera Browsers only for the alignment of a star.
I am using the following HTML:
<div class="fullwidth">
<div class="floatleft star">★</div>
<h3 class="icontxt">Co-Hosts</h3>
</div>
The Following CSS:
.floatleft
{
float: left;
}
.fullwidth
{
width: 100%;
}
h3
{
margin: 0;
text-align: left;
font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
text-transform: uppercase;
color: #212D3B;
letter-spacing: .1em;
font-size: 1.5em;
line-height: 1.7em;
}
h3.icontxt
{
padding-left: 1.5em;
}
.star
{
font-size: 1.4em !important;
color: #A92A23;
}
Ok, so Chrome, Firefox, and Safari render it like so (the way I need it in all browsers to be):
However, if you look at this in IE 9, and/or Opera, it looks like this:
The Star is too high, it needs to be in line with the text: "CO-HOSTS"
Am I doing something wrong here? How can this be done for IE, Chrome, Opera, Safari, and Firefox universally? This is just so frustrating!
How about this:
.floatleft
{
float: left;
}
.fullwidth
{
width: 100%;
}
h3
{
margin: 0;
text-align: left;
font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
text-transform: uppercase;
color: #212D3B;
letter-spacing: .1em;
font-size: 1.5em;
line-height: 1.7em;
}
h3.icontxt
{
padding-left: 1.5em;
}
.star
{
line-height: 1.7em;
font-size: 1.4em !important;
color: #A92A23;
}
Related
So now this objects, when i resize the browser they jump down underneath eachother but i want it to just change size to fit a phone resolution. Can anyone help me to make this work, becuase i have been trying by making width have an max and so on but it seems that it dosen´t work for some reason. Down below i have uploaded an image of how it looks when the objects jump down.
#box h2 {
font-family: 'Open Sans', sans-serif;
font-size: 26px;
color: #888;
margin-bottom: 10px;
font-weight: 700;
text-align: left;
text-transform: uppercase;
text-decoration: none;
}
.text-1 {
max-width: 900px;
margin-right: 130px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
color: #888;
text-align: left;
}
.text-1 p {
margin-top: 30px;
font-size: 22px;
line-height: 36px;
text-align: left;
}
#box {
background-color: white;
display: inline-block;
}
.first {
width: 300;
margin-top: 5px;
max-height: 200px;
box-shadow: 2px;
float: left;
margin: 30px;
}
.second {
width: 300px;
margin-top: 5px;
max-height: 200px;
box-shadow: 2px;
float: left;
margin: 30px;
}
.third {
width: 300px;
margin-top: 5px;
max-height: 200px;
box-shadow: 2px;
float: left;
margin: 30px;
}
.third p {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 32px;
color: #888;
font-weight: 300;
}
.first p {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 32px;
color: #888;
font-weight: 300;
}
.second p {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
line-height: 32px;
color: #888;
font-weight: 300;
}
h3 {
font-size: 26px;
font-weight: 700;
color: #888;
line-height: 30px;
text-transform: uppercase;
}
.parallax {
/* The image used */
background-image: url('/assets/image/parallax.jpg');
/* Full height */
height: 250px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<div id="box">
<h2>Vår process</h2>
<div class="text-1">
<p>VI HJÄLPER DIG MED ALLT.</p>
</div>
<div class="first wow fadeInLeft"><img src="assets/image/kontakt.png">
<h3>KONTAKT</H3>
<p>Kontakta oss genom telefon eller vårat kontaktformulär på hemsidan.</p>
</div>
<div class="second wow fadeInUp"><img src="assets/image/arende.png">
<H3>GRANSKAN</H3>
<P>Vi går igenom ditt ärende och ser om vi har möjlighet och utföra jobbet.</P>
</div>
<div class="third wow fadeInRight"><img src="assets/image/leverans.png">
<H3>LEVERANS</H3>
<P>Vi kommer hem till dig och fixar det du behöver hjälp med.</P>
</div>
</div>
You should try HTML "figure" for this.
Link -> jsfiddle.net/DamianToczek/kxfu7Lep/6/
Fix this Stackoverflow:
(Links to jsfiddle.net must be accompanied by code. Please indent all code by 4 spaces using the code toolbar button or the CTRL+K keyboard shortcut. For more editing help, click the [?] toolbar icon.)
Tried with backticks, with ctrl + K and it keeps saying the same.
To resize elements depending on screen size use #media queries. Here is a good resource.
#media screen and (max-width: 1440px) {
.signmodal {padding-top: 15%;}
#signformclosebutton {font-size: 2em;}
.imgmodal{padding-top: 5%;}
.imgcontainer{width: 52.5%;}
};
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>
Somehow one of the group of the same block elements on the picture gets inexplicably big height. Styles shown on the pic don't suggest that kind of behavior for this element. In fact, height isn't even set for those h3's.
Browser screenshot
The html is
<section class="about-us">
<div class="wrapper clearfix">
<h2 class="about-us-heading section-heading red-black-stressing-line-at-left">About Us</h2>
<p class="about-us-statement section-saying about-us-saying">This is who we are - or at least who we strive to be...</p>
<div class="about-more">
<p class="about-saying">If you can't explain it simply, you don't understand it enough.</p>
The more you know
</div>
<div class="about-work-details">
<h3 class="about-details-heading typography-icon">Typography</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading curve-with-dots-icon">Full icon set</h3>
<p class="about-details-text">...</p>
</div>
<div class="about-work-details">
<h3 class="about-details-heading triangular-ruler-icon">Accurate</h3>
<p class="about-details-text">...</p>
</div>
</div>
</section>
Three same div.about-work-details elements.
The default css is
.about-us{
background-color: #fff;
position: relative;
}
.about-us-heading{
color: #272d32;
}
.about-us-statement{
color: #4e5860;
margin-bottom: 3.9em;
}
.about-more{
width: 16.875em;
float:left;
margin-right: 1.875em;
}
.about-saying{
font-family: "Open Sans", sans-serif;
font-size: 1.75em;
line-height: 1.4285;
color: #4e5860;
}
.about-more-link{
display: inline-block;
font-family: "Raleway", sans-serif;
line-height: .77;
padding: 1em 2.625em 1em 1.25em;
text-decoration: none;
font-weight: 600;
color: #fff;
text-transform: uppercase;
background: #ff3c1f url(../images/left-arrow.gif) 12.7em .95em no-repeat;
margin-top: 4.25em;
transition: background-color 0.5s;
}
.about-work-details{
width: 16.875em;
float:left;
margin-right: 1.685em;
margin-bottom: 8.1875em;
position: relative;
min-height: 16.875em;
border: 1px solid #edeff2;
}
.about-work-details:last-of-type{
margin-right: 0;
}
.about-details-heading{
font-family: "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25em;
color: #303030;
text-transform: uppercase;
padding: 0.85em 0 1em 3em;
margin: 1.70em 0 0 1em;
}
Media query modifications
#media screen and (max-width: 860px){
.about-work-details{
width: 70%;
margin: 3em auto;
min-height: 0;
float: none;
}
.about-us{
padding-bottom: 1px;
}
.about-work-details:last-of-type {
margin-right: auto;
}
}
Seems like a floating item behavior issue.
Try removing/commenting float:left; from .about-more.
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;}
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>