the page i am making is at http://kamikazeproductions.net/tooth/kpbr0009.html in browser it looks ok, still needs some finessing... but when i reduce/resize the browser window, or if i navigate via mobile browser, the 2 vertical panels overlap :(
the idea was to set it up somewhat like https://www.limitedrungames.com/collections/neo-frontpage/products/streets-of-red-ps4, but that page has 3000 lines of code, and css is mostly greek to me. so i can't figure out how its done. i miss the days of html 3.0 lol
so my problems.... the idea is to have a horizontally centered banner panel at the top, 2 vertical panels, and a horizontally centered panel at the bottom.
1) as stated earlier, the vertical panels overlap when resized, instead of dynamically scaling. can't figure out how to set a hard break between the 2.
2) lower panel is WAAAYYY lower than i want it. i just want to lower panel 2 or 3 lines below the 2 vertical panels. any help?
3) i wouldn't mind having about 20px of space or so between the left image and the left side of the window... but it's not a deal breaker. i tried the ol' but it didnt seem to do anything to add spacing. i'm just trying to do a very quick and dirty order page for tomorrow. thanks!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tooth And Nail VHS Collection Blu-Ray</title>
<style>
body {
background-image: url("http://www.kamikazeproductions.net/tooth/bg.jpg");
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 25%;
height: 100%;
float: left;
border-collapse: collapse;
}
.rightpane {
width: 75%;
height: 100%;
position: relative;
float: right;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="container">
<div class="toppane">
<center><img src="http://www.kamikazeproductions.net/tooth/banner.png" height="229" width="630"></center><br><br>
</div>
<div class="leftpane">
<br><br><br><IMG SRC="http://www.kamikazeproductions.net/tooth/package.png" height="504" width="420" ALIGN="left" />
</div>
<div class="rightpane">
<p><b><font size="5">$23.00, postage included!</b></font>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="NR2DBYM5SJESS">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form><br>
<font size="4">blah blah blah<br>
<br clear="all">
</div>
<div class="bottompane">
<p><center><font size="5">blah blah blah</font><br><br><iframe width="560" height="315" src="https://www.youtube.com/embed/LAZKY45-PYM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><br><br><br><br><br> (c) 2020 Kamikaze Productions</center>
</p>
</div>
</div>
</body>
</html>
Because your image tag contains explicit ratio declarations, it will not be fluid with the containers.
You could either
1. setup a grid system (i use flex box in my example but you could also use true grid) and use some media queries to have the grids stack as a column as the view port shrinks
<style>
section[role="container"]{
display: flex;
flex-direction: row;
}
section[role="container"] *{
flex-grow: 1;
}
#media screen and (max-width: 500px){
section[role="container"]{
flex-direction: column;
}
}
</style>
<section role="container">
<div class="left-pane">content</div>
<div class="right-pane">content</div>
</section>
set your image size with percentages so the image fills it's container and remains fluid. you could add a max-width min-width if you want to prevent going below a certain resolution.
You can use bootstrap and css like col-lg, col-md, col-xs and so on... to provide your webpage for normal Manitor, Tablet size, mobile size, etc
You should read below link:
Meaning of numbers in "col-md-4"," col-xs-1", "col-lg-2" in Bootstrap
Related
So I want to make an iframe for a page that would display a selection of teas and herbal teas, and I want the options on the left in another iframe. Though, it's been so long I haventdone that and I oly didit with DreamWeaver before (I'm unexperienced so I followed a teacher's tutorial), so the software generated most of the code, really. Could anyone help me please? Right now, here's the iframe's code along with the banner:
<div class="container">
<img src="images/bannersite.png" alt="Banner" style="width:100%;">
<div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
<span style="color: #B3D1B3;">Ma</span><span style="color: #404040;">Thé</span>
</div>
</div>
<iframe src="accueil.html" style="width: 99.8%;">
</iframe>
Here's what it looks like:
As you can see, there's a scrolling bar below, and that's because for some reason theiframe decided it would continue on the left of the banner's right end, and I don't want that. I want the iframe and the banner to both fit the whole screen.
Here's what I would like to do but have no clue how:
Thanks for anyone who's willing to help me.
Please take a note, iframes are not good for SEO. It's much better to use java script or jquery driven pieces of code. Google and others are not trustibg to iframe, making yuor website rating a lot decrese.
Have a look at this codepen, I think it does what you are looking for.
https://codepen.io/larrytherabbit/pen/mdPGzdm
I edited your code a bit and please read the comments I made for you to better understand the new lines of code. There is a HTML code and a CSS code that applies to it, with classes (they begin with a ".")
HTML
<div class="container"> <!-- this is the container for the picture and the "MaThé" text -->
<img src="https://images.all-free-download.com/images/graphicthumb/sunflower_background_03_hd_picture_165827.jpg" alt="Banner">
<div class="bigtxt" style="left: 100px; top: 70px; position: absolute;">
<span style="color: #B3D1B3;">Ma</span>
<span style="color: #404040;">Thé</span>
</div>
</div> <!-- top header container closes here -->
<div class="flex-container"> <!-- this is the container for the sidebar and the iframe on the right -->
<div class="sidebar">
<button>Button</button>
<button>Button</button>
<button>Button</button>
</div>
<iframe src="https://www.youtube.com/embed/sJIjIMMIoSw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
CSS
.container img {
width:100%;max-height:250px;
}
.bigtxt {
font-size:50px;
}
.flex-container { /* the display attribute set to flex creates a "flexbox" display, please see here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox */
display:flex;width:100%;
}
.sidebar { /* this container is also set to flex, but here we change the flex-direction to column for the buttons to display in a column */
display:flex;flex-direction:column;height:300px;justify-content:center;width:30%;align-items:center; /* giving a width of 30% to the sidebar, it will fill 30% of the available space, which is 100% of the window width as defined above */ /* by setting align-items and justify-content to "center" the buttons place themselves in the middle of the sidebar */
}
.sidebar button {
margin:30px 0;max-width:100px; /* giving a bottom and a top margin ofo 30px to the buttons to space them apart */
}
iframe {
width:70%; /* here we simply set the width of the iframe to the remaining space which is 70% of the 100% width of the .flexbox container */
}
I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
I'm sure for most of you this is an easy one, however, I cannot seem to get my code to render correctly. I have three elements # 330px wide each, which I am trying to place "side by side" within a 1050px content area. Only one of the elements is rendering on the correct "block" with the other two appearing below. I am simply trying to place the three together spaced evenly across the content area with adequate space between them. Due to the fact that one element(rss feed) will only render on my site, please look at my test page to further explain what I am talking about: http://www.realtimehockey.net/testing.html
Thank you in advance for any help you may be able to offer.
My Code
CSS
.box {
display: inline-block;
float: left;
}
HTML
<div class="box">
<div class="feedgrabbr_widget" id="fgid_882d7000d9e4e2c5832cdb9c6"
float="right"></div>
<script> if (typeof(fg_widgets)==="undefined") fg_widgets = new
Array();fg_widgets.push("fgid_882d7000d9e4e2c5832cdb9c6");</script>
<script src="http://www.feedgrabbr.com/widget/fgwidget.js"></script>
<iframe
src="https://scorestream.com/widgets/iframe?widgetId=16476"
style="padding:0px;border:0px;width:330px;height:600px;max-height:600px;
display:inline-block"
title="Realtime sports scoreboard widget"
scrolling="no" frameBorder="0">
</iframe>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F
%2Fwww.facebook.com%2Frealtimehockey&width=330&height=600&
amp;colorscheme=dark&show_faces=false&header=false&
amp;stream=true&show_border=true" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; display:inline-block; width:330px;
height:600px;" allowTransparency="true"></iframe>
</div>
Add this to your CSS
.feedgrabbr_widget {
width: 330px;
display: inline-block;
}
This should correct the width and display for the first box which was actually rendering as a block element with a width of 663px from the chrome inspector.
Here's my code:
<div class="swd-layout-cell layout-item-2" style="width: 100%">
<p>
<img width="450" height="400" alt="" src="images/new.jpg" style="float: left;margin-right:20px" class="">
</p>
<h5>CloudMoV</h5>
<h6>Mobile users can import a live or on-demand video to watch from any video streaming site. </h6>
<h6>Invite your friends to watch the video concurrently. </h6>
<h6>Chat with your friends while enjoying the video.</h6>
<br>
</div>
The image appears on the left with the text on right of it. But on different sized monitors the text placement is varying.On one monitor the placement was correct and on another the text was appearing below the image.
How can I fix this?
This is being caused by width: 100%;.
HTML:
<div class="swd-layout-cell layout-item-2" style="width: 100%;">
So you have this as your container, it will strech 100% of the screen. In the demo mess around with the size of the window and you will see the text move around.
This is because when the window is lets say 500px, the image is taking up 400px. So your text is trying to get into 100px worth of space.
DEMO HERE
You can set a min-width that will stop the cotainer from getting to small so it will not squash the text.
HTML:
<div class="swd-layout-cell layout-item-2" style="width: 100%; min-width: 700px;">
So here you can see we set a min-width, this works fine as it will just stop the container from getting to small.
DEMO HERE
Another option is to use media tags. Now these are used to help design sites for all kind of resolutions.
CSS:
div {
width: 100px;
height: 100px;
}
#media screen and (min-width: 1080px) {
div {
background: blue;
}
}
#media screen and (min-width: 487px) and (max-width: 1079px) {
div {
background: green;
}
}
#media screen and (max-width: 487px) {
div {
background: red;
}
}
So this is a quick demo to show you what they do. It uses the different CSS based from the size of the screen. So using this with your code can allow you to customise the layout depending on the size of the screen.
DEMO HERE
<div class="swd-layout-cell layout-item-2" style="width: 100%;">
<p style="clear:both;">
<img alt="" src="images/new.jpg" style="float: left;margin-right:20px; width:50%; max-width:450px;" class="">
</p>
<h5>CloudMoV</h5>
<h6>Mobile users can import a live or on-demand video to watch from any video streaming site. </h6>
<h6>Invite your friends to watch the video concurrently. </h6>
<h6>Chat with your friends while enjoying the video.</h6>
<br>
</div>
I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).
Is there any way to make these fieldsets both the same height without setting a fixed height?
I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?
Also, would it then be possible to make the content of the fieldsets position centred vertically?
I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.
Thanks
Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html
You can put them in a parent container like a table or div, and have the two children be at height=100%.
The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.
For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center
I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).
<table>
<tr>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
</tr>
</table>
The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.
It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)