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
Related
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.
I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —
<!DOCTYPE html>
<html>
<head>
<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">
<style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none!important;
margin: 5px 2px;
border-radius:50%;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-telegram {
background: #30a2e7;
color: white;
}
.fa:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<!-- Add font awesome icons -->
</body>
</html>
and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn't possible to "press" the icons.
This was caused by the display block styling of that element. So by removing that you'll be able to make those icons clickable again.
your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer's position to relative and z-index higher than 8, here is the code (you should add to css):
#my-footer{position:relative; z-index:99}
I solved it by changing display: block to display: table which reduced the navmobile height.
Context: the images posted by Iliass Nassibane above.
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>
I have been banging my head on the table trying to figure out why this happens. I have set up an anchor that has padding on the top, bottom, and left sides. Inside that anchor is two text elements and as the background of the anchor is an image.
Now when I zoom out (not shrinking the viewport) in chrome, everything seems to shrink as expected until I hit 80%. At this point the content continues to shrink but not the padding on the left side! In FireFox it seems to work as expected.
Attached is my code, please any ideas on how to explain this will be appreciated.
html {font-family: 'tex gyre heros', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; font-size: 10px}
a,a:link,a:visited,a:hover {text-decoration: none; color: inherit;}
.logo {
padding: 10em 10em 0 0;
background: url(../images/some-image.svg) left center no-repeat;
display: inline-block;
vertical-align: bottom;
}
.logo.main {
padding: 1.2em 0 2.1em 12em;
}
.logo.main .logotype, .logotype.block {
display: block;
}
.logotype {
font-weight: bold;
white-space: nowrap;
}
.logotype.title {
font-size: 4em;
line-height: 1.1;
color: #646469;
}
.logotype.subtitle {
padding: 0 0 0 0.078em;
font-size: 2.1em;
line-height: 1.1;
color: #000000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Company">
<base href="">
<title>Company</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" charset="utf-8"/>
</head>
<body>
<header>
<a class="logo main" href="">
<span class="logotype title">Line 1</span>
<span class="logotype subtitle">Line 2</span>
</a>
</header>
<section>
</section>
<footer></footer>
</body>
</html>
The issue here comes from the difference in pixel representation between browsers. Meaning - Chrome and Firefox might handle some fixed pixel values differently (don't ask me why, its just how the world functions with everything).
Possible solution 1: Try and set the padding values in % so that they can be relative to each other.
Possible solution 2: This thread on CSS Tricks about not breaking the layout when zooming:
Possible solution 3: Check your viewport tags. Use this thread.
Like #DarkxPunk said, the link goes to the far left side on Firefox and somehow does not go to the far left in Chrome.
Issue visualization for further investigation:
Chrome:
Firefox:
I am making a website for my friend but when using CSS the image doesn't show up.
<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>
CSS:
* {
margin: 0px;
padding: 0px;
font-family: Arial, Sans-Serif;
font-size: 14px;
background-color: grey;
}
.wrapper {
margin: 30px;
background-image: url(../img/warpper.png);
}
My image is the header menu background but when I try the website it doesn't show up.
Here is mistake in your HTML
<title>Bobby & Rose | Pillow Service</title>
Solution - JSFIddle
HTML
<title>Bobby & Rose | Pillow Service</title>
CSS
.wrapper {
width: 100%;
background-image: url(../img/warpper.png);
min-width: 100px;
min-height: 100px;
}
If still not working at your end then you should check the path of the image it is incorrect.
The DIV has no Content therefore the size is 0x0px, means no place to show the image.
Add
width:200px;
height:200px;
to your CSS. Instead of 200px youse what ever you want.
Determine the size, I also use id instead of class
CSS
#wrapper {
height:200px; <!--on me here -->
margin: 30px;
background-image:url('wrapper.png');
}
HTML
<html>
<head>
<title>Bobby & Rose | Pillow Service</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
</div>
Just noticed your image name is spelled 'warpper' while the div is 'wrapper'.
Perhaps two letters being switched?
On another note - depending on the size of your image, and how you'd want it to fill the div, you may need to add:
background-size: contain;