I want to achieve this:
I have achieved this:
Why is the background of footer not showing correctly. Also why is the margin-bottom of 'home-features' section not working? The page is live at http://goo.gl/OpAB4V
Markup:
<section id="home-features">
<article class="home-feature-box">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
<article class="home-feature-box">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
<article class="home-feature-box-right">
<img src="images/tellerest-homepage-design_33.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed felis porttitor elementum</p>
</article>
</section>
<footer>
<p>Copyright © 2014, Tellerest. All Rights Reserved.</p>
</footer>
CSS:
/* home features section */
#home-features { margin: 40px auto 0 auto; width: 950px; text-align: center;}
.home-feature-box { width: 256px; float:left; margin-right: 91px;}
.home-feature-box-right { width: 256px; float:right;}
#home-features p { font-family:Verdana, Geneva, sans-serif; font-size: 14px; font-weight: normal; line-height: 24px; color: #4f4f4f;}
/* footer */
footer { background-color: #fafafa; border-top: 1px solid #e0e0e0; text-align: center; font-family:Verdana, Geneva, sans-serif; font-size: 11px; font-weight: normal; color: #a3a3a3; padding: 15px 0 30px 0;}
You must clear your floats.
After the last article, add this div:
<div style="clear:both"></div>
Of course, you should simply create a "clear" class instead of having inline styling, but you get the idea.
Upon observation, I see that your #container div also has a fixed height of 1000px. Simply remove that as well.
You have given height:1000px for #container
Remove that height and clear the div
<section id="container">
.
.
.
<div class="clear"></div>
</section>
CSS for clear
.clear {
clear: both
}
Just change your #container class to following code.
#container {
background-image: url("images/tellerest-homepage-design2_01.png");
background-position: center top;
background-repeat: repeat-x;
overflow: hidden;
}
Related
I am trying to change the color of a bullet point. You'll better understand my request with the image below.
So far, I successfully made it, but I can't find a way to change the bullet point to red.
Here's my CSS :
h3#one {
display: flex;
flex-direction: column;
}
h3#one::before {
content: '1.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;
}
<h3 id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
Is there a way to make it with CSS?
I don't think that you can achieve this with a pseudo class but you could do something like this.
h3 {
display:block;
}
h3 .red {
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;
color: red;
}
<h3>1<span class="red">.</span></h3>
<h3> Test</h3>
If you want only the dot red you can do it with a span like this: <h3>Your text<span style="color: red">.</span></h3>
You can. You just shouldn't be doing it with the '1' in the pseudo-class too. Instead, put the value inside the tag and use the ::before only to style the dot.
h3 {
display: flex;
flex-direction: column;}
h3::before {
position: absolute;
top: 0;
margin-left: 10px;
color: red;
content: '.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;}
<html>
<body>
<h3>1</h3>
</body>
</html>
If you don't want this approach, I suggest using the span tag to do the trick.
<h3>1<span style="color: red">.</span></h3>
You could do it with a gradient background and background-clip: text.
h3 {
display: flex;
flex-direction: column;
}
h3::before {
counter-reset: num var(--num);
content: counter(num) '.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;
align-self: start;
background-image: linear-gradient(90deg, red, red), linear-gradient(90deg, black, black);
background-size: 0.25em, auto;
background-position: right;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
<h3 style="--num: 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 42">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 256">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
But this isn't that reliable. The background-clip: text property is still under a prefix on some browsers. And you need to manually set the gradient cutoff between the number and the dot, depending in the font.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
How to vertically center text inside p? Thank you.
enter image description here
Flexbox solution - the more modern solution:
https://jsfiddle.net/2zqeL6g8/
The HTML:
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
The CSS:
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
CSS table solution - older method, but works in older browsers ie8+:
https://jsfiddle.net/2zqeL6g8/2/
The HTML:
<div class="todo">
<div class="todo-row">
<div class="todo-cell-left">
<p>TODO 1</p>
</div>
<div class="todo-cell-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
</div>
</div>
</div>
The CSS:
.todo {
display: table;
border-collapse: collapsed;
width: 100%;
}
.todo-row {
display: table-row;
}
.todo-cell-left,
.todo-cell-right {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
}
.todo-cell-left {
background: #ccc;
width: 100px;
}
.todo-cell-right {
background: #f5f5f5;
}
.todo {
display: flex;
}
.todo-left {
background: #ccc;
padding: 0 15px;
flex: 0 0 100px;
height:100px;
display: flex;
align-items: center;
}
.todo-right {
background: #f5f5f5;
padding: 0 15px;
flex: 1;
display: flex;
align-items: center;
}
<div class="todo">
<div class="todo-left">
<p>TODO 1</p>
</div>
<div class="todo-right">
<p>Lorem ipsum dolor sit .</p>
</div>
</div>
I want to make a child div inside parents div visible if I give the child div margin-top negative value.
I have tried with position:relative and z-index, but it doesn't seems work.
Here are my code:
HTML:
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
CSS:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
It sounds like you're looking to remove overflow: hidden on .container:
#facultylist {
position: relative;
}
.main-site {
padding: 50px 0;
}
.container {
width: 80%;
margin: auto;
/*overflow: hidden;*/
}
.overlap {
position: relative;
background: #fff;
margin-top: -50px;
margin-bottom: 20px;
}
.top-border-radius {
border-top: #006af4 3px solid;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
<div class="main-site">
<div class="container">
<div class="overlap top-border-radius">
<div id="facultylist">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu luctus ipsum, rhoncus semper magna. Nulla nec magna sit amet sem interdum condimentum.</p>
</div>
</div>
</div>
</div>
I want to place text next to an image and add padding to it. I have both text and image in one box, so that may be problem. I also need site to be mobile friendly.
Here is my code:
.content-title {
font-size: 50px;
}
#section-a ul {
list-style: none;
margin: 0px;
padding: 0;
}
#tiso {
position: static;
padding: 0px;
height: auto;
float: left;
max-width: 800px;
max-height: 800px;
}
#tiso_text {
padding: 3em;
text-align: center;
}
<section id="section-a" class="grid">
<div class="content-wrap">
<ul class="obr">
<img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
<h1 class="content-title">Jozef Tiso</h1>
<li class="textcontent">
<p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate obcaecati et porro quidem iure, odio.
</p>
</li>
</ul>
</div>
</section>
Now, it works when the browser is resized to minimum, but it doesn't work on full. I know why, see image below, I just don't know how to fix that.
Image of what I have, and what I need.
so here is my solution, i hope its that what you wanted..
.content-title {
font-size: 50px;
text-align: center;
}
.item {
max-width: 300px;
float: left;
padding: 20px 3rem;
}
#tiso {
position: static;
padding: 0px;
height: auto;
float: left;
max-width: 800px;
max-height: 800px;
display: block;
}
#tiso_text {
text-align: center;
}
<section id="section-a" class="grid">
<div class="content-wrap">
<div class="box">
<img src="IMG/tiso.png" alt="Tiso-main" id="tiso">
<div class="item">
<h1 class="content-title">Jozef Tiso</h1>
<p id="tiso_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate obcaecati et porro quidem iure, odio.
</p>
</div>
</div>
</div>
</section>
I am trying to make an info box with an info text (which is a simple div). At the right end of this info box there should be a text named "more info" (a nested div), which should indicate that you can click on the info box. To save space I would like to rotate the text 90 degrees, and it should only take so much space as the height of the text "more info". But I couldn't get it working. Either my text is breaking into two lines, or if I use white-space: nowrap; the text is not aligned vertically centered.
Does anyone have a hint for another css property I can try?
I created a fiddle: https://jsfiddle.net/girlscout/9e5u3j5w/3/
I colored the two divs with separate colors just for this example in order to see what the divs are doing.
Thank you Brett for hint with the the code snippet (it is my first post, and I didn't know that this is possible). Here is the code:
.first-div {
border:1px solid blue; width:300px; height:100px; margin:20px auto;
display:flex;
/*justify-content:flex-end; */
}
.second-div {
background-color:green;
/*align-items:center;*/
}
.mytext{
transform:rotate(-90deg);
/*white-space: nowrap;*/
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div"><p class="mytext">more info</p></div>
</div>
so you can make it work by setting the width on the .second-div and changing the padding and transform-origin on .mytext, but its going to be different for every tab you create.
.second-div {
background-color: green;
width: 120px;
position: relative;
}
.mytext {
position: absolute;
white-space: nowrap;
top: 0;
padding: 8px;
color: #FFF;
transform-origin: 50% 100%;
transform: rotate(-90deg);
}
I believe one key will be the transform-origin property.
We'll also position: absolute the .mytext element and fix the width, height and some other properties. However, it still remains flexible enough to work with a variety of content.
Like this:
.first-div {
border: 1px solid blue;
width: 300px;
height: 100px;
margin: 20px auto;
display: flex;
}
.second-div {
position: relative;
background-color: green;
height: 100%;
box-sizing: border-box;
flex-basis: 80px;
}
.mytext {
position: absolute;
top: 20px;
transform: rotate(-90deg);
transform-origin: 0% 0%;
white-space: nowrap;
margin: 100px 0 0 0;
line-height: 30px;
width: 100px;
text-align: right;
}
.first-div.larger {
height: 250px;
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">more info</p>
</div>
</div>
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">info</p>
</div>
</div>
<div class="first-div larger">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">even more info</p>
</div>
</div>
I think I understand what you're look for. You need to add positioning to the first-div of relative and second-div of absolute. See below code.
See it here: CODEPEN
.first-div {
border: 1px solid blue;
width: 400px;
height: 100px;
margin: 20px auto;
display: flex;
position: relative;
padding-right: 40px;
}
.second-div {
position: absolute;
top: 0px;
right: 0px;
background-color: green;
}
.mytext{
transform:rotate(-90deg);
padding: 20px 0;
font-size: 0.7em;
color: #fff;
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<p class="mytext">more info</p>
</div>
</div>
There is a possible solution, although it means somewhat duplicating your markup in a way. You will need two elements: the text that serves as an invisible filler, and the text that is actually displayed:
<div class="second-div">
<!-- Used to precaluclate/reserve space, not displayed -->
<div class="mytext-spacer">more info</div>
<!-- The actual text that is displayed and rotated -90deg -->
<div class="mytext">more info</div>
</div>
The solution leverages on the fact that you can use a spacer element that "pre-occupies" the space that the rotated text needs. This will be the .mytext-spacer element. We simply force it to display text in a vertical manner so that it will take up the same space as rotated text:
.mytext-spacer {
text-orientation: upright;
writing-mode: vertical-rl;
visibility: hidden;
}
The spacer is then hidden away using visibility: hidden. Using display: none will not work because it will be taken out of the document flow and will not be able to "reserve" the pre-calculated space required to fit the rotated text.
Next, you simply rotate your actual .mytext, it will fit nicely. I have used the position + translate trick to visually center the text. We cannot leverage of flexbox here because it will then interfere with the layout involving the hidden spacer text.
.mytext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
text-align: center;
}
.first-div {
border: 1px solid blue;
width: 300px;
height: 100px;
margin: 20px auto;
display: flex;
/*justify-content:flex-end; */
}
.second-div {
background-color: green;
position: relative;
}
.mytext-spacer {
text-orientation: upright;
writing-mode: vertical-rl;
visibility: hidden;
}
.mytext {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
text-align: center;
}
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<div class="mytext-spacer">more info</div>
<div class="mytext">more info</div>
</div>
</div>
<div class="first-div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa sociis nato.
</p>
<div class="second-div">
<div class="mytext-spacer">this is a long long text</div>
<div class="mytext">this is a long long text</div>
</div>
</div>