I have an email that goes out weekly with a section at the top designed to link to the other sections of the email. However, when someone clicks the links, they scroll down the page a little bit, but don't stop at the correct section. An example of one of these links is below:
• Featured Topic Page
And the section that link is meant to reference is below:
<h2 style="font-size: 18px; color: #005883; margin: 0 0 12px; line-height: 22px" id="#topics">Featured Topic Page</h2>
I am new at this so please let me know if I should provide more information or if I should repost this in a different way! Thank you.
Try this!
Just remove the id="#topics" from your h2 element and then it will work fine. Also make sure whether there is a proper space between these two elements otherwise you will not be able to catch the difference.
•
Featured Topic Page
<div style="width: 100px; height: 1000px;"></div><!-- Ignore this rule -->
<h2 style="font-size: 18px; color: #005883; margin: 0 0 12px; line-height: 22px" id="topics">Featured Topic Page</h2>
Thanks and best regards!
Related
bear with me here-- I'm trying to learn HTML/CSS.
I have this how-to site, dropshipstepbystep.com. I wanted to top-line the '3 steps to success' on my home page, so I created custom HTML widgets in the 'Our Focus' section of the Zerif Lite theme. I'm sure the way I did this is pretty terrible, but on my desktop, I've pretty much acheived the look I want.
Now I need to be able to change the way the widgets/blocks appear for smaller screen sizes. I know I can't use inline-CSS for #media, so how should I go about this?
Please explain like I am 5. Thanks in advance!
PS: Don't know if it helps, but here's how I wrote the first custom CSS widget...
<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 50px;">
<div style="width:78%; padding-right: 2%; display: inline-block; float: left;">
<h4 style="align: left; line-height:1.5;">Hey! I'm Zach, and I created Dropship Step by Step to show you exactly how I build and execute a dropshipping project in 2017. If you find my content useful, I have two things to ask of you: (1) Share it with anyone you know who would also find it valuable, and (2) if you choose to use a service I recommend, please <u>click</u> the link I provide. Some of the services I recommend pay me referral credits, which is how I keep my content free. If you don't click, they can't track!</h4>
</div>
<div style="width:18%; padding-left: 2%; display: inline-block; float: left; height: 100%; vertical-align: middle;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/IMG_4701.png" style="margin-top: -25px; border-radius: 50%;">
</div>
</div>
<div style="display: block;">
<h1 style="padding-top: 50px;"><u>
3 STEPS TO DROPSHIP SUCCESS</u>
</h1>
</div>
<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 100px;">
<div style="width:33%; padding-right: 2%; display: inline-block; float: left;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/Screen-Shot-2017-08-25-at-10.23.39-PM_clipped_rev_1-8.png">
</div>
<div style="width:63%; padding-left: 2%; display: inline-block; float: left;">
<br><h2 style="font-weight: bold;">Find a Product to Sell</h2>
<p style="align: left; line-height:1.5;">I'm going to show you how I find inspiration for product ideas, and how I test my ideas quickly. The goal is to take something generic and cheap looking, then market in a way that will totally change people's perceptions. The dash cam on the left is a perfect example. I get them for $20 and sell them for $60, and they're actually really nice! I use one myself.</p>
<p style="align: left; line-height:1.5;">You can find many inexpensive products to promote for free via AliExpress. Alternatively, SaleHoo will tell you exactly how well products are selling around the web, at what profit margin, and what supplier will dropship them for you ($69/year). Plus,
you can find American-based suppliers, so your customers don't have to wait weeks for products to arrive.</p>
</div>
</div>
The best thing you can use for your problem is the grid system in Bootstrap. You can find the information for this here- https://v4-alpha.getbootstrap.com/layout/grid/
and in various other tutorials.
You basically just have to assign the required space on your screen for the widgets differently for small, extra small and medium sized devices.
Other than this if you want to space your elements on your screen, you can use flexbox for that. There are various tutorials available for this as well.
Both can be used together. I am sure you will be able to solve your problem with Bootstrap.
You should start with learning CSS media queries and how to it for responsive website development. I recommend you can learn it from W3Cschool, below is the reference link:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
first of all please use CSS from the external file. Currently, you are using inline CSS which is hard to use in #media query.
Once your layout is done then use #media query for different devices.
Why is my paragraph bigger than the div when its inside it. To me it doesn't make any sense. Can you guys explain why this is happening and how I can fix it.
CSS:
#whos{
font-size: 15px;
color: black;
}
HTML:
<div id="Text">
<b id="bold">Hello,my name is Navjeeven</b>
<p id="whos">
I am Currently enrolled at
Brampton Christian School
</p>
</div>
What it looks like right now?
You have another style: #inside p which overrides the font size.
https://css-tricks.com/specifics-on-css-specificity/
I have this two inline block text side by side but one them has one more paragraph and it mess up the text.
As you can see the "who we are" paragraph has weird height and i want to be potion same as "what we do" paragraph so it looks like this
This is my code
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
what do i need to do. i think there is already an topic for this but i don't know whats its called because English is not my first language.
Add the vertical align property to your #content element in your CSS code:
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
vertical-align: top; /* <-------------------- your huckleberry */
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
There are two solutions:
Solution One (Add vertical-align: top; in content class):
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
Second Solution:
Add inline css in first content div
<div id="content" style="float:left;">
A simple solution for this would be the following:
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
You do not need to define width:100% for #wrapper, div is a block level element. You also don't need text-align:left; since text-align:left is the default rule for all element unless an upper level has a different align rule. display:inline-blocks is treated as a table cell, which by default has its value as "baseline", you can read from here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Also, you should not be putting <p> inside of <span>, <span> is an inline block element and <p> is a block level element; Here is what I would do, it's simple and works and it is not based on hacks.
You may be more interested in the quick fix but its important to know the rules because hacks eventually collapse.
Hope this helps.
#wrapper {
border: 1px solid blue;
}
#wrapper:after {
content: '';
display:block;
clear:both;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
<div id="content">
<h1>Who We Are</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
</div>
Within posterous when you hover on an image it displays a box enabling the user to download or view the full size image. Here is the example of how this should work.
I am trying to find out why this does not work in the theme I created Here. Any and all help would be greatly appreciated.
I took a quick look at your code. The span that's supposed to show up; 1 has no id associated with it and two is not showing when you hover over the image. Make sure your javsacript is correct. I think it is most likely being referenced wrong.
<span id="" class="show">
<div id="-dl3" style="font-size: 14px; position: absolute; right: 10px; bottom: 0px;">
<div id="-dl2" class="posterousGalleryLink" style="font-size: 14px; display: none;">Download this gallery (ZIP, null KB)</div>
</span>
something like this
http://jsfiddle.net/amkrtchyan/jCcnC/
I'm very confused about how things like this should be done. I am able to layout a whole site with html and css, but when it comes to things like this, I begin to doubt whether i'm doing it the right way or not.
Can somebody please help me? I am trying to have a H1 and a H3 (or H2) laid out (as shown below) somewhere inside a div that is 25% wide?
Any help is much appreciated, and thank you!
http://tinypic.com/r/2wd5bfl/7
P.S.
I was kinda thinking something like this?:
<div class="yipeee">
<h1 style="float:left; position:absolute; top:2; left:2;">This is a pretty awesome heading</h1>
<h3 style="float:right; position:absolute; bottom:2; right:2;"><i>if only it were better than this sub-heading...</i></h3>
</div>
Not sure if this is what you're asking for, but here's a solution for the given example:
<h1 id="heading">This is a pretty awesome heading</h1>
<h2 id="subheading">If only it were better than this subheading</h2>
<style type="text/css">
h1#heading { font-size: 36px; font-weight: bold; }
h2#subheading {
margin-left: 25%;
font-style: italic;
}
</style>
See the jsFiddle example at http://jsfiddle.net/fausak/WmuRf/
Here you go, this is almost exactly the same as the picture:
Here is the example: http://jsfiddle.net/MarkKramer/WmuRf/2/
I used your jsfiddle and edited it and now it is almost exactly like the picture (just the font has to be changed)