- This topic has 15 replies, 3 voices, and was last updated 8 years, 1 month ago by
.
-
Posts
-
Still working on the subtleties of formatting this site. I have a number of blocks on the home page. I have gotten the first two blocks just about where I want them (close enough for now) using the css position: absolute | top: 0px | right: 0px combination. However, the third block is supposed to be below the first two side by side blocks, not at the same location. How do I force the third block (text that says “Growing for Better Living”) to be below the first two blocks?
gottagrowit.ipage.com/public_html
Thanks.
Either the link is not the right one, or you need to elaborate, because I am not sure what those blocks you speak of are
Okay, block #1 is a picture that says “My eBook”. Block #2 is a video (on the right side). Block #3 is text that says “Growing for Better Living”. On my browser, one letter of that text can be seen in the small space between the first two blocks.
Right now your text is under your two other blocks, which could be fixed with a position:relative and a z-index:100. But it will not be below, because the other blocks are positioned absolute so they are taken out of the flow and overlap.
The question is why are you using position absolute for these 2 blocks, they don’t need to overlap anything, so there is no reason for that.
They should be in a floating div with a width defined as a percentage, then you can control the flow.
You probably just want
<div style=”float:left;width40%;”>first block content</div>
<div style=”float:left;width:60%;”>Second block</div>
<div style=”clear:both;width:100%;>Third block</div>
Only use position absolute if you need something to be floating over everything as absolute positioned objects are hard to manage in a responsive manner.
All these are pure HTML question by the way, and you would be better learning these out of an HTML tutorial site 🙂
Thanks scrambler. That did it. The reason I positioned absolute was to tighten up block 1 and block 2 to the menu bar. I can live with the big space between the bar and the blocks for now, I guess. I will also tweak the sizes to make it look a little better.
Space can always be eliminated as they are usually default margins and padding.
Right now you have the info bar visible under the menu (login at the right). If you do not want the Info bar, you can hide it in Main options > Menus > Info Bar > Hide area drop drown list
After that there is a 1em top padding on the space between title and content. you can eliminate that by puting a zero in Main options > Content Areas > Content Area > Space between title and content box.
Then you appear to have 3 empty paragraph tags at the beginning of your content, and as each paragraph tag comes with bottom margin, it creates a big space.
If you did not add these paragraph tags, WordPress may be doing so on line returns in your content. Go to your page editing page, and check the options “Allow Raw HTML and scripts” this will prevent WordPress from doing that. Also get rid of all line returns before your divs.
Once that is done, if there are some paragraph tags that need to stay there, we can eleminate the bottom margin with CSS.
Finally You seem to have a script inserted before the divs and some breaking space (<br/>). You need to remove the breaking spaces as they are causing some space.
If there is any space left after that, post back so we can check where it comes from
Thanks again, scrambler. All suggestions worked. Still a little space but I think it looks good like it is. I’ll take your advice on visiting an HTML tutorial site. I have a few books and have been reading a lot but every bit helps.
The space left is the empty info bar. You need to actually hide it all with Main options > menus > Info bar > Hide Area > Hide on All devices
By the way, you may want to customize for phone as on a phone having them side by side may make the top 2 block too narrow.
To do that you would change the HTML to give a class to your divs
<div class=”mydiv1″ style=”float:left;width40%;”>first block content</div>
<div class=”mydiv1″ style=”float:left;width:60%;”>Second block</div>
<div style=”clear:both;width:100%;>Third block</div>
Then add the CSS below on Main Options > Fonts & Custom > Custom CSS Rule box to change the width of the first 2 on phone so they also stack
.is-phone .mydiv1 {width:100% !important;}
regarding creating responsive multi column layouts you should read
http://forum.weavertheme.com/discussion/11220/weaver-xtreme-tips-and-tutorial-part-5
It also include links to some generators I made for complex widget layouts, as well as a tutorial on the available built in options in Xtreme.
Read through it all 🙂
Wow @scrambler, I’m just reading this one now because I didn’t see it when you posted. Also reset my notifications so I get an email on postings, too.
I think I like the idea of going back to using Weaver Xtreme without having to rely on a child theme and php files to execute my home page. I’ll give this a try. Thanks.
Notifications on this site do not work well. Always check the yellow favorite star at the top, and visit systematically if you have a thread open.
Hey @scrambler , I played around a little with Weaver’s native responsive feature for multiple columns and I like the approach much better than going with a child theme if at all possible. However, the <div class=”content-2-col”> </div> approach leaves me with two equal columns fixed at 49.8% width each. Do you know if there is any way to make the left column 40% and the right column 60% (approximately)?
@scrambler provided you with that solution earlier. If you want custom widths, you need custom CSS, even if it is in a style= field.
As as an alternative, you can certainly define your own classes such as left-40 and right-60 in the Custom CSS section on the Fonts & Custom tab.
Please excuse my ignorance folks. While I was completely green about 3-4 weeks ago, I think I am really starting to get it. But, this is like getting a drink of water from a fire hydrant. I just tried out an in-line style:width tag and it worked perfectly. I’m on my way now and can, hopefully, complete this project by the end of the weekend.
- You must be logged in to reply to this topic.