My Problem
So I am trying to create a news section for my website. Each section contains a title, an image, and the article itself. The problem is that the article text will refuse to go beside the image unless I use <br> to break it up myself.
Description
All the elements of each section is listed under a single div element. The section includes the title, image, and article. After that, the picture has its own class and the article also to CSS after.
The Title is a block element
The Picture is an inline-block element
The Article is an inline-block element
HTML CODE (STARTING FROM NEWS BOX NOT INCLUDING NAV BAR AND ABOVE)
<div id=newsboard>
<div class=newsboard_topic>
<h1>Website in Development!</h1>
<img src="/image/newsboard/construction.gif" alt="Dev">
<p class=newsboard_topic_article>
Greetings!
<br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
<br>- Geo Jones
<br>Owner and Developer
</p>
</div>
<div class=newsboard_topic>
<h1>kimmy and donald!</h1>
<img class=newsboard_topic_picture src="/image/newsboard/kimdon.jpg" alt="kimmyanddonald">
<p class=newsboard_topic_article>
The fan fiction of Donald Trump and Kim Jong Un! Yes, they photoshopepd it. This is a test by the way to test the standing of articles.
</p>
</div>
</div>
CSS CODE FOR SECTION OF HTML
#newsboard {
margin-left: 100px;
margin-right: 100px;
margin-top: 25px;
margin-bottom: 25px;
border-color: #0099FF;
border-style: solid;
border-width: 5px;
}
.newsboard_topic {
padding: 20px;
display: block;
}
.newsboard_topic_article {
display: inline-block;
vertical-align: top;
word-wrap: break-word;
margin: 0px;
padding: 10px;
}
.newsboard_topic_picture {
display: inline-block;
}
LIVE EXAMPLE
is currently up at geo-village.com
Make the picture a floating element inside the text container, then the text will float next to it (and below it, if it's longer)
Separate your newsboard_topic class.
<div class=newsboard_topic>
<img src="/image/newsboard/construction.gif" alt="Dev">
<h1>Website in Development!</h1>
</div>
<p class=newsboard_topic_article>
Greetings!
<br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
<br>- Geo Jones
<br>Owner and Developer
</p>
Then give your newsboard_topic class a display:flex;.
.newsboard_topic {
padding: 20px;
display: flex;
}
I think the obvious answer no one wanted to give, which would make a lot of your coding more smooth is... Bootstraps. If you are learning to code, I highly recommend learning from some of the great opensource solutions available.
<div class="row">
<div class="col-md-5">
<h1>Website in Development!</h1>
<img src="/image/newsboard/construction.gif" alt="Dev">
</div>
<div class="col-md-5">
<p class=newsboard_topic_article>
Greetings!
<br>The GeoVillage website is currently under construction, but feel free to register and login to check out the stuff we have so far!
<br>- Geo Jones
<br>Owner and Developer
</p>
</div>
</div>
Related
I am trying to align my image next to the text using HTML, so far I have tried adding float:right but it just seems to push the div down. I have also tried adding overflow:hidden but it does not seem to work.
I am using media queries to make this website responsive, and this is where I am having issues with moving the image to the right of the text,
I hope you can help.
<section id="section_about" class="grid">
<h2 class="content-title">
Our Story
</h2>
<div class="content-wrap about_content">
<p>
The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
brandishing a sword
<br><br>
Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
sword
</p>
</div>
<div class="about_img_container">
<img src="./img/about_img.jpg" class="about_img">
</div>
</section>
CSS:
.content-title {
font-family: 'Playball', sans-serif;
color: #C59D5F;
font-size: 2.5em;
padding: 5px 0;
margin-top: 10px;
}
.content-wrap p {
padding-left: 20px;
line-height: 30px;
}
.about_img{
padding: 0 10px;
}
#media(min-width: 1024px) {
.about_content {
width: 50%;
background: pink;
}
.about_img_container{
background: red;
margin: 150px;
float: right;
overflow: hidden;
}
}
A more modern way of doing this would be with flexbox:
HTML
<div class="flex-container">
<div class="content-wrap about_content">
<p>
Your Text here
</p>
</div>
<div class="about_img_container">
<p>sodfosdf</p>
</div>
</div>
CSS
.flex-container {
display: flex;
justify-content: space-around;
}
The justify-content property defines how the two elements are displayed next to each other or under each other.
First you will need to remove h2 from the section:
<h2 class="content-title">
Our Story
</h2>
<section id="section_about" class="grid">
<div class="content-wrap about_content">
<p>
The History of Kitchens and Cooks gives further intimation on Mr Boulanger usual menu, stating
confidently that "Boulanger served salted poultry and fresh eggs, all presented without a tablecloth
on small marble tables". Numerous commentators have also referred to the supposed restaurant owner's
eccentric habit of touting for custom outside his establishment, dressed in aristocratic fashion and
brandishing a sword
<br><br>
Numerous commentators have also referred to the supposed restaurant owner's eccentric habit of
touting for custom outside his establishment, dressed in aristocratic fashion and brandishing a
sword
</p>
</div>
<div class="about_img_container">
<img src="./img/about_img.jpg" class="about_img">
</div>
</section>
Then give the section a display: flex.
#section_about {
display: flex;
flex-direction: row;
}
Just restrict the size of the image container by applying an appropriate width to it in your CSS rule, and move it above the DIV that contains the text so the text can float next to and under the image.
HTML
<div class="container">
<div class="content-wrap about_content">
<p>
Pls text here
</p>
</div>
<div class="about">
<p>Pls text here</p>
</div>
</div>
CSS
.container {
display: flex;
justify-content: space-around;
}
I am trying to recreate the attached screen shot in wordpress and I'm having some css issues.
As you can see there are two columns with very simular content.
At present I have got this far:
.race-tri {
width: 570px;
position: relative;
}
.banner_txt {
width: 250px;
background: #F08E03;
padding: 5px 15px;
color: #ffffff;
position: absolute;
top: 150px;
left: 0;
}
.race-tri h3 {
text-transform: uppercase;
margin-bottom: 15px;
font-weight: 800;
}
<h1 style="text-align:center;">RACES</h1>
<div class="race-bar-text">
<div style="float:left; width:570px; box-sizing:border-box;">
<p>Throughout the year Tri Team Glos runs various events, notably the TTG Gloucester Triathlon and the TTG Newent Duathlon.</p>
<p>Our Triathlon is a pool based Sprint race with a 400m Swim and a two lap 28km bike course finished off with a 6km run and will take place on Sunday 29th May 2016.</p>
</div>
<div style="float:right; width:570px; box-sizing:border-box;">
<p>Our duathlon comprises a 5k run, 18k bike and 5k run. Next year's event will take place on 3rd April 2016,</p>
<p>For those wishing to enter the Tri Team Glos' Children's Race, please click here.
</p>
</div>
</div>
<div class="race-tri">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/img2.png">
<div class="banner_txt">
<h3>Glocester triathlon</h3>
<span class="race-date">May 25th, 2016</span>
<span class="race-type">Triathlon</span>
<p>Swim: 1km
<br>Bikd: 20km
<br>Run: 5km</p>
</div>
<a class="btn">ENTER EVENT</a>
<a class="btn" style="float:right;">MORE INFORMATION</a>
</div>
<div class="race-tri" style="float: right;">
<img src="http://staging-triteamglos.transitiongraphics.co.uk/wp-content/uploads/2016/04/img-3.jpg">
<div class="banner_txt">
<h3>Newent Duathlon</h3>
<span class="race-date">April 16th, 2017 (TBC)</span>
<span class="race-type">Duathlon</span>
<p>Swim: 1km
<br>Bikd: 20km
<br>Run: 5km</p>
</div>
<a class="btn">ENTER EVENT</a>
<a class="btn" style="float:right;">MORE INFORMATION</a>
</div>
Ignoring the main background image and some the smaller styling issues, I am having issues floating the two blocks side by side, whilst floating the inner orange text block.
I thought I could achieve this by making the background relative and then the inner text block absolute. Hoping it would be absolute within the block, not the page.
Many thanks in adavance for suggestions.
#Dhaval Chheda recommended looking at flexboxes, which I'd recommend too - they'd be a better way to get what you're looking for.
.container {
display: flex;
}
See this link for a way to divvy up the structure of the blocks, and this fiddle for it in action. This way you'll be able to have some more precise control over the layout of the page.
I have this two inline block text side by side but one them has one more paragraph and it mess up the text.
As you can see the "who we are" paragraph has weird height and i want to be potion same as "what we do" paragraph so it looks like this
This is my code
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
what do i need to do. i think there is already an topic for this but i don't know whats its called because English is not my first language.
Add the vertical align property to your #content element in your CSS code:
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
vertical-align: top; /* <-------------------- your huckleberry */
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
There are two solutions:
Solution One (Add vertical-align: top; in content class):
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
Second Solution:
Add inline css in first content div
<div id="content" style="float:left;">
A simple solution for this would be the following:
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
You do not need to define width:100% for #wrapper, div is a block level element. You also don't need text-align:left; since text-align:left is the default rule for all element unless an upper level has a different align rule. display:inline-blocks is treated as a table cell, which by default has its value as "baseline", you can read from here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Also, you should not be putting <p> inside of <span>, <span> is an inline block element and <p> is a block level element; Here is what I would do, it's simple and works and it is not based on hacks.
You may be more interested in the quick fix but its important to know the rules because hacks eventually collapse.
Hope this helps.
#wrapper {
border: 1px solid blue;
}
#wrapper:after {
content: '';
display:block;
clear:both;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
<div id="content">
<h1>Who We Are</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
</div>
Okay, so I've tried all the possible examples of implementing divs, floats, and in-lines to have all three tables side by side with nothing working. Here is the code I have programmed so far, please show me what I might be doing wrong. I could not figure it out after spending a good few hours trying different ways to input the coding
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="left;"><img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:verdana;font-size:10px;color:#636362;"><br>CLOCKWORK DREAMS.</br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="center;"><img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:georgia;font-size:10px;color:#636362;"><br>TRANSCENDED.</br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="right;"><img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:sylfaen;font-size:10px;color:#636362;"><br>THE ENIGMATIC</br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</div></div>
UPDATED
Look at this:
https://jsfiddle.net/fh2st5nm/2/
html:
<div class="oneThird">
<img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" />
<p>CLOCKWORK DREAMS.<br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</p></div>
<div class="oneThird">
<img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" />
<p>TRANSCENDED.<br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</p></div>
<div class="oneThird">
<img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" />
<p>THE ENIGMATIC<br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</p></div>
css:
.oneThird {
width: 33%;
float: left;
background-color: #111;
text-align: justify;
font-family: sylfaen;
font-size: 10px;
color: #636362;
}
.oneThird img {width: 100%;}
.oneThird p {padding: 3px;}
here you dont need css also you should have one main div with width 100% and its children are have style float=left likebelow
<div id="maindiv">
<div class="inline">div 111111111111111111 </div>
<div class="inline">div 2222222222222222222 </div>
<div class="inline"> div 33333333333333333333333</div>
</div>
css..........
.inline{
float:left
}
I am having a little issue with a few headers being misplaced on the site I am working on and also an image that's supposed to show below each one of them is not showing.
You can see what I am talking about here:
Here's my HTML:
<!-- main-content -->
<div id="main-content">
<h1> Check out all our DEADicated sites: </h1>
<div class="sites">
<a href="http://www.thedeadicated.tumblr.com" target="_blank">
<img src="images/sites/tumblr.jpg" width="215" height="150" alt="Tumblr"/></a>
<p> Tumblr </p>
</div>
<div class="sites">
<a href="http://www.twitter.com/thedeadicated" target="_blank">
<img src="images/sites/twitter.jpg" width="215" height="150" alt="Twitter"/></a>
<p> Twitter </p>
</div>
<div class="sites">
<a href="http://www.youtube.com/user/DeadicatedRepository" target="_blank">
<img src="images/sites/youtube.jpg" width="215" height="150" alt="YouTube"/></a>
<p> YouTube </p>
</div>
<h2> To join TheDEADicated, click HERE! </h2>
<h2> To get your own DEADicated wristband, click HERE! </h2>
<h2> Can't get enough of Dead Sara?! Dead Sara Addiction Treatment Facility </h2>
<h2> Email us at: TheDEADicated#TheDEADicated.org </h2>
</div> <!-- close main-content -->
And this is the CSS code for the main-content & headers:
#main-content{
padding: 50px 50px 30px 50px;
background: #fff url('images/shadow.png') repeat-x;
min-height: 800px;
}
#main-content h2{
margin-top: 30px;
padding-bottom: 8px;
background: url('images/ink-line.png') no-repeat left bottom;
clear: both;
}
Any kind of help would be greatly appreciated. Thanks!
I can't tell exactly what is happening here, but taking a guess at how the elements above the headers look, I'd say you have a float issue. Try removing the "clear: both" from the h2 and add "float: left; width: 100%;" in its place.
The comments are correct that you're not really clear about what you should see but don't, but if I interpret you correctly you mean that "my headings aren't showing the margin and padding or background images that I expect".
I'm going to take another leap of faith to offer up a possible solution. I see
</div> <!-- close main-content -->
at the end of your html but I don't see a <div id="main-content> anywhere. It should either be at the top of the page, or before the block of h2s, depending on what you desire the outcome to be. Try adding <div id="main-content> before the first h2 tag and see if that solves it for you.
Edit: I see your problem more clearly now, but this is tricky to resolve without the live url to inspect. It could be a float issue, but the clear should resolve that, unless it's being overridden, so you could change to:
clear: both !important;
It could be a display problem, so try adding:
h2 { display: block !important; }
If there's a live url that would certainly help. Final thought is to make sure every tag in the entire page html is properly opened and closed. Redundant or unclosed divs can cause issues like this in my experience.