Försöker skapa en egen hemsida, men fastnar på några saker. (HTML / CSS)
Hej!
Jag provar att skapa en egen hemsida men fastnar på vissa saker då den mer avancerade metoden är svår att förstå, även efter en hel del googlande. Det är lätt att få till enskilda element, men väldigt svårt att placera olika saker.
Det jag försöker göra är få en sida med fyra ikoner (varje hörn) och en rubrik centrerad i både höjd och sidled i ett fält med en färgnyans av en regnbåge.
under detta försöker jag få en meny till vänster och ett område med information till höger. under detta vill jag i botten av fönstret som visar sidan ha en rad som oavsett fönstrets höjd alltid är i botten, kanske en bit upp.
Sidan jag började med var originalsidan från apache2 som visas när din server fungerar, efter lätt modifikation av sidan ser den ut så här:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Modified from the Debian original for Ubuntu
Last updated: 2016-11-16
See: https://launchpad.net/bugs/1288690
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sidan 2: min hemsida</title>
<style type="text/css" media="screen">
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
body, html {
padding: 30px 3px 3px 3px;
background-color: #fff3de;
<!-- background-color: #D8DBE2;-->
font-family: Verdana, sans-serif;
font-size: 11pt;
text-align: left;
}
div.main_page {
position: relative;
display: table;
width: 1000px;
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
border-width: 8px;
border-color: #212738;
border-style: solid;
border-radius: 100px 0px 100px 0px;
background-color: #FFFFFF;
text-align: center;
}
div.page_header {
height: 99px;
width: 100%;
background-color: #5F6F7F;
background-image: linear-gradient(to left,blue,indigo,violet,red,orange,yellow,green);
border-radius: 90px 0px 0px 0px;
}
div.page_header span {
margin: 15px 0px 0px 50px;
font-size: 180%;
font-weight: bold;
font-style: italic;
text-align: center;
}
div.page_header img {
margin: 3px 0px 0px 40px;
border: 0px 0px 0px;
}
div.table_of_contents {
clear: left;
min-width: 200px;
margin: 3px 3px 3px 3px;
background-color: #FFFFFF;
text-align: center;
}
div.table_of_contents_item {
clear: left;
width: 100%;
margin: 4px 0px 0px 0px;
background-color: #FFFFFF;
color: #000000;
text-align: left;
}
div.table_of_contents_item a {
margin: 6px 0px 0px 6px;
}
div.content_section {
margin: 3px 3px 3px 3px;
background-color: #FFFFFF;
border-radius: 0px 0px 100px 0px;
text-align: left;
}
div.content_section_text {
padding: 4px 8px 4px 8px;
color: #000000;
font-size: 100%;
}
div.content_section_text pre {
margin: 8px 0px 8px 0px;
padding: 8px 8px 8px 8px;
border-width: 1px;
border-style: dotted;
border-color: #000000;
background-color: #F5F6F7;
font-style: italic;
}
div.content_section_text p {
margin-bottom: 6px;
}
div.content_section_text ul, div.content_section_text li {
padding: 4px 8px 4px 16px;
}
div.section_header {
padding: 3px 6px 3px 6px;
background-color: #8E9CB2;
color: #FFFFFF;
font-weight: bold;
font-size: 112%;
text-align: center;
}
div.section_header_red {
background-color: #CD214F;
}
div.section_header_grey {
background-color: #9F9386;
}
.floating_element {
position: relative;
float: left;
}
div.table_of_contents_item a,
div.content_section_text a {
text-decoration: none;
font-weight: bold;
}
div.table_of_contents_item a:link,
div.table_of_contents_item a:visited,
div.table_of_contents_item a:active {
color: #000000;
}
div.table_of_contents_item a:hover {
background-color: #000000;
color: #FFFFFF;
}
div.content_section_text a:link,
div.content_section_text a:visited,
div.content_section_text a:active {
background-color: #DCDFE6;
color: #000000;
}
div.content_section_text a:hover {
background-color: #000000;
color: #DCDFE6;
}
div.validator {
}
</style>
</head>
<body>
<div class="main_page">
<div class="page_header floating_element">
<img src="/icons/ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"/>
<span class="floating_element">
Min Egen hemsida
</span>
</div>
<!-- <div class="table_of_contents floating_element">
<div class="section_header section_header_grey">
TABLE OF CONTENTS
</div>
<div class="table_of_contents_item floating_element">
<a href="#about">About</a>
</div>
<div class="table_of_contents_item floating_element">
<a href="#changes">Changes</a>
</div>
<div class="table_of_contents_item floating_element">
<a href="#scope">Scope</a>
</div>
<div class="table_of_contents_item floating_element">
<a href="#files">Config files</a>
</div>
</div>
-->
<div class="content_section floating_element">
<div class="section_header section_header_red">
<div id="about"></div>
It not works!
</div>
<div class="content_section_text">
<p>
This is the default welcome page used to test the correct
operation of the Apache2 server after installation on Ubuntu systems.
It is based on the equivalent page on Debian, from which the Ubuntu Apache
packaging is derived.
If you can read this page, it means that the Apache HTTP server installed at
this site is working properly. You should <b>replace this file</b> (located at
<tt>/var/www/html/index.html</tt>) before continuing to operate your HTTP server.
</p>
<p>
If you are a normal user of this web site and don't know what this page is
about, this probably means that the site is currently unavailable due to
maintenance.
If the problem persists, please contact the site's administrator.
</p>
</div>
<div class="section_header">
<div id="changes"></div>
Configuration Overview
</div>
<div class="content_section_text">
<p>
Ubuntu's Apache2 default configuration is different from the
upstream default configuration, and split into several files optimized for
interaction with Ubuntu tools. The configuration system is
<b>fully documented in
/usr/share/doc/apache2/README.Debian.gz</b>. Refer to this for the full
documentation. Documentation for the web server itself can be
found by accessing the <a href="/manual">manual</a> if the <tt>apache2-doc</tt>
package was installed on this server.
</p>
<p>
The configuration layout for an Apache2 web server installation on Ubuntu systems is as follows:
</p>
<pre>
/etc/apache2/
|-- apache2.conf
| `-- ports.conf
|-- mods-enabled
| |-- *.load
| `-- *.conf
|-- conf-enabled
| `-- *.conf
|-- sites-enabled
| `-- *.conf
</pre>
<ul>
<li>
<tt>apache2.conf</tt> is the main configuration
file. It puts the pieces together by including all remaining configuration
files when starting up the web server.
</li>
<li>
<tt>ports.conf</tt> is always included from the
main configuration file. It is used to determine the listening ports for
incoming connections, and this file can be customized anytime.
</li>
<li>
Configuration files in the <tt>mods-enabled/</tt>,
<tt>conf-enabled/</tt> and <tt>sites-enabled/</tt> directories contain
particular configuration snippets which manage modules, global configuration
fragments, or virtual host configurations, respectively.
</li>
<li>
They are activated by symlinking available
configuration files from their respective
*-available/ counterparts. These should be managed
by using our helpers
<tt>
a2enmod,
a2dismod,
</tt>
<tt>
a2ensite,
a2dissite,
</tt>
and
<tt>
a2enconf,
a2disconf
</tt>. See their respective man pages for detailed information.
</li>
<li>
The binary is called apache2. Due to the use of
environment variables, in the default configuration, apache2 needs to be
started/stopped with <tt>/etc/init.d/apache2</tt> or <tt>apache2ctl</tt>.
<b>Calling <tt>/usr/bin/apache2</tt> directly will not work</b> with the
default configuration.
</li>
</ul>
</div>
<div class="section_header">
<div id="docroot"></div>
Document Roots
</div>
<div class="content_section_text">
<p>
By default, Ubuntu does not allow access through the web browser to
<em>any</em> file apart of those located in <tt>/var/www</tt>,
<a href="http://httpd.apache.org/docs/2.4/mod/mod_userdir.html" rel="nofollow">public_html</a>
directories (when enabled) and <tt>/usr/share</tt> (for web
applications). If your site is using a web document root
located elsewhere (such as in <tt>/srv</tt>) you may need to whitelist your
document root directory in <tt>/etc/apache2/apache2.conf</tt>.
</p>
<p>
The default Ubuntu document root is <tt>/var/www/html</tt>. You
can make your own virtual hosts under /var/www. This is different
to previous releases which provides better security out of the box.
</p>
</div>
<div class="section_header">
<div id="bugs"></div>
Reporting Problems
</div>
<div class="content_section_text">
<p>
Please use the <tt>ubuntu-bug</tt> tool to report bugs in the
Apache2 package with Ubuntu. However, check <a
href="https://bugs.launchpad.net/ubuntu/+source/apache2"
rel="nofollow">existing bug reports</a> before reporting a new bug.
</p>
<p>
Please report bugs specific to modules (such as PHP and others)
to respective packages, not to the web server itself.
</p>
</div>
</div>
</div>
<div class="validator">
</div>
</body>
</html>
Den jag kommit till idag ser ut så här:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Modified from the Debian original for Ubuntu
Last updated: 2016-11-16
See: https://launchpad.net/bugs/1288690
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Min hemsida</title>
<style type="text/css" media="screen">
body, html {
padding: 3px 3px 3px 3px;
width:1280px;
background-color: #fff3de;
font-family: Verdana, sans-serif;
font-size: 11pt;
text-align: left;
}
div.main_page {
position: relative;
display: table;
width: 800px;
margin-top: -90px;
margin-bottom: 3px;
margin-left: auto;
margin-right: auto;
padding: 5px 5px 5px 5px;
border-width: 5px 6px 7px 8px;
border-color: #212738;
border-style: solid;
border-radius: 100px 100px 100px 100px;
background-color: #ffffff;
text-align: center;
}
div.page_header {
height: 96px;
width: 100%;
background-image: linear-gradient(to left,blue,indigo,violet,red,orange,yellow,green);
border-radius: 90px 90px 90px 90px;
font-size: 180%;
font-weight: bold;
font-style: italic;
text-align: center;
align-items: center;
color: #ffffff;
}
div.page_menu {
margin: 10px auto 0px 15px;
padding: 30px;
width: 100px;
height: 600px;
background-color: #ffffff;
border-style: double;
border-width: 6px;
border-color: #000000;
border-radius: 20px;
}
div.page_main_area {
margin: 15px 0px 0px 0px;
width: 1000px;
height: 800px;
background-color: #ff8ff888;
border-style: solid;
border-color: #000000;
border-width: 3px;
border-radius: 20px;
padding: 3px;
}
div.page_footer {
color: #fff3de;
margin: 400px 50px 0px 50px;
background-image: linear-gradient(to right,#fff3de,blue,indigo,violet,#000000,red,orange,yellow,green,#fff3de);
background-color: #000000;
text-align: center;
}
</style>
</head>
<body>
<a href="https://www.ubuntu.com"> <img src="ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"></a>
<div class="main_page floating_element">
<div class="page_header floating_element">Denna rubrik vill bli centerad i höjdled</div>
</div>
<div class="page_main_area floating_element"> area <div class="page_menu floating_element"> Menyn här vill hamna utanför med samma starthöjd. </div> more text </div> even more text
<div class="page_footer">Denna text vill alltid vara centrera i underkanten av fönstret oavsett höjd, eventuellt med något avstånd från botten.</div>
</body>
</html>
Ytterligare en sak jag testat är detta för att försöka lista ut hur objekt placeras etc.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>min hemsida</title>
<style type="text/css" media="screen">
body, html {
padding: 3px 3px 3px 3px;
background-color: #fff3de;
font-family: Verdana, sans-serif;
font-size: 11pt;
position: relative;
}
div.left_icon {
width:150px
height:150px
background-color: #000000;
color: #ff0000;
}
div.right_icon {
width:150px
height:150px
background-color: #000000;
color: #ff0000;
}
div.rubrik {
height: 100px;
width: 600px;
background-color: #ffffff;
display: flex;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div class="left_icon floating_element">
<img src="./ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"/>
</div>
<div class="rubrik foating_element"/>
Hello World
</div>
<div class="right_icon floating_element">
<img src="./ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"/>
</div>
<p><br><br><br><br>------Avgränsare----<br><br><br><br></p>
<div class="rubrik floating_element">
<div class="left_icon floating_element">
<img src="./ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"/>
</div>
Hello World!
<div class="right_icon floating_element">
<img src="./ubuntu-logo.png" alt="Ubuntu Logo" class="floating_element"/>
</div>
</div>
</body>
</html>
Resultatet jag vill nå är:
Sidan centreras och har en min / maxbredd.
Dom fyra ikonerna ska sitta i hörnen av fönstret men inte längre ut än maxbredden.
Texten i rubriken ska centreras i bredd och höjd.
Menyn skall hamna brevid ytan (den rosa arean i exempel 2)
Texten i botten (i exempel 2) ska alltid vara i botten av fönstret oavsett storleken.
Du ser inte ikonen som jag ser, men den är 119x99 i storlek.
Alla tips mottages tacksamt.
Min kunskap om html idag är ungefär att jag kan redigera enskilda saker (som färg eller form) men svårt att skapa från grunden samt att se hur text och objekt placeras mot varandra.
Server: Fractal design Define 7 XL | AMD Ryzen 7 5800X 8/16 | ASUS ROG CROSSHAIR VIII DARK HERO | 64GB Corsair @ 3000MHz | ASUS Radeon RX 460 2GB | Samsung 960 PRO 512 GB M.2 | 2x 2TB Samsung 850 PRO SSD | 6x Seagate Ironwolf Pro 10TB
WS: Phantex Entoo Elite | AMD Ryzen Threadripper 1950X 16/32 | ASUS Zenith extreme | 128GB G.Skill @ 2400MHz | ASUS Radeon HD7970 | 3x 2TB Samsung 960PRO M.2 | 6x Seagate Ironwolf Pro 10 TB
NEC PA301W 30" @ 2560x1600 | Linux Mint 21.1 Cinnamon
