Hello I am busy creating a website with only 1 page and I walked into a problem that I can not fix. the "title" of each html is displayed at the very left of the page and the content should stand right next to it. the problem is that the content displays under the title.
an example of the website: website on codepen
Can someone tell me how to fix this with keeping the possibilities to stretch the title with the content?
the section structure is as follows:
<section class="experience">
<h2 class="title">experience</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
Just adding a style to the title/content of display: inline should be enough to fix this.
Related
Here is my code:
<marquee width="100%" direction="left" height="15vh">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</marquee>
When I insert the code to the HTML widget on the elementor page builder. There is a delay until the widget shows the text. Here on stack overflow the text runs fine. But on elementor the text is stack and didn't run immediately.
There is no animation or something else that I defined to do delay.
As I understand, this tag is deprecated in the new version of HTML.
So, can someone suggest how to create text like the code above?
I created a ASP.Net Core Web Application with Angular in VS2017.
The initial application word wraps the way I want.
However after I added some HTML and styles the word wrap no longer works when the left panel is showing.
I found that the following HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
causes the following display
How do I fix the effect of the Div?
Try adding this css for wordwrap
h2 {
white-space: normal;}
Instead of using
<div class="container">
I needed to use
<div class="container-fluid">
I have a simple text like this, with image in the middle of the content:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. <img src="img/foo.png" /> Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
What I want is the text to be on left on right, while the image completely covered in the center. It seems I can use the float, which works well, but only to either left or right.
Is there anyway to achieve this with css, without any hacks?
What you are trying to achieve is something very new in HTML5 and CSS3 Called CSS shapes that allow text to wrap around images and shapes. You can see how to achieve this by following this link http://www.html5rocks.com/en/tutorials/shapes/getting-started/
But the down side is that it is only supported in very modern browsers.
I have a text box on a page that I'm going to style to dynamically include content via dust.js:
<div class="box">
{Lorem}
</div>
It will be populated with content that will already have HTML tags in it:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
I want to style the box class so that only the first paragraph of the loripsum text is displayed. Is there a way to do that easily in Stylus/CSS?
Use this selector:
div.box p:first-child
Example: (shows only the first paragraph)
<style>
div.box p:not(:first-child){display:none;}
</style>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
EDIT
Try this:
.box > p:first-of-type
visibility visible
Although the other answer picked the obvious solution, while testing certain styles were not being applied correctly. This must be something browser specific. So keep that in mind. The first-of-type selector seems to work best for me. But again, it may not work on every browser. Also, I recommend you set everything in box as hidden and use either selector to make the first paragraph as visibility of visible. Fiddle of what I mean included as an example. Good luck.
I want my page to look like this without resizing (disclaimer: own page), however, I would like that on resizing (or mobile), the "Introduction" would fall down under "Index" and look just like "History" looks, for example.
If possible, I would even like that, within the code, there's the index div and then the first box (in this case "Introduction", but in case of missing, "Required knowledge" would behave in the same way as now Introduction). This would make the PHP code behind much simpler. Also, 'Introduction' should flow naturally through the page as shown in the link above, wrapping around Index and filling 100% of the page under it.
This is what I've got so far, but I just cannot make it behave right. Without resizing it looks good, but the "Introduction" h2 would fall first due to it's % and fixed padding (horizontally 20px in total) while the text remains in place, getting in the middle of the text. I would like that, if the h2 falls down, the text follows in pure HTML and CSS.
Is this even possible? I'm trying my best but I cannot get it to behave as I'd like. This is the relevant code of 'test/ck' (when it works I'll put it in a separate stylesheet):
<div style="width: 25%; float: left; min-width: 150px; margin-right: 2%;">
<h2>
Index
</h2>
<div id="index" style="width: 100%">
<ul>
<li>Announcements</li>
<li>Description</li>
<li>Subjects</li>
<li>Competency</li>
<li>Schedule</li>
<li>Evaluation</li>
</ul>
</div>
</div>
<div id='box' style="">
<h2 style="width: 70%; float: right;">
<?php echo $_('Introduction'); ?>
</h2>
<p>
Lorem ipsum dolor sit amet, consecte22tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<span style="clear: left; display: block;"></span>
<br><br>
<h2 id="announcements">Announcements</h2>
<p>
Lorem ipsum dolor sit amet, consecte22tur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br><br>
I think you are looking for css media queries
http://www.w3.org/TR/css3-mediaqueries/
http://css-tricks.com/css-media-queries/
You can implement page width 'breaks' in your css like this:
#media all and (max-width: 600px) {
#index { width: 100% }
body { background: red}
}
Anything in the curly braces of the media query will be used if the page width is less than 600px.
Media queries are here to stay, and they degrade "gracefully" for those with sad old browsers.
Take a look at the example I have set up here:
http://jsfiddle.net/AqbSY/4/
resize the browser and see how this works.
You don't need to set the float or size on the #box elements.