I've been trying to get these two divs to display next to each other. I've looked up the many ways to do it. I've display: inline-block, flex-box, CSS grid. None of them seem to be working. I did some research with flex box, but with that, I found a lot of the articles I only listed the parent div and then the child div, with the child div just being used twice to create two div next to each other with the exact same properties. I am trying to display two divs right next to each other, but those two div have divs inside of them as well in order to style individual lines in a blog.
Here is my blog.css stylesheet. I am using the .blog-wrap as the div that is supposed to be on the left. The divs after blog wrap are to style the individual lines in the left div.
#charset "utf-8";
/* CSS Document */
.blog-wrap {
padding: 20px;
text-align: left;
width: 500px;
display:inline-block;
}
#blog-title {
font-size: 18px;
font-weight: 700;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
}
#blog-posted-by-date {
font-size: 12px;
}
#blog-content {
font-size: 14px;
Next, we have the actual page displaying the content. I have the stylesheet typed right into the page since this is the landing page, and I plan on using these styles solely on this page. The .landing_page_main is the parent div and the two divs that are supposed to be next to each other go inside. .landing-main-login-register is the div element that is supposed to be on the right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<META name="keywords" content="">
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/nav.css" />
<link rel="stylesheet" href="css/blog.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/forms.css" />
<title></title>
</head>
<body>
<style>
.landing_ad_field {
text-align: center;
background-color: #CCC;
max-width: 900px;
height: auto;
margin: auto;
border-radius: 5px;
font-size: 18px;
}
.landing_page_main {
background-color: #CCC;
opacity: 0.5;
width: 900px;
max-width: 900px;
max-height: 500px;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 5px;
padding: 5px;
box-sizing:border-box;
display: table;
}
.landing-main-login-register {
padding: 5px;
text-align: center;
font-size: 50px;
border: 5px solid #999;
width: 400px;
}
</style>
<center><img src="../images/Official Logo.png" width="300" /></center>
<section class="public_nav_bar">
<div id="public_nav_bar">
Directory ·
Education ·
·
Events ·
Contact Us
</div>
</section>
<section class="landing_ad_field">
Advertisement Placement
</section>
<section class="landing_page_main">
<div class="blog-wrap">
News Area
<?php
include 'db_connect.php';
$sql = "select * from blog";
$result = mysqli_query($conn,$sql);
while($row = mysqli_fetch_array($result)) {
echo '<div id="blog-title">' .$row['title'] .'</div>';
echo '<div id="blog-posted-by-date">Posted By ' .$row['posted_by'] .', ' .date("F j Y g:i:s" , strtotime($row['date'])) .'</div>';
echo '<div id="blog-content">' .$row['content'] .'</div>';
}
?>
</div>
<div class="landing-main-login-register">
✎
Register
<br/>
<hr/>
🔒
Log In
</div>
</section>
<?php require 'master-pages/footer.html' ?>
</body>
</html>
Currently, they are displaying stacked, with the login-register-register div below the blog-wrap.
Any advice would be greatly appreciated.
Related
I used text-align:center to center the three divisions, but they are all aligned on the left.
I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
Very simple,
div is not a class, is a html element, so do this;
CSS
div {
text-align: center;
}
You can do it in multiple ways, the simplest and the first way is to write a CSS like:
div {
text-align: center
}
The second way if you want to use a inline CSS in your HTML code itself:
<div style="text-align:center">
The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:
*for class
HTML:
<div class="center"> </div>
CSS:
.center {
text-align: center,
}
*for id
HTML:
<div id="center"> </div>
CSS:
#center {
text-align: center,
}
And most importantly div is not a class it's an HTML tag so your code didn't work because you used
.div {
text-align: center,
}
in your CSS code and the . symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code
div {
text-align: center,
}
But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.
I've started tooling around with SVG and it is going good.
I am trying working the alignment of the image to the up corner of the left-hand side, however, I just could not make it well. I want to show a quarter of the circle on the front page.
I've set something up by margin, right and top but the effect is not for what I want. The SVG moves a little to the left-hand side of the page only still far away. (image below).
Guys- I am trying hard but if anyone could any resources or support then it would be highly appreciated.
The first image that I attached is what I made, but the second image is what I want to align.
Thank you
.topcon {
background-color: #f6f5f5;
position: relative;
width: 200px;
height:250px;
border: 15px;
padding: 50px;
margin: 150px auto 150px auto;
border-radius: 20px;
}
.top-circle
{
position: absolute;
right: 700px;
top: 40px;
margin: -200px auto -200px autp;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="stylesheet"href="css/styles.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Profile card component</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
body {
background-color: #00B6C7;
width: 1440px;
}
</style>
</head>
<img class="top-circle"src="images/bg-pattern-top.svg" alt="big circle on top">
<body>
<div class="topcon">
<h1>This is for what I made</h1>
<h1>I want the circle could go up and only show quarter of the circle</h1>
Victor Crest
26
London
80K
Followers
803K
Likes
1.4K
Photos
</body>
</html>
enter image description here
enter image description here
I am using bootstrap 4 to style my html pages. And i am using font awesome to add social media icons on the webpage too.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Page Title
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
But when i import the bootstrap4 library, the social media icons shape distorts.
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>
Action Page
</title>
<style>
body {background-color: lightcyan}
.fa {
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.6;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class = 'container'>
<div class = 'row'>
<div class = 'col text-center'>
</div>
</div>
</div>
</body>
</html>
I dont understand what the problem here is.
Can somebody please help me solving this problem...
Thanks in advance ! :)
If you use chrome inspect tools and play around with switching off css and changing the values for display or position etc.. You will see which rule is breaking it. I found changing these fixed it:
.fa-linkedin, .fa-youtube {
display: inline;
}
(hint: in the dev tools it also tells you which css file is causing the changes, i think it was font-awesome here)
I am making a website, which contains a game. The instructions area is supposed to be on the right side of the screen, and the upgrades area is supposed to be on the left. Right now, this is what I have.
(please don't comment on anything besides the div tags, I know I'm messing up the sizes)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
CRayen's answer didn't look like it actually accomplished what you wanted, so take a look here.
I did a few things:
Moved the upgrades div out of the text1 div so they are both
direct children of the game div
Set game to have a display value of flexbox, which is a new-ish CSS layout technique that really helps with this style of design.
Gave both upgrade and instruction boxes a flex-basis of 20%, which is similar to your width: 20%;
Removed the margin-right on upgrades
I highly recommend looking into Flexbox for more info on how to create and edit layouts like this!
I have made few changes to the CSS:
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
padding: 15px
}
.text1 {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: right;
}
.mono {
font-family: 'Roboto Mono', monospace;
}
h2 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
.upgrades {
background-color: lightgrey;
text-align: left;
border: 1.4px solid grey;
border-radius: 10px;
height: 20em;
width: 20%;
float: left;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookie Clicker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Roboto+Mono" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<h1>Cookie Clicker</h1>
<br>
<div class=game><!--Game-->
<div class='text1'><!--Instructions-->
<h2>Instructions</h2>
<p>Cookie Clicker is a game about clicking a big cookie to earn points, and using those points to buy upgrades which give you cookies.</p>
</div><!--/Instructions-->
<div class='upgrades'><!--Upgrades-->
<p>ttttt</p>
</div><!--/Upgrades-->
</div><!--/Game-->
</body>
</html>
The problem that I have with my code is that the <p>Welcome to my Profile</p> will not center. I've tried using Bootstrap's text-center class but it doesn't work desirably. I've also tried multiple things like using text-align: center; in CSS and even using width: 100%; for both the header and the div. Are there any solutions? Thanks in advance.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jane's Personal Profile</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Jane Doe</h1>
<ul>
<li>Social Media</li>
<li>Portfolio</li>
</ul>
</header>
<div class="row">
<div class="span8 offset2 text-center">
<p>Welcome to my Profile</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
header {
height: 75px;
padding-left: 10px;
box-shadow: 5px 5px 10px grey;
width: 100%;
}
header > h1 {
float: left;
}
ul {
display: table-row;
float: right;
list-style: none;
}
ul > li {
display: table-cell;
vertical-align: middle;
height: 70px;
padding: 10px;
padding-right: 20px;
font-size: 16px;
}
h1 {
font-family: 'Abril Fatface', cursive;
}
Looks like you're using "text-center" as a class. Unless you set your CSS to recognize the class, there is nothing for the CSS to do.
Try adding this to your CSS
.text-center {
text-align: center;
}
You should always provide a jsFiddle for problems like this, btw ;)
If Bootstrap has a class setting the paragraph element to align left, you may also need to change the paragraph to a div. Alternatively, you could add a class to the paragraph such as "center-me" and add CSS
p.center-me {
text-align: center;
}
Bootstrap adds a giant bunch of CSS. Make sure, when you are using Bootstrap, to check if it has CSS styles that are affecting what you want to accomplish. Most browsers contain a developer's window where you can see what styles are being applied to any window. In Chrome, you can right click on any element and select "Inspect" to pull up this window and see both the HTML and the styles that are being applied from any CSS source.