AIM

MSN

Website URL

ICQ

Yahoo

Jabber

Skype

Location

Interests

Languages

Hi!
Im trying to design a view with 2 boxes : on the left 1 menu and in the right the main box.
The menu should be vertical and relative, and with the main box I can do what I want.
The problem is that this 2 boxes should fill all the space horizontally and vertically. But all the time that I change the width or the "position" I have 2 results:
Part of the main box is hidden with the menu box
The two boxes dont fill the space
This is the css code of my boxes:
.main-box{
background-color: #FFFFFF;
font-size: 14px;
color: #34495E;
height:99%;
min-width: 150px;
line-height: 1.231;
width: 94%;
margin-left: 10%;
margin-right: 0.5%;
float: right;
border-radius: 5px 5px 0 0;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}
.menu{
position: fixed;
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 7em;
background-color: #333;
}
And this is the result. How can I solve it?
Thanks!

I am working with an HTML5 template that supports youtube video backgrounds in a DIV.
When I scale the browser window to see how the responsivnes behaves, I notice that the videos crop left/right, top/bottom, depending on the aspect ratio of the DIV.
For my purposes, I would need the videos only crop on the right and top only, so that the bottom left is always visible.
As I am not a pro I have been doing a lot of trial and error on this, but cannot get it working.
I actually need to have two classes available. One where the video scales from the bottom left and one where it scales from the top right corner. I don't quite understand if I need to create two new classes for "videobg" AND "youtube-background" respectively? That would be "videobg-bl, videobg-tr, youtube-background-bl, youtube-background-tr". Or is just one of those classes responsible for the scaling?
This is the HTML snippet I use in the template:
<div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0">
<div class="youtube-background" data-video-url="https://www.youtube.com/watch?v=ekthcIHDt3I"></div>
<div class="background-image-holder"> <img alt="image" src="img/dancer-1A.png"> </div>
</div>
and these are the CSS classes for videobg and youtube-background:
.videobg {
background: #252525;
position: relative;
overflow: hidden;
}
.videobg .container,
.videobg .background-image-holder {
opacity: 0;
transition: 0.3s linear;
-webkit-transition: 0.3s linear;
-moz-transition: 0.3s linear;
}
.videobg .background-image-holder {
opacity: 0 !important;
}
.videobg.video-active .container {
opacity: 1;
}
.videobg.video-active .loading-indicator {
opacity: 0;
visibility: hidden;
}
.videobg video {
object-fit: cover;
height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: 0 !important;
left: 0;
}
@media all and (max-width: 1024px) {
.videobg .background-image-holder,
.videobg .container {
opacity: 1 !important;
}
.videobg .loading-indicator {
display: none;
}
.videobg video {
display: none;
}
}
.youtube-background {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 0 !important;
}
.youtube-background .mb_YTPBar {
opacity: 0;
height: 0;
visibility: hidden;
}
@media all and (max-width: 1024px) {
.youtube-background {
display: none;
}
}
Also, the template is using ytplayer.min.js for the youtube backgrounds.
Unfortunately, the player shows branding watermarked elements during the first 2-3 seconds of the clip, that I have no idea how to get rid of. I also have all my clips on vimeo, so it would be so much more convenient to be able to use vimeo backgrounds instead. Is there a simple way to do this, without breaking the above CSS?

Hello,
I'm kind of dealing with an issue and I have no idea how to solve this...hoping someone would. I'm making a pdf report with HTML, doing this because it will allow the report generation to be automated.
In any case, I'm only able to use HTML - no CSS. So please don't provide solutions in CSS, cause I have read them all and unfortunately, the system we use to automate does not recognise CSS.
So here is the problem. I have a table set-up in on the pdf page so it looks like this:
Column 1 (25%) Column 2 (75%)
[picture] cell with picture and text
text cell with picture and text
cell with picture and text
footer text footer cell with picture and text
I have set this up with a range of tables within tables (if there are suggestions on how to do this better with ONLY HTML would love to hear them?!)
The problem
I'd like to make sure the footer parts in each of the columns are always at the bottom of the column whilst the rest should be aligned at the top.
As of now, I've used multiple <br> to create breaks there and I was wondering if there is a better way to do this?
Thanks for reading! Hope you know of a solution!

I started to follow the https://www.w3schools.com/w3css/w3css_navigation.asp navigation page. However the menu I want required a bit more - with a few SELECT fields and a form.
My page is here :- http://newtib.kwister.com/
The menu at the top (marked in HTML code as <!-- NEW MENU --> works fine.
On big/medium screen - it is the same, However on a small screen (mobile) I see a small button which says "HIDE MENU". This is OK. & when I press the button, the menu hides itself.
PROBLEM: within 1-2 seconds of pressing the button, the menu reappears. I am wondering if someone can assist with finding a problem with the script ?
(on a mobile).
if Div is hidden, show it it
if Div is visible, Hide it
I have TWO divs (one underneath). Which shows another button. If one div is hidden, the other div is visible. its supposed to swap when the buttons are pressed..

Hi all, i am learning html and css from 3wschool, and i am a little lost.
i have read all html and css tutorial section and really dont know why i dont understand,
thanks for your help & time.
Right now i am trying to understand how place some <div> where i want in the page.
as you can see i have made 2 div (objects) that will contain things
i want be able to place them in everywhere in the "main zone". (or any zone)
?) I cant get my objects centered in the div
?) there is a way to place a div to 100px on the right ( without use margin or padding )
?)Am i in error, if i think to use div as a box sistem to place things where i want?
?) can someone make a "card" with all the useful and usable div things ?
the site talk only about the align attribute and its not supported by html5.. https://www.w3schools.com/tags/tag_div.asp
Searching for a solution i found out this site https://css-tricks.com/centering-css-complete-guide/
They use a line of code i didnt find on 3wschool, did i miss it? There they use .child {· position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}
i am also pretty confused by https://www.w3schools.com/cssref/playit.asp?filename=playcss_position
i attach a screenshot of his behaviour , it is right? if it is i am fully lost.

I want to put a small shop image into my div box which is top of the side bar. The problem is after I set margin, height etc. it is not responsive like the rest of my site and its dissapear after i change windows size. I've created two divs one inside another to fit my 1300px container div width.

Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for background-image and set the background-position in center. But, if I did it, Google will not index my images and it results in a big trouble for me.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="code/css/test.css">
</head>
<body>
<div>
<img src="image.jpg">
</div>
</body>
</html>
* {
margin: 0;
padding: 0
}
div {
background-color: red;
text-align: center;
}
img {
height: 100vh;
}
(The picture I'm working is 1680px x 945px)
At the image below I'm showing the correct horizontal align for this picture. Centered: https://uploaddeimagens.com.br/imagens/certo-jpg-feef13d2-44d2-407b-8b1b-f334107cb371
And... At this another image, I'm showing the error it ocurrs. The picture is left aligned and crop only the right side of the picture: https://uploaddeimagens.com.br/imagens/errado-jpg-746c72b8-36d2-4942-9895-0cfb43abd77d
What I need is... When the browser width is less than the img width, the picture still be centered in the browser, resulting that the image would be cropped both sides, ledt and right sides, and it will result in this specifically image, the church in background will be centered in the browser all the time. It was a simple example that what I need.
Is there any way for center this image like I need using only CSS?
I will be very grateful to anyone who can help me with this problem.
Thanks. Greetings from Brazil.

Hello ,
I have a problem , I want to wirte HTML code that only refreshes the <div> test , so just the code between de <div>...</div>
I was thinking to use some Javascript but I'm not sure this works in PHP , because my in HTML div there's PHP code.
My HTML code:
<HTML>
<HEAD>
</HEAD>
<BODY>
<div id = "other div">
</div>
<div id="test">
<?php refresh this code ?>
</div>
</BODY>
</HTML>

When making two side-by-side divs with different amounts of text in them, and coloring the background, the two divs are of different heights. Now, I can use the style/height to set a height in pixels for the two divs, but I seem to recall seeing something in the w3schools site that showed how to make the two divs automatically the same height without setting the height in pixels. Or am I mistaken?

Dear potential helpers,
I try to darken the foreground of my website using a background-color.
I created a div which wraps all my other HTML stuff, applied position: relative; to it and a very great z-Index of 999.
All my other elements have a z-index of 100 or lower. Why isn't my div not shown in front of the other stuff?
In case the background-color of my div foreground is only shown behind all the other elements inside it.
Here is my HTML:
<html>
<body>
<div id="foreground">
<!-- All my other HTML stuff having relative positioning and z-index 100 or less -->
</div>
</body>
</html>
Here is my CSS:
#foreground
{
position: relative;
z-index: 999;
display: block;
background-color: red;
}
Maybe u guys have any idea what the matter with this one. Thank you!

Hello
This is my site made with Wordpress using the theme called Divi.
http://ciudadcapital.agencialosnavegantes.cl/contacto/
Something really annoying is happening right and that is whatever section i put after the Instagram section, it gets forced to be positioned to the left. Any idea why this is happening? In this moment is the footer what appears aligned to the left, but if i put the footer in another place, it gets centered; the same if i put another section just after the Instagram section, it gets forced to the left.
What is causing it?

Interesting problem with the W3 schools checker 'Nu Html Checker'.
I am using a CSS file that I have written which includes a reference 'area1'.
I am calling it on many occasions e.g. <a href="mountains.php" id = "area1">Mountains</a> as I only want 'Mountains' to be affected by this particular CSS.
When I run Nu Htnl Checker, I get this:
Error: Duplicate ID area1.
From line 330, column 148; to line 330, column 185
></td><td><a href="mountains.php" id = "area1">Mounta
Surely I can use a piece of CSS more than once in an html document??

I recently took over somebody else's website and am trying to get an element to size up and down when the window changes size. I tried to add Position: Absolute; to no avail. I currently have it as Position: Fixed so it moves with the scroll.
Specific page is here and I'm referring to the three sidebar nav menus on the left.
#mySidenav a {
position: fixed; /* Position them relative to the browser window */
left: -25px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
padding: 15px; /* 15px padding */
width: 200px; /* Set a specific width */
text-decoration: none;
text-align: center;
font-size: 18px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}
#mySidenav a:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
text-decoration: underline;
}
#board {
top: 320px;
background-color: #5d2a2c;
}
#blog {
top: 380px;
background-color: #5d2a2c;
}
#kidswehelp {
top: 440px;
background-color: #5d2a2c;
Any help would be beyond amazing.

To the developers of W3.CSS thank you so much for creating a platform that in my opinion, uses less code to create a web responsive site with bells and whistles built in.
I had hand coded a webpage template, but now that Google won't rank your site properly unless it is responsive, thus my template goes by the way of the 8-track. W3 provided the coding to make sites responsive, but that was still more time that I didn't have.
Then, came W3.css now I can replicate my template using W3css, THANK YOU!
my original template used layers via z index, placement via <div>, and in page css.
My query is what is the proper syntax and use for z index within W3.css and within the container, and can multiple layers be used with a container?
also can background images be used within W3.css? I see you have colors, what about images?
also can the rollover feature within W3.css be used with custom images, and for non menu?
based on replies, I will update your free template accordingly.
Thanks once again

Let's pretend, there's a <div> on a page. There's a usual HTML form inside it that sends information to another php-file. By default, the visibility of the div is hidden, and the click on the button makes it visible. The question is how to close the form (i.e. hide the div) using a button or <a> element on the div, WITHOUT the sending data to php-file. In other words, how to close this <div> as if it is usual popup-window, without changes?

I have a question about margin-top.
I made a css script with span columns. The higher columns are supposed to push the lower ones down. I place them in a div, in here multiple columns.
The second column though, takes the top of the outer div as reference (not sure if that tis called parent). I find this strange. I tried to make a second div inside but it didnt work.
Can you only use div as a reference point or also a span element or p ?

Hello! I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution. I do work with div tags.
Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300px Result: It jumped UNDER the content that should be on the left of it. URL: http://www.nimblefeather.com/index.php Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's. I tried: min-width. Result: No visible change. URL: http://www.nimblefeather.com/comics.php
Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable? URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?) Thanks in advance =D