Can anyone guide me, How can I create a 'almost' square background in CSS?
I want to get the brown background and have text on it with the error bullets and how to create the dotted yellow on the top right in CSS?
My working progress is here:
HTML:
<body>
<div id="contentContainer">
<div id="setBackground">
<div id="header"> <span class="style1">This is LOGO </span>
<hr />
<div id="body_block">
<p class="intro">Introduction</p>
<h1> Back </h1>
Click Here
<h2> Next </h2>
Click Here
<p>More about Web Design:</p>
<p>• Bla bla bla... .</p>
<p>Contact:</p>
<p>• Bla bla bla...</p>
<div id="footer">
<!--hr class="footer"/-->
<p>© Copyright 2013
sample.com |
More Site
</p>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
#charset"UTF-8";
/* CSS Document */
hr {
clear:both;
border: 0;
height:12px;
width:100%;
background-color: #993300;
}
.intro {
color: #1e2a74;
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
}
#footer {
background-color:#6994AF;
clear: both;
color: #FFFFFF;
font-size: 0.8em;
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
}
#footer p {
border-top: 1px solid #83CDE1;
margin: 0;
padding: 15px 0;
text-align: left;
}
#footer a {
text-align:right;
}
.style1 {
font-size: 24px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
}
the border radius CSS attribute can help you obtain rounded corners - specifically something like this should do the trick for the pink element containing everything else.
div {
/* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */
border-radius: 20px 5px 20px 5px;
}
i would personally break this up into a few divs, a header and body. put the background yellow dots with color on the top div and apply border radius to the top pieces.
then place the content other divs within the body and apply those border styles for each case.
this however is just one way to do it I am sure there are plenty of other wayas.
more info about CSS Rounded borders here
Try this out.
border-bottom-right-radius:20px;
Border radius is what you want to look at: http://www.w3schools.com/cssref/css3_pr_border-radius.asp
In your case, it would go something like this:
border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */
http://jsfiddle.net/spKMM/
Here's the jsFiddle
Your design is really poor. You don't have to nest all divs inside one another. I changed your html a bit(just rearranged your divs and added two new divs leftDiv and rightDiv)
HTML:
<body>
<div id="contentContainer">
<div id="setBackground">
<div id="header"> <span class="style1">This is LOGO </span>
<hr />
</div>
<div id="body_block">
<p class="intro">Introduction</p>
<h1> Back </h1>
Click Here
<h2> Next </h2>
Click Here
</div>
<div id="leftDiv">
<p>More about Web Design:</p>
<p>• Bla bla bla... .</p>
</div>
<div id="rightDiv">
<p>Contact:</p>
<p>• Bla bla bla...</p>
</div>
<div id="footer">
<!--hr class="footer"/-->
<p>
© Copyright 2013
sample.com |
More Site
</p>
</div>
</div>
</div>
</body>
Add these rules to your CSS:
#leftDiv{
clear:both;
width:200px;
background:brown;
float:left;
border-top-left-radius:25px;
}
#rightDiv{
margin-left:20px;
border-bottom-right-radius:25px;
background:brown;
float:left;
}
Try border-radius properties
Example 1
Div{border-radius:10px;}
Example 2
Div{border-radius:10px 15px;}
For better information visit:-
CSS-TRICKS
What about this? You can create a "pseudo" "hr" tag with a div :P
//IN HTML
<div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div>
//AND IN CSS
#CUSTOM_HR_WITH_TEXT {
border-radius: 10px 10px 10px 10px;
border: 0;
height: auto;
width: auto;
background-color: #993300;
color: #fff;
text-align: center;
}
Related
I'm currently working on freecodecamp's first test, so my question is probably dumb. I would like to change the line-height of #titles to a smaller one, while keeping it's background color. It's probably the display element, but I can't figure out what to do. Also, I'd like to get rid of the white line surrounding my image, right before the border...
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is
there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
https://jsfiddle.net/deffciu/hrna0Lfs/
any help is appreciated
Adding the below two rules to #titles makes it work:
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
You get this:
Snippet
html, body {
font-family: 'Oswald', sans-serif;
text-align: center;
background: white;
}
#title2 {
color: #052449;
margin-bottom: 0px;
}
#titles {
display: block;
background: #6C7E95;
line-height: 5px;
/* Add the below two rules */
overflow: hidden;
padding: 0 0 20px;
}
#image {
border: 8px solid #052449;
border-radius: 50%;
width: 500px;
height: 375px;
margin-top: 15px;
}
hr {
border-color: #486282;
margin-top:0px;
}
#img-caption {
margin-top: 20px;
font-style: italic;
font-size: 25px;;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is there.
</div>
<div id="tribute-info">
<br>
<br>
fgj
</div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>
For the white border issue, it's your body's margins. The below code will fix it.
body {margin: 0;}
I am having trouble with the styling of my webpage. I am using create-react-app repo for my react boilerplate and react-bootstrap repo for my react bootstrap.
Whenever I use a <p></p> in my page, it centers the text for me and I can't find any parent div that has this sort of styling for the paragraph in my code. Here's the code for the page.
class App extends Component {
render() {
return (
<div>
<div className="container">
<div className="col-lg-12">
<div className="col-lg-5">
<img className="img-responsive img-circle" src="http://placehold.it/120x120" alt=""/><br />
<h3 className="lead text-justify text-white">
Gulshan Jubaed Prince<br />
<span>Partner, Techynaf</span>
</h3>
<p>Test paragraph.</p>
</div>
<div className="col-lg-7"></div>
<div className="col-lg-3">
<div className="well"></div>
</div>
</div>
</div>
</div>
);
}
And here's the output on the web browser. I have added box borders in my style sheet for debugging purposes.
.container - white box
h3 - yellow box
h3 span - green box
h3 + p - red box
Note that the paragraph (enclosed in red border) is displayed outside of the .container div (enclosed with white box) even though the .container is containing the <p></p> tags.
And here's the styling for the box borders (might not be important for the question):
h3 span{
font-size: 17px;
font-weight:lighter;
color: #CCC;
font-style: italic;
border: 1px solid green;
}
.container{
border: 2px solid white;
}
h3 {
border: 1px solid yellow;
}
h3 + p {
border: 1px solid red;
}
I want the Test Paragraph to be inside the .container div and right underneath the text Parter Techynaf
Please include
clear:both;
float:left;
in your css
Please try this:
.container{
overflow:hidden;
}
(If there is a simpler solution to this problem, please tell me)
I want this website to have 2 sections of text, one on each side of the screen.
I did this successfully. I used text align and translate3d to move the text to the right, then up.
The only problem was that the width of the the text on the right blocked the text on the left from being interacted with.
I decided to change the width of the text on the right side, and when I did, the text alignment wasn't working, because of the margins (the inspect said margins).
I decided to change the margins to 0, and nothing happened.
I have no idea why, but here is some code:
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:150px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
</div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
I later added this, but still nothing happened:
#calculator{
margin: 0 !important;
}
So, is there any possible way to have text on both sides of the screen at the same time, with them being separate from each other?
Or is there a way to COMPLETELY remove margins?
.mid {
margin: 0;
font-family: myfont;
font-size: 50px;
float: left;
width: 50%;
}
.mid:nth-child(even) {
text-align: right;
}
<div id="midwlink">
<p id="games" class="mid">Games</p>
<p id="calculators" class="mid">Calculators</p>
<p id="animations" class="mid">Animations</p>
<p id="pictures" class="mid">Pictures</p>
</div>
There are many ways to achive side by side layouts in HTML. One of the simplest is to use two divs side by side, as in this snippet.
div {
width: 49%;
display: inline-block;
}
div.right {
text-align: right
}
<div class="left">
Hello left
</div>
<div class="right">
Hello right
</div>
Could it be the wrong <div> tag in the beginning? You have started with a closing div tag.
If you fix that, then you get what you want it to do.
.mid{
margin: 0px 0px 0px 0px;
font-family:myfont;
font-size:50px;
}
.midl{
text-align:left;
}
.midr{
width:625px;
text-align:right;
transform:translate3d(0,-181px,0)
}
<div>
<div id="midwlink">
<p id="games" class="mid midl">Games</p>
<p id="calculators" class="mid midr">Calculators</p>
<p id="animations" class="mid midl">Animations</p>
<p id="pictures" class="mid midr">Pictures</p>
</div>
im havin this error, in which my div doesnt expand
the line on top is the div, which is supposed to be surrounding the images and the text that you can see
heres the code:
html
<div class="team sizer">
<img class="teamtitle" src="FullWeb/v_landingpage/Title.png"/>
<div class="person1 pimage">
<img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
<p class="ptext">Person 1</p>
</div>
<div class="person2 pimage">
<img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
<p class="ptext">Person 2</p>
</div>
<div class="person3 pimage">
<img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
<p class="ptext">Person 3</p>
</div>
<div class="person4 pimage">
<img src="FullWeb/v_landingpage/Team_Pic_Base.png"/>
<p class="ptext">Person 4</p>
</div>
<p class="pagebottomtext" width="44.21052631578947%">Lorem ipsum</p
</div>
css:
.team{
position:relative;
margin-bottom:700px;
border: 1px solid black;
}
.teamtitle{
position:absolute;
top:1%;
left:47.15789473684211%;
width:5.684210526315789%;
height:42px;
border: 1px solid black;
}
.pimage{
position:absolute;
top:120px;
border: 1px solid black;
}
.person1{
left:530px;
}
.person2{
left:770px;
}
.person3{
left:1010px;
}
.person4{
left:1250px;
}
.ptext{
font-family: Lucida Sans Unicode;
color:#999999;
font-size:1.1em;
border: 1px solid black;
}
.pagebottomtext{
position:absolute;
text-align:center;
width:44.21052631578947%;
top:320px;
left:27.89473684210527%;
font-family: Lucida Sans Unicode;
color:#999999;
}
thanks in advance for your help.
http://jsfiddle.net/UPsew/3/
It's because all the child elements of the div have position: absolute, and hence are taken out of the flow (i.e. they don't take up any space within the containing div, and hence it shrinks to zero height).
You'll need to position them using something else. I had a little play and came up with this using margins to position:
http://jsfiddle.net/UPsew/7/
although you'll probably need to mess with the numbers.
Try adding overflow:hidden to the "team" class.
I'm not very sure that's the case, especially that your HTML isn't complete. If this doesn't work, please add your code on jsfiddle.
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)