I want to align some text above the edge of a box.
The box is an inline-block element and the text I want to align is <h2>2014 Pictures!</h2>.
This is what it looks like right now.
http://jsfiddle.net/Zr5yt/3/
As you can see the problem is the text is veering left.
I would like it if 2014 pictures! could start above the edge of the picture box. I've been stuck on this for days now; can anyone help?
HTML
<title>Picture Gallery</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href='<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300' rel='stylesheet' type='text/css'> rel='stylesheet' type='text/css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<body>
<div class="container clearfix">
<div class="grid_12">
<h1>Picture Gallery</h1>
</div>
<div class="grid_3">
<ul class="nav">
<li class="first">Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
<li>Project 4</li>
<li>Project 5</li>
<li class="last">Contact Me</li>
</ul>
</div>
<div class="grid_9 omega">
<h2>Introduction</h2>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
Click to learn about me
</div>
<div id="gallery" class="grid_12">
<h2>2014 Pictures!</h2>
<img src="img/1 crop.jpg" alt="Picture">
<img src="img/2 crop.jpg" alt="Picture">
<p> For more photos click here </p>
</div>
</body>
</html>
STYLE CSS
body {
font-family:'Source Sans Pro', sans-serif;
color: #FF00DB;
background: #A1B3FA ;
}
a {
color: #0000FF;
text-decoration: none;
}
h1 {
font-size: 5em;
letter-spacing: 1.5px;
text-align: center;
}
h2 {
font-size: 1.750em;
letter-spacing: 1.5px;
margin: 20px 20px 0 0;
text-align: left;
}
.btn {
color: #FF0000;
background: #4FB69F url('img/texture.png') no-repeat right top;
padding: 10px 10px;
margin: 0px 0px 0 0;
border-radius: 40px;
text-transform: uppercase;
}
.btn:hover {
background-color: #4c4756;
}
ul.nav {
margin-right: 20px;
list-style: circle;
float: left;
}
ul.nav li {
margin-bottom: 0px;
}
#gallery {
clear: both;
text-align: center;
}
#gallery img{
border: 8px solid;
color: #0000FF;
margin: 40px 0px 0px 0px;
}
GRID CSS
.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
margin: 0 20px 10px 0;
float:left;
display: block;
}
.alpha{margin-left:0px;}
.omega{margin-right:0px;}
.container{
width: 1000px;
margin: auto;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
Updated Jsfiddle
just added
#gallery h2 {
text-align:center;
}
is this the way you wanted?
Related
TL;DR: Here's a CodePen.
I have a UI with an image and a grid of text with long lines which looks like this:
I'm using CSS Flexbox with two elements: the image and the text. And then to lay out the text, I'm using CSS Grid. Now, when I view this on a narrow screen for mobile, it correctly wraps everything and stacks the two elements:
But on desktop, with a slightly narrower div, the flex box wraps before the grid text like this:
How can I get the text to wrap while leaving the flex box alone in this case? I fear I may need to use some media queries, but I'm not even sure if I'm using the right CSS components for this.
Here's the code:
index.html:
<div class="media-callout">
<div class="media-thumb">
<img height="170" width="120">
</div>
<div class="media-callout-grid">
<div class="media-callout-key">Authors</div>
<div>Babalola, J & Ogunkola, Babalola</div>
<div class="media-callout-key">Year</div>
<div>2013</div>
<div class="media-callout-key">Title</div>
<div class="media-callout-value">Scientific Literacy: Conceptual Overview, Importance and Strategies for Improvement</div>
<div class="media-callout-key">Journal</div>
<div><em>Journal of Educational and Social Research</em></div>
<div class="media-callout-key">Location</div>
<div>vol. 3, no. 1, pp. 265–274</div>
<div class="media-callout-key">DOI</div>
<div>10.5901/jesr.2013.v3n1p265</div>
</div>
</div>
style.css:
.media-callout {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 20px;
column-gap: 10px;
padding: 1em;
max-width: max-content;
}
.media-thumb img {
float: left;
height: 175px;
width: auto;
}
.media-callout-grid {
display: grid;
font-size: 12pt;
grid-template-columns: 6em 1fr;
align-content: center;
gap: 0 15px;
}
.media-callout-key {
text-align: right;
font-weight: bold;
}
.media-callout-value {
word-break: break-word;
word-wrap: break-all;
}
A media query does indeed resolve this:
#media screen and (min-width: 600px) {
.media-callout {
flex-wrap: nowrap;
}
}
The query must come AFTER the .media-callout block. I also had to use this approach to prevent the image from being squashed.
Below is an index.html page with five <p> elements inside a <div> element and a <body> element
<body>
<div>
<p class='normal'>Normal and green!</p>
<p class='normal orange small'>Small and orange!</p>
<p class='normal orange violet large'>Large and violet!</p>
<p class='orange'>I am orange!</p>
<p class='violet'>I am violet!</p>
</div>
</body>
Below is the index.css page containing the styles to be applied to the <body> of the index.html page.
body {
font-size: 15px;
}
.violet {
color: violet;
font-weight: 100;
}
.orange {
color: orange;
font-weight: 800;
}
.large {
font-size: 25px;
}
.small {
font-size: 12px;
}
.normal {
font-size: 16px;
color: green;
}
Therefore, without using
!important
rearranging, deleting or adding to the style rules.
deleting, rearranging or adding to the classes within the HTML.
I have included the other class attributes within the paragraph tags as follows:
body {
font-size: 15px;
}
.violet {
color: violet;
font-weight: 100;
}
.orange {
color: orange;
font-weight: 800;
}
.normal.orange.violet.large {
font-size: 30px;
}
.normal.orange.small {
font-size: 12px;
}
.normal {
font-size: 16px;
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Specificty</title>
<link rel="stylesheet" href="CSS" type="text/css">
</head>
<body>
<div>
<p class='normal'>Normal and green!</p>
<p class='normal orange small'>Small and orange!</p>
<p class='normal orange violet large'>Large and violet! </p>
<p class='orange'>I am orange!</p>
<p class='violet'>I am violet!</p>
</div>
</body>
</html>
When running the code, the second and third paragraphs display the wrong color. Is it possible for the correct color to be displayed using specificity without including the color class in the CSS external stylesheet like some of the others?
As .normal is a parent style, you have to place its CSS class on top of the CSS file.
Here is a working solution for you.
body {
font-size: 12px;
}
/*this is a parent */
.normal {
font-size: 18px;
color: blue;
}
.brown {
color: brown;
font-weight: 200;
}
.red {
color: red;
font-weight: 700;
}
.large {
font-size: 24px;
}
.small {
font-size: 14px;
}
<body>
<div>
<p class='normal'>Normal and blue text!</p>
<p class='normal red small'>Small and red text!</p>
<p class='normal large brown'>Large and brown text!</p>
<p class='red'>I am red....</p>
<p class='brown'>I am brown..</p>
</div>
<script src="script.js"></script>
</body>
Please learn and try these. https://www.w3schools.com/css/css_specificity.asp .
TIP: When you use the same type of CSS selectors( ex: class selectors) for the same element(s), you must place parent selectors on top of the other effecting styles
Reason: Equal specificity: the latest rule counts - If the same rule is written twice into the external style sheet, then the lower rule in the style sheet is closer to the element to be styled, and therefore will be applied
I have a simple page here:
http://www.ttmt.org.uk/color/
The center blocks color is saved as a variable in sass
The color of the blocks either side are created with sass's lighten and darken.
Is it possible to display the actual hex number of these lighter and darker colors that sass has created.
The color's hex are displayed in the output css but I'd like to be able to do it dynamically and display the hex color in the block.
I have the colors in scss file
$base-blue: #267EC8;
// Blue
.at-blue{
background-color: $base-blue;
}
.at-blue-lighter{
background-color: lighten($base-blue, 20%);
}
.at-blue-light{
background-color: lighten($base-blue, 10%);
}
.at-blue-dark{
background-color: darken($base-blue, 10%);
}
.at-blue-darker{
background-color: darken($base-blue, 20%);
}
Then I'm using the class name in the html
<div class="my_Box at-blue-lighter" >.at-blue-lighter<span></span></div>
<div class="my_Box at-blue-light" >.at-blue-light<span></span></div>
<div class="my_Box at-blue" >.at-blue <span></span></div>
<div class="my_Box at-blue-dark" >.at-blue-dark<span></span></div>
<div class="my_Box at-blue-darker" >.at-blue-darker<span></span></div>
And styling the box in separate scss file
.my_Box{
text-align: center;
height: 120px;
float: left;
padding: 10px;
margin: 0 30px 0 0;
width: 120px;
span{
display: block;
font-size: 1.2em;
margin: 10px 0 0 0;
}
}
You can use content to show it : http://jsfiddle.net/A9rML/
$color : rgb(38, 126, 200);
div{
background-color: $color;
&:after{
content: "#{$color}";
font-size: 42px;
color: white;
}
width: 200px;
height: 200px;
}
I cant find the text in browser when i use this code, caan someone please help me out telling me my errors i cant seem to find the problem its all simple html and css
<html>
<head> <title>Header example</title>
</head>
<style>
body {background: green;
height:100%;
margin:0; padding:0;
}
#header1 {z-index:2;
position:fixed; top:0; left:0;
width:100%; height:30%;
}
p1 {background:#FFFF00;
position:absolute; top: 80%; left: 5%;
height: 40%; width: 100%;
}
</style>
</head>
<body>
<body oncontextmenu="return false;">
<div id="header1"> <img src="Head_img.gif" width="100%" height="100%" />
</div>
<div id="p1">
<p Text text text text text text text textText text text text text text text text Text text text text text text text text </p>
</div>
</body>
</html>
Five major issues:
You have no <!DOCTYPE>
You have two <body> opening tags.
You have two </head> closing tags.
Your <style> block is sort of in a <head> tag.
You never properly open your <p> tag.
One minor issue:
Your <img /> tag should have an alt attribute that holds some text describing what's in that image.
This code should work:
<!DOCTYPE html>
<html>
<head>
<title>Header example</title>
<style type="text/css">
body {background: green;
height:100%;
margin:0; padding:0;
}
#header1 {z-index:2;
position:fixed; top:0; left:0;
width:100%; height:30%;
}
p1 {background:#FFFF00;
position:absolute; top: 80%; left: 5%;
height: 40%; width: 100%;
}
</style>
</head>
<body>
<div id="header1"><img src="Head_img.gif" width="100%" height="100%"></div>
<div id="p1">
<p>Text text text text text text text textText text text text text text text text Text text text text text text text text</p>
</div>
</body>
</html>
<p> Text text text text text text text textText text text text text text text text Text text text text text text text text </p>
not
<p Text text text text text text text textText text text text text text text text Text text text text text text text text </p>
Well your <p> element does not have any end >...
<p Text
Should be
<p> Text
How to fix display:inline-block(display:inline) with float:right in ie6?
code in: http://jsfiddle.net/VGaGt/
html
<div>
text<span>>></span>
</div>
css
div{
float:left;
width: 300px;
height: 20px;
padding:5px;
background:#ccc;
}
span{
float:right;
width:20px;
height:20px;
display:inline-block;
zoom:1;
*display:inline;
cursor: pointer;
}
Your text takes on the width of the entire div in IE6, which is why span breaks the line. One option is to wrap the text in a p tag, float it to the left and control its width by setting width to 200px or something like that.
HTML
<div>
<p>text</p><span>>></span>
</div>
CSS
p {
float:left;
width:100px;
}
Here is the jsFiddle.