For some reason, the first word of my paragraphs keep appearing above my blockquotes. My code structure looks something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
}
#ab-box {
float:left;
width:360px;
height:160px;
background-color:white;
}
#tb-box {
float:left;
width:180px;
height:160px;
background-color:white;
}
</style>
</head>
<body>
<div class="container">
<div id="ab-box">
<blockquote style="border: 2px solid #666; padding: 10px; background-color: #fff; width: 240px"> <b>AUTHOR:</b>
<br><br>{{NAME}}</blockquote>
</div>
<div id="tb-box">
<blockquote style="border: 2px dotted #666; padding: 10px; background-color: #fff; width: 240px"> <b>PUBLISHED:</b>
<br><br>December 1993</blockquote>
</div>
</div>
<div>
<p>Dear *|SUBSCRIBER|* - <br /><br />We're happy to have you onboard!</p>
</div>
</body>
This isn't a perfect representation... But the word "Dear" in the paragraph below keeps appearing above the blockquotes for some reason. The rest of the paragraph moves just fine and is perfectly in line - it's just that one word. And if I duplicate the paragraph, I get the same issue. Please assist; thank you in advance!
close your "style" tag
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
</style>
Hello and welcome to StackOverflow. Your code has two errors: first of all, you opened the style tag two times, firstly after the head open and then after the comment
<!-- CSS style to put div side by side -->
Second, the comment is an Html comment, not a Css one: inside Style tags you cant use html comments
<!-- blabla -->
Instead, you have to write them like this
body {
background: red;
height: 100%;
/*
width: 100%;
display: flex;
Multi line comment
*/
}
Here you can find a more detailed example.
https://www.w3schools.com/css/css_comments.asp
Cheers!
Related
I think the issue has SOMETHING to do with the sidebar I'm using, as the tags in question are only showing as incorrect on pages where I have the sidebar. Here is an example of a page where </div>, </body> and </html> tags are shown as incorrect (lines 17, 22, and 23):
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Portfolio Home - Odd Merit</title>
</head>
<body>
<!-- The sidebar -->
<div class="sidenav">
<a href="secretpracticepage.html">
<img src="images/portfolioenter.png"
height=100%
width=100%>
News
Contact
About
</div> <!-- this shows as incorrect -->
<!-- end of sidebar section -->
<div class="main">
<p>Work in Progress...</p>
</div>
</body> <!-- this shows as incorrect -->
</html> <!-- this shows as incorrect -->
The div class "sidenav" is a side navigation bar, and the div class "main" is the container where the typical website content shows up. The "incorrect" </div> tag only shows up when ending the sidenav, but removing it puts all content into the sidenav. Everything seems to nest normally when I collapse each section. </body> and </html> also only show as incorrect when the sidebar code is included -- they revert to correct when that section is removed.
Here is the CSS which includes rules for the sidebar, in case that affects the tags:
body {
font-family: 'Trebuchet MS', sans-serif;
text-align: center;
margin: 0 auto;
max-width: 100%;
color: rebeccapurple;
font-size: 12pt
}
img {
object-fit: contain;
}
ul {
color:black;
list-style-type: none;
}
/* The sidebar menu */
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: aquamarine;
overflow-x: hidden;
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: rebeccapurple;
display: block;
}
/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
#main {
background-color:white;
border-left: 1px solid;
border-color:#AAA0B3;
height:auto;
padding: 1px 16px;
padding-left: 300px;
padding-right: 200px;
height: 1000px;
height: 100%;
}
Any help checking my work is much appreciated!
You are not closing the first <a> tag, it should be
<a href="secretpracticepage.html">
<img src="images/portfolioenter.png"
height=100%
width=100%>
</a>
News
Contact
About
I'm trying to load an image from a url however whenever page is loaded it is always null any help will be appreciated
i also tried using src attribute and also did it from css as well but still it's not working
Here is what my header looks like:
Header Screenshot
here is my code:
html, body {
margin:0;
padding:0;
background-color: #181A1B;
height:100%;
width:100%;
}
.logo{
width: 50px;
height: 50px;
content:url("https://pasteboard.co/K18aDZ4.jpg");
}
.header{
margin:0;
padding:0;
position:relative;
background-color: #242627;
height: 50px;
}
.profilepic{
border-radius: 50%;
width: 30px;
height: 30px;
content:url("https://pasteboard.co/K18aDZ4.jpg");
}
.profile{
margin-top: 10px;
margin-right: 10px;
padding: 5px;
float: right;
}
#name{
font-size: 15px;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="homepage.css">
</head>
<header class="header">
<img class="logo" />
<div class="profile">
<img class="profilepic" />
<label id="name">ABCD</label>
</div>
</header>
<body>
</body>
</html>
The problem is not with your code
The problem is the image link
You can put another image link and see that your code is completely correct
Example:
html, body {
margin:0;
padding:0;
background-color: #181A1B;
height:100%;
width:100%;
}
.logo{
width: 50px;
height: 50px;
content:url("https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg");
}
.header{
margin:0;
padding:0;
position:relative;
background-color: #242627;
height: 50px;
}
.profilepic{
border-radius: 50%;
width: 30px;
height: 30px;
content:url("https://thumbs.dreamstime.com/b/example-red-tag-example-red-square-price-tag-117502755.jpg");
}
.profile{
margin-top: 10px;
margin-right: 10px;
padding: 5px;
float: right;
}
#name{
font-size: 15px;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="homepage.css">
</head>
<header class="header">
<img class="logo" />
<div class="profile">
<img class="profilepic" />
<label id="name">ABCD</label>
</div>
</header>
<body>
</body>
</html>
Unable to recognize image
If you are careful, when you open the link, the image will be displayed a few seconds later
Also, the contents of the link are not just images
Use the link that contains the contents of the image to insert the image
pay attention:
Whatever the link is, there is no reason why its contents should be based on the same link
for example:
I think because the end of the link is .jpg
You think the contents of this link are definitely an image and should be displayed
but in reality it is not.
The link can be anything
I suggest you read more about urls , headers and htaccess
Use background instead of content. The css property is wrong.
Your code is perfect the problem is of pasteboard.
You can use photobucket.com instead, which will do the same but in more efficient manner!
I am trying myself a bit on Website layout.
So I have started designing a page.
I want my start page to be divided with a horizontal division line.
So far, so good.
Now each of the two fields needs some text and I want the text to have a vertical align: bottom.
My research on the internet got me the result that there is no real possibility to do like that for <div> tags. But there is one for a table cell.
My HTML code looks like that:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<link href="firstPage.css" rel="stylesheet" type="text/css">
</head>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<body>
</body>
</html>
and my CSS class looks like that:
#charset "UTF-8";
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
font-family: 'corbertregular', arial, sans-serif;
font-size:24px;
}
header {
height: 50px;
background: gray;
}
main {
height: calc(100% - 50px);
background: green;
}
.half {
height: 50%;
position: relative;
}
.half:first-child {
background: #F3A008;
}
.half:last-child {
background: #950049;
}
.titletext{
text-align:center;
display: table-cell;
vertical-align: bottom;
}
I have found that site as a useful solution,
but it does not work for me....
http://phrogz.net/css/vertical-align/
What am I doing for a mistake?
Change this class in your CSS:
.titletext{
text-align: center;
display: table-cell;
position: absolute;
bottom: 0;
}
I am trying to adjust the divs in my application in a way that they remain beside each other in all condition, that is, Currently I am facing a problem that , when i decrease the width of the device the div start to come below the other div while with the device that have higher width have no issues. I have used viewport rendering but still there is no effect on the same .
Here id the code :
HTML:
<HTML>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Comment</title>
<link rel="stylesheet" type="text/css" href="Comment.css">
<script src="js/angular-1.0.7.js"></script>
<script src="js/Myangular.js"></script>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="main">
<div class="imageIcon"><img style="height:30px;width:30px;"src="images/male-shadow-circle-512.png" alt="UserMale" /></div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
body
{
margin : 0px;
padding: 0px;
}
.main
{
margin-top:10px;
}
.imageIcon
{
display:inline-block;
float:left;
margin-left:18px;
background-color: green;
}
.contentDiv
{
display:inline-block;
float:left;
margin-left:12px;
margin-right:10px;
background-color: blue;
}
.nameAndId
{
background-color: aqua;
}
.commentDetails
{
margin-top:8px;
background-color: red;
}
.updateTime
{
float:right;
margin-top: 16px;
background:silver;
}
Fiddle link :
http://jsfiddle.net/tvaibhav/rta9LLfw/
You could use display: table on .main and display: table-cell on .imageIcon and .contentDiv to prevent that. Instead of margin, you could use border-spacing property on parent(.main).
Play Ground
#CHARSET"ISO-8859-1";
body {
margin: 0px;
padding: 0px;
}
.main {
display: table;
border-spacing: 10px;
}
.imageIcon {
display: table-cell;
vertical-align: top;
}
.contentDiv {
display: table-cell;
vertical-align: middle;
background-color: blue;
}
.nameAndId {
background-color: aqua;
}
.commentDetails {
margin-top: 8px;
background-color: red;
}
.updateTime {
float: right;
margin-top: 16px;
background: silver;
}
<body>
<div class="main">
<div class="imageIcon">
<img style="height:30px;width:30px;" src="http://www.lorempixel.com/30/30" alt="UserMale" />
</div>
<div class="contentDiv">
<div class="nameAndId">Name of the persion along with some IDS</div>
<div class="commentDetails">this is the conetent of the main div where we can put the graphics</div>
<div class="updateTime">Some time ago .</div>
</div>
</div>
</body>
You can simply use the display: flex; property with your main div:
.main {
margin-top:10px;
display: flex;
display: -webkit-flex;
}
Here's a Demo fiddle, that works fine with all widths.
Take a look at W3School Tutorial here and try it here.
I'm learning CSS and so far managed after many many hours to create a simple layout but still dont know how to center things (text,block,whatever) inside a float:left div. Here's the code i just hope someone might be able to help as im gonna go nuts in a very short time!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {
/* */
border: 1px solid;
/* */
padding-top: 10px;
margin-left:auto;
margin-right:auto;
width: 980px;
height: auto;
}
#content {
display: inline-block;
}
#content .left {
display: inline-block;
border: 1px solid;
padding-left: 5px;
padding-top: 10px;
width:773px;
float:left;
}
#content .right {
display: inline-block;
padding-top: 10px;
width:200px;
float:right;
}
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="left">
<!-- i need every inside-left class center aligned -->
<div class="inside-left">
<table border="1">
<tr>
<td>center align</td>
<td>damn it</td>
</tr>
</table>
</div>
</div>
<div class="right">
test
</div>
</div>
</div>
</body>
edit: oh and why the ** css is so hard to understand? is it just me??
Just a tiny CSS modification makes a huge difference:
Change this:
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
To this:
#content .inside-left, #content .inside-left > * {
text-align: center;
margin-left: auto;
margin-right: auto;
}
See the difference: http://jsfiddle.net/8JfNF/1/
This CSS selector, #content .inside-left > *, selects all of the direct children (not grandchildren) of the .inside-left and applies the same CSS to them.
CSS is not tough, i think this is simplest logical thing in world of web...try and learn from some good website..
and there is some suggestion for you..
better use class instead of id
always write 4 basic table property width, cellpadding, cellspacing and border
to horizontal centered the things inside a td use text-align:center; to make vertical center write vertical-align:middle
to learn CSS tricks see my bookmarks...this will surely helps u