I am coding a website for college coursework and I am writing it in DreamWeaver. When I go into design view it is all visible but when I view it in Safari or Chrome I can't see it at all. Please can you help me?
Please visit http://jsfiddle.net/NA6eN/ to see my code so far.
#wrapper
{
width: 90%;
margin: 0 auto;
color:#CCC;
}
#top_box
{
position: absolute;
min-width: 90%;
max-width: 90%;
margin: 0 auto;
height: 92%;
right: 5%;
background: white;
width: 80%;
border: 5px rgba(0, 239, 255, 0.5) solid;
border-top: none;
}
You have so many missing > objects, that's why the error. Fix your html and try again and it works fine, like this:
<body>
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box">
</div>
<div id="main_box">
</div>
<div id="Bottom_box">
</div>
</div>
</body>
</html>
Fiddle
You didn't close the wrapper div:
<div id="wrapper"
should be
<div id="wrapper">
Missing to close >
DEMO
<body>
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box">
</div>
<div id="main_box">
</div>
<div id="Bottom_box">
</div>
</div>
</body>
You didn't close your div's properly:
<div id="menu_box"
</div>
do it like this:
<div id="menu_box">
</div>
otherwise the browsers can't parse your html.
Fixed version: http://jsfiddle.net/Z2k8d/
You didnt end tag for div id wrapper
its
<div id="wrapper"
now change it to
<div id="wrapper">
Invaild in your HTML code : (HTML opening/closing tags)
Original :
<div id="wrapper"
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box" </div>
<div id="main_box" </div>
<div id="Bottom_box" </div>
</div>
Fix to :
<div id="wrapper">
<div id="top_box"></div>
<div class="background"></div>
<div id="menu_box"></div>
<div id="main_box"></div>
<div id="Bottom_box"></div>
</div>
Trick in jsFiddle
click on buttom for more readable
You see that code in red color ?, Its mean your HTML not vaild
Fix it ! like your is missing closing tag , closing tag with no opening tag... bla bla bla
Result :
Vaild !
Demo : http://jsfiddle.net/NA6eN/3/
Useful tool for you : http://validator.w3.org/#validate_by_input
Related
So bit of background on my issue. I'm using an external carousel and I am trying to modify each image section to include text. There seems to be an overflow:hidden on the sp-carousel-frame class that is making it not visible but without this the unselected images on either side go full size.
I basically need the item-text class to be displayed.
I really hope I explained this ok.
I'm going include an image that shows the issue below.
HTML
<script src="https://wordpress-84115-1849710.cloudwaysapps.com/wp-content/themes/inspiration-marketing-theme/assets/js/carousel.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container collaboration-header">
<div class="row">
<div class="col-md-12">
<h1>Collaboration and Teamwork</h1>
</div>
</div>
</div>
<div class="container main-carousel">
<div class="row">
<div class="col-md-12">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello World
</div>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="https://gdxdesigns.com/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.collaboration-header h1{
text-align: center;
padding: 1.5em 0;
}
.main-carousel {
margin-bottom: 20% !important;
}
The JSFiddle Below:
Here is my JSFiddle
Add Class this carousel-caption on item-text
<div class="item-text carousel-caption">
Hello World
</div>
https://jsfiddle.net/lalji1051/3hyb82fg/1/
OK I got it solved basically although I probably need to tweak it a bit to get it perfect what I did was disable the overflow:hidden on the sp-carousel-frame and change it to visible. Then on the parent div col-md-12 I attached another class called overflow:
HTML
<div class="col-md-12 overflow">
<div class="sp-carousel-frame sp-carousel-frame-pos">
<div class="sp-carousel-inner">
<div class="sp-carousel-item" style="overflow: visible !important;">
<img src="/wp-content/uploads/2021/04/Main-Slider-Image.jpg"/>
<div class="item-text">
Hello Hows it going like
</div>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Left-Slider-Image.jpg"/>
</div>
<div class="sp-carousel-item"><img src="/wp-content/uploads/2021/04/Right-Slider-Image.jpg"/>
</div>
</div>
</div><!-- End sp-carousel-frame -->
<hr />
</div><!-- Close Col-md-12 -->
CSS:
.sp-carousel-frame {
overflow: visible !important;
}
.overflow {
overflow: hidden !important;
padding: 0 !important;
}
Updated JSFiddle
Here is a codesandbox of what I have: https://codesandbox.io/s/still-surf-5vyy2
The pink square is stickied the way I want to but now I need to add a container so that the content doesnt stretch through the whole page.
THis is what the html looks like now:
<body>
<div style="height:200vh;background-color:blue">
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
If I were to add:
<body>
<div style="height:200vh;background-color:blue">
<div class='container'> <--------------------------THIS
<div style="width:50%;height:100vh;float:left;background-color:red"></div>
<div style="width:50%;height:50vh;float:right;background-color:pink;position:sticky;top:0">
<h1>I'm Sticky!</h1>
</div>
</div>
</div>
<div style="width:100%;height:100vh;float:left;background-color:green">
<div class="container">
<h2>I'm full width</h2>
</div>
</div>
</div>
<div style="width:100vw;height:75vh;background-color:white">
<h2>No sticky here</h2>
</div>
</body>
It breaks the sticky. Does anyone have a better solution for this?
Really appreciate the help.
Your container div has no height. please add that rule to 100% in your css:
.container {
width: 90%;
max-width: 900px;
margin: 0 auto;
height: 100%;
}
Code here - http://jsfiddle.net/Cd2Ek/
html -
<div id="main-div" style="height: 250px; margin-left: 10px;">
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small>L1</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div class="">33%</div> <div class="d1" val="1" style="height: 33%"></div>
<div class=""><small>L3</small></div>
</div>
<div class="sub-div">
<div class="">0%</div> <div class="d1" val="0" style="height: 0%"></div>
<div class=""><small></small></div>
</div>
<div class="sub-div">
<div>67%</div> <div class="d1" val="2" style="height: 67%"></div>
<div class=""><small>L5</small></div>
</div>
</div>
If you see the output in jsfiddle, the bars are going below the main-div. I think you can guess the actual requirement, all bars should be position from bottom, and if the % is 50, then frm bottom, bar should be upto 50% height of the main div, along with label, % indication.
I think this is what you need - fiddle. I've rearranged your code quite a lot to simplify how it works, but basically it uses absolute positioning to get the bars to stick to the bottom. Please let me know if anything is unclear.
Each bar now uses the HTML:
<div class="bar-container">
<div class="bar" style="height:50%">
<span class="percentage">50%</span>
<span class="label">L1</span>
</div>
</div>
Change your css with below one
.sub-div {
margin-right: 6%;
display: inline-block;
height: 250px;
border: 1px solid green;
**vertical-align:top;**
}
Try above code...
CSS
You missed aligning the bars add this line in you .sub-div css class
vertical-align: top;
DEMO
Sometimes, HTML/CSS just drives me crazy ;( ... Hopefully someone can explain this behavior and maybe how to fix it.
See HTML/CSS below or this sample JSFiddle
So what I'm doing is having a header and body div, both with floating divs inside, and using clear: both; so the container div spans over the floating inner divs. In my real code I use a more complex clearfix class, but the problem is the same.
The body has a foregrond color BLUE. For the header-div, I set a foreground of WHITE. What drives me crazy is that the foreground-color gets also applied to the body-div even if it is not contained within the header-div. How can this happen?
In my real code I have even a problem that when I explicitely set the foreground for the body-div to BLUE, the color in the header-div also switches to blue. I cannot reproduce it with this JSFiddle but if I understand this problem I can reproduce in this sample code here, maybe I also understand the other problem :)
HTML:
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" />
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
CSS:
body {
color: blue;
}
div#head {
background-color: gray;
width: 400px;
color: white;
}
div#body {
background-color: lightgray;
}
.headleft {
float: left;
}
.headright {
float: right;
}
.feature
{
float: left;
margin-right: 10px;
}
Thanks for any help understanding this issue!
EDIT
Sorry by editing the pasted code I messed up the sample and removed a closing DIV. I corrected this now, the issue was not the missing closing DIV.
You forgot the closing tag on the head div.
http://jsfiddle.net/UHXr6/2/
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
The problem with your HTML was that you were incorrectly closing the div tags. You can't close div's like this: <div/>. You must use <div></div>. Please see this working Fiddle.
You are missing a closing <div> for head
<div>
<div id="head">
<div class="headleft">
<h1>that's my header, baby</h1>
</div>
<div class="headright">
<p>righty right</p>
</div>
<div style="clear: both" /></div>
</div>
<div id="body">
<div class="feature">
<h1>feature 1</h1>
</div>
<div class="feature">
<h1>feature2</h1>
</div>
<div style="clear: both;" />
</div>
</div>
![enter image description here][1]i have a problem. The image i put into the background is divided into four part. Header, body1,body2 and footer. My problenm is when body1 and body2 join together there is a line in the image. This also apply the same to body2 when i put a repeat, the line is there at the bottom. The problem is when one image in a div display then another image after that a line appear between them
This is my code:
<div id="header"
style="background-image:url('Graphic/banner.png'); height: 84px;">
</div>
<div id="Body1"
style="background-image:url('Graphic/topper.png'); height: 364px;" >
</div>
<div id="Body2"
style="background-image:url('Graphic/body.png'); height: 364px;">
</div>
<div id="Footer"
style="background-image:url('Graphic/footer.png'); height: 82px;">
</div>
Any idea how to make the line disapear?
Try This: here i have no spaces between the div's, make sure that there are no
white spaces on your images.
<html>
<head>
<title></title>
</head>
<body>
<div id="header"
style="background-image:url('#'); background-color: #EBC64D; height: 84px;">
</div>
<div id="container">
<div id="Body1"
style="background-image:url('#'); background-color: #07ED5F; height: 364px;" >
</div>
<div id="Body2"
style="background-image:url('#'); background-color: #2E16A8; height: 364px;">
</div>
</div>
<div id="Footer"
style="background-image:url('#'); background-color: #E01B6A; height: 82px;">
</div>
</body>
</html>