i load a html File inside a Browser in Webview. it displays it just fine, but if i try to resize the window to its miminal size(less than 200 px height) eclipse throws Exceptions.
my environment:
Linux Suse 12.3, JDK 1.7.0_45, JavaFX 2.2, Compiler Compliance level 1.7.
here is the Code:
public class HTMLView extends BorderPane {
final WebView browser = new WebView();
final WebEngine webEngine = browser.getEngine();
public HTMLView(String fileName) {
webEngine.load(fileName);
setCenter(browser);
}
}
html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Info Board</title>
<style type="text/css">
body{
font-weight: normal;
font-family: Arial, Serif, Tahoma, Verdana;
font-size: 12px;
padding: 10px;
background: #330000;
}
.box{
margin-top: 100px;
border-top: 1px solid #F3F3F3;
-moz-box-shadow: 0 0 8px 1px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 8px 1px rgba(0,0,0,0.8);
-o-box-shadow: 0 0 8px 1px rgba(0,0,0,0.8);
box-shadow: 0 0 8px 1px rgba(0,0,0,0.8);
padding: 10px;
background: #FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="logo.png" style="float: right;"/>
<span style="font-size: 14px; font-weight: bold;">Test Test</span>
<ul>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
</ul>
<span style="font-size: 14px; font-weight: bold;">Test Test</span>
<ul>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
<li>Test Test</li>
</ul>
</div>
</body>
</html>
The Exception:
java.lang.ArrayIndexOutOfBoundsException: 112622
at com.sun.prism.j2d.J2DPrismGraphics.doDrawMaskTexture(J2DPrismGraphics.java:1124)
at com.sun.prism.j2d.J2DPrismGraphics.drawPixelsMasked(J2DPrismGraphics.java:1010)
at com.sun.webpane.sg.prism.WCGraphicsPrismContext$ClipLayer.render(WCGraphicsPrismContext.java:1267)
at com.sun.webpane.sg.prism.WCGraphicsPrismContext.renderLayer(WCGraphicsPrismContext.java:174)
at com.sun.webpane.sg.prism.WCGraphicsPrismContext.restoreStateInternal(WCGraphicsPrismContext.java:191)
at com.sun.webpane.sg.prism.WCGraphicsPrismContext.restoreState(WCGraphicsPrismContext.java:204)
at com.sun.webpane.platform.graphics.GraphicsDecoder.decode(GraphicsDecoder.java:202)
at com.sun.webpane.platform.graphics.WCRenderQueue.decode(WCRenderQueue.java:67)
at com.sun.webpane.platform.WebPage.paint2GC(WebPage.java:661)
at com.sun.webpane.platform.WebPage.paint(WebPage.java:640)
at com.sun.javafx.sg.prism.NGWebView.renderContent(NGWebView.java:71)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:201)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:420)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:201)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:420)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:201)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:420)
at com.sun.javafx.sg.prism.NGNode.renderForClip(NGNode.java:443)
at com.sun.javafx.sg.prism.NGNode.renderRectClip(NGNode.java:334)
at com.sun.javafx.sg.prism.NGNode.renderClip(NGNode.java:360)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:193)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:420)
at com.sun.javafx.sg.prism.NGNode.renderForClip(NGNode.java:443)
at com.sun.javafx.sg.prism.NGNode.renderRectClip(NGNode.java:334)
at com.sun.javafx.sg.prism.NGNode.renderClip(NGNode.java:360)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:193)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:201)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:420)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:201)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:204)
at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:420)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:201)
at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:40)
at com.sun.javafx.sg.BaseNode.render(BaseNode.java:1145)
at com.sun.javafx.tk.quantum.ViewPainter.doPaint(ViewPainter.java:117)
at com.sun.javafx.tk.quantum.AbstractPainter.paintImpl(AbstractPainter.java:188)
at com.sun.javafx.tk.quantum.PresentingPainter.run(PresentingPainter.java:73)
at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:471)
at java.util.concurrent.FutureTask.runAndReset(FutureTask.java:304)
at com.sun.prism.render.RenderJob.run(RenderJob.java:37)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
at com.sun.javafx.tk.quantum.QuantumRenderer$PipelineRunnable.run(QuantumRenderer.java:108)
at java.lang.Thread.run(Thread.java:744)
any idea about the cause of this exception?
Many Thanks
Related
Im using python3 pdfkit to convert html to pdf .
When using macbook , CSS (Bootstrap 5) are not applied properly while generating pdf but the same works fine in ubuntu .
is there any issue with MAC OS ? im using MacOS Big Sur Version11.4
Thanks in advance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+Georgian&display=swap" rel="stylesheet">
<style>
#media print {
#LEFT li {
height: auto !important;
}
}
/* #LEFT li{
height: 100%;
} */
.bg-ab {
background-color: #f5f4f7 !important;
}
.icon_circle_success {
border-radius: 50%;
border: 1px solid #198754;
padding: 6px 6px;
margin-right: 6px;
font-size: 12px;
color: #198754;
display: flex;
align-items: center;
}
.icon_circle_dark {
border-radius: 50%;
border: 1px solid;
padding: 6px 6px;
margin-right: 6px;
font-size: 12px;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="row p-0 m-0" id="pdf" style="font-family: Arial, Helvetica, sans-serif;">
<ul class="connectedSortable left_list mb-0 col-3 pt-4 px-0" id="LEFT" style="background-color: rgb(12, 83,
157); color: white;">
<div class="text-center px-3">
<span class="text-capitalize" id="designation">Box1 Col-3</span>
</div>
</ul>
<ul class="connectedSortable left_list mb-0 col-9 pt-4 px-0 !important" id="LEFT" style="background-color: rgb(201, 204, 37); color: white;">
<div class="text-center px-3">
<span class="text-capitalize" id="designation">Box 2 Col-9</span>
</div>
</ul>
</div>
</body>
</html>
HTML Page output
python3 code to generate pdf
import pdfkit;
options = {
'margin-top' : '.3in',
'margin-bottom' : '1in',
'margin-left' : '.1in',
'margin-right' : '.1in',
}
pdfkit.from_file('pdfTest.html', 'pdfTest.pdf',options=options,verbose=True);
PDF Generation output
I'm a newbie.So, I tried putting CSS cards on a page that has a sidebar. I used Html & CSS flexbox. First I made them separately and they were perfectly fine and responsive. When I tried merging the both in a single page, the cards came in front of the navbar and the page overall loses its responsiveness too, as the cards lose their form. So, how can I fix this issue?
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}
<!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.0">
<title>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>
The simplified rule is that elements in the HTML file will be created in the order that they appear. If elements overlap, the newer element would be drawn on top of the older element.
That's the problem here. The navigation gets created, then the main contents gets created. So the main contents gets priority when those overlap.
We can change that behaviour by overwriting the order. We do that via CSS using the z-index property. Items with a higher z-index will be drawn over items with a lower z-index. The usual method is to set the z-index very high (e.g. 10000) so that the element with that z-index would appear above everything else.
The only change is that I've added z-index: 10000; to .navbar:
:root{
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
--text-primary: #b6b6b6;
--text-secondary: #ececec;
--bg-primary: #152238;
--bg-secondary: #141418;
--transition-speed: 600ms;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
color: black;
margin: 0;
padding: 0;
background-color: #bbff99;
background-image: linear-gradient(319deg, #bbff99 0%, #ffec99 37%, #ff9999 100%);
background-size: cover;
}
/* Used to colorize the browser scrollbar*/
body::-webkit-scrollbar{
width: 0.45rem;
}
body::-webkit-scrollbar-track{
background: #1e1e24;
}
body::-webkit-scrollbar-thumb{
background: #6649b8;
}
main{
margin-left: 5rem;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.todima{
position: relative;
top: 5rem;
text-align: center;
}
.navbar{
width: 4.5rem;
height: 100vh;
position: fixed;
background-color: var(--bg-primary);
transition: width 200ms ease;
z-index: 10000;
}
.navbar-nav {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.logo{
font-weight: bold;
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1rem;
text-align: center;
width: 100%;
font-size: 1.5rem;
letter-spacing: 0.3ch;
}
.navbar-item{
width: 100%;
}
.navbar-item:last-child{
margin-top: auto;
}
.nav-link{
display: flex;
align-items: center;
height: 5rem;
color: var(--text-primary);
text-decoration: none;
filter: grayscale(100%) opacity(0.7);
transition: var(--transition-speed);
}
.nav-link:hover{
filter: grayscale(0%) opacity(1);
background: #0a304a;
}
.link-text{
display: none;
margin-left: 0.5rem;
}
.nav-link i{
min-width: 2rem;
margin: 0 1rem;
}
.navbar:hover{
width: 16rem;
}
.navbar:hover .link-text{
display: block;
}
.fas{
color: #F98125;
transition:var(--transition-speed);
}
.a1{
font-family: 'Major Mono Display', monospace;
}
h1{
font-family: 'Pacifico', cursive;
margin: 7px;
margin-left: 12px;
font-size: 36px;
color:#0B1354;
}
p{
margin: 7px;
margin-left: 10px;
font-size: 28px;
font-family: 'Caveat', cursive;
color: #660F56;
}
.cardcont{
background: #FFFAFA;
width: 450px;
margin: 40px;
border-radius: 7px;
perspective: 1px;
overflow: hidden;
border: 8px solid transparent;
}
.cardcont:link {
text-decoration: none;
}
.cardcont:visited {
text-decoration: none;
}
.cardcont:hover{
border-width: 8px;
border-style: outset;
border-left-color: #e975a8;
border-top-color:#e975a8 ;
border-bottom-color: #7ddff8;
border-right-color: #7ddff8;
transition: 0.5s;
}
.container{
position: relative;
top: 5rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card-image{
height: 200px;
margin-top: 7px;
margin: 6px;
}
.image-1{
background-image: url(dashboardprofile.png);
}
.image-2{
background-image: url(picks.png);
}
.image-3{
background-image: url(http://www.simpleimageresizer.com/_uploads/photos/b5f9c7fc/pexels-suzy-hazelwood-1130980_450x130.jpg);
}
.image-4{
background-image: url(contributor.png);
}
.image-5{
background-image: url(request.png);
}
.image-6{
background-image: url(logout.png);
}
<!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.0">
<title>Dashboard withh Cards</title>
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"> -->
<script src="https://kit.fontawesome.com/7d904839de.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="mergerdraft.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght#600&family=Major+Mono+Display&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo">
<a href="#" class="nav-link">
<span class="link-text logo-text">Cuet Course Insights</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-home fa-2x"></i>
<span class="link-text">Home</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-user-circle fa-2x"></i>
<span class="link-text">Profile</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-file-download fa-2x"></i>
<span class="link-text">Download books</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-exclamation-triangle fa-2x"></i>
<span class="link-text">Report an issue</span>
</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">
<i class="fas fa-sign-out-alt fa-2x"></i>
<span class="link-text">Log Out</span>
</a>
</li>
</ul>
</nav>
<main>
<section class="todima">
<h1 class="a1">Welcome to your dashboard</h1>
<p>Glad to have you here. Hope you make the best use of your time. </p>
</section>
<section class="container">
<a href="dashboard.html" class="cardcont"><div class="card">
<div class="card-image image-1"></div>
<h1>Profile</h1>
<p>Visit your profile and all related information in this tab</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-2"></div>
<h1>Your Picks</h1>
<p>See your specially hand-picked items, without the peril of following all the steps.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-3"></div>
<h1>Course materials</h1>
<p>Find and read the Books, Previous year Questions, Notes of all the toppers from our vast library of resources. In short, GO FOR GLORY!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-4"></div>
<h1>Be a Contributor</h1>
<p>Wanna contribute to the community? No one ever regrets it, by helping others who might be in need. Go on!</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-5"></div>
<h1>Request materials</h1>
<p>Click here to reach us. Request content(question papers, books) for any course of any department and we'll hear you out. Just fill up the details.</p>
</div></a>
<a href="" class="cardcont"><div class="card">
<div class="card-image image-6"></div>
<h1>Log Out</h1>
<p>All done? Then we guess there's nothing holding you back.</p>
</div></a>
</section>
</main>
</body>
</html>
The second question is about handling different screen sizes. The best way to do that is via CSS media queries. Those allow you to add a set of rules to your CSS file, which will only be processed if they match your condition(s).
For example, if you want to run some rules if the page width is 700px or narrower, you would do this:
#media (max-width: 700px) {
.cardcont {
background-color: black;
}
}
You can have multiple media queries and each one can have multiple conditions. Media queries are usually put at the end of the CSS file, because that allows you to overwrite earlier rules.
I would suggest that you use those to make changes to the page at small sizes. Examples changes would be:
Removing the margin from .cardcont.
Move the navigation to the top of the page.
I have searched endlessly for a solution to centering my drop-down navigation bar on my website.
I have tried removing the code float: left code from my CSS and added the code display: inline-block: but nothing seems to be working. I have tried several solutions but they have either moved my navigation bar from the top or removed the background I have set for the navigation bar.
If I could get some help on centering the navigation bar without removing the navigation bar's background or displacing it, that would be great.
html {
background-image: url(../images/RL_bg.gif);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
li {
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Rocket League</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<header>
<ul>
<li class="dropdown">
Homepage
<div class="dropdown-content">
What is Rocket League?
Gameplay
Platforms
</div>
<li class="dropdown">
Cars
<div class="dropdown-content">
Standard
Downloadable Content
Platform Exclusive
</div>
<li class="dropdown">
Online Content
<div class="dropdown-content">
Multiplayer
Competitve
</div>
<li class="dropdown">
Maps
<div class="dropdown-content">
Standard
Experimental
</div>
<li class="dropdown">
Crates
<div class="dropdown-content">
Item Customization
Trading
</div>
<li class="dropdown">
About Me
<div class="dropdown-content">
Purpose of This Site
About The Creator
</div>
</li>
</ul>
</header>
<body>
<h1></h1>
</body>
</html>
Your going to want to make a create a id for your ul's that does this tag around your entire list. Then you can use this for css.
#navmenu {
margin: 0 auto;
width: 500px;
}
#navmenu a {
width: 100px;
text-align: center;
}
So this will work if your using an inline list. Let me know if this solution is helpful at all, because we can custom taylor it to your css/html specifically.
I have a problem with 2 pictures staying one aboce the other. I am trying to make the plane stay above the cloud. But, even if I have set the position and z-index, they stil stay one near the other.
How can I make the plane stay above the cloud?
Thank you!
HTML:
<html>
<body>
<div id="main">
<div id="header">
<img id="logo" src="images/logo.png" />
<ul>
<li>Home</li>
<li>Oferte Turism</li>
<li>Despre noi</li>
<li>Contact</li>
</ul>
</div>
<div id="body">
<div id="leftup">
<img id="cloud" src="images/cloud.png" />
<img id="plane" src="images/plane.png" />
</div>
<div id="form"></div>
<div id="offers"></div>
</div>
<div id="body2"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS:
body {margin:0;
padding:0;
}
#body {height: 900px;
background-image: url('images/headerbg.png');
}
#main {width: 960px;
margin: 0px auto;
}
#header {height: 80px;
background-image: url('images/hd.png');
background-repeat: no-repeat;
}
ul { list-style-type: none;
font-family: Verdana;
font-size: 14px;
}
li { display: inline;
padding:20px;
float:left;
margin-left: 35px;
}
li a { text-decoration:none;
color:white;
font-style:bold; <!-- NO BOLD -->
}
li a:hover { text-decoration:underline;
}
#logo {margin-left: 30px;
float:left;
}
#leftup {clear:both;
float:left;
margin-top:50px;
}
#cloud {width:250px;
position:relative;
z-index:1;
}
#plane {width:250px;
position:relative;
z-index:10;
}
#form {float:right;
border: solid 1px blue;
height:200px;
width: 100px;
margin-right:30px;
}
#offers {border: solid 1px yellow;
clear:both;
margin: 100px auto;
height: 300px;
width: 500px;}![enter image description here][2]
#body2 { height:600px;
background-image: url('images/bodybg.png');
}
#footer {height: 100px;
background-image: url('images/footerbg.png');
}
I know the common solution to this problem is the faux layout, but that doesn't work for me because I have a section with a shadow that needs to extend over the sidebar. Are there any new work arounds for this issue? I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.
I've included the entire HTML / CSS.
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin:0;
padding: 0;
}
body {
background: #ccc;
}
#content {
width: 900px;
margin: 50px auto;
background: #fff;
}
#main {
overflow: hidden;
}
#sidebar {
width: 180px;
float: left;
}
#sidebar li {
padding: 10px;
border-bottom: 1px #ccc solid;
}
#main-content {
-moz-box-shadow: 0 0 25px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
float: left;
width: 700px;
padding: 10px
}
</style>
</head>
<body>
<div id="content">
<div id="main">
<div id="sidebar">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="main-content">I'd like this content section to always be 100% of the #main, so the sidebar doesn't extend below it.</div>
</div>
</div>
</body>
</html>
You can use Jquery for this:
$("#main-content").height($("#sidebar").height() - 20);
-20 is the padding you applied.
Here is a working demo: http://jsfiddle.net/rniestroj/DEVha/
you can set up a div wrapper with a background image. inside of this wrapper, you place the two floating divs under the two floating divs - but still inside of the wrapper - you kill the float with the following line:
<div style="clear: both; height: 0; overflow: hidden;"> </div>