So I've been looking for days and can't find a way to do that.
I made a WordPress site, and my homepage is displaying the most recent posts I've made.
Thing is, the content of a post is written with some specific layout, and it is meant to stay that way. The layout cannot change! I need the text to stay in the exact same place, even if it becomes way smaller and less readable when looking at the site on a smartphone.
Of course, the site is responsive. Only thing I don't want to be responsive is the content of a post.
I've tried a lot of things, but I can't find a way to make it... This page shows exactly what I'm looking for, except that I don't want the post to be re-sizable by the user. I just need it to fit the parent div.
.responsive-wrapper {
border: 3px solid black;
}
.post-content {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
}
.txt-top-right {
display: block;
float: right;
margin-left: auto;
padding-right: 20px;
}
.txt-under-top-right {
clear: both;
}
.txt-center {
text-align: center;
}
.post-content img {
display: block;
max-width: 200px;
float: right;
padding-right: 20px;
}
<div class="responsive-wrapper">
<div class="post-content">
<p class="txt-top-right"><em>Div right-top corner</em></p>
<p class="txt-under-top-right">
Div following the one on right-top corner
</p>
<div class="txt-center">
<h2>h2 in the middle of the page</h2>
<h1>h1 in the middle of the page</h1>
<h3>h3 in the middle of the page</h3>
</div>
<img src="http://cs.pes.edu/wp-content/uploads/2016/06/default.jpg" />
<p>
paragraph<br> on the left side<br> of the page<br> describing<br> a lot of things<br> on a lot of lines
</p>
<p>
Adress<br> City<br> Country
</p>
</div>
</div>
I understand HTML/CSS/JS, but I am struggling with JavaScript... I can insert some <script> tags in my html header with functions in it, but I have hard times understanding what these functions do.
I'd like the layout to stay the exact same way, doesn't matter which device the user is on. For instance, I want the .txt-top-right paragraph to take this amount of space. On a smartphone, the font size shouldn't re-size and fill up more than this amount of space of the container...
This is an example of what is happening right now when re-sizing the window. The layout changes completely !
Thank you for reading, hope it was clear enough :)
Related
I feel silly asking something that seems so rudimentary, but I just can't figure this out.
I've got a Wordpress theme with a side bar. I want to put a simple author bio on the side (an image with a bit of text and a link underneath).
When the theme responds down, this sidebar drops below the main content area and gets HUGE, so I'd like for the layout to switch to a smaller image on the left and text on the right.
It seems simple, but various code I've been trying to write or grab off the internet still isn't working.
Here's the HTML and CSS I've been trying so far:
<div id="bioblock">
<img id="bioimg" src="via.placeholder.com/600x600" alt="Blog Author" style="width:100%; margin-bottom: 10px;">
<div id="bioblurb">
<h3>Welcome to My Blog</h3>
<p>This is a bit about the blog and the author. It will be several lines long.</p>
</div>
</div>
The CSS:
#bioblock {
padding-bottom: 0;
}
#media screen and (min-width: 0px) and (max-width: 1024px) {
#bioblock { display: block; width: 50%;}
#bioblock #bioimg {height: auto; display: inline; float: left;}
#bioblock #bioblurb { float: right; }
}
I tried to find a preexisting widget out there to handle this, but the author bio widgets are awful and the image + caption ones don't seem to solve it.
I'd love any help anyone could offer. I'm sure I've made a bazillion dumb errors here, please don't laugh too hard at my code. Feel free to burn my stupid code attempt to the ground and suggest another way to do this!
If you don't want the text to float around the image (i.e. also go under it), you should use display: inline-block for both the image and the text container, both with fixed width (meaning percentages or pixels, choosen so that both can fit into the parent element side by side). And it's good to use some other settings too, see below.
#media screen and (max-width: 1024px) {
#bioblock {
display: block;
width: 50%;
}
#bioblock #bioimg {
height: auto;
display: inline-block;
width: 35% !important;
height: auto;
vertical-align: top;
}
#bioblock #bioblurb {
display: inline-block;
width: 60%;
margin-left: 2%;
vertical-align: top;
}
h3 {
margin-top: 0;
}
}
<div id="bioblock">
<img id="bioimg" src="http://via.placeholder.com/600x600" alt="Blog Author" style="width:100%; margin-bottom: 10px;">
<div id="bioblurb">
<h3>Welcome to My Blog</h3>
<p>This is a bit about the blog and the author. It will be several lines long.</p>
</div>
</div>
I have these three sections that have three sections underneath them and I would like for the ones below to follow the ones directly above them. For example in this codepen the second section below does not go directly underneath the second section above, because the first section above is a little longer.
codepen.io/anon/pen/apEQRE
Is there a way to fix that?
Not easily without changing your HTML structure. You could float the elements to the left rather than displaying them as inline-block, however, the element on the bottom left would have the same problem. You could display them as flex, but that would cause problems with the way the text is formatted.
What I would recommend is diving the sections into three defined columns:
<div class="column">
<section>
<h2>Title</h2>
<p>Text</p>
<p>Text</p>
</section>
<section>
<h2>Title</h2>
<p>Text</p>
</section>
</div>
Then you would need to slightly change your CSS to cover this:
.column {
float: left;
width: 33.33%;
}
section {
text-align: center;
background-color: white;
width: 90%;
padding: 15px;
border: 1px solid #007d87;
margin-bottom: 5px;
opacity: 0.8;
display: inline-block;
text-align: left;
vertical-align: top;
}
I've created a new pen showcasing this.
Note that your example has identical sections, but in practical application, you'll need to re-order the sections so that they read left to right, rather than top to bottom.
Hope this helps!
So on my website, on this page http://dunnrite.co.uk/our_work the right hand side text should be on the right but sometimes in chrome and possibly other browsers it over laps the images. When you refresh a couple times or resize the browser (my site's responsive) it goes to normal.
Here is the HTML code:
<div id="content_box">
<div id="left_side_work">
<h3>Our Work</h3>
<a class="fancybox" rel="group" href="Images/Clubz4u.jpg">
<div id="clubz4u_pic"></div>
</a>
<a target="blank" href="http://beauxcadeaux.co.uk">
<div id="beaux_cadeaux_pic"></div>
</a>
</div>
<div id="right_side_work">
<h3>Clubz4u</h3></br>
<p>Clubz4u was a social enterprise that Dunn Rite set up for DHSB school. It enabled club owners/event organisers to list their activity's details on our site for free.
This also meant that anyone looking to join a club could easily see the clubs on offer in their region.
To help cover any costs associated with setting up the website Clubz4u had live adverts placed by Google which when clicked generated income.
We also produced interactive Facebook features.
</p>
<div id="beaux_cadeax_text">
<h3 style="margin-top:150px;">Beaux Cadeaux</h3></br>
<p>Beaux Cadeaux is an online gift shop created by husband and wife Val and Richard Cass. They recently created their own website and needed Dunn Rite's assistance gaining some SEO. Richard commented on our Dunn Rite representative saying "I have found you to have a maturity and professionalism beyond your years. You have been helpful and efficient. It would be good to think that we could both benefit from working with each other in the future."
</p>
</div>
</div>
<div id="nextpage">
Next →
</div>
</div>
and the corresponding CSS
#left_side_work {
width: 40%;
padding-top: 30px;
left: 0;
margin-left: -250px;
float: left;
}
#right_side_work {
margin-top: 35px;
display: inline-block;
width: 400px;
height: auto;
float: right;
margin-left: 70px;
position: absolute;
}
Any ideas?
Thanks
Quick answer: remove float: right from #right_side_work
Longer answer: don't even think about using absolute positioning for layout purposes (and most of other uses), because you allow blocks to superimpose one above the other and... fail.
Using both float and absolute positioning shouldn't be necessary: one would use right: 0 to position it to the right (but don't use absolute positioning).
A block floating should come first in your HTML code. If it's a div and it's floating, why bother to set inline-block?
Are you trying to display a text next to each image? Then your HTML code should be: image1 - text1 - image2 - text2 - etc, NOT (all the image) - (all the text). Create lines/rows of content and then inside each of them columns, not 2 huge columns of text that won't ever align horizontally at the slightest modification.
Finally, left, right, top and bottom properties are only useful when an element is positioned in some way. No effect here on left part.
change
float: right;
to
float: left;
in line 175 of your style.css
#right_side_work {
margin-top: 35px;
display: inline-block;
width: 400px;
height: auto;
float: left;
margin-left: 70px;
position: absolute;
}
On my webpage the right side bar is at the bottom of the main content. and is not properly aligned with the main content section. The CSS code for the right side bar is:
#sidebar{
background: #ddd;
float: right;
}
There is a <div> section named sidebar-wrap which is the container for the sidebar that has the following code:
#sidebar-wrap {
float: right;
width: 200px;
padding: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding-left:20px;
padding-right:20px;
}
You have right-side padding that pushes the text to the left. Just remove that if you don't want it. E.g.
#sidebar-wrap {
float: right;
width: 200px;
padding: 20px;
margin: 20px 0;
background: rgb(221, 221, 221);
}
Update: I've moved the background color to #sidebar-wrap and replaced the padding, for a better effect.
Also, for the sidebar to sit beside the main content, you need to move it above the .entry-content div. There are other ways to do this and keep the content first in the HTML, but this is the easiest way to do it if you don't mind the sidebar coming first in the HTML.
Here's an example of re-ordering the code (with a few inline styles for simplicity, though they should be moved to the style sheet, of course):
<h1>Main Content</h1>
<div id="sidebar-wrap" style="margin-top: 0; padding-top: 0;">
<div id="sidebar">
<p>this is the sidebar.</p>
</div>
</div>
<div class="entry-content" style="overflow: hidden;">
<p>There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually TOOK A WATCH OUT OF ITS WAISTCOAT-POCKET, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again. The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
</div>
you need to add 2 extra divs and increase the size of page to 800px or so, add two divs ie
.leftDiv {
float:left;
width:500px;
}
.rightDiv{
float:right;
width:295px;
}
.clear{
clear:both;
}
the divs need to seperate the text and the side bar so for example:
<div class="leftDiv">
<h1>Main Content</h1>
<div class="entry-content">
<p>There was nothing so VERY remarkable in that; nor ll.</p>
</div>
</div>
<div class="rightDiv">
<div id="sidebar-wrap">
<div id="sidebar">
<p>this is the sidebar.</p>
</div>
</div>
<div class="clear"> </div>
I'm trying to create info graphics / data panels on a hobby site that I'm working on. I'm wishing to display text for one of the stat totals vertically rotated with supporting text wrapping around this however I'm having great difficulty getting this aligned correctly.
Instead of pasting code I can show my work in progress page at:
http://www.footy-results.co.uk/
The info graphic panel that I can't get to work is the '148 TEAMS' ... hopefully the problem is obvious to css wizards!
Any hints or tips would be much appreciated and anyone who can help me resolve this issue will be credited on the site when I launch!
I have a solution fou you but its not 100% clean. In my opinion its just not allowed to use negative margin but I can't find another solution. And furthermore you have do define height and width of the element...
You have to place the rotaded <span> element into anothe <div>. Then you can position the <div> properly and the text is floating around it. Here the code:
HTML:
<div class="infoPanel">
<span class="infoPanelVertical">
<div class="spanwrapper">
<span class="infoNumberVertical">148 TEAMS</span>
</div> your text here...
</span>
</div>
CSS:
.spanwrapper {
float: left;
height: 157px;
position: relative;
width: 48px;
}
.infoNumberVertical {
background-color: #F5F5F5;
border: 1px dotted #DDDDDD;
color: #1A3C7B;
float: left;
font-size: 32px;
font-weight: bold;
margin-left: -56px;
margin-top: 60px;
transform: rotate(-90deg);
width: 150px;
}
The problem is that you have to give a hight and a width to the wrapping <div> or the span in it otherwise the text does not know where it should get floated. If you don't define any width or height the text is just wrapping around the rotated text which is a big rectangle.
I you use a CMS or want to fill in the content dynamicly this is a bad solution. But you could also define the width and height trough js but thats kinda hacky solution I think.