Need a little help with CSS/HTML

Discussion in 'Lounge' started by RMorgan, Oct 17, 2015.

  1. RMorgan

    RMorgan Audiosexual

    Joined:
    May 17, 2014
    Messages:
    632
    Likes Received:
    508
    Hey guys,

    I'm not sure if it's ok to post these kinds of help requests here. If it's not, mods, feel free to delete it.

    Anyway, I need a little help with my blog.

    Well, first, this is my blog's address. I've been using it for a long time as my personal portfolio.

    http://www.rafaelmorgan.net/

    As you can see, I use a custom template, responsive. So far so good.

    The problem is that the body of individual posts is too misaligned.

    Check out this post, for example:

    http://www.rafaelmorgan.net/2012/09/damnation-cup.html

    As you can see, everything is cluttered on the left, and, most importantly, the text width stretches way beyond the width of the image itself.

    Now, straight to the point. I need to find a way to bring everything to the center, justifying the text in relation to the posted image.

    I've attached an image to illustrate what I'm trying to do to do, which is bring everything to the yellow area.

    If I was using a regular template, I'm sure it would be easy to make some changes, but since it's a custom template, full of complicated code, I can't figure out what to do.

    I don't know anything about coding, but I know how to copy/paste and change some stuff here and there, you know...So, could anyone help me to figure out what I need to do to the code to achieve this desired result?

    Thank you in advance,

    R.


    image.JPG image.JPG
     
    • Interesting Interesting x 1
    • List
  2.  
  3. Olymoon

    Olymoon MODERATOR Staff Member

    Joined:
    Jan 31, 2012
    Messages:
    5,814
    Likes Received:
    4,461
    Are these designs yours?
    I love the chairity, the Psycho Plunger and the little time

    Unfortunately I cant help you.
     
  4. monochrom3

    monochrom3 Ultrasonic

    Joined:
    Jul 3, 2014
    Messages:
    82
    Likes Received:
    21
    Is your blog hosted at blogger.com? The template you're using is not really well-coded (at least not the post pages). Blogger is not really a professional blogging CMS, it's known to have a few bugs and problems that sometimes make it really frustrating to use. So if you're planning to keep this website growing in the future, I'd highly recommend you to switch over to Wordpress.

    The reason your text on the post page is exceeding the featured images width is that your post page code is really messed up, e.g. almost every line of text has its own <div> element containing the text. All those divs are then encapsulated within a post container that seems to have no specified width. And HTML semantic elements with no set width will automatically be as wide as the screen they're displayed on.
     
    • Like Like x 2
    • Interesting Interesting x 1
    • List
  5. nikon

    nikon Platinum Record

    Joined:
    Oct 6, 2012
    Messages:
    954
    Likes Received:
    168
    Hello, right now I checked your blog.
    Well, I must inform you about this. I don't know who make this, but every link for detail page has slightly different div structure.
    Per example:
    Mirror/Mirror is presented fine, but Damnation cup is not!
    You should check how links are opened, and does the every link has own html or php file.
    Structure must be the same in every detail page. If you have some detail page with expected structure, then div placement must be the same in all others.
    Per example:

    <div class="postbodycontent">
    <br>
    <a href..... style="
    float:left;etc...">
    </div>


    This structure must be the same in all files.
    Well, your blog is for sure static (with static content) so you don't use database, but it can be maked different, so ever time you open detail it use the same detail html file.
     
  6. nikon

    nikon Platinum Record

    Joined:
    Oct 6, 2012
    Messages:
    954
    Likes Received:
    168
    Also, I recommend you to use Bootstrap for this kind of stuff.
    You can just add two columns in container, or one column with offset (in center) and then play with your content. Big thing with Bootstrap is in resizing from big to small screens.
     
  7. nikon

    nikon Platinum Record

    Joined:
    Oct 6, 2012
    Messages:
    954
    Likes Received:
    168
    Also, you have some script errors on page (6 errors).
    ... anyway, you should check one link with well formatted images and text and then apply that div style to all other details. And you must not forget div classes and styles, it's important. If some div hasn't some class name it will not work properly :)
     
  8. RMorgan

    RMorgan Audiosexual

    Joined:
    May 17, 2014
    Messages:
    632
    Likes Received:
    508
    Thank you, mate. Yes, this is my work. I'm glad you liked it! :)

    Oh, and thanks to whoever dropped me a note via contact form. Now I've managed to align image and text to center, which is great! I tried to get back to you via email, but it was immediately returned.

    Like some of you have observed, posts are currently very messy. I'm reviewing them one by one, but the hardest part is done.

    Anyway, there are just a couple of more things that I'd like to adjust.

    I need to align the name of the project and width of the divider. I've attached an image to illustrate what I mean.

    I tried to figure what should I change to achieve these results via Chrome's "inspect element", but failed miserably. :(

    Anyway, yes, for now my website is hosted on Blogger. I know it's a very outdated and amateur platform, and I am indeed planning to change it.

    Learning proper webdesign is currently the first thing on my to-do list, so, hopefully, I'll be able to design my own site from scratch in the near future. Damn it...So many cool things to learn...So little time. :unsure:

    All the best,

    Rafael.
     
    Last edited: Oct 19, 2015

    Attached Files:

  9. RMorgan

    RMorgan Audiosexual

    Joined:
    May 17, 2014
    Messages:
    632
    Likes Received:
    508
    This is a custom Blogger template that I've found on the web. I use Blogger's own HTML/CSS editor to edit things.

    As for my coding knowledge, it's literally close to zero. I can deduce part of the logic behind it, since part of it is reasonably self-explanatory, so I can change some lines and values here and there, but it's a kind of hit and miss game, if you know what I mean. :)

    Man, I feel so outdated...I need to learn these things asap.
     
  10. remix

    remix Platinum Record

    Joined:
    Dec 3, 2011
    Messages:
    676
    Likes Received:
    170
    Location:
    ZiON
    Dude get wordpress...

    honestly...
     
  11. monochrom3

    monochrom3 Ultrasonic

    Joined:
    Jul 3, 2014
    Messages:
    82
    Likes Received:
    21
    Editing Blogger themes is probably not the best way to get into web design. Blogger has a lot of unique semantic HTML elements and quite a lot of Javascript included that no other CMS uses, which makes the whole coding experience seem a lot more complicated than it actually is.

    If you want to learn webdesign efficiently, you might want to take a look at udemy.com. They have quite a few free webdesign tutorials, and currently all their pay-to-watch courses are 10$ only :)
     
  12. nikon

    nikon Platinum Record

    Joined:
    Oct 6, 2012
    Messages:
    954
    Likes Received:
    168
    For

    <h1 class="post_item_title">

    set style:

    • display: block;
    • max-width: 640px;
    • margin-left: auto;
    • margin-right: auto;
    • width: 53%; // this is optional, I must set to 53 to get title aligned correctly. Normal value should be 50%

    For <a href> inside title set style:

    • text-align: left;
    • padding-left: 0px;
    (if you want to have title centred, you don't need to add these to a href)

    And you will get expected result!
     
    Last edited: Oct 20, 2015
Loading...
Similar Threads - Need little help Forum Date
Need a little help Lounge Feb 20, 2023
(SOLVED)Need little help with Kontakt Kontakt Oct 24, 2020
Needing a Little help with LOUDPVCK Tony im remixing.....sound design? Lounge Oct 11, 2014
"Brah! That kick needs a little more punch" Lounge Dec 3, 2019
Should I really need a condenser mic? Mixing and Mastering Mar 17, 2024
Loading...