Not coded since I was about 16 (I'm now 30) and I'm just beginning right from scratch really. I used to use Dreamweaver and just edit bits of code but now I want to start getting serious about it.
Anyway I'm just practising with this site: http://scott.ewarena.com/blog
The sticky navigation at the top is the problem. I've got float left & float right on the go, but as you can see they're not lining up.
CSS file is:http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/style.css
Can anyone help?
(And if anyone can clean up the absolute MESS I've made of that CSS file, I wouldn't mind lol)
.NavAlignLeft {
font-family: 'Vollkorn', serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
color: #fff;
float: left;
}
.NavAlignLeft:hover {
font-family: 'Vollkorn', serif;
text-decoration: none;
}
.NavAlignRight {
font-family: 'Vollkorn', serif;
font-style: none;
font-weight: normal;
font-size: 16px;
color: #fff;
float: right;
}
.NavAlignLeft,
.NavAlignRight {
width: 50%;
display: inline-block;
}
<div class="blog-masthead">
<div class="NavAlignLeft">
Site Name
</div>
<div id="navContainer">
<div class="NavAlignRight ">
<?php wp_nav_menu( array( 'theme_location'=>'header-menu', 'menu_class' => 'blog-nav list-inline' ) ); ?>
</div>
<div style="clear:both;"></div>
</div>
</div>
Thanks,
Scott
I managed to resolve this after removing some code from my CSS file and then just adding some padding-top: 10px; to the div CSS code.
Thanks anyway!
Related
I am working on a personal website as a beginner and I have the font available to me. When I add it with a font face on my hero banner, it shows up weirdly. I don't know if that's because the font just won't work with the site or not.
Here is what I currently get:
The font should be in the middle and left of the banner, and the text should be white. I tried different variations of font-face and I tried adding styles to space out the letters. I tried another response from this post.
However, that didn't work. Any suggestions?
My hero code and CSS:
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
color: black;`enter code here`
}
img{
opacity: 50%;
}
.croppedbanner {
width: 100%;
height: 200px;
object-position: 0% 39%;
object-fit: cover;
}
.container{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
div.hero-text{
font-family: khFont;
letter-spacing: 5px;
font-size: 55px;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
transform: translate(0px, -200px);
margin-left: 10px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: red;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
EDIT 1: Ok so I managed to get different colors that aren't black and white. But I kind of need those two colors. The colors are also different between browsers. Google Chrome - is in Light Mode and Opera GX - is in Dark Mode. The dark mode one I can't turn off.
Here's a screenshot of the website with both browsers.
Opera:
Chrome:
I (think) I am holding the site locally on my pc, as I only see an IP address at the bar. So I can't share the site.
Additionally, the code was edited to show in its entirety. This is just for the hero banner, so the HTML will be small, and I did some extra steps for the banner too. If you want to throw in suggestions for that, feel free :)
i think i can give a helpful solution for you.
First, let me try to show you about how to use css selector while coding a web page.
There was more than one selector that we can use.
For this case, i should recommend you to using class selector, or maybe child selector.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
/*With child combinator selector*/
div > .hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For the documentation of using selector, you can read more in this link.
And the second is, let's start to edit the class to fixing the output in the interface.
/*With class selector*/
.hero-text{
font-family: khFont;
height: 100%;
font-size: 55px;
text-transform: capitalize;
position: absolute;
overflow: hidden;
font-weight: normal;
line-height: 58px;
display: block;
margin: 0 auto;
text-align: center;
}
#font-face {
font-family: khFont;
src: url(/fonts/khFont.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
<div class="container">
<img class="croppedbanner" src="/img/SiteBanner.png" alt="Hero Banner">
<div class="hero-text">
<h1> Welcome to the site </h1>
</div>
</div>
For more details, you can read in these documentations:
Display Docs
Text Align Docs
Margin Docs
Thank you
It's been resolved! Turns out, in Opera, you can enable "Force Dark Pages" which I thought it would change when I clicked the setting on the page. When working with local sites, you wont be able to change the setting on the page itself, you have to go into the browser settings.
Thanks everyone for your help! :)
I have the following code
<div class="testimonial_description_inner" style="width: 640px;">
We can’t solve problems by using the same kind of thinking we used when we created them.
<strong class="testimonial_author">- Einstein</strong>
<p class="testimonial_meta"></p>
</div>
I want to add an opening and closing quote only on the part of:
We can’t solve problems by using the same kind of thinking we used when we created them.
When I use it like this:
.testimonial_description_inner:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
.testimonial_description_inner:after {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
the closing quote is at the end of the whole div. How can I choose only the inner part to apply the CSS rule without changing the HTML code?
You could add the closing quote as a before pseudoelement on .testimonial_author.
I've used display: inline-block to line it up with the preceding text, but float: right might also work...
.testimonial_description_inner:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
}
.testimonial_author:before {
content: "\201C";
font-size: 40px;
font-family: Georgia, serif;
display: inline-block;
}
<div class="testimonial_description_inner" style="width: 640px;">
We can’t solve problems by using the same kind of thinking we used when we created them.
<strong class="testimonial_author">- Einstein</strong>
<p class="testimonial_meta"></p>
</div>
I want to use in my css different titles/headers, with the same font but with different font size, etc. I have this:
#titulo1{
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Now I want to use some titles to some divs and others to anothers.
Like this:
.slogan #titulo1{
...
}
.pesquisa #titulo3{
...
}
But it doesn't work, I can only make it work by using it in my html file like this:
<div class="slogan" id="titulo1">
Yeah, I had already visited this page:http://www.w3schools.com/cssref/css_selectors.asp and still nothing
You can use selector that select all elements that id starts with "titulo"
[id^="titulo"] {
font-family: 'Roboto', sans-serif;
}
#titulo1{
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Definition .slogan #titulo1 has no sense, because id is unique identifier, so #titulo1 means the same.
anyway selector of particular element with several classes, e.g. <div class="class1 class2"> will look .class1.class2 (without space between class names) or div.class1.class2
Its the space in the css, that makes it difficult . Lets see :
Notice this:
.slogan #titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan">
<div id="titulo1">
</div>
</div>
Now Notice this:
.slogan#titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan" id="titulo1">
</div>
Did you notice the space in the css, if you put an space that mean they are in different element
Use The following. Hope your problem will be solved :)
<div class="slogan">
<div id="titulo1">
--------
--------
</div>
</div>
I've tried reducing the vertical space between two lines of text using various CSS properties, such as margin-top and padding, but nothing seems to work.
The two lines look like so:
I want them much closer together, so that they are almost touching. No matter what I do with the margin-top property, though, it's not enough and eventually gets to a point where I'm making things even worse.
Here is the CSS and HTML:
<style>
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
}
</style>
</head>
<body>
<div class="container body-content">
<div class="jumbotronjr">
<div class="col-md-3" style="margin-top: 1cm">
<img src="http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png" alt="PRO*ACT usa logo">
</div>
<div class="col-md-9">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<br/>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>
What change or addition do I need to make to get these lines closer together (specifically, for the second line to move up vertically)?
There is a large space between them because your .jumbotronjr class has a line-height: 2.1428571435;. Remove this and it will remove the space between your text.
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435; /* <--- Remove this */
color: inherit;
background-color: white;
}
JSFiddle
The limited-flexibility with vertical space is due to the <br> tag. The alternative approach would be to remove the <br> and display the labels as blocks in order to get the stacked appearance. Then, as you can see, your spacing margins and paddings (even line-heights) work as intended.
.jumbotronjr {
padding: 12px;
margin-bottom: -16px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: white;
}
.titletext {
font-size: 2.8em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
display:block;
}
.titletextjr {
font-size: 1.4em;
color: darkgreen;
font-family: Candara, Calibri, Cambria, serif;
margin-left: -32px;
display:block;
}
<div class="container body-content">
<div class="jumbotronjr">
<label class="titletext" style="margin-top: 0.1cm;">eServices Reporting</label>
<label class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</label>
</div>
</div>
Do you have any control over the markup? The use of the <label> tag here is incorrect. From Mozilla Developer Network - "The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
For proper semantics, I would recommend changing these to header tags as they seem to convey a heading on the page.
By simply changing these elements and removing the <br> tag I believe you will achieve the desired effect:
<h1 class="titletext" style="margin-top: 0.1cm;">eServices Reporting</h1>
<h2 class="titletextjr" style="margin-top: -2cm;">Purchasing Report for RB Kitchen</h2>
If you insist on using the <label> tags, you could adjust the line height to a value of "1".
Why don't you play with line-height instead of using margins etc? This is a quite big value:
line-height: 2.1428571435;
Put sth smaller in there according to your needs.
New to HTML and CSS and trying to replicate sites to get some practice. I'm having some trouble replicating a section on the airbnb website where it lists the explore, contact and book. For some reason, I float the image to the left and my h3 and p tags should not overlap the image. I've made sure to display the image as a block, but the h3 and p tags overlap and my margins won't work. Not sure what I'm doing wrong.a
Thanks
Here's the css
.feat-box {
background-color: red;
float: left;
margin-top: 20px;
width: 282px;
}
.feat-box h3 {
font-size: 22px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
padding-top: 10px;
}
.feat-box p {
font-size: 17px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
}
.feat-box img {
float: left;
display: block;
}
.feat-box-container {
margin: auto;
width: 900px;
}
Here's my html
<div class="feat-box-container">
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Explore</h3>
<p>Find the perfect place.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Contacts</h3>
<p>Message hosts.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/>
<h3>Book</h3>
<p>View your itinerary.</p>
</div>
</div>
Try adding
display:inline
to your
.feat-box p
you might have to play around a little with the margins to get the text to align, but it fixed it for me.
If your learning CSS I'd advice installing firebug, it's an add-on that will help you better understand how CSS works.