Currently stuck on how to align the textbox and button on the same line with 50% width (in footer), can anyone give me some sort or guide or able to fix this issue for me?
[Extra questions, any further support or guidance would be appreciated, Wireframe given for basic idea]
One being how to put spacing between the text and picture that are aligned below the navbar.
Below that, how to put a thin border for each separate picture and box of text.
(Sorry if i'm not allowed to ask extra questions)
You could use css flexbox to achieve the
"align the textbox and button on the same line with 50% width"
part Specifically, add
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
to your css file. I included the modified project below so that you could check the effect. More about CSS flexbox at here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.paragraph {
padding: 5px;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
form .container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type=text] {
width: 50%;
padding: 15px;
margin: 5px 0 5px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<div class="clearfix">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
</form>
</body>
</html>
As of adding space between image and text, you could simply apply a margin or some padding to the image. Something like this will do:
.desired-img {
margin: 5px;
}
To add border to a paragraph, simply use css to style your border. Something like this will do the job:
.column {
border: 1px solid lightgrey;
}
Hope this helps!
You need to remove the button from it's own div block element and put inline with the input. I've set the .container div to 50% and centered aligned the input and button. To add space between your image and text, just and a margin to the right and bottom. And you can simple add a border attribute to your .column class to give a thin border:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#holidayImg {
margin: 0px 20px 20px 0px;
}
.paragraph {
padding: 5px;
}
{
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.33%;
padding: 5px;
border: solid 1px #ccc;
margin: 0px 5px;
border-radius 4px;
}
.footer {
position: relative;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
.container {
display: flex;
}
input[type=text] {
padding: 15px;
margin: 5px;
display: inline-block;
border: none;
background: #f1f1f1;
width: 50%;
}
.signupbtn {
width: 50%;
margin: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>Chollerton Tearooms</title>
</head>
<body>
<ul>
<li><a class="" href="index.html">Home</a></li>
<li>Find out more</li>
<li>Credits</li>
<li>Wireframe</li>
<li>Admin</li>
</ul>
<div class="main-column">
<div class="paragraph">
<img src="Tearoom.png" alt="Holiday" width="400" height="200" align="left" id="holidayImg">
<h1> Tearoom</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</p>
</div>
</div>
<br><br><br><br>
<div class="row">
<div class="column">
<img src="Craftshop.png" alt="Craft" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="General%20Store.jpg" alt="Store" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
<div class="column">
<img src="B&B.jpg" alt="Bed and breakfast" style="width:100%">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque, quam finibus eleifend venenatis, augue velit finibus orci, a pretium nisi dolor vitae elit. Nam dignissim urna a turpis cursus malesuada. Vestibulum bibendum quis dui scelerisque
laoreet. Aliquam tempus, leo ornare finibus elementum, est felis venenatis arcu, eu ultricies ipsum neque id tellus. Praesent ut ipsum malesuada, blandit nulla vitae, blandit orci. Aliquam erat volutpat. Sed porta consectetur tempus. Vestibulum
ac tincidunt ipsum. Suspendisse volutpat non magna id placerat. Nullam et mi eu lacus lacinia sodales. Sed non interdum ante. Nam eu posuere ipsum. Nullam pulvinar ipsum euismod tellus vulputate ullamcorper. Maecenas ac quam vulputate, venenatis
mi eget, dictum erat.
</div>
</div>
<div class="footer"> what i did to ensure that the footer stayed in the correct position was actually setting the position to be absolute, this will stop it from overlapping.</div>
<form action="/action_page.php" style="border:1px solid #ccc">
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required>
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</form>
</body>
</html>
If I understand what you're asking, you can add another class as follows:
<div class="container">
<input type="text" placeholder="Enter Email" name="email" required class="side-by-side">
<div class="clearfix side-by-side">
<button type="submit" class="signupbtn">Subscribe </button>
</div>
</div>
// CSS added to get effect
.container {
width: 100%;
float: right;
}
.side-by-side {
display: inline;
}
This way it stays on 1 line and stays on the right side similar to your wireframe.
Related
Ok, now that I hate CSS enough for 3 lifetimes, I come here requiring your help.
This seems to be the simplest problem but looks like I'm bad at graphical stuff.
I have this page that contains a map and a sidebar. In this sidebar I want two sections : search and results. I want search to stay on top, so I wrote this so far :
{% block body %}
<div id="app">
<div id="sidebar" class="sidebar pt-3">
<h3 class="text-center">
Recherche
</h3>
<div id="sidebar-search" class="sidebar-search">
<form class="form pr-3 pl-3">
<div class="input-group mb-2">
<input id="search-area-input" class="form-control" type="text" placeholder="2000">
<div class="input-group-append">
<div class="input-group-text">m²</div>
<button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
<hr />
<div class="scrollable">
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
</div>
</div>
<div id="map"></div>
</div>
{% endblock %}
With this CSS :
html, body {
height: 100%;
}
# From extended template
.navbar {
position: absolute;
left: 0;
right: 0;
}
#app {
height: 100%;
padding-top: 56px; #exclude bootstrap navbar
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#map {
height: 100%;
background: red;
}
#sidebar {
height: 100%;
float: left;
width: 400px;
background: white;
}
#sidebar .scrollable {
overflow-y: auto;
}
And this damn div won't scroll, even tho it's clearly overflowing the parent div
div sidebar :
div sidebar direct child that overflows but won't scroll:
Please help me get free from this hell.
EDIT
Found an even better way to do that :
<div id="sidebar">
<div id="sidebar-search"></div>
<div id="sidebar-results"></div>
</div>
With CSS:
#sidebar {
float: left;
height: 100%;
display: flex;
flex-flow: column;
background: white;
width: 400px;
}
#sidebar-search {
width: 100%;
max-height: 40%;
flex-shrink: 0;
overflow-y: auto;
}
#sidebar-results {
flex-grow: 1;
width: 100%;
overflow-y: auto;
}
This solves the problem I encountered later when modifying the content (1st div height became variable) and z-index issue with absolute div.
Ok so this was not letting me sleep, I got out of bed again to check that.
I made a container div absolute and padded top to start the content after the search area, and a div inside, with height 100% and overflow-y auto :
{% block body %}
<div id="app">
<div id="sidebar" class="sidebar pt-3">
<h3 class="text-center">
Recherche
</h3>
<div id="sidebar-search" class="sidebar-search">
<form class="form pr-3 pl-3">
<div class="input-group mb-2">
<input id="search-area-input" class="form-control" type="text" placeholder="2000">
<div class="input-group-append">
<div class="input-group-text">m²</div>
<button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
<hr />
<div id="sidebar-results" class="text-justify">
<div class="scrollable pl-3 pr-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.
</div>
</div>
</div>
<div id="map"></div>
</div>
{% endblock %}
And the css corresponding :
html, body {
height: 100%;
}
.navbar {
position: absolute;
left: 0;
right: 0;
}
#app {
height: 100%;
padding-top: 56px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#map {
height: 100%;
background: red;
}
#sidebar {
height: 100%;
float: left;
width: 400px;
background: white;
position: relative;
}
#sidebar-results {
position: absolute;
padding-top: 130px;
top: 0;
height: 100%;
}
#sidebar-results > .scrollable {
height: 100%;
overflow-y: auto;
}
Now I got no scrollbar on the far right and only the results will scroll
You need to use fixed height to enable the overflow-scroll.
#sidebar .scrollable {
overflow-y: scroll;
height: 155px;
}
Here you can check this demo
html, body {
height: 100%;
}
# From extended template
.navbar {
position: absolute;
left: 0;
right: 0;
}
#app {
height: 100%;
padding-top: 56px; #exclude bootstrap navbar
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#map {
height: 100%;
background: red;
}
#sidebar {
height: 100%;
float: left;
width: 400px;
background: white;
}
#sidebar .scrollable {
overflow-y: scroll;
height: 155px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<div id="sidebar" class="sidebar pt-3">
<h3 class="text-center">
Recherche
</h3>
<div id="sidebar-search" class="sidebar-search">
<form class="form pr-3 pl-3">
<div class="input-group mb-2">
<input id="search-area-input" class="form-control" type="text" placeholder="2000">
<div class="input-group-append">
<div class="input-group-text">m²</div>
<button id="search-button" type="submit" class="form-control btn btn-primary">Rechercher</button>
</div>
</div>
</form>
</div>
<hr />
<div class="scrollable">
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
<div class="sidebar-result">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae tempor neque. Fusce rutrum iaculis tellus, et sollicitudin diam sodales nec. Morbi iaculis consequat ornare. Curabitur congue porttitor tellus ut dapibus. Donec placerat commodo augue et aliquet. Aliquam condimentum finibus nisl, nec scelerisque lectus pellentesque eu. Pellentesque non bibendum mi, sit amet mattis lorem. Vivamus elementum, mauris id vulputate porttitor, risus massa convallis diam, aliquet ultrices ligula ligula euismod neque.</div>
</div>
</div>
<div id="map"></div>
</div>
</body>
</html>
I have some content in this containing element which, as you can see in the JSFiddle, is set to have a fixed height and overflow: auto;. When you scroll through the text, you can see that the border touches with the text both above and below.
What I would like to do is to have a "padding" between the border and the text even when scrolling (which the padding property unfortunately can't provide), and I wonder if this can be obtained with CSS alone.
If at all possible, I'd like to avoid having to modify the DOM.
Try this workaround by adding a balck border at the top and at the bottom around <main> which have the same background color of <div> like :
#content-bar > main {
border-top: 16px solid black;
border-bottom: 16px solid black;
}
body {
color: rgb(240, 240, 240);
font-family: sans-serif;
background-color: rgb(150, 150, 150);
}
#content-bar {
background-color: rgb(0, 0, 0);
position: fixed;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
min-width: 100%;
height: 60%;
left: 0;
}
#content-bar > * {
padding: 1em;
}
#content-bar > main {
overflow: auto;
border-top: 16px solid black;
border-bottom: 16px solid black;
}
#content-bar > nav {
padding: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
min-width: 15%;
}
#content-bar > nav > a {
text-align: center; /* <---- problem */
display: flex;
align-items: center;
flex-grow: 1;
}
<body>
<div id="content-bar">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate in arcu id ullamcorper. Pellentesque luctus ut felis vitae tempor. In dui neque, condimentum sit amet diam id, tristique interdum ipsum. In semper nisi leo, at consequat sem interdum feugiat. Proin vestibulum, turpis in tempus pellentesque, enim libero auctor libero, sit amet ultrices est felis sit amet nisl. Mauris vel mi mi. Suspendisse eleifend laoreet mi a congue. Fusce non libero in velit sodales pharetra nec in nisl. Phasellus elementum a odio eu sodales. Nunc luctus, est non pellentesque tristique, nibh mi pulvinar tellus, ut tincidunt dolor eros at leo. Donec varius dolor eget quam aliquet varius. In at iaculis est. Proin at purus sed ligula tincidunt ullamcorper sit amet a elit. Duis mollis lacinia mi, non aliquam arcu pulvinar ac. Aenean quis imperdiet lorem.
</p>
</main>
<nav>
Element 1
Element 2
Element 3
</nav>
</div>
</body>
Currently still doing my project and I'm trying to find out how to position headings in certain places. Figure 1 is my final goal for my headings to look like.
[Figure 1][1]
Currently this is what mine looks like (Figure 2), I am struggling to position the heading to a similar spot, every time I do, the paragraphs and the navbar move further down leaving a big white gap between the headings & paragraphs.
Also was wondering how would I level out the image with the text & navbar?
Thanks in advance, much appreciated.
[Figure 2][2]
I believe this is what you wanted:
preview
Basically, you could wrap the header (image + text) into a CSS flexbox, and the rest of the stuff into another flexbox. I edited the CSS file to reflect these changes. Hope this helps! Let me know if you have any other questions.
Here's a link to the jsfillde: https://jsfiddle.net/rzLbkw9m/
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li>Destinations</li>
<li>Deals</li>
<li>Flights</li>
<li>Cruise</li>
<li>Extras</li>
<li>Money</li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
</p>
</div>
<div class="paragraph">
<p>
<img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.
Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Here's the css file:
/* header */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main content */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}
create a div around h1 and h3
.header{
position: relative;
top: 50%;
transform: translateY(-50%);
}
this will put the header in the middle of the area vertically. make sure the padding or margin is minimal
I'm having some troubles with Bootstrap columns, I have this code:
.vertical-line{
height: 100%;
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Also in http://jsfiddle.net/z55z3den/1/
So, what I wanna do is that the container with the class quote takes the height of its parent and then I could see the vertical line set in the container with the class vertical-line
Something like this:
I've been doing some research and I found something about flex properties in CSS but I haven't been able to make it works.
I hope you guys can help me.
Thanks in advanced.
The vertical line is same height with content, looks bigger because of margin of the last
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.quote {
position: relative;
}
.text {
padding-left: 20px;
}
.vertical-line{
position: absolute;
bottom: 0;
right: 0;
height: calc(100% - 40px);
border-right: 2px solid #ebebeb;
margin-top: 5px;
}
<div class="row body">
<div class="quote col-sm-1">
<img src="http://s18.postimg.org/6kmdp3w05/quotes.png" alt="Gray quote">
<div class="vertical-line"></div>
</div>
<div class="content col-sm-11">
<div class="row">
<div class="text col-sm-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.</p>
<p>Nulla felis magna, molestie faucibus maximus a, eleifend vel nulla. Ut ornare justo ut ipsum eleifend, in ultricies mi blandit. Nam condimentum tortor elit, non imperdiet tortor tempor non. Suspendisse sed egestas dui. Donec fermentum ipsum vel orci suscipit, vel dignissim enim molestie. Aenean interdum interdum diam, at laoreet tortor tincidunt accumsan. Morbi nec arcu aliquam, interdum diam ac, volutpat risus. Proin blandit, sem sit amet venenatis interdum, dui dolor ornare dolor, et tincidunt lectus lacus sit amet elit. Morbi ullamcorper, sem non feugiat ullamcorper, neque urna sagittis mi, nec tempus justo augue semper neque. Integer ut felis ac urna finibus gravida sit amet vitae sapien. Integer erat dui, ultrices at magna non, euismod sagittis est.
</p>
</div>
</div>
</div>
</div>
Add to class body the code:
.body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
May i suggest a different approach.
Just overwrite the default bootstrap styling for the <blockquote> element by using pseudo :before and :after elements. This will be a lot simpler. That way you would not need to load an extra image and you don't have to separate the elements into columns.
Here is an example:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
blockquote {
position: relative;
border-left-width: 0px;
margin: 20px 40px;
font-style: italic;
color: #aaaaa5;
}
blockquote:before {
content:url('http://s18.postimg.org/6kmdp3w05/quotes.png');
/*content: "\201C";*/
color: #ddddd5;
position: absolute;
top: -92px;
left: -42px;
font-family: sans-serif;
font-weight: bold;
font-size: 128px;
}
blockquote:after {
content: "";
width: 2px;
position: absolute;
left: 0px;
top: 52px;
background-color: #ddddd5;
height: calc(100% - 58px);
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut blandit nisl. Fusce at lectus id nulla tincidunt pretium. Morbi tempus est est, maximus luctus libero hendrerit non. Sed ornare augue id mi convallis, pellentesque fermentum ipsum consectetur. Quisque sit amet consequat nisl. Vestibulum consectetur bibendum quam nec convallis. Ut finibus vestibulum libero, ut venenatis turpis cursus quis. Cras eu magna vitae libero dapibus sagittis. Phasellus placerat blandit bibendum. Vestibulum id dolor sit amet nisl viverra hendrerit. Proin sit amet elit eleifend, ornare purus in, commodo orci. Fusce est libero, commodo sed convallis et, tincidunt vel nisl. Fusce diam orci, hendrerit at lacinia eu, hendrerit eu est.
</p>
</blockquote>
</div>
</div>
</div>
I want to style an ordered list giving the numbers a much more bigger font size than the li elements content.
I have already achieved this but I dont know how to align the li elements content with the top of the numbers.
Take a look:
I have tried giving ol li p negative top margin, but that doesnt work. Also, ol li has a top margin but if i set it to 0 it doesnt do anything. My current html is:
<ol>
<li>
<p>content</p>
</li>
<li>
<p>more content</p>
</li>
</ol>
And my CSS:
ol {
padding-top: 200px;
}
ol li {
color: #EEEDED;
font-size: 35px;
font-weight: bold;
font-style: italic;
margin-top: 5px;
line-height: 1;
}
ol li p {
font-size: 11px;
color: #444444;
font-weight: normal;
font-style: normal;
line-height: 1.7em;
}
Any ideas??
This can be solved by:
applying display: inline-block to the P element
applying vertical-align: middle to the P element
This enables the P element to share inline and block-level characteristics, allowing the vertical-align to function correctly (on all the block of text, as a whole).
Example CSS:
ol { margin-left: 100px; }
li { font-size: 4em; }
p { display: inline-block; vertical-align: text-top; font-size: 0.25em; line-height: 1.5; padding-left: 2em; }
div { width: 50%; margin-left: -25%; left: 50%; position: relative; }
Example markup:
<div>
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pulvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pulvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pulvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Phasellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra libero quis molestie.</p>
</li>
</ol>
</div>
Note: display: inline-block doesn't function in Firefox 2 - an alternative is to use display: -moz-inline-box
EDIT: replaced 'vertical-align: middle;' with 'vertical-align: text-top;' to line up numbers with the top of each paragraph.
EDIT 2: For the non-believers, here is the CSS and markup in context -> copy, paste, view
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
ol { margin-left: 100px; }
li { font-size: 4em;}
p { display: inline-block; vertical-align: text-top; font-size: 0.25em; line-height: 1.5; padding-left: 2em;}
div { width: 50%; margin-left: -25%; left: 50%; position: relative; }
</style>
</head>
<body>
<div>
<ol>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus odio eros, pretium id congue condimentum, aliquam et justo. Donec molestie tempus mi, et gravida mi tempus non. Fusce commodo, metus sit amet pu
lvinar pretium, ante lorem varius nulla, at varius quam risus facilisis ante. Donec et adipiscing dolor. Nunc condimentum est ut lorem molestie ac consectetur nisl sodales. Sed a iaculis sem. Duis elementum enim eget eros vulputate
accumsan. Fusce eget eros at erat egestas pellentesque in ornare dolor. Duis fringilla justo sit amet felis lobortis eget facilisis quam pharetra. In eu sem nisl. Aenean a nulla ante. Nullam vitae massa id augue molestie egestas. Ph
asellus mauris odio, tristique cursus pharetra quis, volutpat ut arcu. Mauris scelerisque vehicula ante, sit amet placerat sem viverra ut. Maecenas risus purus, dictum ac accumsan quis, cursus ac libero. Donec accumsan viverra liber
o quis molestie.</p>
</li>
</ol>
</div>
</body>
</html>
http://w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Edit: now with example (http://www.webdevout.net/test?01m&raw):
<!doctype html>
<html>
<head>
<title></title>
<style>
html {
background: #cccccc;
}
body {
margin: 0;
padding: 0;
}
div {
margin: 216px 0 0;
width: 200px;
overflow: hidden;
}
ol {
color: #eeeded;
padding: 0;
margin: 0 0 0 42px;
}
li {
padding: 10px 0 0;
margin: 0;
font: italic bold 35px/35px arial, helvetica, verdana, geneva, sans-serif;
}
html > /**/ body
li {
letter-spacing: -3px;
}
span {
letter-spacing: normal;
padding: 1px 0 0;
color: #444444;
font: 11px/1.7em arial, helvetica, verdana, geneva, sans-serif;
vertical-align: text-top;
display: inline-block;
}
</style>
</head>
<body>
<div>
<ol>
<li>
<span>content</span>
</li>
<li>
<span>more content</span>
</li>
<li>
<span>some big content to test this better!</span>
</li>
<li>
<span>super extra max big content to test this better, and better and better, and some more!</span>
</li>
</ol>
</div>
</body>
</html>
This is a working example for what you want:
EDITED: p tag aligned at top of OL numbers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
ol {
padding-top:200px;
}
ol li {
color: #EEEDED;
font:bold 35px/35px Arial,Verdana,Geneva,Helvetica,sans-serif;
font-style:italic;
padding-top:10px;
position:relative;
}
ol li p {
position:absolute;
top:0px;
font-size:11px;
color:#444444;
font-weight:normal;
font-style:normal;
line-height:1.7em;
}
div {
width:200px;
}
</style>
</head>
<body>
<div>
<ol>
<li>
<p>content</p>
</li>
<li>
<p>more content</p>
</li>
<li>
<p>some big content to test this better!</p>
</li>
<li>
<p>super extra max big content to test this better, and better and better, and some more!</p>
</li>
</ol>
</div>
</body>
</html>
You can use position:relative on the li and the top property to achieve this.
Example:
ol li p
{
position:relative;
top : 20px;
}
I had a similar issue but couldn’t change the HTML, so here’s a different idea: remove the list-style and set up a css counter.
My code:
<ol>
<li>something</li>
<li>Something else</li>
</ol>
and (SCSS):
ol {
list-style: none;
counter-reset: contador-lista;
li {
counter-increment: contador-lista;
&:before {
//place your different styling here!
content: counter(contador-lista) ".";
}
}
}