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.
Related
I'm trying to make a div with a width of 100vw to cover all viewing areas, however, it comes in a div with a margin, so I'm having trouble.
I've also included an image link below to help you understand.
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
/* About Section */
.about {
display: block;
background-color: #2e3038;
margin-left: -6rem;
margin-right: 6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
As you can see, I attempted to use margin-right, however, it would not work.
I can't use inspect element since the design I'm attempting to replicate is in png format.
You're close - you've just specified the wrong direction for margin-right:
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
.about {
background-color: #2e3038;
margin-left: -6rem;
margin-right: -6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
Full Width Containers in Limited Width Parents | CSS-Tricks
I am trying to create a website and I am separating my information into boxes. I am trying to change the colour of each individual box but it is not working.
Here is my code. The and is trying to change the colour of the div.
Thanks.
<!DOCTYPE html>
<html>
<head>
<title>Blank</title>
***<!--Box-->
<style>.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
</style>***
</head>
<body>
<main>
</main>
<font face="caslon">
<color background: green>
<div class="boxed">
<h1> <font face="caslon", style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
</color>
<color background: red>
<div class="boxed">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</color>
</font>
</body>
</html>
You need to style each div with a background-color
Try adding this style="background-color:YourColorCode;" to your div.
For better understanding on font-face, see this link
See below snippet:
.boxed {
border: 1px solid black ;
margin-top: 20px;
margin-left: 50px;
margin-right: 50px;
padding-left: 20px;
padding-right: 20px;
}
<body>
<main>
</main>
<div class="boxed" style="background-color:green;">
<h1><font style="font-weight:bold">How is electricity produced?</font></h1>
<p style="font-weight:normal">There are multiple ways electricity can be produced that thave been found over the course of history. They differ in their efficency and cost.</p>
<p style="font-weight:normal">They include: </p>
</div>
<div class="boxed" style="background-color:red">
<h3><p style="font-weight:bold">Static electricity</p></h3>
<p style="font-weight:normal">
Static electricity is produced by bringing two different materials into contact. This causes a phenomenon known as triboelectricity (or the triboelectric effect). All materials are made of atoms with a positive nucleus and negative electrons orbiting. Some atoms have a stronger pull on these electrons than others. When we bring the two materials into contact one may have a stronger pull on the electrons. When we separate them, electrons can stick to the material with a stronger pull. This results in a material with more electrons and results in static electricity.
</p>
</div>
</body>
You need to give each element an id
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
Your Css will then look like
#box1{
background-color:red;
}
#box2{
background-color:blue;
}
hope it is helpfull to you :)
You are creating custom color tag instead of this use style attribute in div tag.
<div class="boxed" style="background-color:green">
</div>
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>
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 using twenty twelve theme on word press and have an issue using a tag (or any other header tag); It makes all the text disappear within that specific div.
I can use but want to know why this is happening.
If I change the span to a H2 outside of WP it works fine so there is some issue with word press i am assuming.
my code:
<style>
.productContainer {
border: 1px solid #ccc;
width: 900px;
height: 325px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 10px;
}
.productContainer a {
text-decoration: none;
}
.productContainer:hover {
border-color: green;
opacity: .5;
}
.productContainer a img, .productContainer a img p {
float: left;
display:block;
}
.productContainer a img {
height: 300px;
width: 300px;
margin-right: 15px;
}
.productContainer p {
width: 500px;
text-align: left;
text-decoration-line: none;
color: #A1c6E3;
font-size: 12px;
}
.productContainer span {
font-size: 24px;
margin-bottom 60px;
}
</style>
<div class='productContainer'>
<a href='http://pacificexpress.com.au/rapid-worker/'>
<img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/BowFrontDesk_pacificexpresscopy_zps7e8dc151.jpg'/>
<span> Rapid Worker </span>
<p>The Rapid Worker range is a versatile, sturdy range that will ensure that all your office needs are met. With a large range of desks, storage options, tables and much more you will be sure to find a solution that meets and exceeds your needs. </p>
<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days ! </p>
</a>
</div>
<div class='productContainer'>
<a href='http://pacificexpress.com.au/?p=975'>
<img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Corner_work_station_zps644dc92c.jpg'/>
<span> Rapid Span</span>
<p>The Rapid Span range is for the person who wants to modernize and innovate. With clean white tops and funky bases, you are sure to inspire creativity and productivity with the Rapid Span range. The range also includes various accessories such as storage units, pedestals and tables. </p>
<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days! </p>
</a>
</div>
<div class='productContainer'>
<a href='http://pacificexpress.com.au/?p=971'>
<img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/corner_workstationcopy_zps1ff2c6b7.jpg'/>
<span> Rapid Manager </span>
<p>The Rapid manager range is elegant, classy and high quality. It will ensure that people know who’s boss. With Cherry Wood tops and Ironstone bases the Rapid Manager range is for the discerning executive.</p>
<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days! </p>
</a>
</div>
<div class='productContainer'>
<a href='http://pacificexpress.com.au/?p=978'>
<img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/chair_mesh_am100_zps582ba090.jpg'/>
<span> Seating </span>
<p>Pacific Express’ Seating range is extensive! Whether you want one chair or a hundred we can assist. We stock a vast range of seating options ranging from operational (desk) chairs through to visitor and lounge seating. We also know that comfort is imperative and as such we offer a range of AFRDI approved chairs. </p>
<p>We will ensure that your new office furniture will be with you as soon as possible with all our range being shipped from our store within 7 Days! </p>
</a>
</div>
<div class='productContainer'>
<a href='http://goo.gl/M1nY2j'>
<img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/tamboor_cupboard_zps0e8c0f6c.jpg'/>
<span> Steel Storage</span>
<p>Pacific Express’ offers a range of Steel storage units. All units are sturdy, long lasting, and cost effective.</p>
<p>As per usual all items will be with you as soon as possible with all our range being shipped from our store within 7 Days!</p>
</a>
</div>
<div class='productContainer'>
<a href='http://pacificexpress.com.au/?p=982'>
<img src='http://i105.photobucket.com/albums/m215/furnxfurniture/Photobucket%20Desktop%20-%20Jamess%20MacBook%20Air/Furnx%20Images/Front%20Page%20Images/Screen_zps64d2ea85.jpg'/>
<span> Screens</span>
<p>Pacific Express’ offers a range of Screens. These screens are either floor standing or attached to a desk.</p>
<p>As per usual all items will be with you as soon as possible with all our range being shipped from our store within 7 Days!</p>
</a>
</div>
the website page is http://pacificexpress.com.au/products/
thank you
James
What's happening is a CSS issue - the h2 tag (and other header tags) is a block-level element and by default, clears floats. In your case, the span works because it doesn't clear floats, and falls inline next to the product image. But an h2 clears it - so technically the h2 and all the text under it are still there, they've just been pushed below the image and are being hidden by the height of the containing div.
You can fix this by adding this to your styles
.productContainer h2 { clear: none; }