During the last days I've tried to learn CSS and HTML, in order to make my first own theme for Tumblr (don't judge me, seemed like a good platform for testing things). I've ran into several problems which I was able to fix by myself, yet now I'm at the end of my knowledge, and Google wasn't able to help me. I've also tried to search this site, yet with no success. So if there's already a topic about this, I'm terribly sorry.
Basicly, Tumblr adds an <p>-Tag around every <img> you add, so the padding I applied to p also get's applied to the image, and I'm unable to overwrite this. A dirty fix worked for some time, yet as I'm trying to make the site responsive, I can't find any workaround or fix.
Here's the basic HTML-Structure for an entry:
{block:Text}
<div class="postcard">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<div class="text">
{Body}
</div>
</div>
{/block:Text}
Which results in this:
<p>Duis autem vel eum iriure dolor.</p>
<p><img src="http://i.minus.com/dbmLqVdFyHN5Tg/16.jpg" alt=""/></p>
I want some padding on both sides of a paragraph and some spacing at the end of one, so I added this CSS:
.postcard p, ul {
padding-right: 50px;
padding-left: 50px;
margin-bottom: 25px;
}
So far, so good. Now, here's the main problem: The image in a post should cover the whole width of .postcard, while also being responsive. Using max-width: 100%; would work, yet because the img is inside a p, a total of 100px padding gets applied to it. The following code is a dirty fix, but is obviously not responsive:
.text img {
width: 700px;
height: auto;
display: block;
margin: 0px -50px;
}
So how can I get rid of the padding for the image? Many thanks in advance!
If you can add some identifier kind to added <p> or around it for image cases, then you can override css for this cases:
myImage.p{
padding:0;
}
or
myImage.div p{
padding:0;
}
If you can't - then only choices you've left with is your fix or javascript fix. Since there is no way to select parent element with css.
since you probably can't add a class to the p tag tumblr adds, you'll have to turn it around and add a class to your own p tags so you can style just those:
.postcard p.padded {
padding-right: 50px;
padding-left: 50px;
margin-bottom: 25px;
}
Related
First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...
I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div. No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div, but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block, inline, position: absolute etc, but nothing seems to work. I already tried searching the other divs for problems, but I just can't find anything. Here is a picture.
This is the css:
.gallerie {
text-align: left;
width: 100%;
}
.gallerie ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.gallerie li {
display: inline;
margin: 0px;
padding: 0px;
}
Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.
Thanks in advance!
Edit:
So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem
I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.
So guys, in short:
wanted to add the pictures here, can't post more than two links
Edit:
Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.
Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.
Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.
Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.
Your problem is css padding
<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.
I would say set text-align: center; and padding: 0; for the .gallerie class
Is this what you want?
Corresponding css for .gallerie
Padding Example:
.padded {
padding: 10px;
background: red;
}
p {
background: yellow;
}
<div class="padded">
<p>This is some text</p>
</div>
Try adding padding-left: 20px to the <ul> and wrap the text underneath in a <p>
Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).
It appears from the page that you may be attempting to wrap the <ul> in a <p>, which is not valid HTML.
My first question so please go easy. I've been stumped on this for a day now and can't work out what the issue is. Essentially I have a div with an ID that i'm adding a background url too..image1 inside the main div. Essentially it's an image that swaps when I hover. I've gone right back to basics and tried this code in a fresh document and it works perfectly. However when I paste the same code in the file i'm trying to work on the image doesn't display. No idea what would be stopping it?
The div id is working. I styled an empty red box to test it out.
The path is correct. I even went as far as to paste the image into my root for the sake of simplicity. Still nothing.
Any help would be appreciated.
html:
<div id="main">
<h1> <!-- something something about us --> </h1>
<p>The Custom House clock struck one. Mr. Fogg observed that his watch was two hours too fast.
Two hours! Admitting that he was at this moment taking an express train, he could reach London and the Reform Club by a quarter before nine, p.m. His forehead slightly wrinkled.</p>
<div id="image1"> </div> <!-- This is the part i'm having trouble with-->
CSS (including all css for #main):
#main h1 {
text-align: center;
padding: 30px 0 0 0;
color: #4b4b4c;
}
#main {height: 685px;}
#main p {
padding: 20px 50px 0 50px;
width: 60%;
margin: 0 auto;
text-align: center;
font-size: 15px;
color: #868686;
}
/* rollover css images */
#image1 {
background: url(contextmap.jpg) no-repeat;
width: 400px;
height: 400px;
}
I haven't added the hover yet because I can't even get the initial image to display, yet everything worked fine in my sample using only this code.
If there's anything i've left out please let me know. Like I said this is my first time posing a question. Thankyou.
You may need to change the file path in your css.
Instead of:
url(contextmap.jpg)
Try:
url(../images/contextmap.jpg)
Images can be replaced for the name of the folder where the jpg is stored.
The URLS in the css are relative to the CSS file, not the HTML file that links it. this should work if you have the image and the CSS in the same folder (or in case of CSS inside a style tag in your HTML file, same folder as your HTML file).
I'm designing a website for my company and we're using a wordpress template. We've been able to modify the template to make it full screen (& full width), however, we can't get rid of the blank header that is seen in the screen shot below. We've added custom CSS style into our style sheet, which has helped, but did not eliminate the problem:
CSS Style we added:
.page-template-template-fullsize-php #header { margin-bottom: 0; }
Any other advice would be very helpful as we're looking to clean up this aesthetic flaw on our website.
Screenshot:
Website Address: http://visualicreative.com/products/advertising/web-commercial-html/
This will help your CSS:
#content .entry-header {
display:none;
}
#content {
padding: 0px 30px 30px 30px;
}
/*changed from padding:30px; */
You really need to tweak your theme. You've got a lot of blank code in there that is creating gaps (including the blank header).
You have some inline code that increases top padding:
<div id="main" class="clearfix zIndex" style="padding-top: 108px;">
Then all of this under the entry content:
<p><a name="top"></a></p>
For your article directive/element if you use margin-top: -100px; you can shift it up by 100 pixels. More here.
In one of your template files that has been used on that page, there is a
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
empty header which causes a little more space. The rest of that additional space is because possibly in the same file just one line up of your header element, you have an <article> element with the id of #content which has padding:30px;
You can change that padding style to
padding: 0px 30px 30px 30px;
just to get rid of the top padding.
Hope this helps.
You have 108px of padding at the top of div#main.clearfix.zIndex. By removing or lessening that padding, you can affect how close to the menu bar your main div is.
Change the padding of .nav-full-width #main and you are good to go. also .entry-header has a margin, change that too.
I visited that web page and I recognized to there is many different type of levels to header.You can fix and delete some of them.However, there is a one way to fix,You should insert #content css veraible to padding-top:0px;.Also, you should delete unnececarry div and p lines from pure html.One of the unneccecary code line is in the following segment;
<header class="entry-header">
<h1 class="entry-title"></h1>
</header>
More over, there 2 empty p tags on the pure html.You should delete them.I tried it on the browser and it displaying,whatever you like.
I'm very inexperience with html and only know the basics for my Tumblr blog. My question is probably very simple but I'm very pissed off at it and I'm losing sleep because I will not sleep without fixing it. So waaay in the beginning of my code, I have:
.post img { width: 100%; }
and then waaay later in the code, I have:
div class="asker-info"><img src="{AskerPortraitURL-24}" alt="" class="asker-avatar" /> {Asker}></div>
My problem here is that whenever someone asks me a question, their avatar appears 20x literally the size it should be. I've checked it out on Google Chrome's "inspect element" and found that the .post img part of my code cancels out with the width part in this section:
.asker-avatar {
float: left;
width: 24px;
margin: 5px 10px 5px 10px;
}
I'm so goddamn pissed off and nothing makes sense
Could you try this and tell what happens ?
Here you create a css class with the image size you want. You set the width what you want, and the height auto, it must pick a good value depending on height
.asker-avatar
{
width: 24px;
height: auto;
margin: 5px 10px 5px 10px;
}
Another question, can you put here the asker-info class you use in the div ? Could be that class the problem with your img ? And maybe you could try to remove the .post img {width:100%} because can make the img to resize to the 100% width of the div
And here you can practise with images sizes and resizes, and you can read some explanation about the img attributes, it's an useful page:
HTML_IMAGES W3SCHOOL
I fixed it!! Oh my god, am I relieved! I noticed that my own avatar was not affected by the .post img so I looked over the class and found out that by simply adding an id="_", you can change it!!
It's not working because the CSS selector .post img is "more specific" than the selector .asker-avatar.
Since .asker-avatar appears lower in the style-sheet that .post img, it will be enough to make that selector as specific as the one you want to override.
I'm not an expert on CSS specificity (this guy is), but try changing the .asker-avatar selector to img.asker-avatar (note - no space between img and .).