Trouble with basic positioning


I am going slowly insane. God i hate css. Sometimes I think I know what i’m doing. Other times… I’m working on this site with a background, and a row on top with some text. WYSIWYG is a lie. I get what I want to see in blocs. And in blocs’ preview. And in “preview in browser”. The only )(&^%%$ place i DON’T get what I want to see, is on the _actual internet._Could someone take pity on a poor, poor idiot and educate me as to how I should be approaching this, settings-wise? I hate to be a negative nelly, but what’s the point in “previews” if they aren’t going to show the end result anyway? Hey, i’m a print designer, cut me some slack.

Hi @mistergreen could you upload or PM a zipped bloc file so i can take a look?

Cheers

Okay so I switched to using a png logo thinking one less thing to worry about (text alignment) might help me understand the positioning. It didn’t. I still can’t get anything to work. I’m going to put it as simply as possible: I need to position an image in the upper left area of the viewport. I need it to resize with the page. Or I could change the size per view.

Either way, I need to be able to position things properly. I got blocs because I thought it would take some of the stress out of working with css. My impression after working with it for a while is that it’s great as long as you stay on the path. Stray from it though, and you’re going to be in trouble. It’s been such a long time since I worked “from scratch” that i suddenly realized “hey, where the hell is relative positioning in here?” And what kind of positioning am i working with? For this stupidly simple problem I’m having, it should just be 1)background 2)div w logo inside (that’s a bloc right?) which should default to top left but doesn’t, 3)“push” the div using margins. Maybe someone could explain the box model to me as it pertains to blocs?

Also, previewing just plain and simple is broken. Different results in blocs compared to 3 browsers, then different again in solis. Oh yeah I also tried the developer mode in safari, with different results yet again.

1 Like

I don’t fully understand the problem. If I were creating this bloc, I would start with a basic structure bloc. Within the Bloc I would add a 2-column bric. This would give me a clear and distinct right and left area for adding content. I would then add my content to the left column. Next, I would add the background image and create a custom class to set the bloc height to ensure that all relevant parts of the image are displayed.

To position the text content, I would set up another custom class and adjust the padding of the text so that it appears where I want it. I would then switch to tablet and mobile view and adjust the class accordingly for each view.

YEP! My experience too. :frowning:

And, as you can see by hendon52’s helpful guidance, the solution is all about custom class creation and management…which is a slow tugboat while you’re learning to navigate the waters…