I am working on a blog site using WordPress and Susy grids. There is a <p> tag (with mild profanity) near the top of the page (link) with padding-top: 4em. Somehow this padding is slipping up under the previous two siblings, an <h1> and a <div>. The html is as follows:
<h1 class="entry-title">A Manifesto, of Sorts</h1>
<div class="entry-meta">
<span class="posted-on"><time class="entry-date published updated" datetime="2015-11-22T02:07:31+00:00">November 22, 2015</time></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p id="manifesto">F--- Berlitz. F--- Rosetta. Do it yourself and do it in style.</p>
The style on this element is as follows:
#manifesto {
text-align: center;
font-style: italic;
font-weight: 300;
padding: 2em 0 1em 0;
}
I can tell, using the Chrome inspector, that the <p> is both really tall and that the padding-top (the green-highlighted area in the inspector) is way above the <h1> sibling. I am stumped... I tried margin-top and the same issue happened. Can anyone explain what is going wrong? My styles are not too complicated, I don't think, so I am not sure what could be conflicting. Any help would be very much appreciated.
Thanks,
Dave
In main.css:457,458:
header {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
There is a float: left; on the header. This effectively takes it out of the normal flow of content. Either stop floating that header element, or do a clear after it.
Try:
.entry-content {
display: inline-block;
}
Related
At the moment I am trying to change the distance between the two headers but I can't seem to remember how.
my css for the header is
.header {
font-family: "Karla" !important;
color: #4e4e4e;
}
and part of the html specific to the header is
<div class="header">
<h1 style="display: inline-block">Text 1</h1>
<h1 style="display: inline-block">Text 2</h1>
</div>
the two headings are very close to each other and I would like to separate them more but I can't remember how. I have tried using margin and padding but it doesn't seem to be spacing them out.
The entire website looks like
Thanks
I would recommend the following CSS:
.header h1 { margin: 0px 10px; }
Change the second value (10px) for more horizontal space. This will also keep the headers in the center by adding space for each header on both sides: left & right.
My recommendation would also be to remove the style attribute from the h1 elements and add it to the CSS above. The final CSS would be:
.header h1 {
margin: 0px 10px;
display: inline-block;
}
You can add these three options and play with it:
.header {
font-family: "Karla" !important;
color: #4e4e4e;
line-height: 30px;
margin:0px;
padding:0px;
}
Well out of many ways to do that I would suggest you to add margin to your h1 tags. You can either add margin right to the first h1 tag or you can add margin left to the second h1 tag.
<div class="header">
<h1 style="display: inline-block; margin-right: 2rem;">Text 1</h1>
<h1 style="display: inline-block">Text 2</h1>
</div>
The above given HTML code snippet would do the required and if you wish to increase the space more, just change the value provided for margin right in the first h1 tag.
I'm creating my website and making it mobile-friendly with #media tags on CSS. I have an image of the empire state building that aligns to the right instead of center whenever the viewport is less than 1235px. I was wondering what the root of this problem is? I tried using a #media tag to center the image with "text-align: center;" but no luck.
It currently looks like this
The target image that I want to center is called "NYC_icon"
Here is my HTML:
<div class="section1">
<div id="NYC_icon">
<img src="C:\Users\LYind\OneDrive\Documents\Full-Stack Developer 2020 Course\Personal Website HTML\Images\home2.png"
alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
Here is my CSS:
.section1 {
margin: 80px;
padding: 30px 20px;}
#NYC_icon {
display: inline-block;
margin-left: 200px;
vertical-align: top;}
#media (max-width:1278px) {
#NYC_icon img{
text-align: center;}}
You can try applying the text-align: center to the div that contains the image. And also specify margrin: 0 when width of the screen is less than 1235px. so it allows that the image can be horizontally centered.
#media (max-width:1235px) {
#NYC_icon {
display: block;
margin: 0;
text-align: center;
}
}
First of all I would recommend that you head over to MDN and review the basics of layout. I do not understand what your are trying to do with the div which contains the image.
With regards to this particular case, experiment with the following changes:
Open the browser developer tools and inspect the element in questions. See what styles are applied.
I would recommend that if you are a beginner, set a 1px solid black border on all elements to visually see if what you are trying to do is working as you expect.
Finally, with regards to this particular problem, you can try many different things. I think that if you change the style of the img to {display:block; margin: 0px auto} it will be centered. Just drop the containing div altogether.
Also have a look at this resource.
The <img> is not centered at all, Not at more nor less than 1235px viewport.
I made the relevant changes to the code to make the images centered at all times, The code is heavily commented, If you have any questions please do ask.
/* To illustrate Not needed */
body * {
padding: 10px;
border: 1px solid;
}
/* To illustrate Not needed */
.section1 {
margin: 10px;
padding: 30px 20px;
}
#NYC_icon {
/* To let the element fill the space so we can center the img inside */
display: block;
/* text-align on the parent of the element we want to align */
/* text-align proerty only aligns inline level elements */
/* inline level elements are elements with display value
* set to inline or inline-[something]
*/
text-align: center;
/* margin-left: 200px; removed not needed*/
/* vertical-align: top; removed not needed*/
}
<div class="section1">
<div id="NYC_icon">
<img src="https://picsum.photos/300" alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
I have a HTML document with inline CSS that my professor asked to have the CSS within the head tag and have the same rending from the original HTML with inline CSS. I think I'm done but somehow the <hr> within the HTML with inline CSS looks thicker than the other one.
I already tried adding a height: declaration property but it renders even thicker than I want.
Original HTML: http://jsfiddle.net/2k66T/
Modified HTML: http://jsfiddle.net/dd63m/
Edit: Here are the instructions from the professor;
Write a CSS document in order to define the style of the following web
page (I refer this to as "Original HTML") in a right way. Add and erase in the original
page everything you think that is necessary. Use the on-line validator
of the World Wide Web Consortium to be sure that your work fulfills
the standards.
Real question is... why are you using HR?
Let's render a border on the div wrapping your logo image.
Have a fiddle! - http://jsfiddle.net/dd63m/11/
Updated fiddle - http://jsfiddle.net/8VTd8/3/
I have given the div wrapping your logo an ID of logo. I removed the br break tags, we can apply margins in the CSS. The font tag is no longer used.
HTML
<h1>MyTSC</h1>
<div id="logo">
<img src="./img/TSCLogo.jpg" alt="TSC">
</div>
<h2>My courses for Fal 2013</h2>
<ul>
<li>COSC 4330 Computer Graphics</li>
<li>IMED 1416 Wed Design I</li>
<li>ITNW 2413 Networking Hardware</li>
</ul>
The logo div is currently 300px wide, change to what you want. Note: margin: 0 auto; essentially this is centering your div. margin-bottom is applied to create those extra spaces. The border is applied to your logo div giving a consistent line across browsers.
CSS
body{
background-color: grey;
color: white;
}
h1{
text-align: right;
margin-bottom: 30px;
}
div{
text-align: center
}
ul{
font-style: italic;
}
#logo { width: 300px; margin: 0 auto; border-bottom: solid 1px #FFF; }
#logo img { margin-bottom: 30px;}
add background: white; in your css not color:white
like this
hr{
width: 50%;
height: 3px;
background: white;
}
They all have the same height, the one with the default color(no color specified) has a gradient effect so it looks a little thin.
Code for the Test fiddle
<hr width="50%" color="black">
<br />
<br />
<hr>
<br />
<br />
<hr id="test">
Js Fiddle
This should be interesting. Here's what I'm trying to do with CSS:
The words "An Example Alignment" should be in a single <h1> element.
The word "Alignment" should be on the second line (easy with a <br /> tag).
The word "An" should be smaller than the other words (easy with a <span> tag).
So we have:
<h1><span>An</span> Example <br />Alignment</h1>
But here's the catch:
I would also like to align the first letters of the 2nd and 3rd words with each other vertically, and that's where I run into problems.
Here's what it should look like: http://jsfiddle.net/Baumr/H2Pzr/
But that's an ugly solution as there are two <h1> elements.
Any ideas of how to do this with CSS by keeping the HTML the same? Very curious to hear. Thank you in advance.
P.S. I could also put "An" into a separate <span>, but I would prefer to keep everything in a single <h1>.)
I'd do the padding by using two display:inline-block spans, to make sure the right margin is always exactly the same (font width varies, depending on the in-use font face).
<h1>
<span class="padding">An</span> Example <br>
<span class="padding"></span> Alignment
</h1>
CSS:
h1 {
font-size: 30px;
}
.padding {
font-size: 20px;
width: 30px;
display:inline-block;
}
Just beware that IE doesn't always use inline-block the right way (although in this case it should).
Update
An even better solution: http://jsfiddle.net/H2Pzr/9/
Use the table-cell display of elements to automatically put them in two columns:
HTML:
<h1>
<span class="first">An</span>
<div class="second">
Example <br>
Alignment
</div>
</h1>
CSS:
h1 {
font-size: 30px;
}
.first {
display:table-cell;
font-size: 20px;
color: #444;
}
.second {
display:table-cell;
}
I would use two span classes in the same H1 tag:
<h1>
<span class="small-text">An</span> Example
<span class="line-two">Alignment</span>
</h1>
Then update your CSS accordingly:
h1 {
font-size: 30px;
}
span.small-text {
font-size: 20px;
}
.line-two{
display:block;
margin-left: 31px;
}
You don't even need the <br /> since you can just display the second span as display:block;
Updated fiddle here: http://jsfiddle.net/H2Pzr/6/
use two span with different class see jsfiddle
<h1><span class="first">An</span> Example <br>
<span class="second">Alignment</span>
</h1>
Try this: (minimal elements!)
<h1>Example <br>Alignment</h1>
h1 {
font-size: 30px;
margin-left: 31px;
}
h1:before
{
content: 'An ';
font-size: 20px;
margin-left: -31px;
}
I have some dynamic titles where the design requires each word to be on their own line. Here is the desired look:
http://jsfiddle.net/alanweibel/2LEmF/2/ (note the black backgrounds for each word)
The problem I need help with is keeping the style above while having the whole title inside of one tag. I cannot dynamically insert H1's before and after each word.
I need to change the HTML markup from
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
to something similar to
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
while keeping the same style as in the link above.
Thanks in advance.
See: http://jsfiddle.net/thirtydot/HksP2/
It looks perfect in IE9, IE8 and recent versions of Firefox, Chrome, Safari, Opera; all on Windows 7. It degrades reasonably well in IE7. In Safari on Mac, it's almost perfect.
This is based off a previous answer. Quoting myself from that answer:
Note that the line-height and padding adjustments can be very
tricky to get right.
line-height: 1.83; looks good, and was found by picking something that looked close to what you wanted, then using trial and error to find something that works in both Chrome and Firefox (they render text differently).
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
Your only option for doing this, that I'm aware of, is to write some javascript that will take your <h1>oh look ..</h1> stuff and split it out into separate h1 tags.
update:
I just thought of a way: http://jsfiddle.net/2LEmF/10/
Basically, you need to move your background color up to the main div. Then set the width on your h1 to something that is going to force the text to break along normal text breaking rules. Something like 10px.
I'm not sure what this is going to do on a number of browsers as you are essentially giving a size that is way to small to your H1... but it might be just what you are looking for.
Here's a simple example of how to get one line per word:
https://jsfiddle.net/xaq5ttf2/5/
HTML:
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
CSS:
.tagline h1 {
display: inline-block;
word-spacing: 100vw;
}
You can set the width of the h1 to less than that of the smallest word e.g. 10px.
It produces exactly the same result as your example (at least on Chrome and Firefox).
Jsfiddle here.
You could search and replace spaces with <br /> to get this look:
http://jsfiddle.net/WwbUL/
I'm not sure I understand the problem. It seems that you're stuck with the HTML as posted in your question, but you want it to display in-line?
What about just adding display:inline; to .tagline ?
http://jsfiddle.net/XmCLd/
Or is it the other way around? That you have normal-looking HTML, but you need to split your lines at the spaces?
http://jsfiddle.net/GQ44u/
Make the tagline div really thin and make it block instead of inline. Then make the h1 inline.
.tagline
{
width: 1px;
margin:5px;
display: block;
}
.tagline h1
{
color:#fff;
background: #000;
padding: 4px 10px;
font-size: 20px;
line-height: 30px;
text-transform:uppercase;
display: inline;
}
JSFiddle here.