I have some code to display a separator and header
I currently have
.content-wrap {
width: 1024px;
margin: 0 auto;
}
.content-wrap section section {
background: none;
margin: 0;
}
.content-wrap section {
position: relative;
padding: 125px 0 25px 0;
background: url(http://www.lebiscuit.com.mx/section-sep.png) repeat-x left 25px;
}
h1 {
font-size: 40px;
float: right;
line-height: 50px;
letter-spacing: -0.9px;
color: #ffffff;
padding:25px 0;
}
body {background-color:#b0c4de;}
this is the html
<div class="content-wrap">
<section id="services" >
<h1>title</h1>
</section>
</div>
The desired output is
How to keep the separator and add the separator to h1?
Please find the jsfiddle here
html
Something like
<h1 class="bck"></div>
.bck h1
{
float: right
margin: 10px
background-color:transparent;
}
Since you're using relative positioning on the section, you would do well to use absolute positioning on the heading (h1):
#services h1 {
position: absolute;
margin: 0;
padding: 0;
top: 0;
right: 0;
background-color: lightSteelBlue;
}
The background-color is so the border line does not go through the header.
http://jsfiddle.net/ExplosionPIlls/HR2Xa/2/
Related
I have an h1 inside a nav that is currently centering based on the width of the h1. How would I use text-align so that the title is centered based on the width of the nav?
Here is my HTML and CSS:
* {
margin: 0;
padding: 0;
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: 100%;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Thank you in advance for your help!
You can set your nav to have a position of relative which means that any inside absolute element will be within the bounds of this element. Then set the h1 to have a position of absolute this will remove the element from the normal flow of the page and have it flow with the parent element with the position of relative. From there you can center it using margin: 15px auto;, left: 0 and right: 0 this will make the h1 element 100% width of the nav thus centering it correctly.
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
margin: 0;
padding: 0;
}
h1 a {
color: inherit;
text-decoration: none;
}
.logo {
height: 100%;
}
nav {
background-color: black;
display: flex;
height: 90px;
position: relative;
width: 100%;
}
nav h1 {
color: white;
flex: 1 0 auto;
font-size: 44px;
left: 0;
line-height: 55px;
margin: 15px auto;
position: absolute;
right: 0;
text-align: center;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1> The Novel Column </h1>
</nav>
Now this method also has its fallback, you will lose the ability to click on the logo, but this can be remedied by setting a position of relative and z-index: 2 so the logo element will be higher up than the h1 making it clickable.
Flexbox is perfect approach, and you were nearly there.
I added an empty div with class .ghost to act as a counter balance to the logo. Since I know the logo is 90px wide I set the ghost div to the same, and both the ghost div and the logo get similar flex settings:
.logo {
height: auto;
width: 90px;
flex: 0 0 90px; // same
}
.ghost {
width: 90px;
flex: 0 0 90px; // same
}
Now, with the <h1> allowed to grow (flex: 1 0 auto), it will take up all the rest of the space naturally and remain perfectly centered thanks to the ghost div flanking the right side.
* {
margin: 0;
padding: 0;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}
h1 a {
text-decoration: none;
color: inherit;
}
.logo {
height: auto;
width: 90px;
flex: 0 0 90px;
}
nav {
width: 100%;
height: 90px;
background-color: black;
display: flex;
}
nav h1 {
text-align: center;
margin: 15px 0;
color: white;
font-size: 44px;
line-height: 55px;
flex: 1 0 auto;
}
.ghost {
width: 90px;
flex: 0 0 90px;
}
<nav>
<img class="logo" src="https://www.brachaprinting.com/wp-content/uploads/2013/10/Apple-logo1.jpg">
<h1>The Novel Column</h1>
<div class="ghost"><!-- nothing here --></div>
</nav>
I am trying make this layout responsive. The problem I am having is like the images are on foreground. I've tried with background position cover, but did'nt work out. I am not supposed to use any javascript for this
Below is the fiddle link
http://jsfiddle.net/6jhx7du6/
HTML:
<div class="page-wrap">
<h1>Make This Responsive</h1>
<p>While maintaining the heirarchy of importance.</p>
<article class="main-story">
<img src="http://f.cl.ly/items/2e3c2a1Z0D1H3u0W2K12/shera.jpg" alt="Sha Ra Rocking" />
<div class="story-intro">
<h1>Most Important Story</h1>
<p>This article has the most visual weight. image source.
</p>
</div>
</article>
<section class="sub-stories">
<article class="sub-story">
<img src="http://placekitten.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
<article class="sub-story">
<img src="http://placecage.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
<article class="sub-story last">
<img src="http://placebear.com/250/350" />
<div class="story-intro">
<h2>Less Important Story</h2>
<p>This story has less visual weight.</p>
</div>
</article>
</section>
</div>
CSS:
* {
box-sizing: border-box;
}
.page-wrap {
width: auto;
margin: 20px auto;
}
.main-story {
position: relative;
margin: 0 0 25px 0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
a {
color: lightblue;
}
.story-intro {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.75);
padding: 20px;
color: white;
}
h1 {
font-size: 4em;
}
h1, h2 {
margin: 0 0 10px 0;
}
.story-intro h1 {
font-size: 2.5em;
}
.story-intro p {
margin: 0;
}
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
}
.sub-story {
float: left;
width: 250px;
margin-right: 25px;
position: relative;
font-size: 80%;
}
.last {
margin-right: 0;
}
Thanks in advance..
Now define your class .main-story img
this style
.main-story > img{
width:100%;
}
hello what you mean is that you want the design fluid, not responsive,
one solution is to set the width as percent like here:
http://jsfiddle.net/6jhx7du6/1/
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
max-width:800px;
}
.sub-story {
float: left;
width: 31%;
margin-right: 3.5%;
position: relative;
font-size: 80%;
}
You need to set a max-width in the container of the image then set the image width to 100%. like this
.sub-story {
float: left;
max-width: 250px;
margin-right: 25px;
position: relative;
font-size: 80%;
}
img {
width:100%;
}
To do that add .sub-story { width: x%;} and .sub-story img { width: 100%;}.
So the image will fill the .sub-story which is now responsive.
You can adjust the width of the .sub-story to 33.33% or 50% or any other value using the #media query in CSS.
Hey try this replace this css to your css code.
and after resizing you need change width and font size according to media queries.
JS Fiddle Link:
http://jsfiddle.net/abidkhanweb/r97d1w64/
* {
box-sizing: border-box;
}
.page-wrap {
width: auto;
margin: 20px auto;
}
.main-story {
position: relative;
margin: 0 0 25px 0;
}
img {
display: block;
max-width: 100%;
height: auto;
width:100%;
}
a {
color: lightblue;
}
.story-intro {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.75);
padding: 20px;
color: white;
}
h1 {
font-size: 4em;
}
h1, h2 {
margin: 0 0 10px 0;
}
.story-intro h1 {
font-size: 2.5em;
}
.story-intro p {
margin: 0;
}
.sub-story img{
width:100%;
height:auto;
}
}
.sub-stories {
overflow: hidden;
margin: 0 0 25px 0;
}
.sub-story {
float: left;
width: 32%;
margin-right: 2%;
position: relative;
font-size: 80%;
}
.last {
margin-right: 0;
}
I can't seem to center my div tag within a section tag. I can get it centered from left to right but not top and bottom in the center of the section tag. If I give a margin-top:xxpx then it moves the section tag down and exposes it (not good!)
Here is my css
body
{
background-color: yellow;
margin: 0;
}
header > * {
margin: 0;
float: left;
}
header
{
background-color: white ;
width: 100%;
height: 40px;
}
/*header > input {
margin: 10px 20px 0px 10px;
}*/
#toptext
{
margin: 10px 5px 0px 10px;
width: 245px;
}
article > * {
margin: 0;
}
article
{
background-color: red;
}
#search {
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
background-color: grey;
width: 700px;
margin: 0 auto;
}
#mostdesired
{
background-color: #c7d1d6;
height: 200px;
}
section h2 {
margin:0;
}
.site-title {
color: #c8c8c8;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 1.3em;
margin: 0px 20px 0px 50px;
margin-top: 7px;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
Here is my html
<body>
<header>
<p class="site-title">#Html.ActionLink("Site", "Index", "Home")</p>
<input id="toptext" type="text" />
</header>
<article>
<section id="search">
<div id="middlesearch">
<h2>Search Here</h2>#RenderBody()
</div>
</section>
<section id="mostdesired" ><h2>This is the most section</h2></section>
</article>
</body>
Vertically aligning with CSS is notoriously tricky.
Change the CSS to
#search {
position: relative;
background-color: #a6dbed;
height: 500px;
}
#middlesearch {
position: absolute;
background-color: grey;
width: 700px;
top: 50%;
left: 50%;
margin-left: -350px; /* half the width */
}
and add one line of JQuery to up the div to be correctly centered
$('#middlesearch').css("margin-top",-$('#middlesearch').height()/2)
this line can be avoided if you decide to explicitly specify the height of the div at which point you can simply define the top margin in the CSS.
This avoids having to use tables.
The CSS declaration for header isn't closed on line 20
http://www.vanseodesign.com/css/vertical-centering/
Unfortunately, CSS doesn't make it to easy, but it is possible. Since the div height is dynamic, I would recommend the CSS table method. Yes, a total hack, but it does work.
You have to do a little work for block level elements, refer to these examples
http://phrogz.net/CSS/vertical-align/
http://www.vanseodesign.com/css/vertical-centering/
#middlesearch {
display:inline-block;
line-height:500px;
vertical-align:middle;
}
I'm having some trouble with a fixed nav bar at the top of my page. It's supposed to be flush with the top of the page, but isn't. Here's my HTML:
<nav>
<a href="#">
<div id="logo">
lorem
</div></a>
</nav>
<ul>
*enough li's to go past the bottom of the screen*
</ul>
and my CSS:
body {
margin: 0px;
padding: 0px;
}
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
}
#logo {
padding-left: 1%;
padding-right: 1%;
color: #75cc83;
width: 180px;
height: 100%;
background-color: #333333;
font-size: 3em;
font-family: candara, sans-serif;
}
It seems like there are only problems with the fixed nav once I put content in there (the list items, in this case)
Add top:0 to you nav's rules:
nav {
position: fixed;
display: block;
color: white;
margin: 0 auto;
padding: 0;
width: 100%;
height: 60px;
background-color: #4d4d4d;
top:0;
}
jsFiddle example
I have something like this:
<section>
<h3>Header:</h3>
<p>My text which could span over several lines.</p>
</section>
section
{
background: #5E5E5E;
overflow:hidden;
}
h3
{
background: #B31B1B;
padding: 13px;
width: 174px;
float:left;
}
p
{
margin: 13px 13px 13px 213px;
}
I want the header background to extent to the bottom of the section but when the text in the <p> tag is more than a line it doesn't.
What can I do apart from using the faux columns technique?
You could absolutely position the <h3> instead of floating it. Something like this:
section {
background: #5E5E5E;
position: relative;
overflow: hidden;
}
h3 {
background: #B31B1B;
padding: 13px;
width: 174px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
}
p {
margin: 13px 13px 13px 213px;
}
Live example: http://jsfiddle.net/ambiguous/cZ3rh/
Absolutely positioning the <h3> can cause trouble if the <h3> ends up being taller than the <p> as absolutely positioned elements do not contribute to their parent's height:
http://jsfiddle.net/ambiguous/NQB4n/
I can't think of a decent solution for this case right now though.
Can you apply the background to the section instead of h3?
An alternative could be to move the background to the SECTION and P tags.
section {
background: #B31B1B;
overflow:hidden;
padding: 0;
}
h3 {
padding: 13px;
width: 174px;
float:left;
}
p {
margin: 0;
background: #5E5E5E;
padding: 13px;
margin-left: 213px;
}
http://jsfiddle.net/pEfGq/
give a try to min-height = 100% in h3!
just set height of the h3 element to 100%.
h3
{
background: #B31B1B;
padding: 13px;
width: 174px;
float:left;
height: 100%;
}