I designed a page layout that is responsive and adjusts fine to smaller screens, but when I added in a code block (and used prism.js to format it), the responsiveness breaks. The code box and text content both spill over the width of the device and you have to scroll back and forth. Ideally, the code block should have its own scroll bar to view the code, but the content still adapts. I've tried playing around with different attributes of the flexbox that contains the content, but it still breaks the layout.
To try to narrow things down I've stripped the page down to:
<!DOCTYPE html>
<head>
<link rel='stylesheet' href='page.css' />
<link href="./external/prism.css" rel="stylesheet" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
</head>
<body>
<script src="./external/prism.js"></script>
<div class="article-container">
<article>
<h1 class="title">Test</h1>
<p>Dolorem neque quiquia dolor. Est dolor dolor dolorem adipisci consectetur. Adipisci ipsum velit dolore
consectetur quisquam eius. Non velit est ipsum adipisci adipisci quaerat.</p>
<pre><code class="language-python">def some_code(file_name):
with open("some_path/" + file_name + ".md", "r", encoding="utf-8") as input_file:
return input_file.read()
</code></pre>
</article>
</div>
</body>
</html>
With page.css containing:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.article-container {
width: 100%;
display: flex;
justify-content: center;
}
article {
width: 800px;
}
If I comment out both .article-container and article the page adjusts fine, but if either one of them is present it breaks. Also, if I leave the CSS as is and comment out the code block it's responsive.
Any types on how these components are interacting would be appreciated, thanks!
EDIT: To clarify, when the responsive design doesn't work, the page width does not adapt to the screen size. See screenshots below:
The content in fullscreen mode
How mobile looks without CSS - the code box scrolls like it should, but the rest of the page adapts
How mobile looks with CSS
Note that 2 is also how the site looks with CSS and without the codeblock. So something about the way they are interacting is breaking.
I was able to fix the issue by just adding overflow: auto; to the CSS for the article section.
https://gist.github.com/grahamjpark/0cb9d2cfbe7a972bc20320781806e284#file-test-css-L15
I found the answer here:
Flex item with <pre> content not shrinking
Although this looks useful if that doesn't fix your issue:
https://weblog.west-wind.com/posts/2016/feb/15/flexbox-containers-pre-tags-and-managing-overflow
I think your problem lies within this rule:
article {
width: 800px;
}
That's why the text on top of the code won't adjust itself to the screen.
The code tag itself must have some CSS rules implied that prevents the code from wrapping or "responding" to the screen, because indentaion is important inside that element, and should not be too affected by the screen size.
And maybe you'll want to add an overflow-x:auto; to the element so you can scroll to see more code when the screen isn't wide enough.
This goes for overflow-y also if you want to scroll down inside the code too.
Related
Is there any way I can make an image div scale it's height to the text beside it?
I'm designing a blog post element which has some text to the left and an image to the right, however the text and image go out of kilter at certain resolutions which doesn't look great. The best thing I can think of right now is just giving the image a static height but that doesn't really solve the issue and I'd have to put in different heights for different breakpoints which would look quite janky when resizing.
I am trying to emulate the look of this: https://www.lonelyplanet.com/france/paris#survival-guide
(Scroll to the 'Recent Articles' section)
HTML
<div class="recent-petra">
<div class="petra-content">
<h4>Petra</h4>
<cite>Oct. 4</cite>
<p class="recent-desc">Enim vitae pellentesque nec phasellus, quis in vitae, leo in eros donec, pede volutpat. Donec nunc mi vel, quis malesuada, sed proin curabitur orci ipsum volutpat, eu eu id blandit ultricies sodales</p>
</div> <!-- petra-content -->
<div class="petra-img"></div>
</div>
CSS
.recent-petra {
display: flex; }
.petra-content {
width: 60%;
margin: 0 5%; }
.petra-img {
width: 20%;
background-image: url('http://4.bp.blogspot.com/_qWovdGs59MY/RykS9HDQGMI/AAAAAAAAAJo/s79SRNqRNok/s400/Petra+1.jpg');
height: 300px;
margin: 0 5%; }
The codepen is here: http://codepen.io/reskk/pen/ozPwAw - probably a lot better to look there so you get a visual example of what I'm talking about.
I mean.. is this something that is even doable with CSS? Am I trying to do something that is just a massive pain i.e. do I have to find appropriately-sized images etc. or can I achieve this using CSS?
I essentially want the image height to scale according to the height of the text beside it so that it's nice and responsive.
Thanks,
Reskk
You're on the right track with flexbox and background-image here. A couple of things are throwing you off. First is that you've got the image div set to a pixel height. That'll throw the equal height columns in Flexbox off. Second is that margins on divs inside the container count towards its height. So on CodePen, your paragraph has a native margin of 1em 0em, and since it's the last item in that column, the height of the column on the right is matching it.
The site you mention uses a fixed height at various breakpoints for images. It really is the standard way to do images (other way involves making height responsive, which in my experience makes the picture way too small at certain breakpoints. It scales diagonally, instead of by horizontally (width responsive)).
In order to scale your images with your text, you will have to use breakpoints using media queries, which will at various breakpoints change the height of the images and text of the content.
#media (min-width: 0px) and max-width(400px){
img{
width:40%
height:200px;
}
#divcontainingtext{
font-size:14px;
}
}
#media (min-width: 401px) {
/* insert new fixed height and new font-size here */
}
For more information on media queries see: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Can anyone please point me out, or name some tecnhiques that may exist in order to achieve this effect, on a properly way:
Like this:
and again:
As you may notice, the point is to connect both lines. Some of those lines come from text boxes, that, since we wish to properly use EM unit for font-size, the box around the text, may change.
I have never done this before, I would appreciate any point outs, in order to investigate this "effect" further please.
Thanks in advance.
It doesn't matter if the fonts in the text boxes are in EM. If the font size change, the text boxes size will change, but that it doesn't mean that the space between them also has to change (it could has a fixed height -the background height-).
Here's a really basic example (try changing the body font-size):
<html>
<head>
<style>
body { font-size: 12px;}
.text { border: 1px solid #999; padding: 15px; font-size:1em; }
.line { background: url(http://www.agavegroup.com/images/articles/photoshopCurvedLine/curveFinal.gif) no-repeat center center; height: 50px; }
</style>
</head>
<body>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="line"></div>
<div class="text">
Eum, quis consequuntur culpa ex eius totam nemo.
</div>
</body>
</html>
If you do want the space between boxes height changing if the font-size change, you should set it height to EM and use a background images that's, lets say, doubled the container original height (so when the height change, more background it's revealed). You can see this changing height: 50px; to height: 7em; on the .line {} rule (the example image I've used it higher than the container).
This a really basic example. The markup depends on the design. If you need something more accurate (like: you need that the line starts and ends in specific spot), you should probably use absolute/relative positions.
In IE6, IE7 and FF2 the .outer div below is stretching out to the right edge of the document. Here is a complete test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.outer { position:absolute; border:1px solid red; }
.outer .floater { float:right; }
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum</div>
</div>
</body>
As I understand position:absolute, the outer div should be removed from the flow of the document and (without a width specified) should take up the minimal amount of space needed to display its contents. However float:right on any child breaks this.
Expected output (IE8, FF3+, Chrome 2+, Safari 4, Opera 9+):
Actual output (IE6, IE7, FF2):
How do I get the outer div to not stretch? This is only happening in IE6, IE7 and Firefox 2.
Requirements:
.outer cannot have a width set (it must be left as "auto")
.outer must remain absolutely positioned
.floater must remain floated to the right
Update:
I've reproduced the behavior as a "real world" example using jQuery dialog. The characteristics are the same:
There is an absolutely positioned div (i.e. the dialog container, jQuery-UI creates this)
The div from 1) has width="auto"
There is an element inside this dialog that is floated to the right.
See it here. Again, IE6, IE7 and FF2 are the only problematic browsers.
This replicates the conditions inside my application. I tried boiling down the problem to what you see above this Update, but I'm getting the sense that people could use a real-world example where my requirements make sense. I hope I've done this.
Apologies for the negative answer, but I don't think there's a way around this. The CSS implementation for those older browsers is simply incorrect when it comes to the case you've outlined, and I don't believe there's any way to hack around this via other CSS properties within the constraints you've given us. As a limited fix you could in theory set a max-width on the outer div to limit the degree to which it stretches... but unfortunately max-width isn't supported in all of the 'old' browsers mentioned anyway.
I know it's not what you're wanting to hear, but I think you're going to have to bite the bullet and either change the markup or relax your style requirements (e.g. give up on the float).
You need this to stop it overflowing the edge of the page:
body {margin:0;padding:0}
However it will still take up the whole width of the page, it just won't overflow
float should have a width in this case, and from another point of view you should have top:0;left:0; for the positioned element they should not kept like this.
note: this is logic only for the design if you wont the code please ask :)
.outer { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
.outer .floater { float:right; }
Lorem ipsum
It's really simple, you only must set the overflow and clear properties to every object that has floated childs.
If the parent is also floated, you only need to set your object to float.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.outer { overflow:hidden; clear:right; position:absolute; border:1px solid red; }
.outer .floater { float:right; }
.outer .floater .child { float:right; }
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum
<span class="child">HI!</span>
</div>
</div>
</body>
If got any questions, just ask!
Regards & GL. ;)
If you change float:right to clear:right, you will get the requested output in your example, but it will not work as expected if you actually have content outside the floater div.
The css2 spec has some information about how a user agent “should” compute width, but reality is not the spec: http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins.
I definitely recommend going with a strict DOCTYPE instead of a transitional one, http://www.w3.org/QA/2002/04/valid-dtd-list.html#DTD.
Without specifying a margin for your .outer div, the user agent will determine the width using width: auto, which looks like it varies depending on the user agent.
Why do you not want to specify a width for the parent div?
If you can, specify a width for the parent div, even if it's width: 100%. You may want to also place * { margin: 0; padding: 0; } in the stylesheet to avoid user agent differences in those attributes, especially if you specify width as 100% for .outer.
This may be trivial, but you should be able to shorten the statement .outer .floater to just .floater.
If you need the “shrink-to-fit” effect around the inner floater and need to maintain float-right, then add direction: rtl; to the .floater class; otherwise you should be able to use float-left;
Yeah for absolute positioned elements, width is undefined (as is top and left). Some browsers do elastic table-style width in this case, and some do 100% width, but it's up to the browser. Best to be explicit in this case.
Tables are really the only good way to get elastic width in a cross-browser fashion. A single celled table is just as good as a DIV as long as your remember the cellspacing=0.
<table cellspacing=0 cellpadding=0 style="position:absolute;top:0;right:0">
<tr><td>Lorem ipsum</td></tr>
</table>
Your .outer div is empty, therefore we get different results. As soon as you add content to it, atleast in my test it seems to work exactly the same (my test was Chrome 3.0 as the 'working as intended', and IE7 as the broken one).
<div class="outer">
<div class="floater">Lorem ipsum</div>
Lorem ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit ipsum dolor sit amet consequetur elit
</div>
Since you mentioned the .outer div has content, try removing the float div from it and it still gets very similar output.
Edit
To reproduce your code without stretching (understand here that you'll have different problems to deal after you have this working equally, like margins/padding/vertical stretch) you can introduce a relative 'wrapper'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { margin: 0; }
#outer { position: absolute; border:1px solid red; }
#wrapper { position: relative; }
#floater { position: absolute; right:0; border: 1px blue solid; }
</style>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="floater">Lorem ipsumX</div>
</div>
Lorem ipsum dolor sit amet consequetur elitipsum dolor sit amet consequetur elit
</div>
</body>
Since I see in your working example you're using jquery you could calculate the width of the container first, before floating the floater like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<style>
.outer { position:absolute; border:1px solid red;}
</style>
</head>
<body>
<div class="outer">
<div class="floater">Lorem ipsum</div>
</div>
<script type="text/javascript">
$(".outer")
.css("width", $(".outer").width());
$(".floater")
.css("float", "right");
</script>
</body>
Putting a width on the outer div makes it behave in all the other browsers
I don't have IE6, IE7, or FF2 to test on, so I'm going to take a stab in the dark on this one. If my memory serves me, you're going to want to float:left on .outer. This will minimize the width of .outer while maintaining your inner div's proportions.
I'm doing a site in which images need to presented next to textual content - a sort of pseudo two-column layout, as the images and text come from a single html source.
I've found quite a simple way to do this by putting the images as their own paragraphs and floating them. Would there still be a more simpler way (in regards to html) to do this without these extra paragraphs and by only attributing extra css to images?
If the floated image is in the same paragraph than the text, then paragraphs with and without images would be different in width.
EDIT: Basically, I'm looking for as simple HTML markup as possible to position images like this. The CSS can be complex ;)
CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }
Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>
Is the above possible with this HTML?
<p><img src="image.jpg" /></p>
Are you looking for this?
p img { float: right; width: 900px; }
This would match all img-tags inside p-tags.
But I recommend always using classes or ids to match CSS rules. Just using the tag name can lead to annoying pitfalls, sooner or later.
Edit
Mhm, maybe I got you wrong. You would like to apply float: right; width: 900px; to the p-elements, not the img-elements ...
AFAIK there is no way to select a parent of a specific element. It always works in direction PARENT -> CHILD, not CHILD -> PARENT.
No. With the img inside the p, you can float the image right but the text will not stay in a column. It will wrap underneath the image. Any right margin or padding you apply to the p will also apply to the img.
Since you have two pieces of related information, I would wrap those in a div and then position them within the div.
.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}
<div class="info">
<img src="image.jpg" />
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
In response to Emily's answer.
No. With the img inside the p, you can
float the image right but the text
will not stay in a column. It will
wrap underneath the image. Any right
margin or padding you apply to the p
will also apply to the img.
While she's right, as far she goes, there is a workaround. Though it's not ideal:
p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }
img {position: absolute; top: 0; right: 0; }
This should put the image in the top-right corner of the p, while forcing the text into a column between the left boundary of the p element and the 950px right-padding. Not ideal, and a little messy, but it allows for the columnar effect without adding extra tags.
...unless you want to add a clearfix br(br.clearfix: display: block; clear: both) at the end of the paragraph (to force the p tag to extend past the image for short paragraphs).
yes, just tested this,
make sure you use the strict doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>
<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
I concocted this line of code here to help me position some text exactly where I wanted it. I might be a novice way but it got the job done simply and easily and precise. and all HTML.
put your txt in here and use the Top and Left values to position the text precisely where you want it
you can also use the href field to make your text a hyperlink or if thats now what you want you can jus delete the href field but be mindful to keep the "
<a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>
I am sure sure if this is even possible due to the nature of CSS and being cascading, but I will try anyway.
I am creating a Terms and Conditions box which will contain some key elements that the user will select. Since the T&C's will have form components (radio buttons, check boxes). I don't really want to go through the trouble of putting it into an IFrame and getting the user input that way.
I figured using a with the overflow: auto property added, I could create an scrolling box with the T&C's and have the user select their options that way.
Well, because the T&C's have some mark up which would be directly affected by the sites css, I need to figure out a way to have this div not use the main CSS of the site.
Here is some sample code which would be similar to the approach I am trying:
<html>
<head>
<style>
div
{
border: solid 1px #000;
}
div small
{
font-size: 17pt;
}
</style>
</head>
<body>
<div style="overflow: auto; width: 500px; height: 300px;">
<small>This is small text</small>
<div>
<small>This is small text</small>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec vulputate mi sed nisl blandit sed porttitor massa fringilla.
</div>
</div>
</body>
</html>
The result of this is a pretty little black box with some text and then a sub box with more text and the key item in here is the text wrapped in <small/>.
Is there a way to have anything under a certain div NOT inherit the CSS? Maybe I need to take a completely different approach with this.
Thought? Ideas? Suggestions?
Thanks in advance!
Instead of working directly with tag names, keep two sets of classes ("inner" and "outer") and work with those.
So you can have a div.inner definition, and a div.outer definition, and work on them separately. The inner one would have to explicitly undo the settings outer has, though.
Something like
<div class="outer">
<div class="outer">Some content. <small>Small text.</small></div>
<div class="inner container">
<small>Blah blah blah</small>
More content
</div>
</div>
And in your CSS define whatever you need,
div.outer {
border: 1px solid black;
}
div.outer small {
font: 17pt;
}
div.inner {
border: none;
}
div.inner small {
font: 15pt;
}
div.container {
overflow: auto;
width: 500px;
height: 300px;
}
don't think there is a way to not inherit css. i think the only way is to 'reset' all the styles set on its parents explicitly. see eg http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ for a list of default properties.
There is, as second notes, no way to inherently prevent the cascade of styles, it's the cascade that defines CSS after all. So you are reduced to using the .inner and .outer approach that Welbog suggested.
So you're reduced to defining your styles for the main document as you normally would. However to override those styles for the same elements under the T&C div you would have to explicitly override/re-style. You could use two stylesheets to retain clarity, but you'd have to remember, in the t_and_c.css to explicitly preface every declaration with the id of the enclosing div, for example:
#t&c p {...}
#t&c a:link,
#t&c a:visited {...}